feat(specialAreaList): 样式调整
This commit is contained in:
woody
parent
4a042d163a
commit
7491582f9b
|
|
@ -91,7 +91,13 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
label: '秒杀专区',
|
||||
value: 14,
|
||||
name: 'live',
|
||||
isShow: true,
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
label: '复购专区',
|
||||
value: 3,
|
||||
|
|
|
|||
|
|
@ -78,129 +78,133 @@
|
|||
class="goodList_i"
|
||||
@tap="goDetails(item)"
|
||||
>
|
||||
<view
|
||||
class="fly"
|
||||
v-show="item.preSaleStatus == 3 || item.isSale == 1"
|
||||
></view>
|
||||
<view class="image-container">
|
||||
<img :src="item.cover || item.cover1" class="cover" alt="" />
|
||||
<!-- 三角形角标 -->
|
||||
<view class="triangle-badge" v-if="item.warnMessage">
|
||||
<view
|
||||
class="triangle-badge-text"
|
||||
:class="{
|
||||
'text-2': item.warnMessage.length === 2,
|
||||
'text-3': item.warnMessage.length === 3,
|
||||
'text-4': item.warnMessage.length === 4,
|
||||
}"
|
||||
>
|
||||
{{ item.warnMessage }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goodList_ir">
|
||||
<view>
|
||||
<span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{
|
||||
item.prefixLabelTarget.label
|
||||
}}</span>
|
||||
<span style="font-weight: 500">{{ item.waresName }}</span>
|
||||
</view>
|
||||
|
||||
<!-- 库存进度条 -->
|
||||
<view style="display: flex; flex: 1">
|
||||
<view
|
||||
class="inventory-progress-container"
|
||||
v-if="item.useRatio && item.inventory !== undefined"
|
||||
>
|
||||
<view class="inventory-header">
|
||||
<view class="inventory-label">
|
||||
<text class="inventory-status">库存剩余</text>
|
||||
</view>
|
||||
class="fly"
|
||||
v-show="item.preSaleStatus == 3 || item.isSale == 1"
|
||||
></view>
|
||||
<view class="image-container">
|
||||
<img :src="item.cover || item.cover1" class="cover" alt="" />
|
||||
<!-- 三角形角标 -->
|
||||
<view class="triangle-badge" v-if="item.warnMessage">
|
||||
<view
|
||||
class="inventory-percentage"
|
||||
:class="getPercentageClass(item.inventory)"
|
||||
>
|
||||
{{ getInventoryPercentage(item.inventory) }}%
|
||||
</view>
|
||||
</view>
|
||||
<view class="inventory-progress-bar">
|
||||
<view
|
||||
class="inventory-progress-fill"
|
||||
:style="{
|
||||
width: getInventoryPercentage(item.inventory) + '%',
|
||||
class="triangle-badge-text"
|
||||
:class="{
|
||||
'text-2': item.warnMessage.length === 2,
|
||||
'text-3': item.warnMessage.length === 3,
|
||||
'text-4': item.warnMessage.length === 4,
|
||||
}"
|
||||
:class="getProgressClass(item.inventory)"
|
||||
>
|
||||
<!-- 添加流动光效 -->
|
||||
<view
|
||||
class="progress-shine"
|
||||
v-if="getInventoryPercentage(item.inventory) <= 30"
|
||||
></view>
|
||||
{{ item.warnMessage }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="pv"
|
||||
v-if="
|
||||
specialArea != 18 &&
|
||||
specialArea != 13 &&
|
||||
specialArea != 31 &&
|
||||
specialArea != 10
|
||||
"
|
||||
>
|
||||
业绩:{{ item.waresAchieve | numberToCurrency }}
|
||||
</view>
|
||||
<view class="pv" v-if="specialArea == 10">
|
||||
积分可抵扣:{{ item.deductMoney | numberToCurrency }}
|
||||
</view>
|
||||
<view
|
||||
class="pv"
|
||||
v-if="specialArea == 31 && userInfo.isMakerSpace == 0"
|
||||
>
|
||||
业绩:{{ item.waresAchieve | numberToCurrency }}
|
||||
</view>
|
||||
<view class="pv" v-if="specialArea == 13">
|
||||
BV:{{ item.assAchieve | numberToCurrency }}
|
||||
</view>
|
||||
<!-- <view class="pv"> 销量:{{ item.sales | seles }} </view> -->
|
||||
<view class="goodList_ib">
|
||||
<view v-if="specialArea == 31 && userInfo.isMakerSpace == 1">
|
||||
{{ item.vipPrice | numberToCurrency }}
|
||||
<view class="goodList_ir">
|
||||
<view>
|
||||
<view>
|
||||
<span
|
||||
class="qzbq"
|
||||
v-if="item.prefixLabelTarget != undefined"
|
||||
>{{ item.prefixLabelTarget.label }}</span
|
||||
>
|
||||
<span style="font-weight: 500">{{ item.waresName }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="
|
||||
(specialArea == 31 && userInfo.isMakerSpace == 0) ||
|
||||
specialArea != 31
|
||||
"
|
||||
>
|
||||
{{ item.waresPrice | numberToCurrency }}
|
||||
<view>
|
||||
<view
|
||||
class="inventory-progress-container"
|
||||
v-if="item.useRatio && item.inventory !== undefined"
|
||||
>
|
||||
<view class="inventory-progress-bar">
|
||||
<view
|
||||
class="inventory-progress-fill"
|
||||
:style="{
|
||||
width: getInventoryPercentage(item.inventory) + '%',
|
||||
}"
|
||||
:class="getProgressClass(item.inventory)"
|
||||
>
|
||||
<!-- 添加流动光效 -->
|
||||
<view
|
||||
class="progress-shine"
|
||||
v-if="getInventoryPercentage(item.inventory) <= 30"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="inventory-percentage"
|
||||
:class="getPercentageClass(item.inventory)"
|
||||
>
|
||||
剩余{{ getInventoryPercentage(item.inventory) }}%
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goodList_ib">
|
||||
<view>
|
||||
<view
|
||||
class="pv"
|
||||
v-if="
|
||||
specialArea != 18 &&
|
||||
specialArea != 13 &&
|
||||
specialArea != 31 &&
|
||||
specialArea != 10
|
||||
"
|
||||
>
|
||||
业绩:{{ item.waresAchieve | numberToCurrency }}
|
||||
</view>
|
||||
<view class="pv" v-if="specialArea == 10">
|
||||
积分可抵扣:{{ item.deductMoney | numberToCurrency }}
|
||||
</view>
|
||||
<view
|
||||
class="pv"
|
||||
v-if="specialArea == 31 && userInfo.isMakerSpace == 0"
|
||||
>
|
||||
业绩:{{ item.waresAchieve | numberToCurrency }}
|
||||
</view>
|
||||
<view class="pv" v-if="specialArea == 13">
|
||||
BV:{{ item.assAchieve | numberToCurrency }}
|
||||
</view>
|
||||
<view
|
||||
v-if="specialArea == 31 && userInfo.isMakerSpace == 1"
|
||||
>
|
||||
{{ item.vipPrice | numberToCurrency }}
|
||||
</view>
|
||||
<view
|
||||
v-if="
|
||||
(specialArea == 31 && userInfo.isMakerSpace == 0) ||
|
||||
specialArea != 31
|
||||
"
|
||||
>
|
||||
{{ item.waresPrice | numberToCurrency }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<img
|
||||
@click.stop="addCar(item)"
|
||||
v-show="
|
||||
item.preSaleStatus != 3 &&
|
||||
item.isSale != 1 &&
|
||||
specialArea != 31
|
||||
"
|
||||
src="@/static/images/cart.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
@click.stop="addCar(item)"
|
||||
v-show="
|
||||
item.preSaleStatus != 3 &&
|
||||
item.isSale != 1 &&
|
||||
specialArea == 31 &&
|
||||
userInfo.isMakerSpace == 0
|
||||
"
|
||||
src="@/static/images/cart.png"
|
||||
alt=""
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<img
|
||||
@click.stop="addCar(item)"
|
||||
v-show="
|
||||
item.preSaleStatus != 3 &&
|
||||
item.isSale != 1 &&
|
||||
specialArea != 31
|
||||
"
|
||||
src="@/static/images/cart.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
@click.stop="addCar(item)"
|
||||
v-show="
|
||||
item.preSaleStatus != 3 &&
|
||||
item.isSale != 1 &&
|
||||
specialArea == 31 &&
|
||||
userInfo.isMakerSpace == 0
|
||||
"
|
||||
src="@/static/images/cart.png"
|
||||
alt=""
|
||||
/>
|
||||
</view>
|
||||
<!-- <view class="pv" v-show="specialArea == 31"> 统一零售价:{{ item.retailPrice| numberToCurrency | isLocal}} </view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="zhan"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -730,22 +734,21 @@ export default {
|
|||
overflow-y: auto;
|
||||
|
||||
.goodList_i {
|
||||
display: flex;
|
||||
// display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 30rpx 0;
|
||||
padding: 20rpx 0 10rpx;
|
||||
position: relative;
|
||||
|
||||
.goodList_ir {
|
||||
margin-left: 24rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
font-size: 30rpx;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
|
||||
margin-left: 24rpx;
|
||||
.goodList_ib {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -880,12 +883,16 @@ export default {
|
|||
|
||||
/* 库存进度条样式 - 升级版 */
|
||||
.inventory-progress-container {
|
||||
margin-top: 10rpx;
|
||||
// margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.inventory-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
margin-right: 10rpx;
|
||||
// margin-bottom: 12rpx;
|
||||
|
||||
.inventory-label {
|
||||
display: flex;
|
||||
|
|
@ -903,37 +910,38 @@ export default {
|
|||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inventory-percentage {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
font-family:
|
||||
DIN Alternate,
|
||||
Arial,
|
||||
sans-serif;
|
||||
|
||||
.inventory-percentage {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
font-family:
|
||||
DIN Alternate,
|
||||
Arial,
|
||||
sans-serif;
|
||||
&.percentage-critical {
|
||||
color: #ff3742;
|
||||
animation: percentageBlink 1s ease-in-out infinite;
|
||||
text-shadow: 0 0 10rpx rgba(255, 55, 66, 0.3);
|
||||
}
|
||||
|
||||
&.percentage-critical {
|
||||
color: #ff3742;
|
||||
animation: percentageBlink 1s ease-in-out infinite;
|
||||
text-shadow: 0 0 10rpx rgba(255, 55, 66, 0.3);
|
||||
}
|
||||
&.percentage-urgent {
|
||||
color: #ff5252;
|
||||
animation: percentageGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.percentage-urgent {
|
||||
color: #ff5252;
|
||||
animation: percentageGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.percentage-normal {
|
||||
color: #005bac;
|
||||
}
|
||||
&.percentage-normal {
|
||||
color: #005bac;
|
||||
}
|
||||
}
|
||||
|
||||
.inventory-progress-bar {
|
||||
width: 100%;
|
||||
height: 16rpx;
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 18rpx;
|
||||
margin-right: 10rpx;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
|
|
|
|||
Loading…
Reference in New Issue