增加产品详情页,调整部分页面样式

This commit is contained in:
sfmind
2022-04-11 23:02:08 +08:00
parent e10b707588
commit 6e685c487d
12 changed files with 436 additions and 183 deletions

View File

@ -7,7 +7,7 @@
</view>
</view>
<u-gap height="10" bgColor="#f6f6f6"></u-gap>
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
<view>
<view class="order-header">
@ -18,7 +18,7 @@
</view>
</view>
<view class="mt-40-r mb-40-r">
<view class="order-status-box">
<u-grid :border="false" :col="orderStatusList.length"><u-grid-item v-for="(item,index) in orderStatusList" :key="index">
<u-icon :name="item.icon" :size="32"></u-icon>
<text class="grid-title">{{item.title}}</text>
@ -27,16 +27,17 @@
</view>
</view>
<u-gap height="10" bgColor="#f6f6f6"></u-gap>
<view class="mt-20-r mb-20-r">
<u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statisticsList" :key="index">
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
<view class="stat-box">
<u-grid :border="false" col="3"><u-grid-item v-for="(item,index) in statList" :key="index">
<text class="grid-value">{{item.value}}</text>
<text class="grid-title">{{item.title}}</text>
</u-grid-item>
</u-grid>
</view>
<u-gap height="10" bgColor="#f6f6f6"></u-gap>
<u-gap height="10" bgColor="#f3f3f3"></u-gap>
<u-cell-group class="fun-list">
<u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
@ -57,7 +58,7 @@
avatar:'',
nickName:'点击登录',
orderStatusList: [{icon: 'rmb-circle', title: '待支付'}, {icon: 'car', title: '代发货'}, {icon: 'order', title: '待收货'}, {icon: 'integral', title: '已完成'}],
statisticsList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
statList: [{value: '2', title: '我的收藏'}, {value: '3', title: '我的消息'}, {value: '3', title: '我的足迹'}]
}
},
onLoad() {
@ -101,7 +102,7 @@
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #f3f3f3;
border-bottom: $custom-border-style;
.order-title {
color: #333333;
@ -118,6 +119,14 @@
}
}
.order-status-box {
padding: 40rpx 0;
}
.stat-box {
padding: 20rpx 0;
}
.grid-title {
line-height: 50rpx;
font-size: 26rpx;
@ -134,7 +143,7 @@
.fun-item {
padding-top: 10rpx;
padding-bottom: 10rpx;
border-bottom: 1rpx solid #f3f3f3;
border-bottom: $custom-border-style;
}
}