【新增】栏目商品列表页面新增【推荐】【热门】tag图片标记效果。

This commit is contained in:
大灰灰
2022-10-31 13:03:27 +08:00
parent 81dcf814d1
commit d516746912
5 changed files with 11 additions and 10 deletions

View File

@@ -89,14 +89,8 @@
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>
<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>
<!--<view class="good-tag-recommend2" v-if="item.isRecommend">
推荐
</view>
<view class="good-tag-hot" v-if="item.isHot">
热门
</view>-->
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
<text class="coreshop-font-14">{{item.name}}</text>
</view>
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
@@ -133,7 +127,8 @@
<view class="goods">
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
<text class="coreshop-font-14">{{item.name}}</text>
</view>
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

@@ -711,7 +711,10 @@ u-icon { line-height: 0; }
.cate-list .item:nth-child(5n) { margin-right: 0rpx; }
.index-goods .goods { -webkit-column-break-inside: avoid; border-radius: 18rpx; break-inside: avoid; margin-bottom: 24rpx; width: 326rpx; }
.coreshop-title-294 { width: 294rpx; }
.coreshop-image-price-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 98rpx; }
.coreshop-image-recommend-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 121rpx; }
.coreshop-image-hot-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 80rpx; }

View File

@@ -711,7 +711,10 @@ u-icon { line-height: 0; }
.cate-list .item:nth-child(5n) { margin-right: 0rpx; }
.index-goods .goods { -webkit-column-break-inside: avoid; border-radius: 18rpx; break-inside: avoid; margin-bottom: 24rpx; width: 326rpx; }
.coreshop-title-294 { width: 294rpx; }
.coreshop-image-price-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 98rpx; }
.coreshop-image-recommend-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 121rpx; }
.coreshop-image-hot-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 80rpx; }
@@ -738,4 +741,4 @@ u-icon { line-height: 0; }
.good-tag-hot { display: flex; margin-top: 5px; position: absolute; top: 15rpx; left: 15rpx; background-color: $u-type-error; color: #FFFFFF; display: flex; align-items: center; padding: 4rpx 14rpx; border-radius: 50rpx; font-size: 20rpx; line-height: 1; }
.good-tag-recommend { display: flex; margin-top: 5px; position: absolute; top: 15rpx; right: 15rpx; background-color: $u-type-primary; color: #FFFFFF; margin-left: 10px; border-radius: 50rpx; line-height: 1; padding: 4rpx 14rpx; display: flex; align-items: center; border-radius: 50rpx; font-size: 20rpx; }
.good-tag-recommend2 { display: flex; margin-top: 5px; position: absolute; bottom: 15rpx; left: 15rpx; background-color: $u-type-primary; color: #FFFFFF; border-radius: 50rpx; line-height: 1; padding: 4rpx 14rpx; display: flex; align-items: center; border-radius: 50rpx; font-size: 20rpx; }
.good-tag-recommend2 { display: flex; margin-top: 5px; position: absolute; bottom: 15rpx; left: 15rpx; background-color: $u-type-primary; color: #FFFFFF; border-radius: 50rpx; line-height: 1; padding: 4rpx 14rpx; display: flex; align-items: center; border-radius: 50rpx; font-size: 20rpx; }