280 lines
6.6 KiB
Vue
280 lines
6.6 KiB
Vue
<template>
|
||
<view class="status_bar">
|
||
<!-- 这里是状态栏 -->
|
||
</view>
|
||
|
||
<view style="position: relative;background-color: #fff;">
|
||
|
||
|
||
<image class="hdbg" :src="getCdnUrl(`sdg/hdbg.png`)"/>
|
||
<view class="pg-container">
|
||
<view class="header">
|
||
<view class="title1">探路物流 速运全球 </view>
|
||
<view class="desc">省钱，省时，省力</view>
|
||
<button type="primary" class="btn-ljyy">立即预约</button>
|
||
<view class="btnlist1">
|
||
<view v-for="mbItem in mainBtnlist" class="mbitem">
|
||
<image mode="aspectFit" class="tb1" :src="mbItem.icon"/>
|
||
<view class="neirong">
|
||
<view class="nr1">{{mbItem.title}}</view>
|
||
<view class="nr2">{{mbItem.subTitle}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pbody">
|
||
<view class="btnlist2">
|
||
<view v-for="tlItem in toolBtnlist" class="tlitem">
|
||
<view class="neirong">
|
||
<view class="nr1">{{tlItem.title}}</view>
|
||
<view class="nr2">{{tlItem.subTitle}}</view>
|
||
</view>
|
||
<image class="tb1" :src="tlItem.icon" mode="heightFix"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pfoot">
|
||
<view class="flw-dec">关注探路者官方公众号，实时接收物流信息</view>
|
||
<view class="btn-login">去登录</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import getCdnUrl from "@/common/getCdnUrl"
|
||
export default {
|
||
props: {
|
||
// hasLeftWin: {
|
||
// type: Boolean
|
||
// }
|
||
},
|
||
data() {
|
||
return {
|
||
mainBtnlist: [
|
||
{ title: '下单寄件', subTitle: "上门揽件/寄仓库", icon: getCdnUrl(`sdg/btn-send.png`), url: '' },
|
||
{ title: '专属小哥', subTitle: "下单给专属业务员", icon: getCdnUrl(`sdg/btn-bindbr.png`), url: '' }
|
||
],
|
||
toolBtnlist: [
|
||
{ title: '进仓单', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-jcd.png`), url: '' },
|
||
{ title: '时效预估', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-sxyg.png`), url: '' },
|
||
{ title: '运费试算', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-shisuan.png`), url: '' },
|
||
{ title: '我的订单', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-dingdan.png`), url: '' },
|
||
{ title: '运单查询', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-yundan.png`), url: '' },
|
||
{ title: '地址簿', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-dizhi.png`), url: '' },
|
||
{ title: '网点查询', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-wangdain.png`), url: '' },
|
||
{ title: 'HSCODE', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-HS.png`), url: '' },
|
||
{ title: 'RECP', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-RE.png`), url: '' },
|
||
{ title: '扫码寄件', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-saoma.png`), url: '' },
|
||
{ title: '寄件须知', subTitle: "这里是短语简介", icon: getCdnUrl(`sdg/t-xuzhi.png`), url: '' },
|
||
]
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '探路物流 速运全球',
|
||
// path: 'TODO'
|
||
}
|
||
},
|
||
methods: {
|
||
getCdnUrl,
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import '../../../common/uni-nvue.css';
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.status_bar {
|
||
box-sizing: content-box;
|
||
height: var(--status-bar-height);
|
||
padding-top: 60rpx;
|
||
width: 100%;
|
||
background-color: $uni-color-primary;
|
||
}
|
||
.hdbg{
|
||
position: absolute;
|
||
z-index: 1;
|
||
width: 100%;
|
||
}
|
||
.pg-container{
|
||
position: relative;
|
||
z-index: 2;
|
||
overflow-x: hidden;
|
||
}
|
||
.header{
|
||
padding: 0 28rpx;
|
||
.title1{
|
||
width: 362rpx;
|
||
height: 41rpx;
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #FFF;
|
||
text-shadow: 3rpx 4rpx 0rpx rgba(92,15,12,0.2);
|
||
}
|
||
.desc{
|
||
margin-top: 22rpx;
|
||
width: 207rpx;
|
||
height: 28rpx;
|
||
font-size: 24rpx;
|
||
color: #FFF;
|
||
}
|
||
.btn-ljyy{
|
||
margin-left: 0;
|
||
width: 144rpx;
|
||
margin-top: 40rpx;
|
||
box-sizing: content-box;
|
||
background: #FFF;
|
||
border-radius: 21rpx;
|
||
font-size: 24rpx;
|
||
color: #B12D29;
|
||
padding: 8rpx 0;
|
||
text-align: center;
|
||
line-height: normal;
|
||
}
|
||
|
||
.btnlist1 {
|
||
margin-top: 38rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
|
||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||
padding: 36rpx 24rpx 22rpx 24rpx;
|
||
.mbitem{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
position: relative;
|
||
.tb1 {
|
||
width: 92rpx;
|
||
height: 73rpx;
|
||
}
|
||
.neirong{
|
||
margin-left: 22rpx;
|
||
.nr1{
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
.nr2{
|
||
margin-top: 15rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
color: #999;
|
||
}
|
||
}
|
||
&::after {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
content: ' ';
|
||
right: -40rpx;
|
||
display: block;
|
||
background: #FFF;
|
||
opacity: 0.5;
|
||
width: 1rpx;
|
||
}
|
||
&:last-child {
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pbody{
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
padding: 40rpx 28rpx 100rpx 28rpx;
|
||
.btnlist2{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.tlitem {
|
||
box-sizing: content-box;
|
||
margin: 0 0 20rpx 0;
|
||
width: 40%;
|
||
background: #F6F6F6;
|
||
padding: 30rpx 28rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
&:nth-child(2n) {
|
||
/* 去除第2n个的margin-right */
|
||
margin-right: 0;
|
||
}
|
||
.tb1 {
|
||
width: auto;
|
||
height: 50rpx;
|
||
}
|
||
.neirong{
|
||
margin-left: 22rpx;
|
||
.nr1{
|
||
font-weight: 600;
|
||
color: #0E0708;
|
||
font-size: 28rpx
|
||
}
|
||
.nr2{
|
||
margin-top: 15rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
color: #999;
|
||
}
|
||
}
|
||
&::after {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
content: ' ';
|
||
right: -40rpx;
|
||
display: block;
|
||
background: #FFF;
|
||
opacity: 0.5;
|
||
width: 1rpx;
|
||
}
|
||
&:last-child {
|
||
&::after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pfoot {
|
||
position: fixed;
|
||
bottom: 20rpx;
|
||
left: 28rpx;
|
||
right: 28rpx;
|
||
padding: 0 8rpx 0 26rpx;
|
||
height: 72rpx;
|
||
background: #0E0708;
|
||
border-radius: 36rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
.flw-dec{
|
||
font-size: 24rpx;
|
||
color: #FFF;
|
||
}
|
||
.btn-login{
|
||
text-align: center;
|
||
width: 130rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
background: #B12D29;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
</style>
|