Browse Source

优化广告轮播图样式和售空商品效果

pull/19/head
Trae AI 2 months ago
parent
commit
2cecd93020
  1. 4
      pages/index/index.wxml
  2. 41
      pages/index/index.wxss
  3. 2
      project.private.config.json

4
pages/index/index.wxml

@ -239,7 +239,9 @@
bindtap="viewGoodsDetail" bindtap="viewGoodsDetail"
wx:if="{{!item.isAd}}" wx:if="{{!item.isAd}}"
> >
<view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}"> <view class="product-card {{item.status === 'sold_out' ? 'sold-out-grayscale' : ''}}" style="position: relative;">
<!-- 售空商品白色覆盖层 - 覆盖整个卡片 -->
<view wx:if="{{item.status === 'sold_out'}}" class="sold-out-overlay-full"></view>
<view class="product-image-wrapper"> <view class="product-image-wrapper">
<!-- 视频处理:根据mediaItems中的类型字段判断 --> <!-- 视频处理:根据mediaItems中的类型字段判断 -->
<video <video

41
pages/index/index.wxss

@ -70,13 +70,15 @@ page {
/* 广告轮播图样式 */ /* 广告轮播图样式 */
.ad-carousel { .ad-carousel {
width: 100%; width: 100%;
margin: 0; margin: 0 auto 16rpx;
overflow: hidden; overflow: hidden;
border-radius: 0; border-radius: 12rpx;
box-shadow: none; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
height: 320rpx; height: 180rpx;
position: relative; position: relative;
z-index: 1000; z-index: 1000;
max-width: 850rpx;
box-sizing: border-box;
} }
.ad-swiper { .ad-swiper {
@ -102,10 +104,12 @@ page {
max-width: 850rpx; max-width: 850rpx;
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; background: #ffffff;
margin: 0 auto; margin: 0 auto 16rpx;
gap: 5rpx; gap: 5rpx;
border-radius: 12rpx; border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1001;
} }
.function-btn { .function-btn {
@ -1770,16 +1774,32 @@ video.product-media {
/* 售空商品半透明覆盖层 */ /* 售空商品白色覆盖层 - 仅覆盖图片 */
.sold-out-overlay { .sold-out-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.5);
z-index: 2; z-index: 2;
border-radius: 16rpx; border-radius: 16rpx;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* 售空商品白色覆盖层 - 覆盖整个卡片 */
.sold-out-overlay-full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
z-index: 15;
border-radius: 16rpx;
backdrop-filter: none;
-webkit-backdrop-filter: none;
} }
/* 促销标签 */ /* 促销标签 */
@ -1791,7 +1811,7 @@ video.product-media {
font-size: 20rpx; font-size: 20rpx;
color: #fff; color: #fff;
border-radius: 0 0 12rpx 0; border-radius: 0 0 12rpx 0;
z-index: 3; z-index: 20;
font-weight: 600; font-weight: 600;
} }
@ -2027,7 +2047,8 @@ video.product-media {
.ad-image { .ad-image {
width: 100%; width: 100%;
height: 350rpx; height: 100%;
border-radius: 12rpx;
} }
/* 半高图片广告 */ /* 半高图片广告 */

2
project.private.config.json

@ -1,6 +1,6 @@
{ {
"libVersion": "3.10.3", "libVersion": "3.10.3",
"projectname": "ly2266", "projectname": "Mini-Program",
"setting": { "setting": {
"urlCheck": false, "urlCheck": false,
"coverView": true, "coverView": true,

Loading…
Cancel
Save