Feat(规格):UI调整(已完成)

This commit is contained in:
modendeveloper
2024-09-08 19:57:48 +08:00
parent 3eb077eb3c
commit 1e0772713f
+45 -15
View File
@@ -6,12 +6,15 @@
<image :src="attr.productSelect.image" class="image" /> <image :src="attr.productSelect.image" class="image" />
</view> </view>
<view class="text"> <view class="text">
<view class="line1">{{ attr.productSelect.store_name }}</view> <view class="money font-color-lightred v12-font-">
<view class="money font-color-lightred">
¥ ¥
<text class="num">{{ attr.productSelect.price }}</text> <text class="num v12-font-40">{{ attr.productSelect.price }}</text>
<text class="stock">库存: {{ attr.productSelect.stock }}</text> <text class="v12-ml-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">¥</text>
<text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attr.productSelect.otPrice }}</text>
<text class="v12-white-text v12-red v12-font-22 v12-radius-40 v12-px-1 v12-font-weight-400">会员价</text>
<!-- <text class="stock">库存: {{ attr.productSelect.stock }}</text> -->
</view> </view>
<view class="more-t">{{ attr.productSelect.store_name }}</view>
</view> </view>
<view class="iconfont icon-guanbi" @click="closeAttr"></view> <view class="iconfont icon-guanbi" @click="closeAttr"></view>
</view> </view>
@@ -23,28 +26,29 @@
v-for="(itemn, indexn) in item.attrValue" v-for="(itemn, indexn) in item.attrValue"
:key="indexn" :key="indexn"
:class="{ :class="{
'on': item.index == indexn, 'actived': item.index == indexn,
'disabled': getAttrItemData(itemn.attr).stock === 0 'disabled': getAttrItemData(itemn.attr).stock === 0
}" }"
class="itemn" class="itemn v12-radius-40"
@click="tapAttr(indexw, indexn, itemn)" @click="tapAttr(indexw, indexn, itemn)"
> >
{{ itemn.attr }} {{ itemn.attr }}
<text <text v-if="getAttrItemData(itemn.attr).stock === 0" class="less-tag">缺货</text>
v-if="getAttrItemData(itemn.attr).stock === 0"
class="tag"
>缺货</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="cart"> <view class="cart v12-justify-between v12-align-center">
<view class="title">数量</view> <view class="titlev12-dark-text f12-font-32">购买数量</view>
<view class="carnum acea-row row-left"> <view class="carnum acea-row row-left">
<view class="item reduce" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view> <view style="border-radius: 40rpx 0rpx 0rpx 40rpx" class="cart-btn item reduce v12-font-36 v12-font-bold v12-white-text v12-dark1 v12-dark1-border" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view>
<view class="item num">{{ cartNum }}</view> <view class="item v12-font-36 v12-font-bold v12-dark-text
cart-btn">{{ cartNum }}</view>
<view <view
class="item plus" style="border-radius:0 40rpx 40rpx 0"
class="item plus v12-font-bold v12-white-text v12-primary v12-primary-border v12-font-36 cart-btn"
:class=" :class="
cartNum >= attr.productSelect.stock cartNum >= attr.productSelect.stock
? 'on' ? 'on'
@@ -141,3 +145,29 @@ export default {
} }
} }
</script> </script>
<style scope>
.money{
margin-top: 0 !important
}
.actived{
border-color: #C52733 !important;
color: #fff !important;
background: #C52733
}
.cart-btn{
height:52rpx !important;
width:52rpx !important
}
.less-tag{
position: absolute;
background: #FF5562;
border-radius: 8rpx;
height: 38rpx;
line-height: 38rpx;
right: -18px;
top: -12px;
padding: 0 3px;
font-size: 24rpx;
font-weight:400
}
</style>