Browse Source

feat: 售空商品图片显示黑白效果

pull/9/head
徐飞洋 2 months ago
parent
commit
75e846162a
  1. 2
      pages/index/index.wxml
  2. 35
      pages/index/index.wxss

2
pages/index/index.wxml

@ -148,7 +148,7 @@
bindtap="viewGoodsDetail"
wx:if="{{!item.isAd && filteredGoods.length > 0}}"
>
<view class="product-card">
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}">
<view class="product-image-wrapper">
<!-- 视频处理:根据mediaItems中的类型字段判断 -->
<video

35
pages/index/index.wxss

@ -1362,6 +1362,13 @@ video.product-media {
object-fit: fill;
}
/* 售空商品黑白效果 - 仅图片 */
.sold-out-grayscale .product-image-wrapper .product-media,
.sold-out-grayscale .product-image-wrapper image,
.sold-out-grayscale .product-image-wrapper video {
filter: grayscale(85%);
}
/* 促销标签 */
.promo-tag {
position: absolute;
@ -1393,8 +1400,32 @@ video.product-media {
.promo-tag.sold-out {
background: linear-gradient(135deg, #a92a2aff 0%, #a6a6a6 100%);
box-shadow: 0 2rpx 8rpx rgba(140, 140, 140, 0.3);
transform: skewX(-10deg);
left: -20rpx;
}
/* 售空水印样式 */
.sold-out-watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
z-index: 10;
transform: rotate(-15deg);
}
.sold-out-text {
font-size: 56rpx;
font-weight: 700;
color: #fff;
text-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.5);
letter-spacing: 8rpx;
border: 6rpx solid rgba(255, 255, 255, 0.8);
padding: 16rpx 40rpx;
border-radius: 8rpx;
}
/* 商品信息区域 */

Loading…
Cancel
Save