/* pages/compare_price/index.wxss */ /* 商品卡片样式 */ /* 瀑布流容器 */ .waterfall-container { display: flex; gap: 16rpx; width: 100%; padding: 0 10rpx; box-sizing: border-box; } /* 瀑布流列 */ .waterfall-column { flex: 1; display: flex; flex-direction: column; gap: 16rpx; } /* 瀑布流商品项 */ .waterfall-item { border-radius: 16rpx; overflow: hidden; transition: all 0.3s ease; } .waterfall-item:active { transform: scale(0.98); opacity: 0.9; } /* 商品卡片 */ .product-card { width: 100%; height: auto; min-height: 450rpx; background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08); transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; } .product-card:active { transform: scale(0.98); box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1); } /* 商品图片区域 */ .product-image-wrapper { position: relative; width: 100%; height: 320rpx; background: #f5f5f5; border-radius: 16rpx 16rpx 0 0; overflow: hidden; } /* 统一媒体元素样式 */ .product-media { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; background-color: #f5f5f5; } /* 售空商品白色覆盖层 - 覆盖整个卡片 */ .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; } /* 促销标签 */ .promo-tag { position: absolute; top: 0; left: 0; padding: 6rpx 12rpx; font-size: 20rpx; color: #fff; border-radius: 0 0 12rpx 0; z-index: 20; font-weight: 600; } .promo-tag.presale { background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%); box-shadow: 0 2rpx 8rpx rgba(255, 107, 0, 0.3); } .promo-tag.in-stock { background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%); box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3); } .promo-tag.sold-out { background: linear-gradient(135deg, #a92a2aff 0%, #a6a6a6 100%); box-shadow: 0 2rpx 8rpx rgba(140, 140, 140, 0.3); } /* 商品信息区域 */ .product-info { padding: 16rpx; height: auto; min-height: 210rpx; display: flex; flex-direction: column; justify-content: space-between; gap: 10rpx; box-sizing: border-box; } /* 第一行布局:货源类型 | 产品名称 | 货源描述 */ .product-first-row { display: block; width: 100%; line-height: 1.4; } /* 商品标题 */ .product-title { font-size: 26rpx; color: #000000; font-weight: 700; display: inline; margin-right: 8rpx; } /* 商品描述 */ .product-description { font-size: 26rpx; color: #000000; font-weight: 700; display: inline; word-break: break-word; } /* 状态标签样式 */ .status-tag { display: inline; margin-right: 8rpx; font-size: 20rpx; padding: 4rpx 8rpx; border-radius: 4rpx; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .status-tag.source-third { background: rgba(24, 144, 255, 0.15); color: #096dd9; border: 1rpx solid rgba(24, 144, 255, 0.5); } .status-tag.source-platform { background: rgba(82, 196, 26, 0.15); color: #389e0d; border: 1rpx solid rgba(82, 196, 26, 0.5); } .status-tag.source-unverified { background: rgba(255, 122, 69, 0.15); color: #ff7a45; border: 1rpx solid rgba(255, 122, 69, 0.5); } .status-tag.item-count { background: rgba(82, 196, 26, 0.15); color: #389e0d; border: 1rpx solid rgba(82, 196, 26, 0.5); } /* 商品库存行 */ .product-stock-row { display: flex; align-items: center; } /* 销量和地区 - 淘宝风格 */ .product-meta { display: flex; justify-content: space-between; align-items: center; font-size: 22rpx; color: #999; margin-top: 8rpx; } .sales-count { color: #999; background: rgba(255, 77, 79, 0.08); padding: 4rpx 10rpx; border-radius: 6rpx; font-size: 20rpx; font-weight: 500; } .product-price { font-size: 26rpx; font-weight: bold; color: #ff6b81; }