angelo
/
web-base-h5
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(specialAreaList): 样式调整

This commit is contained in:
woody 2025-08-05 17:28:19 +08:00
parent 4a042d163a
commit 7491582f9b
2 changed files with 155 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/specialArea/index.vue
View File

@ -91,7 +91,13 @@ export default {
}, },
], ],
}, },
{
label: '秒杀专区',
value: 14,
name: 'live',
isShow: true,
children: [],
},
{ {
label: '复购专区', label: '复购专区',
value: 3, value: 3,

74
pages/specialArea/list.vue
View File

@ -78,6 +78,7 @@
class="goodList_i" class="goodList_i"
@tap="goDetails(item)" @tap="goDetails(item)"
> >
<view style="display: flex; flex: 1">
<view <view
class="fly" class="fly"
v-show="item.preSaleStatus == 3 || item.isSale == 1" v-show="item.preSaleStatus == 3 || item.isSale == 1"
@ -98,30 +99,23 @@
</view> </view>
</view> </view>
</view> </view>
<view class="goodList_ir"> <view class="goodList_ir">
<view> <view>
<span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{ <view>
item.prefixLabelTarget.label <span
}}</span> class="qzbq"
v-if="item.prefixLabelTarget != undefined"
>{{ item.prefixLabelTarget.label }}</span
>
<span style="font-weight: 500">{{ item.waresName }}</span> <span style="font-weight: 500">{{ item.waresName }}</span>
</view> </view>
</view>
<!-- 库存进度条 --> <view>
<view <view
class="inventory-progress-container" class="inventory-progress-container"
v-if="item.useRatio && item.inventory !== undefined" v-if="item.useRatio && item.inventory !== undefined"
> >
<view class="inventory-header">
<view class="inventory-label">
<text class="inventory-status">库存剩余</text>
</view>
<view
class="inventory-percentage"
:class="getPercentageClass(item.inventory)"
>
{{ getInventoryPercentage(item.inventory) }}%
</view>
</view>
<view class="inventory-progress-bar"> <view class="inventory-progress-bar">
<view <view
class="inventory-progress-fill" class="inventory-progress-fill"
@ -137,8 +131,16 @@
></view> ></view>
</view> </view>
</view> </view>
<view
class="inventory-percentage"
:class="getPercentageClass(item.inventory)"
>
剩余{{ getInventoryPercentage(item.inventory) }}%
</view>
</view> </view>
<view class="goodList_ib">
<view>
<view <view
class="pv" class="pv"
v-if=" v-if="
@ -162,9 +164,9 @@
<view class="pv" v-if="specialArea == 13"> <view class="pv" v-if="specialArea == 13">
BV:{{ item.assAchieve | numberToCurrency }} BV:{{ item.assAchieve | numberToCurrency }}
</view> </view>
<!-- <view class="pv"> 销量:{{ item.sales | seles }} </view> --> <view
<view class="goodList_ib"> v-if="specialArea == 31 && userInfo.isMakerSpace == 1"
<view v-if="specialArea == 31 && userInfo.isMakerSpace == 1"> >
{{ item.vipPrice | numberToCurrency }} {{ item.vipPrice | numberToCurrency }}
</view> </view>
<view <view
@ -175,6 +177,8 @@
> >
{{ item.waresPrice | numberToCurrency }} {{ item.waresPrice | numberToCurrency }}
</view> </view>
</view>
<img <img
@click.stop="addCar(item)" @click.stop="addCar(item)"
v-show=" v-show="
@ -197,10 +201,10 @@
alt="" alt=""
/> />
</view> </view>
<!-- <view class="pv" v-show="specialArea == 31"> 统一零售价:{{ item.retailPrice| numberToCurrency | isLocal}} </view> -->
</view> </view>
</view> </view>
<!-- <view class="zhan"></view> --> </view>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -730,22 +734,21 @@ export default {
overflow-y: auto; overflow-y: auto;
.goodList_i { .goodList_i {
display: flex; // display: flex;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding: 30rpx 0; padding: 20rpx 0 10rpx;
position: relative; position: relative;
.goodList_ir { .goodList_ir {
margin-left: 24rpx;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
font-size: 28rpx; font-size: 30rpx;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
margin-left: 24rpx;
.goodList_ib { .goodList_ib {
display: flex; display: flex;
align-items: center; align-items: center;
@ -880,12 +883,16 @@ export default {
/* 库存进度条样式 - 升级版 */ /* 库存进度条样式 - 升级版 */
.inventory-progress-container { .inventory-progress-container {
margin-top: 10rpx; // margin-bottom: 10rpx;
display: flex;
align-items: center;
width: 100%;
.inventory-header { .inventory-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 12rpx; margin-right: 10rpx;
// margin-bottom: 12rpx;
.inventory-label { .inventory-label {
display: flex; display: flex;
@ -903,7 +910,7 @@ export default {
color: #333; color: #333;
} }
} }
}
.inventory-percentage { .inventory-percentage {
font-size: 24rpx; font-size: 24rpx;
font-weight: 700; font-weight: 700;
@ -927,13 +934,14 @@ export default {
color: #005bac; color: #005bac;
} }
} }
}
.inventory-progress-bar { .inventory-progress-bar {
width: 100%; width: 0;
height: 16rpx; flex: 1;
height: 18rpx;
margin-right: 10rpx;
background: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.08);
border-radius: 8rpx; border-radius: 12rpx;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1); box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);