TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

vip列表原价展示

Browse Source
This commit is contained in:
张冬雪
2022-08-11 17:22:58 +08:00
parent d6e3ebef1a
commit c0fc64054d
6 changed files with 318 additions and 2002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
components/vip-goods-item/index.vue
View File

@@ -1,17 +1,21 @@
<template>
<view class="goods-item">
<image :src="item.cover" mode="aspectFill" class="goods-cover" />
<view class="bg"> {{item.shop_vip.message}} </view>
<image :src="item.cover" mode="aspectFill" class="goods-cover" />
<view class="tags"> VIP </view>
<view class="goods-info">
<view class="_title">{{item.name}}</view>
<view class="_des">
{{item.shop.name}}
</view>
<view class="_pin" v-if="item.sales>0">
<view class="_has"> <image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已换购 {{item.sales}} 件 </view>
<view class="_des"> {{item.shop.name}} </view>
<view class="_pin" v-if="item.sales>0">
<view class="_has">
<image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已换购 {{item.sales}} 件
</view>
</view>
<view class="price">
<view class="money">{{item.price.price_min}} <span>DT积分</span> </view>
<view class="money">
{{item.price.price_min}} <span>DT积分</span>
<span class='del'>{{item.original_price}} DT积分</span>
</view>
<view class="now-pin" @click="goPin(item.goods_id)">立即领取</view>
</view>
</view>
@@ -29,8 +33,8 @@
}
},
methods: {
goPin(id) {
this.$emit('goPin',id)
goPin(id) {
this.$emit('goPin', id)
}
},
};
@@ -45,22 +49,35 @@
background-color: white;
border-radius: 10rpx;
padding: $padding;
margin-bottom: 20rpx;
position: relative;
overflow: hidden;
.tags {
position: absolute;
top: 6rpx;
left: -54rpx;
background: #d81e06;
color: #fff;
width: 150rpx;
font-size: 24rpx;
padding: 4rpx 0;
text-align: center;
transform: rotate(-45deg);
font-weight: bold;
letter-spacing:2rpx;
margin-bottom: 20rpx;
position: relative;
z-index: 0;
overflow: hidden;
.bg {
position: absolute;
top: -40rpx;
right: -10rpx;
opacity: 0.1;
font-size: 130rpx;
color: $main-color;
z-index: 1;
font-weight: bold;
}
.tags {
position: absolute;
top: 6rpx;
left: -54rpx;
background: #d81e06;
color: #fff;
width: 150rpx;
font-size: 24rpx;
padding: 4rpx 0;
text-align: center;
transform: rotate(-45deg);
font-weight: bold;
letter-spacing: 2rpx;
}
.goods-cover {
@@ -82,17 +99,18 @@
}
._des {
font-size: 28rpx;
padding: 6rpx 0;
color: #4f300a;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
font-size: 26rpx;
padding: 10rpx 0;
margin-bottom: 4rpx;
color: #4f300a;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
}
._pin {
._pin {
font-size: 26rpx;
display: flex;
flex-direction: row;
@@ -113,7 +131,7 @@
border-radius: 30rpx;
image {
width: 24rpx;
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
@@ -135,11 +153,20 @@
.money {
font-size: 34rpx;
font-weight: 600;
color: #d81e06;
span{
font-size: 24rpx;
margin-left: 10rpx;
font-weight: normal;
color: #d81e06;
span {
font-size: 24rpx;
margin-left: 10rpx;
font-weight: normal;
}
.del {
text-decoration: line-through;
margin-left: 10rpx;
font-size: 24rpx;
color: #999;
font-weight: normal;
}
}