aike/emis-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
aihe 2023-12-01 18:55:43 +08:00
parent c42f9505e6
commit c7b5a785b7
1 changed files with 108 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
pages/tabBar/home/home.vue
View File

@ -4,52 +4,53 @@
</view>
<view style="position: relative;background-color: #fff;">
<image class="hdbg" :src="getCdnUrl(`home/hdbg.png`)"/>
<u-row align="center" justify="space-between">
<u-col>
<u-gap height="80" bgColor="#bbb"></u-gap>
<up-avatar ></up-avatar>
</u-col>
<u-col>
<up-image :src="getCdnUrl(`home/saoma.png`)"></up-image>
</u-col>
</u-row>
<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>
<u-row justify="between" class="header">
<u-col span="4">
<view class="title1">香港服装专线 </view>
<button type="primary" class="btn-ljyy">了解详情</button>
</u-col>
<image class="fjhw" :src="getCdnUrl(`home/huowu.png`)"/>
</u-row>
<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>
<u-row class="btnlist1">
<u-col v-for="mbItem in mainBtnlist" :span="12/mainBtnlist.length" class="mbitem">
<u-row>
<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 class="mb-bord"></view>
</u-row>
</u-col>
</u-row>
<u-row class="nours">
<u-col span="11" class="flw-dec">
<u-row>
<image style="height: 30rpx;" mode="heightFix" :src="getCdnUrl(`home/laba.png`)"/>
<image style="height: 24rpx;margin-left: 10px;" mode="heightFix" :src="getCdnUrl(`home/ggchxun.png`)"/>
<text style="margin-left: 30px;">最近一周内暂未有新通告！！！</text>
</u-row>
</u-col>
<u-col span="1" justify="end">
<u-icon style="justify-content: end;" name="arrow-right" size="20"></u-icon>
</u-col>
</u-row>
<u-row class="btnlist2" style="flex-wrap: wrap;">
<u-col span="3" v-for="tlItem in toolBtnlist" class="tlitem" align="center">
<image :src="tlItem.icon" style="height: 66rpx;" mode="heightFix"/>
<view style="font-size: 24rpx;margin-top: 20rpx;">{{tlItem.title}}</view>
</u-col>
</u-row>
</view>
</view>
</view>
</template>
@ -64,21 +65,22 @@
data() {
return {
mainBtnlist: [
{ title: '下单寄件', subTitle: "上门揽件/寄仓库", icon: getCdnUrl(`sdg/btn-send.png`), url: '' },
{ title: '专属小哥', subTitle: "下单给专属业务员", icon: getCdnUrl(`sdg/btn-bindbr.png`), url: '' }
{ title: '计提预估', subTitle: "2888.80", icon: getCdnUrl(`home/jityugu.png`), url: '' },
{ title: '待回款', subTitle: "12888.80", icon: getCdnUrl(`home/daihuikuan.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: '' },
{ title: '运单录入', subTitle: "", icon: getCdnUrl(`home/ydluru.png`), url: '' },
{ title: '问题件', subTitle: "", icon: getCdnUrl(`home/wentijian.png`), url: '' },
{ title: '货物图片', subTitle: "", icon: getCdnUrl(`home/hwtup.png`), url: '' },
{ title: '发件扫描', subTitle: "", icon: getCdnUrl(`home/fajiansm.png`), url: '' },
{ title: '到件扫描', subTitle: "", icon: getCdnUrl(`home/daojsm.png`), url: '' },
{ title: '派件扫描', subTitle: "", icon: getCdnUrl(`home/paijsm.png`), url: '' },
{ title: '签收扫描', subTitle: "", icon: getCdnUrl(`home/qianshsm.png`), url: '' },
{ title: '到货扫描', subTitle: "", icon: getCdnUrl(`home/daohsm.png`), url: '' },
{ title: '快件查询', subTitle: "", icon: getCdnUrl(`home/kdchxun.png`), url: '' },
{ title: '面单补打', subTitle: "", icon: getCdnUrl(`home/mdbuda.png`), url: '' },
{ title: '收货入库', subTitle: "", icon: getCdnUrl(`home/shhruku.png`), url: '' },
{ title: '运单修改', subTitle: "", icon: getCdnUrl(`home/ydxiugai.png`), url: '' }
]
}
},
@ -111,24 +113,15 @@
.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;
margin-top: 26rpx;
box-sizing: content-box;
background: #FFF;
border-radius: 21rpx;
@ -138,147 +131,81 @@
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;
}
}
}
.fjhw{
margin-top: 20rpx;
height: 162rpx;
width: 328rpx;
}
}
.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;
padding: 40rpx 28rpx 80rpx 28rpx;
.btnlist1 {
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
border-radius: 20rpx;
padding: 30rpx;
.mbitem{
.mb-bord{
position: relative;
flex: 1;
height: 100%;
&::after {
content: ' ';
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
border-right: 2rpx solid rgba(255,255,255,0.5);
}
}
.tb1 {
width: auto;
height: 50rpx;
width: 92rpx;
height: 76rpx;
}
.neirong{
margin-left: 22rpx;
.nr1{
font-weight: 600;
color: #0E0708;
font-size: 28rpx
font-size: 24rpx;
font-weight: 400;
color: #fff;
}
.nr2{
margin-top: 15rpx;
font-size: 22rpx;
font-weight: 400;
font-size: 28rpx;
font-weight: 600;
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;
.mb-bord{
border: 0;
}
}
}
}
}
.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;
.nours {
margin-top: 40rpx;
background: #F6F6F6;
border-radius: 20rpx;
padding: 18rpx 22rpx;
.flw-dec{
font-size: 22rpx;
color: #333;
}
}
.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;
.btnlist2{
margin-top: 40rpx;
.tlitem {
padding: 20rpx;
border: 2rpx solid #F6F6F6;
border-radius: 16rpx;
}
}
}
</style>