修改团购商品详情页样式

This commit is contained in:
赵毅 2025-11-08 17:33:34 +08:00
parent 627485176e
commit 686a9df6e1
2 changed files with 114 additions and 35 deletions

View File

@ -172,18 +172,18 @@ image {
margin-top: 20rpx;
}
.timeBox{
.timeBox {
display: flex;
color: #ff370e;
align-items: center;
justify-content: center;
}
.dayTimeBox{
.dayTimeBox {
margin-right: 10rpx;
}
.time{
.time {
padding: 5rpx;
color: #fff;
border-radius: 10rpx;
@ -333,7 +333,7 @@ image {
padding-bottom: 10rpx;
}
.num{
.num {
color: #808080;
font-size: 24rpx;
position: absolute;
@ -349,10 +349,9 @@ image {
}
.GGBox {
margin: 0 20rpx;
margin: 30rpx 20rpx 20rpx 20rpx;
display: flex;
justify-content: space-between;
margin-top: 30rpx;
}
.GG_rigth {
@ -442,12 +441,48 @@ image {
font-weight: 700;
}
.specification {
height: 100rpx;
display: flex;
align-items: center;
}
.spe_Item {
margin: 0 20rpx;
}
.shu {
height: 60rpx;
width: 1rpx;
border-left: 1rpx solid #d8d7d7;
}
.spe_ItemCon {
display: flex;
align-items: center;
}
.spe_ItemCon image {
width: 26rpx;
height: 26rpx;
margin-left: 10rpx;
}
.spe_ItemCon {
font-size: 26rpx;
font-weight: bold;
}
.spe_ItemTit {
font-size: 26rpx;
color: #999999;
margin-top: 5rpx;
}
.Msg_Item {
display: flex;
align-items: center;
border-bottom: 1rpx solid #EBEBEB;
;
}
.Msg_ItemTit {
@ -469,6 +504,7 @@ image {
.Msg_ItemCon image {
width: 28rpx;
height: 28rpx;
margin-left: 10rpx;
}
.GoosMsg {
@ -507,11 +543,29 @@ image {
height: 40rpx;
}
.car_right_box{
display: flex;
}
.car_right {
width: 470rpx;
width: 220rpx;
height: 70rpx;
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
/* background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); */
background: #ff712c;
border-radius: 20rpx 0 0 20rpx;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin-top: 26rpx;
}
.seckill {
width: 220rpx;
height: 70rpx;
background: #ff3b31;
border-radius: 0 20rpx 20rpx 0;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
@ -924,7 +978,7 @@ image {
align-items: center;
}
.buy-btn{
.buy-btn {
width: 150rpx;
height: 50rpx;
line-height: 50rpx;

View File

@ -54,9 +54,16 @@
</view>
<view class="Money">
<view class="MoneyMark"></view>
<!-- <view class="MoneyMark"></view>
{{ currentGG.group_buy_price }}
<view class="MoneyUnit">/{{ currentGG.goods_unit }}</view>
<view class="MoneyUnit">/{{ currentGG.goods_unit }}</view> -->
<view class="Tit">
<view class="tag tag-text" v-if="
currentGG.is_same_day
">当日达</view>
{{ currentGG.goods_name }}
</view>
<view class="Msg">{{ currentGG.commodity_brief }}</view>
<view class="num">已售{{ soldOutNum }} | 剩余{{ currentGG.total_stock }}</view>
</view>
@ -74,14 +81,26 @@
</view>
</view>
<view class="Tit">
<view class="tag tag-text" v-if="
currentGG.is_same_day
">当日达</view>
{{ currentGG.goods_name }}
<view class="fenge"></view>
<view class="specification">
<view class="spe_Item">
<view class="spe_ItemCon" @click="copys(currentGG.goods_no)">
{{ currentGG.goods_no }}
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_copy.png"></image>
</view>
<view class="spe_ItemTit">货号</view>
</view>
<view class="shu"></view>
<view class="spe_Item">
<view class="spe_ItemCon">{{ currentGG.goods_spec }}</view>
<view class="spe_ItemTit">规格说明</view>
</view>
<view class="shu"></view>
<view class="spe_Item">
<view class="spe_ItemCon">{{ currentGG.goods_unit }}</view>
<view class="spe_ItemTit">售卖单位</view>
</view>
</view>
<view class="Msg">{{ currentGG.commodity_brief }}</view>
<view class="fenge"></view>
<!-- 已购买区域 -->
@ -108,9 +127,9 @@
<view class="fenge"></view>
<h3 class="GoodsMsg">商品详情</h3>
<h3 class="GoodsMsg" v-if="currentGG.goods_detail_pic && currentGG.goods_detail_pic.length > 0">商品详情</h3>
<view class="Msg_Item">
<!-- <view class="Msg_Item">
<view class="Msg_ItemTit">货号</view>
<view class="Msg_ItemCon" @click="copys(currentGG.goods_no)">
{{ currentGG.goods_no }}
@ -124,7 +143,7 @@
<view class="Msg_Item">
<view class="Msg_ItemTit">售卖单位</view>
<view class="Msg_ItemCon">{{ currentGG.goods_unit }}</view>
</view>
</view> -->
<view class="GoosMsg">
<image v-for="item in currentGG.goods_detail_pic" :src="picUrl + item" :key="item" mode="widthFix"></image>
@ -165,6 +184,7 @@
已售罄
</view>
<view class="car_right_box">
<view class="car_right" v-if="
info.commodity_goods_info_list[currentGGIndex].total_stock > 0 &&
(!info.commodity_goods_info_list[currentGGIndex].cart_count ||
@ -179,6 +199,11 @@
">
加入购物车
</view>
<view class="seckill">
立即秒杀
</view>
</view>
</view>
<!-- 分享 -->