From 734b4b7ba3020c85933b97fa0021dc8fb3c265fd Mon Sep 17 00:00:00 2001 From: Trae AI Date: Fri, 26 Dec 2025 15:26:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E7=8E=BB=E7=92=83?= =?UTF-8?q?=E8=B4=A8=E6=84=9FUI=E5=92=8C=E7=80=91=E5=B8=83=E6=B5=81?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 实现左长右短左短右长交替瀑布流布局 - 商品卡片添加半透明毛玻璃效果和3D悬浮效果 - 将价格替换为货源情况、认证状态、议价状态标签 - 分类标签改为圆角矩形玻璃质感样式 - 搜索页面样式与首页保持一致 - 修复WXSS编译错误 --- pages/buyer/index.wxss | 355 +++++++++++++++++++++++++++--------- pages/index/index.js | 112 +++++++++++- pages/index/index.wxml | 97 +++++++--- pages/index/index.wxss | 303 ++++++++++++++++++++++-------- project.private.config.json | 2 +- 5 files changed, 676 insertions(+), 193 deletions(-) diff --git a/pages/buyer/index.wxss b/pages/buyer/index.wxss index 2d20f4f..a3f846f 100644 --- a/pages/buyer/index.wxss +++ b/pages/buyer/index.wxss @@ -1,93 +1,100 @@ /* pages/buyer/index.wxss */ +page { + height: 100vh; + display: flex; + flex-direction: column; + background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); + margin: 0; + padding: 0; +} + .container { min-height: 100vh; - background-color: #f5f5f5; + width: 100%; + display: flex; + flex-direction: column; + box-sizing: border-box; + background-color: #f8f8f8; + padding: 0; + margin: 0; } /* 搜索框样式 */ .search-bar { - position: fixed; - top: 0; - left: 0; - right: 0; - padding: 20rpx; - background-color: transparent; - z-index: 100; + width: 100%; + margin: 20rpx; + flex: 0 1 auto; box-sizing: border-box; } .search-container { display: flex; align-items: center; - border: 1rpx solid rgba(0, 0, 0, 0.08); - border-radius: 40rpx; - background-color: white; - padding: 0 30rpx; - margin: 0 auto; - width: 90%; - height: 80rpx; + width: 100%; + border-radius: 50rpx; + background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%); + padding: 6rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12); box-sizing: border-box; - transition: all 0.3s ease; -} - -.search-container:focus-within { - border-color: #07c160; - background-color: white; - box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1); + border: 1rpx solid rgba(22, 119, 255, 0.2); } .search-icon { - font-size: 30rpx; + margin: 0 15rpx; + font-size: 28rpx; color: #999; - margin-right: 20rpx; } .search-input { flex: 1; - font-size: 30rpx; + height: 70rpx; + font-size: 28rpx; color: #333; - background-color: transparent; + background: transparent; border: none; outline: none; - height: 60rpx; - line-height: 60rpx; } .search-input::placeholder { color: #999; - font-size: 30rpx; + font-size: 28rpx; } .clear-icon { - font-size: 45rpx; - color: #26ba20ff; - padding: 8rpx; - border-radius: 0; - background-color: transparent; - cursor: pointer; - transition: all 0.2s ease; -} - -.clear-icon:hover { - background-color: transparent; - color: #666; + font-size: 32rpx; + color: #999; + padding: 10rpx 20rpx; } -.title { - font-size: 36rpx; - font-weight: bold; - color: #333; - margin-bottom: 20rpx; - width: 100%; - text-align: center; +/* 商品列表样式 */ +.goods-list { + flex: 1; + padding: 20rpx 32rpx; + overflow-y: auto; + -webkit-overflow-scrolling: touch; } .card { - background: white; - border-radius: 12rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.82); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + border-radius: 20rpx; overflow: hidden; - margin-bottom: 20rpx; + box-shadow: + 0 6rpx 24rpx rgba(0, 0, 0, 0.15), + 0 0 0 1rpx rgba(0, 0, 0, 0.08), + inset 0 0 0 1rpx rgba(255, 255, 255, 0.95); + border: 2rpx solid rgba(200, 200, 200, 0.5); + margin-bottom: 16rpx; + transition: all 0.3s ease; +} + +.card:hover { + transform: translateY(-4rpx); + box-shadow: + 0 12rpx 32rpx rgba(0, 0, 0, 0.2), + 0 0 0 2rpx rgba(0, 0, 0, 0.1), + inset 0 0 0 1rpx rgba(255, 255, 255, 1); } .image-swiper { @@ -95,6 +102,175 @@ height: 100%; } +/* 商品卡片内部布局 */ +.goods-card-content { + display: flex; + width: 100%; + height: 200rpx; +} + +.goods-image-section { + width: 40%; + position: relative; + height: 200rpx; +} + +.goods-image { + width: 100%; + height: 100%; +} + +.goods-image-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #f5f5f5; + color: #999; + font-size: 24rpx; +} + +.image-page-indicator { + position: absolute; + bottom: 10rpx; + right: 10rpx; + background-color: rgba(0, 0, 0, 0.5); + color: white; + padding: 4rpx 12rpx; + border-radius: 15rpx; + font-size: 20rpx; +} + +.goods-info-section { + width: 60%; + display: flex; + flex-direction: column; + background: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(5rpx); + border-left: 1rpx solid rgba(240, 240, 240, 0.8); +} + +.goods-info-top { + flex: 0.6; + padding: 16rpx 20rpx; + display: flex; + flex-direction: column; +} + +.goods-name-row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8rpx; + margin-bottom: 8rpx; +} + +.supply-tag { + font-size: 20rpx; + padding: 4rpx 10rpx; + border-radius: 8rpx; + font-weight: 600; + white-space: nowrap; +} + +.supply-tag.spot { + background: rgba(82, 196, 26, 0.15); + color: #389e0d; + border: 1rpx solid rgba(82, 196, 26, 0.5); +} + +.supply-tag.presale { + background: rgba(255, 154, 28, 0.15); + color: #d46b08; + border: 1rpx solid rgba(255, 154, 28, 0.5); +} + +.auth-badge { + font-size: 20rpx; + padding: 4rpx 10rpx; + background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); + color: white; + clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); + font-weight: bold; +} + +.goods-name { + font-size: 30rpx; + font-weight: bold; + color: #333; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} + +.goods-spec { + font-size: 24rpx; + color: #888; + margin-top: 8rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.goods-info-bottom { + flex: 0.4; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20rpx; + border-top: 1rpx solid rgba(240, 240, 240, 0.5); +} + +.favorite-count { + display: flex; + align-items: center; + font-size: 24rpx; + color: #999; +} + +.favorite-count .count { + color: #d865d8; + font-weight: bold; + margin: 0 6rpx; +} + +.favorite-button { + font-size: 22rpx; + font-weight: 600; + width: 120rpx; + height: 50rpx; + border-radius: 25rpx; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + border: none; + transition: all 0.3s ease; +} + +.favorite-button.add { + color: #1677ff; + background: rgba(22, 119, 255, 0.15); + border: 1rpx solid rgba(22, 119, 255, 0.3); +} + +.favorite-button.add:hover { + background: rgba(22, 119, 255, 0.25); +} + +.favorite-button.add:active { + transform: scale(0.95); +} + +.favorite-button.canceled { + color: #ff6b6b; + background: rgba(255, 107, 107, 0.15); + border: 1rpx solid rgba(255, 107, 107, 0.3); +} + /* 弹窗样式 */ .modal-overlay { position: fixed; @@ -144,15 +320,15 @@ padding: 0; border-radius: 20rpx 20rpx 0 0; width: 100%; - height: 100vh; /* 改为全屏高度 */ - max-height: 100vh; /* 确保不超过屏幕高度 */ + height: 100vh; + max-height: 100vh; overflow: hidden; box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; - margin-bottom: 0; /* 导航栏已隐藏，无需间距 */ + margin-bottom: 0; z-index: 9999; - position: absolute; /* 确保弹窗位于遮罩层内 */ + position: absolute; top: 0; left: 0; } @@ -194,13 +370,13 @@ padding: 40rpx; overflow-y: auto; flex: 1; - height: calc(100vh - 120rpx); /* 减去头部高度，实现全屏滚动 */ - -webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */ - width: 100%; /* 确保宽度100% */ - box-sizing: border-box; /* 确保padding不影响宽度计算 */ + height: calc(100vh - 120rpx); + -webkit-overflow-scrolling: touch; + width: 100%; + box-sizing: border-box; } -.goods-image-section { +.goods-image-section-detail { margin-bottom: 40rpx; border-radius: 12rpx; overflow: hidden; @@ -217,17 +393,11 @@ height: 100%; } -.goods-image { - width: 100%; - height: 100%; - display: block; -} - -.goods-info-section { +.goods-info-section-detail { text-align: left; } -.goods-name { +.goods-name-detail { font-size: 36rpx; font-weight: 600; color: #2c3e50; @@ -304,28 +474,28 @@ } .call-phone-button { - background-color: white; - color: black; - font-size: 24rpx; - width: 120rpx; - height: 60rpx; - line-height: 60rpx; - padding: 0; - border-radius: 20rpx; - border: 1rpx solid #d9d9d9; - transition: all 0.3s; - white-space: nowrap; - text-align: center; + background-color: white; + color: black; + font-size: 24rpx; + width: 120rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0; + border-radius: 20rpx; + border: 1rpx solid #d9d9d9; + transition: all 0.3s; + white-space: nowrap; + text-align: center; } .call-phone-button:hover { - background-color: #f5f5f5; - transform: translateY(-1rpx); - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); + background-color: #f5f5f5; + transform: translateY(-1rpx); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .call-phone-button:active { - transform: translateY(0); + transform: translateY(0); } .goods-action-section { @@ -611,4 +781,17 @@ button:after { border-radius: 12rpx; padding: 24rpx 0; border: 2rpx solid #e5e5e5; -} \ No newline at end of file +} + +/* 已加载全部提示 */ +.load-complete { + display: flex; + justify-content: center; + align-items: flex-start; + padding-top: 20rpx; +} + +.load-complete text { + color: #999; + font-size: 26rpx; +} diff --git a/pages/index/index.js b/pages/index/index.js index 26c9e7c..76aafa0 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -31,6 +31,9 @@ Page({ // 商品相关 goods: [], filteredGoods: [], + groupedGoods: [], + leftColumnGoods: [], + rightColumnGoods: [], selectedCategory: '全部', loadingMore: false, hasMoreData: true, @@ -277,13 +280,14 @@ Page({ (reservedCountValue !== undefined && reservedCountValue !== null ? reservedCountValue : (reservationCountValue || 0)); - // 转换supplyStatus字段值 + // 货源情况 - 直接显示数据库字段值 let supplyStatusValue = product.supplyStatus || ''; - if (['平台货源', '三方认证'].includes(supplyStatusValue)) { - supplyStatusValue = '现货'; - } else if (supplyStatusValue === '三方未认证') { - supplyStatusValue = '预售'; - } + + // 认证状态 - 直接显示数据库的sourceType字段值 + let sourceTypeValue = product.sourceType || ''; + + // 处理议价状态 - 全部显示可议价 + let negotiateValue = '可议价'; // 处理图片URL，确保imageUrls字段存在且为数组 const imageUrls = product.imageUrls || product.images || []; @@ -302,7 +306,8 @@ Page({ product_contact: product.product_contact || '', contact_phone: product.contact_phone || '', supplyStatus: supplyStatusValue, - sourceType: product.sourceType || '', + sourceType: sourceTypeValue, + negotiateStatus: negotiateValue, isReserved: false, isFavorite: false, currentImageIndex: 0, @@ -329,6 +334,8 @@ Page({ // 应用筛选条件 const filteredGoods = this.applyFilters(updatedGoods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) // 计算是否还有更多数据 const totalGoods = res.total || 0; @@ -338,6 +345,9 @@ Page({ this.setData({ goods: updatedGoods, filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods, loadingMore: false, page: currentPage + 1, hasMoreData: hasMoreData, @@ -439,6 +449,75 @@ Page({ return filtered }, + // 分组商品用于交错布局（左长右短，左短右长交替） + groupGoodsForStaggeredLayout: function(goods) { + if (!goods || goods.length === 0) { + return [] + } + + const grouped = [] + const len = goods.length + + for (let i = 0; i < len; i += 2) { + const row = [] + + // 第一个商品：如果是偶数行(index为偶数)，则是长商品；如果是奇数行，则是短商品 + if (i < len) { + row.push({ + ...goods[i], + isLong: i % 2 === 0 // 偶数索引为长商品 + }) + } + + // 第二个商品：与第一个相反 + if (i + 1 < len) { + row.push({ + ...goods[i + 1], + isLong: i % 2 !== 0 // 奇数索引为长商品 + }) + } + + grouped.push(row) + } + + return grouped + }, + + // 瀑布流布局：将商品分配到左右两列 + // 规则：左长右短 -> 左短右长 交替排列 + // 偶数行(0,2,4...)：左长右短 + // 奇数行(1,3,5...)：左短右长 + distributeToColumns: function(goods) { + if (!goods || goods.length === 0) { + return { leftColumnGoods: [], rightColumnGoods: [] } + } + + const leftColumn = [] + const rightColumn = [] + const rowCount = Math.ceil(goods.length / 2) + + for (let i = 0; i < goods.length; i += 2) { + const currentRow = Math.floor(i / 2) + const isEvenRow = currentRow % 2 === 0 + + if (i < goods.length) { + leftColumn.push({ + ...goods[i], + isLong: isEvenRow // 偶数行左边为长，奇数行左边为短 + }) + } + + if (i + 1 < goods.length) { + rightColumn.push({ + ...goods[i + 1], + isLong: !isEvenRow // 偶数行右边为短，奇数行右边为长 + }) + } + } + + return { leftColumnGoods: leftColumn, rightColumnGoods: rightColumn } + }, + // 搜索输入 onSearchInput: function(e) { this.setData({ @@ -455,8 +534,13 @@ Page({ } const filteredGoods = this.applyFilters(this.data.goods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ - filteredGoods: filteredGoods + filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods }) }, @@ -484,8 +568,13 @@ Page({ } const filteredGoods = this.applyFilters(this.data.goods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods, showRegionPicker: false }) }, @@ -509,8 +598,13 @@ Page({ }) const filteredGoods = this.applyFilters(this.data.goods) + const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods) + const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods) this.setData({ - filteredGoods: filteredGoods + filteredGoods: filteredGoods, + groupedGoods: groupedGoods, + leftColumnGoods: leftColumnGoods, + rightColumnGoods: rightColumnGoods }) }, diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 51238c3..968629d 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -136,33 +136,80 @@ style="height: calc(100% - 60rpx);" > - - - - + + - {{item.supplyStatus || '现货'}} + bindtap="viewGoodsDetail" + > + + + + + + {{item.name}} + {{item.specification || '无'}} | {{item.yolk || '无'}} + + {{item.supplyStatus || ''}} + {{item.sourceType || ''}} + {{item.negotiateStatus}} + + + + {{item.region}} + + 已有{{item.reservedCount || 0}}人收藏 + + + + - - - {{item.name}} - {{item.specification || '无'}} | {{item.yolk || '无'}} - ¥{{item.price}} - - {{item.region}} - 已有{{item.reservedCount || 0}}人收藏 + + + + + + + + + {{item.name}} + {{item.specification || '无'}} | {{item.yolk || '无'}} + + {{item.supplyStatus || ''}} + {{item.sourceType || ''}} + {{item.negotiateStatus}} + + + + {{item.region}} + + 已有{{item.reservedCount || 0}}人收藏 + + + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 9919c57..06eb5d7 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -3,7 +3,7 @@ page { height: 100vh; display: flex; flex-direction: column; - background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%); margin: 0; padding: 0; } @@ -16,7 +16,7 @@ page { display: flex; flex-direction: column; box-sizing: border-box; - background-color: #f5f7fa; + background-color: #f8f8f8; } /* 标题样式 */ @@ -192,70 +192,53 @@ page { .category-scroll { display: flex; - gap: 15rpx; - padding: 8rpx 15rpx; + gap: 16rpx; + padding: 12rpx 16rpx; white-space: nowrap; overflow-x: auto; - background-color: transparent; - border-radius: 10rpx; - box-shadow: none; + background: rgba(255, 255, 255, 0.5); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + border-radius: 40rpx; + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); + border: 1rpx solid rgba(255, 255, 255, 0.5); } -/* 蛋形样式 - 玻璃质感 */ .egg-item { position: relative; - width: 80rpx; - height: 100rpx; - background-color: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10rpx); - border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; + padding: 16rpx 28rpx; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(8rpx); + -webkit-backdrop-filter: blur(8rpx); + border-radius: 30rpx; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); - border: 1rpx solid rgba(255, 255, 255, 0.5); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); + border: 1rpx solid rgba(200, 200, 200, 0.5); flex-shrink: 0; } -/* 不同品种的颜色 */ -.egg-item:nth-child(2) { /* 粉壳 */ - background-color: rgba(255, 182, 193, 0.3); - border-color: rgba(255, 182, 193, 0.7); -} - -.egg-item:nth-child(3) { /* 红壳 */ - background-color: rgba(255, 105, 180, 0.3); - border-color: rgba(255, 105, 180, 0.7); -} - -.egg-item:nth-child(4) { /* 绿壳 */ - background-color: rgba(144, 238, 144, 0.3); - border-color: rgba(144, 238, 144, 0.7); -} - -.egg-item:nth-child(5) { /* 白壳 */ - background-color: rgba(245, 245, 245, 0.5); - border-color: rgba(245, 245, 245, 0.8); -} - .egg-item.active { - background-color: rgba(22, 119, 255, 0.4); - border-color: rgba(22, 119, 255, 0.8); - box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.3); - transform: scale(1.05); + background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%); + color: white; + box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.35); + border: 1rpx solid transparent; + transform: translateY(-2rpx); } .egg-inner { - font-size: 22rpx; - color: #333; - font-weight: bold; + font-size: 26rpx; + color: #555; + font-weight: 600; text-align: center; + white-space: nowrap; } .egg-item.active .egg-inner { - color: #1677ff; - font-size: 24rpx; + color: #ffffff; + font-size: 28rpx; } /* 侧边栏按钮样式 - 白色半透明毛玻璃质感 */ @@ -450,25 +433,105 @@ page { } .goods-list-container { - display: flex; - flex-wrap: wrap; - gap: 20rpx; - justify-content: flex-start; + padding: 20rpx 24rpx; padding-bottom: 20rpx; } +.waterfall-container { + display: flex; + gap: 32rpx; + width: 100%; +} + +.waterfall-column { + flex: 1; + display: flex; + flex-direction: column; + gap: 16rpx; +} + +.left-column { + align-items: flex-start; +} + +.right-column { + align-items: flex-end; +} + .goods-item { - width: calc((100% - 20rpx) / 2); - background-color: #f9f9f9; - border-radius: 10rpx; + width: 100%; + border-radius: 24rpx; overflow: hidden; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); - transition: all 0.3s ease; + transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + transform-style: preserve-3d; + perspective: 1000rpx; +} + +.goods-card { + width: 100%; + border-radius: 20rpx; + overflow: hidden; + background: rgba(255, 255, 255, 0.82); + backdrop-filter: blur(10rpx); + -webkit-backdrop-filter: blur(10rpx); + box-shadow: + 0 6rpx 24rpx rgba(0, 0, 0, 0.15), + 0 0 0 1rpx rgba(0, 0, 0, 0.08), + inset 0 0 0 1rpx rgba(255, 255, 255, 0.95); + border: 2rpx solid rgba(200, 200, 200, 0.5); + display: flex; + flex-direction: column; } .goods-item:hover { - box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); - transform: translateY(-2rpx); + transform: translateY(-8rpx); + box-shadow: + 0 16rpx 40rpx rgba(0, 0, 0, 0.22), + 0 0 0 2rpx rgba(0, 0, 0, 0.12), + inset 0 0 0 1rpx rgba(255, 255, 255, 1); +} + +.goods-item:active { + transform: translateY(-4rpx); +} + +.goods-item.long-card { + margin-bottom: 24rpx; +} + +.goods-item.long-card .goods-info { + min-height: 200rpx; + padding: 24rpx; +} + +.goods-item.short-card { + margin-bottom: 16rpx; +} + +.goods-item.short-card .goods-info { + min-height: 140rpx; + padding: 16rpx; +} + +.goods-item.short-card .goods-name { + -webkit-line-clamp: 1; + min-height: 40rpx; +} + +.goods-item.short-card .goods-spec { + margin-bottom: 8rpx; +} + +.goods-item.short-card .goods-price { + font-size: 32rpx; +} + +.left-column .goods-item { + transform: translateZ(10rpx); +} + +.right-column .goods-item { + transform: translateZ(-10rpx); } .goods-image-container { @@ -476,6 +539,7 @@ page { width: 100%; padding-bottom: 100%; overflow: hidden; + background: rgba(0, 0, 0, 0.05); } .goods-image { @@ -485,64 +549,159 @@ page { width: 100%; height: 100%; background-color: #eee; + transition: all 0.4s ease; +} + +.goods-item:hover .goods-image { + transform: scale(1.05); } .goods-tag { position: absolute; - top: 10rpx; - left: 10rpx; - background-color: rgba(255, 90, 90, 0.8); + top: 16rpx; + left: 16rpx; + background: rgba(255, 90, 90, 0.85); + backdrop-filter: blur(8rpx); color: white; - font-size: 20rpx; - padding: 5rpx 10rpx; - border-radius: 15rpx; + font-size: 22rpx; + padding: 8rpx 16rpx; + border-radius: 20rpx; font-weight: bold; + box-shadow: 0 2rpx 8rpx rgba(255, 90, 90, 0.3); + border: 1rpx solid rgba(255, 255, 255, 0.3); } .goods-info { - padding: 15rpx; + padding: 20rpx; + flex: 1; + display: flex; + flex-direction: column; + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10rpx); + border-top: 1rpx solid rgba(255, 255, 255, 0.2); } .goods-name { - font-size: 26rpx; + font-size: 28rpx; font-weight: bold; color: #333; - margin-bottom: 10rpx; + margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 60rpx; + line-height: 1.4; + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-spec { - font-size: 22rpx; - color: #999; - margin-bottom: 10rpx; + font-size: 24rpx; + color: #666; + margin-bottom: 12rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); } .goods-price { - font-size: 32rpx; + font-size: 36rpx; font-weight: bold; color: #ff4d4f; - margin-bottom: 10rpx; + margin-bottom: 12rpx; + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); +} + +.goods-status-row { + display: flex; + flex-wrap: nowrap; + gap: 8rpx; + margin-bottom: 12rpx; +} + +.status-tag { + font-size: 20rpx; + padding: 4rpx 8rpx; + border-radius: 4rpx; + font-weight: 600; + display: inline-block; + white-space: nowrap; + flex-shrink: 0; +} + +.status-tag.supply-spot { + background: rgba(82, 196, 26, 0.15); + color: #389e0d; + border: 1rpx solid rgba(82, 196, 26, 0.5); +} + +.status-tag.supply-presale { + background: rgba(255, 154, 28, 0.15); + color: #d46b08; + border: 1rpx solid rgba(255, 154, 28, 0.5); +} + +.status-tag.auth-verified { + background: rgba(24, 144, 255, 0.15); + color: #096dd9; + border: 1rpx solid rgba(24, 144, 255, 0.5); +} + +.status-tag.auth-unverified { + background: rgba(140, 140, 140, 0.15); + color: #595959; + border: 1rpx solid rgba(140, 140, 140, 0.5); +} + +.status-tag.negotiate-yes { + background: rgba(114, 46, 209, 0.15); + color: #722ed1; + border: 1rpx solid rgba(114, 46, 209, 0.5); +} + +.status-tag.source-yes { + background: rgba(24, 144, 255, 0.15); + color: #096dd9; + border: 1rpx solid rgba(24, 144, 255, 0.5); +} + +.status-tag.negotiate-no { + background: rgba(180, 180, 180, 0.15); + color: #595959; + border: 1rpx solid rgba(180, 180, 180, 0.5); } .goods-footer { display: flex; justify-content: space-between; - font-size: 20rpx; - color: #999; + font-size: 22rpx; + color: #888; + margin-top: auto; + padding-top: 12rpx; + border-top: 1rpx solid rgba(255, 255, 255, 0.2); + text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8); +} + +.goods-region-bg { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(4rpx); + -webkit-backdrop-filter: blur(4rpx); + border-radius: 4rpx; + padding: 4rpx 12rpx; + border: 1.5rpx solid #1e3a6e; + box-shadow: 0 1rpx 3rpx rgba(30, 58, 110, 0.08); } .goods-region { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: #1e3a6e; + font-weight: 600; + font-size: 23rpx; + letter-spacing: 0.5rpx; } .goods-reserved { diff --git a/project.private.config.json b/project.private.config.json index d1719b1..699244e 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -1,6 +1,6 @@ { "libVersion": "3.10.3", - "projectname": "New2", + "projectname": "Mini-New2", "setting": { "urlCheck": false, "coverView": true,