charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 特价页面样式修改

Browse Source
This commit is contained in:
黄泽群
2025-11-09 23:56:58 +08:00
parent a415522359
commit 019edfa648
14 changed files with 954 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shop/you-item.vue
+38 -36
View File
@@ -4,24 +4,18 @@
<image :src="obj.url"></image>
</view>
<view class="shop-right-view">
<view class="shop-top-img">
<image src="/static/home/xyx.png" style="width: 122rpx;height: 28rpx;margin-right: 12rpx;"></image>
<image src="/static/home/xs.png" v-if="obj.limitedTime " style="width: 52rpx;height: 28rpx;margin-right: 12rpx;"></image>
<image src="/static/home/tg.png" v-if="obj.tag" style="width: 80rpx;height: 28rpx;"></image>
</view>
<view class="right-top-view text-overflow1">
<text class="text-32 text-bold text-zu text-overflow1">{{obj.title}}</text>
</view>
<view class="right-bottom-view">
<view class="flex-c-lr" >
<view class="text-24" style="color:#FF5A5A;width: 112rpx;height: 32rpx; margin-right: 3rpx;" v-if="obj.tag">
<image src="/static/shopping/tg.png" style="width: 112rpx;height: 32rpx;"></image>
</view>
<image v-if="obj.id === 33162" src="/static/shopping/tp.png" alt="" style="width: 60rpx;height: 32rpx; margin-top: 2rpx;"></image>
<text class="text-24 text-fu">原价</text>
<text class="text-24 text-fu text-d text-bold">￥{{obj.adPrice}}</text>
</view>
<view class="right-bottom-panel" style="height:70rpx">
<MyBtn @ok.stop="onClick" mh="36rpx" :text="`专区立省${Number(obj.adPrice) - Number(obj.price)}元`" br="8rpx" fz="16rpx" bg="linear-gradient( 270deg, #AF39C4 0%, #7732FF 100%)" wd="260rpx"></MyBtn>
<text class="text-28 text-zi text-bold">到手
<text class="text-36">￥{{obj.price}}</text>
</text>
</view>
<view class="shop-price" @ok.stop="onClick" >
<view class="price-left"><text style="font-size: 24rpx;">¥</text>{{obj.price}}</view>
<view class="price-center">专区立省{{ Number(obj.adPrice) - Number(obj.price) }}元</view>
<image src="/static/home/qiang.png" style="width: 80rpx;height: 80rpx;"></image>
</view>
</view>
</view>
@@ -54,10 +48,10 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12rpx;
padding: 20rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 12rpx;
border-radius: 16rpx;
.shop-left-view{
min-width:216rpx;
min-height:216rpx;
@@ -65,8 +59,9 @@
align-items: center;
justify-content: center;
image{
width:216rpx;
height:216rpx;
width:220rpx;
height:220rpx;
border-radius: 8rpx;
}
}
.shop-right-view{
@@ -75,30 +70,37 @@
min-height:216rpx;
margin-left:24rpx;
flex-direction: column;
justify-content: space-between;
justify-content: space-around;
.shop-top-img{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
image{
width: 100%;
height: 100%;
}
}
.right-top-view{
width:100%;
display: flex;
}
.right-bottom-view{
width:100%;
.shop-price{
background: linear-gradient( 270deg, #F0E7FE 0%, rgba(240,231,254,0) 100%);
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
.right-bottom-panel{
width:284rpx;
height:104rpx;
min-height:104rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 12rpx;
box-sizing: border-box;
background-color: #F0E7FE;
border-radius: 8rpx;
align-items: center;
.price-left{
font-weight: bold;
font-size: 28rpx;
color: #7934F6;
}
.price-center{
font-size: 20rpx;
color: #7934F6;
}
}
}