2 changed files with 350 additions and 347 deletions
@ -1,215 +1,212 @@ |
|||||||
<template> |
<template> |
||||||
<view> |
<view> |
||||||
<view class="sh-title-card mb10"> |
<view class="sh-title-card mb10"> |
||||||
<view class="title-box"> |
<view class="title-box"> |
||||||
<image class="title-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/title1.png`" mode="aspectFill" /> |
<image class="title-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/title1.png`" mode="aspectFill" /> |
||||||
<view class="title-text">为你推荐</view> |
<view class="title-text">为你推荐</view> |
||||||
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> --> |
<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> --> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="hot-goods mx20 mb10" v-if="benefit.length"> |
<view class="hot-goods mx20 mb10" v-if="benefit.length"> |
||||||
<view class="goods-list x-f"> |
<view class="goods-list x-f"> |
||||||
<view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex"> |
<view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex"> |
||||||
<view class="goods-box" @tap="routerGo(item)"> |
<view class="goods-box" @tap="routerGo(item)"> |
||||||
<view class="img-box"> |
<view class="img-box"> |
||||||
<!-- <image class="tag-img" :src="item.image" mode=""></image> --> |
<!-- <image class="tag-img" :src="item.image" mode=""></image> --> |
||||||
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image> |
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image> |
||||||
</view> |
</view> |
||||||
<view class="tip one-t">{{ item.storeName }}</view> |
<view class="tip one-t">{{ item.storeName }}</view> |
||||||
<view class="title more-t">{{ item.storeName }}</view> |
<view class="title more-t">{{ item.storeName }}</view> |
||||||
<view class="price-box"> |
<view class="price-box"> |
||||||
<view class="flex x-bc align-end"> |
<view class="flex x-bc align-end"> |
||||||
<view class="current">{{ item.activity_type === 'groupon' ? item.price : item.otPrice }} |
<view class="current">{{ item.price }} </view> |
||||||
</view> |
<view class="sales miso-font">仅剩:{{ item.stock }}{{ item.unitName }}</view> |
||||||
<view class="sales miso-font">仅剩:{{ item.stock }}{{ item.unitName }}</view> |
</view> |
||||||
</view> |
<view class="x-f tag-box"> |
||||||
<view class="x-f tag-box"> |
<!-- <view class="discount">新人礼</view> |
||||||
<!-- <view class="discount">新人礼</view> |
|
||||||
<view class="discount">满100减60</view> --> |
<view class="discount">满100减60</view> --> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
|
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
export default { |
export default { |
||||||
name: 'PromotionGood', |
name: 'PromotionGood', |
||||||
props: ['benefit'], |
props: ['benefit'], |
||||||
data: function () { |
data: function() { |
||||||
return {}; |
return {} |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
routerGo(item) { |
routerGo(item) { |
||||||
this.$yrouter.push({ |
this.$yrouter.push({ |
||||||
path: '/pages/shop/GoodsCon/index', |
path: '/pages/shop/GoodsCon/index', |
||||||
query: { |
query: { |
||||||
id: item.id |
id: item.id, |
||||||
} |
}, |
||||||
}); |
}) |
||||||
} |
}, |
||||||
}, |
}, |
||||||
mounted() { |
mounted() {}, |
||||||
} |
} |
||||||
}; |
|
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss"> |
<style lang="scss"> |
||||||
.sh-title-card { |
.sh-title-card { |
||||||
width: 750rpx; |
width: 750rpx; |
||||||
} |
} |
||||||
|
|
||||||
.title-box { |
.title-box { |
||||||
width: 710rpx; |
width: 710rpx; |
||||||
height: 88rpx; |
height: 88rpx; |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
position: relative; |
position: relative; |
||||||
border-radius: 30rpx; |
border-radius: 30rpx; |
||||||
|
|
||||||
.title-bg { |
.title-bg { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
} |
} |
||||||
|
|
||||||
.title-text { |
.title-text { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 50%; |
top: 50%; |
||||||
left: 50%; |
left: 50%; |
||||||
transform: translate(-50%, -50%); |
transform: translate(-50%, -50%); |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.goods-box { |
.goods-box { |
||||||
width: 345rpx; |
width: 345rpx; |
||||||
background: #fff; |
background: #fff; |
||||||
padding-bottom: 20rpx; |
padding-bottom: 20rpx; |
||||||
border-radius: 20rpx; |
border-radius: 20rpx; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
|
|
||||||
.img-box { |
.img-box { |
||||||
width: 345rpx; |
width: 345rpx; |
||||||
height: 345rpx; |
height: 345rpx; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
position: relative; |
position: relative; |
||||||
|
|
||||||
.tag-img { |
.tag-img { |
||||||
position: absolute; |
position: absolute; |
||||||
left: 0; |
left: 0; |
||||||
top: 0; |
top: 0; |
||||||
z-index: 2; |
z-index: 2; |
||||||
width: 80rpx; |
width: 80rpx; |
||||||
height: 40rpx; |
height: 40rpx; |
||||||
} |
} |
||||||
|
|
||||||
.img { |
.img { |
||||||
width: 345rpx; |
width: 345rpx; |
||||||
height: 345rpx; |
height: 345rpx; |
||||||
background-color: #ccc; |
background-color: #ccc; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.tip { |
.tip { |
||||||
width: 346rpx; |
width: 346rpx; |
||||||
line-height: 56rpx; |
line-height: 56rpx; |
||||||
background: rgba(246, 242, 234, 1); |
background: rgba(246, 242, 234, 1); |
||||||
font-size: 22rpx; |
font-size: 22rpx; |
||||||
font-family: PingFang SC; |
font-family: PingFang SC; |
||||||
font-weight: 400; |
font-weight: 400; |
||||||
color: rgba(168, 112, 13, 1); |
color: rgba(168, 112, 13, 1); |
||||||
padding: 0 20rpx; |
padding: 0 20rpx; |
||||||
} |
} |
||||||
|
|
||||||
.title { |
.title { |
||||||
font-size: 24rpx; |
font-size: 24rpx; |
||||||
font-family: PingFang SC; |
font-family: PingFang SC; |
||||||
font-weight: 500; |
font-weight: 500; |
||||||
line-height: 36rpx; |
line-height: 36rpx; |
||||||
height: 72rpx; |
height: 72rpx; |
||||||
margin: 20rpx 20rpx 10rpx; |
margin: 20rpx 20rpx 10rpx; |
||||||
} |
} |
||||||
|
|
||||||
.price-box { |
.price-box { |
||||||
padding: 10rpx 20rpx 0; |
padding: 10rpx 20rpx 0; |
||||||
width: 344rpx; |
width: 344rpx; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
|
|
||||||
.sales { |
.sales { |
||||||
font-size: 20rpx; |
font-size: 20rpx; |
||||||
font-family: PingFang SC; |
font-family: PingFang SC; |
||||||
font-weight: 400; |
font-weight: 400; |
||||||
color: rgba(153, 153, 153, 1); |
color: rgba(153, 153, 153, 1); |
||||||
line-height: 20rpx; |
line-height: 20rpx; |
||||||
margin-bottom: 20rpx; |
margin-bottom: 20rpx; |
||||||
} |
} |
||||||
|
|
||||||
.current { |
.current { |
||||||
font-size: 30rpx; |
font-size: 30rpx; |
||||||
font-weight: 500; |
font-weight: 500; |
||||||
color: rgba(225, 33, 43, 1); |
color: rgba(225, 33, 43, 1); |
||||||
line-height: 30rpx; |
line-height: 30rpx; |
||||||
margin-bottom: 20rpx; |
margin-bottom: 20rpx; |
||||||
|
|
||||||
&:before { |
&:before { |
||||||
content: '¥'; |
content: '¥'; |
||||||
font-size: 26rpx; |
font-size: 26rpx; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.original { |
.original { |
||||||
font-size: 22rpx; |
font-size: 22rpx; |
||||||
font-weight: 400; |
font-weight: 400; |
||||||
text-decoration: line-through; |
text-decoration: line-through; |
||||||
color: rgba(153, 153, 153, 1); |
color: rgba(153, 153, 153, 1); |
||||||
margin-left: 14rpx; |
margin-left: 14rpx; |
||||||
line-height: 22rpx; |
line-height: 22rpx; |
||||||
margin-bottom: 10rpx; |
margin-bottom: 10rpx; |
||||||
|
|
||||||
&:before { |
&:before { |
||||||
content: '¥'; |
content: '¥'; |
||||||
font-size: 20rpx; |
font-size: 20rpx; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
.tag-box { |
.tag-box { |
||||||
.discount { |
.discount { |
||||||
line-height: 28rpx; |
line-height: 28rpx; |
||||||
border: 1rpx solid rgba(225, 33, 43, 1); |
border: 1rpx solid rgba(225, 33, 43, 1); |
||||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||||
font-size: 18rpx; |
font-size: 18rpx; |
||||||
font-family: PingFang SC; |
font-family: PingFang SC; |
||||||
font-weight: 500; |
font-weight: 500; |
||||||
color: rgba(225, 33, 43, 1); |
color: rgba(225, 33, 43, 1); |
||||||
padding: 0 8rpx; |
padding: 0 8rpx; |
||||||
margin-right: 10rpx; |
margin-right: 10rpx; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
// 为你推荐 |
// 为你推荐 |
||||||
.hot-goods { |
.hot-goods { |
||||||
// background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6); |
// background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6); |
||||||
// border-radius: 20rpx; |
// border-radius: 20rpx; |
||||||
|
|
||||||
.goods-list { |
.goods-list { |
||||||
flex-wrap: wrap; |
flex-wrap: wrap; |
||||||
width: 710rpx; |
width: 710rpx; |
||||||
|
|
||||||
.goods-item { |
.goods-item { |
||||||
margin-right: 20rpx; |
margin-right: 20rpx; |
||||||
margin-bottom: 20rpx; |
margin-bottom: 20rpx; |
||||||
width: 345rpx; |
width: 345rpx; |
||||||
box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22); |
box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22); |
||||||
border-radius: 20rpx; |
border-radius: 20rpx; |
||||||
|
|
||||||
&:nth-child(2n) { |
&:nth-child(2n) { |
||||||
margin-right: 0; |
margin-right: 0; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
Loading…
Reference in new issue