样式优化
This commit is contained in:
aihe
parent
e7d3ca2f9a
commit
88b7d8c2ad
@ -6,79 +6,80 @@
|
|||||||
<image class="hdbg" :src="getCdnUrl(`home/hdbg.png`)"/>
|
<image class="hdbg" :src="getCdnUrl(`home/hdbg.png`)"/>
|
||||||
|
|
||||||
<view class="pg-container">
|
<view class="pg-container">
|
||||||
<u-row align="center" class="com-jianju" style="margin-top: 10rpx;">
|
|
||||||
<u-col span="11">
|
<view class="com-jianju" style="margin-top: 10rpx;">
|
||||||
<u-row>
|
<u-row align="center" >
|
||||||
<u-avatar size="66"></u-avatar>
|
<u-col span="11">
|
||||||
<u-text style="margin-left: 16rpx;" text="快递专员01" color="#fff" size="24"></u-text>
|
<u-row>
|
||||||
</u-row>
|
<u-avatar size="66"></u-avatar>
|
||||||
</u-col>
|
<u-text margin="0 0 0 16rpx" text="快递专员01" color="#fff" size="24"></u-text>
|
||||||
<u-col span="1" align="end">
|
</u-row>
|
||||||
<image style="height: 36rpx;" mode="heightFix" :src="getCdnUrl(`home/saoma.png`)"/>
|
</u-col>
|
||||||
</u-col>
|
<u-col span="1" align="end">
|
||||||
</u-row>
|
<image style="height: 36rpx;width: 44rpx;" :src="getCdnUrl(`home/saoma.png`)"/>
|
||||||
<u-row justify="between" class="header com-jianju">
|
</u-col>
|
||||||
<u-col span="5">
|
</u-row>
|
||||||
<view class="title1">香港服装专线 </view>
|
</view>
|
||||||
<button type="primary" class="btn-ljyy">了解详情</button>
|
|
||||||
</u-col>
|
<view class="header com-jianju">
|
||||||
<image class="fjhw" :src="getCdnUrl(`home/huowu.png`)"/>
|
<u-row justify="between">
|
||||||
</u-row>
|
<u-col span="5">
|
||||||
|
<u-text size="40" :bold="true" text="香港服装专线" color="#fff"></u-text>
|
||||||
|
<button type="primary" class="btn-ljyy">了解详情</button>
|
||||||
|
</u-col>
|
||||||
|
<image class="fjhw" :src="getCdnUrl(`home/huowu.png`)"/>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<view class="pbody">
|
<view class="pbody">
|
||||||
|
|
||||||
<u-row class="tj-text-list">
|
<u-row justify="center" align="center">
|
||||||
<u-col span="3" align="center" class="tjtl-item">
|
<u-col v-for="(tjItem, ijIndex) in tjList" span="3" align="center"
|
||||||
<text class="tj-tl1">56</text>
|
:custom-style="'border-right: 2rpx solid #E8E8E8;' + (ijIndex+1 == tjList.length ?'border-right:0;': '')"
|
||||||
<text class="tj-tl2">未接单</text>
|
>
|
||||||
</u-col>
|
<u-text align="center" color="#B12D29" :bold="true" size="36rpx" :text="tjItem.value"></u-text>
|
||||||
<u-col span="3" align="center" class="tjtl-item">
|
<u-text align="center" color="#666" size="24" :text="tjItem.title"></u-text>
|
||||||
<text class="tj-tl1">56</text>
|
|
||||||
<text class="tj-tl2">已接收</text>
|
|
||||||
</u-col>
|
|
||||||
<u-col span="3" align="center" class="tjtl-item">
|
|
||||||
<text class="tj-tl1">56</text>
|
|
||||||
<text class="tj-tl2">派送中</text>
|
|
||||||
</u-col>
|
|
||||||
<u-col span="3" align="center" class="tjtl-item">
|
|
||||||
<text class="tj-tl1">56</text>
|
|
||||||
<text class="tj-tl2">已签收</text>
|
|
||||||
</u-col>
|
</u-col>
|
||||||
</u-row>
|
</u-row>
|
||||||
|
|
||||||
<u-row class="btnlist1 com-jianju">
|
<view class="com-jianju btnlist1">
|
||||||
<u-col v-for="mbItem in mainBtnlist" :span="12/mainBtnlist.length" class="mbitem" align="center">
|
<u-row>
|
||||||
<u-row >
|
<u-col v-for="(mbItem, mIndex) in mainBtnlist" :span="6"
|
||||||
<image mode="aspectFit" class="tb1" :src="mbItem.icon"/>
|
:custom-style="'border-right: 2rpx solid rgba(255,255,255,0.5);' + (mIndex+1 == mainBtnlist.length ?'border-right:0;': '')"
|
||||||
<view class="neirong">
|
>
|
||||||
<view class="nr1">{{mbItem.title}}</view>
|
<u-row align="center" justify="center">
|
||||||
<view class="nr2">{{mbItem.subTitle}}</view>
|
<image mode="aspectFit" style="width: 92rpx;height: 76rpx;" :src="mbItem.icon"/>
|
||||||
</view>
|
<view class="neirong">
|
||||||
</u-row>
|
<u-text size="24rpx" color="#fff" :text="mbItem.title"></u-text>
|
||||||
</u-col>
|
<u-text size="28rpx" color="#fff" :bold="true" margin= "15rpx 0 0 0" :text="mbItem.subTitle"></u-text>
|
||||||
</u-row>
|
</view>
|
||||||
|
</u-row>
|
||||||
|
</u-col>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
|
||||||
<u-row class="nours com-jianju">
|
<view class="nours com-jianju">
|
||||||
<u-col span="11" class="flw-dec">
|
<u-row justify="between">
|
||||||
<u-row>
|
<u-col span="11">
|
||||||
<image style="height: 30rpx;" mode="heightFix" :src="getCdnUrl(`home/laba.png`)"/>
|
<u-row>
|
||||||
<image style="height: 24rpx;margin-left: 10rpx;" mode="heightFix" :src="getCdnUrl(`home/ggchxun.png`)"/>
|
<image style="height: 30rpx;width:30rpx" :src="getCdnUrl(`home/laba.png`)"/>
|
||||||
<text style="margin-left: 30rpx;">最近一周内暂未有新通告！！！</text>
|
<image style="height: 24rpx; width: 110rpx;margin-left: 10rpx;" :src="getCdnUrl(`home/ggchxun.png`)"/>
|
||||||
</u-row>
|
<u-text size="22" color="#333" margin="0 0 0 30rpx">最近一周内暂未有新通告！！！</u-text>
|
||||||
|
</u-row>
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="1" align="end">
|
|
||||||
<u-icon name="arrow-right" size="20"></u-icon>
|
<u-icon name="arrow-right" size="20"></u-icon>
|
||||||
</u-col>
|
</u-row>
|
||||||
</u-row>
|
</view>
|
||||||
|
|
||||||
<view class="com-jianju">
|
<view class="com-jianju">
|
||||||
<u-text :bold="true" size="32" color="#333" margin="40rpx 0 0 0" text="网点扫描"></u-text>
|
<u-text :bold="true" size="32" color="#333" margin="40rpx 0 0 0" text="网点扫描"></u-text>
|
||||||
</view>
|
</view>
|
||||||
<view class="btnlist2 com-jianju">
|
<view class="btnlist2 com-jianju">
|
||||||
<u-row justify="start" gutter="18" style="flex-wrap: wrap;">
|
<u-row justify="start" gutter="18" custom-style="flex-wrap: wrap;">
|
||||||
<u-col span="3" v-for="tlItem in toolBtnlist" align="center">
|
<u-col span="3" v-for="tlItem in toolBtnlist" align="center">
|
||||||
<u-col align="center" class="tlitem">
|
<u-col align="center" justify="center" custom-style="padding: 20rpx;border: 2rpx solid #F6F6F6;border-radius: 16rpx;margin-bottom: 18rpx;display: flex;">
|
||||||
<image :src="tlItem.icon" style="height: 66rpx;" mode="heightFix"/>
|
<image :src="tlItem.icon" style="height: 66rpx;width: 66rpx" mode="aspectFit"/>
|
||||||
<view style="font-size: 24rpx;margin-top: 20rpx;">{{tlItem.title}}</view>
|
<view style="font-size: 24rpx;margin-top: 20rpx;">{{tlItem.title}}</view>
|
||||||
</u-col>
|
</u-col>
|
||||||
</u-col>
|
</u-col>
|
||||||
@ -99,6 +100,12 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
tjList: [
|
||||||
|
{ title: '未接单', value: "56", key: "" },
|
||||||
|
{ title: '已接收', value: "56", key: "" },
|
||||||
|
{ title: '派送中', value: "56", key: "" },
|
||||||
|
{ title: '已签收', value: "56", key: "" }
|
||||||
|
],
|
||||||
mainBtnlist: [
|
mainBtnlist: [
|
||||||
{ title: '计提预估', subTitle: "2888.80", icon: getCdnUrl(`home/jityugu.png`), url: '' },
|
{ title: '计提预估', subTitle: "2888.80", icon: getCdnUrl(`home/jityugu.png`), url: '' },
|
||||||
{ title: '待回款', subTitle: "12888.80", icon: getCdnUrl(`home/daihuikuan.png`), url: '' }
|
{ title: '待回款', subTitle: "12888.80", icon: getCdnUrl(`home/daihuikuan.png`), url: '' }
|
||||||
@ -154,11 +161,6 @@
|
|||||||
|
|
||||||
.header{
|
.header{
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
.title1{
|
|
||||||
font-size: 40rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 3rpx 4rpx 0rpx rgba(92,15,12,0.2);
|
|
||||||
}
|
|
||||||
.btn-ljyy{
|
.btn-ljyy{
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
width: 144rpx;
|
width: 144rpx;
|
||||||
@ -185,55 +187,17 @@
|
|||||||
padding-top: 40rpx;
|
padding-top: 40rpx;
|
||||||
padding-bottom: 80rpx;
|
padding-bottom: 80rpx;
|
||||||
|
|
||||||
.tj-tl1 {
|
|
||||||
color: $uni-color-primary;
|
|
||||||
font-size: 36rpx;
|
|
||||||
}
|
|
||||||
.tj-tl2{
|
.tj-tl2{
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
.tj-text-list {
|
|
||||||
.tjtl-item {
|
|
||||||
border-right: 2rpx solid #E8E8E8;;
|
|
||||||
&:last-child {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btnlist1 {
|
.btnlist1 {
|
||||||
margin-top: 38rpx;
|
margin-top: 38rpx;
|
||||||
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
|
background: linear-gradient(0deg, #1D1818 0%, #0E0708 100%);
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
.mbitem{
|
.neirong{
|
||||||
border-right: 2rpx solid rgba(255,255,255,0.5);
|
margin-left: 22rpx;
|
||||||
&:last-child {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
|
||||||
.tb1 {
|
|
||||||
width: 92rpx;
|
|
||||||
height: 76rpx;
|
|
||||||
}
|
|
||||||
.neirong{
|
|
||||||
margin-left: 22rpx;
|
|
||||||
.nr1{
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.nr2{
|
|
||||||
margin-top: 15rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child {
|
|
||||||
.mb-bord{
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -242,20 +206,10 @@
|
|||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
padding: 18rpx 22rpx;
|
padding: 18rpx 22rpx;
|
||||||
.flw-dec{
|
|
||||||
font-size: 22rpx;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnlist2{
|
.btnlist2{
|
||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
.tlitem {
|
|
||||||
padding: 20rpx;
|
|
||||||
border: 2rpx solid #F6F6F6;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
margin-bottom: 18rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user