diff --git a/images/OIP-C.png b/images/OIP-C.png new file mode 100644 index 0000000..0ec8bd1 Binary files /dev/null and b/images/OIP-C.png differ diff --git a/pages/evaluate2/one.js b/pages/evaluate2/one.js index a8f3cd8..7585aa0 100644 --- a/pages/evaluate2/one.js +++ b/pages/evaluate2/one.js @@ -6,7 +6,13 @@ Page({ error: '', categories: [], selectedCategory: '', - showOneKeyLoginModal: false // 是否显示登录弹窗 + showOneKeyLoginModal: false, // 是否显示登录弹窗 + categoryDescriptions: { + '粉壳': '粉壳蛋由白壳与褐壳蛋鸡杂交而成,蛋壳呈粉红色,表面清洁带白霜。其蛋清浓稠、蛋黄大而饱满,营养丰富且口感细腻', + '绿壳': '绿壳蛋是我国特有珍稀鸡种所产的蛋,具有"五黑一绿"特点(黑毛、黑皮、黑骨、黑内脏,产绿壳蛋)。其蛋黄大、蛋清稠,氨基酸含量比普通鸡蛋高5-10倍,被誉为"保健蛋"', + '褐壳': '褐壳蛋是我国市场上最常见的鸡蛋类型,由洛岛红、新汉夏等褐壳蛋鸡品种产出。蛋壳呈褐色至深褐色,质地厚实耐运输,蛋黄比例大,适合家庭日常烹饪。常见品种有海兰褐、罗曼褐等。', + '土鸡蛋': '土鸡蛋指农家散养鸡在自然环境中觅食所产的蛋,个头较小、蛋壳较薄,蛋清粘稠、蛋黄饱满。口感风味浓郁。' + } }, onLoad(options) { let productName = ''; diff --git a/pages/evaluate2/one.wxml b/pages/evaluate2/one.wxml index 928a89c..10a836c 100644 --- a/pages/evaluate2/one.wxml +++ b/pages/evaluate2/one.wxml @@ -51,21 +51,99 @@ + + + + {{item === '绿壳' ? '珍稀品种' : item === '粉壳' ? '杂交品种' : item === '褐壳' ? '常见品种' : '农家散养'}} + + + {{item}}系列 + + + + + + + + + - 点击选择此类型查看相关商品 - - {{item}} - - + {{item}}鸡蛋 + {{categoryDescriptions[item] || '点击选择此类型查看相关商品'}} + + + + + + 🧬 + 杂交品种 + + + 🌸 + 粉红蛋壳 + + + 👅 + 口感细腻 + + + + + 🍃 + 五黑一绿 + + + 💪 + 高氨基酸 + + 🏥 + 保健功效 + + + + + 🔥 + 常见品种 + + + 📦 + 耐运输 + + + 🍳 + 日常烹饪 + + + + + 🌾 + 自然觅食 + + + 🥚 + 蛋黄饱满 + + + 🥘 + 风味浓郁 + + + + + + diff --git a/pages/evaluate2/one.wxss b/pages/evaluate2/one.wxss index 3ee7ac0..3d76444 100644 --- a/pages/evaluate2/one.wxss +++ b/pages/evaluate2/one.wxss @@ -404,109 +404,284 @@ box-sizing: border-box; } +/* 卡片基础框架 */ .category-card { background: #ffffff; - border-radius: 12rpx; - padding: 24rpx; + border-radius: 20rpx; + padding: 0 32rpx 32rpx; cursor: pointer; - min-height: 160rpx; - margin-bottom: 20rpx; - border: 1rpx solid #f0f0f0; + min-height: 600rpx; + margin-bottom: 32rpx; transition: all 0.3s ease; width: 100%; box-sizing: border-box; + box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.08); + position: relative; + overflow: hidden; } .category-card:hover { - transform: translateY(-2rpx); - box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); - border-color: #e0e0e0; + transform: translateY(-8rpx); + box-shadow: 0 12rpx 24rpx rgba(0,0,0,0.12); } -.card-content { - width: 100%; +/* 品类专属背景 */ +.pink-shell-card { + background: linear-gradient(135deg, #FECDD3 0%, #FDE2E2 100%); } -.card-desc { +.green-shell-card { + background: linear-gradient(135deg, #D1FAE5 0%, #E6F7EE 100%); +} + +.brown-shell-card { + background: linear-gradient(135deg, #FEF3C7 0%, #FFF9E6 100%); +} + +.free-range-card { + background: linear-gradient(135deg, #FEF3C7 0%, #FFF9E6 100%); +} + +/* 标签系统 */ +.card-labels { + position: absolute; + top: 20rpx; + left: 20rpx; + right: 20rpx; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 2; +} + +.feature-label { + background: rgba(255, 255, 255, 0.9); + padding: 8rpx 16rpx; + border-radius: 20rpx; + display: flex; + align-items: center; + box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05); +} + +.feature-label-text { font-size: 20rpx; - color: #999999; - text-align: right; - margin-bottom: 16rpx; - line-height: 1.4; + font-weight: 500; + color: #1E293B; } -.card-body { +.category-label { + background: rgba(0, 0, 0, 0.7); + padding: 8rpx 16rpx; + border-radius: 20rpx; display: flex; align-items: center; - justify-content: space-between; + box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); } -.category-name { - font-size: 30rpx; +.category-label-text { + font-size: 20rpx; font-weight: 500; - color: #333333; - line-height: 1.4; - word-break: break-word; - flex: 1; + color: #FFFFFF; } -.category-image { - width: 100rpx; - height: 100rpx; - border-radius: 4rpx; +/* 产品图片区域 */ +.product-image-container { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 300rpx; + display: flex; + justify-content: center; + align-items: flex-start; + z-index: 1; overflow: hidden; - background: #f5f5f5; - border: 1rpx solid #e0e0e0; } -.category-img { +.product-image { width: 100%; height: 100%; + border-radius: 0; object-fit: cover; + border: none; + box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.12); + transform: none; +} + +/* 文字信息区域 */ +.card-content { + width: 100%; + display: flex; + flex-direction: column; + gap: 16rpx; + position: relative; + z-index: 2; + padding-top: 320rpx; + padding-bottom: 20rpx; +} + +.product-title { + font-size: 36rpx; + font-weight: 700; + color: #1E293B; + line-height: 48rpx; + text-align: center; + margin-bottom: 8rpx; } -/* 响应式设计 - 分类区域 */ +.product-description { + font-size: 24rpx; + font-weight: 400; + color: #64748B; + line-height: 36rpx; + text-align: center; + margin-bottom: 16rpx; + padding: 0 16rpx; +} + +/* 卖点标签 */ +.selling-points { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12rpx; + margin: 16rpx 0 24rpx; +} + +.selling-point { + display: flex; + align-items: center; + background: rgba(255, 255, 255, 0.8); + padding: 8rpx 16rpx; + border-radius: 20rpx; + box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05); +} + +.selling-point-icon { + font-size: 20rpx; + margin-right: 8rpx; +} + +.selling-point-text { + font-size: 20rpx; + font-weight: 400; + color: #475569; +} + +/* 按钮区域 */ +.card-footer { + display: flex; + justify-content: center; + margin-top: 16rpx; +} + +.select-button { + background: #4A90E2; + color: #FFFFFF; + border: none; + border-radius: 24rpx; + padding: 12rpx 32rpx; + font-size: 24rpx; + font-weight: 600; + display: flex; + align-items: center; + gap: 8rpx; + box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3); + transition: all 0.3s ease; +} + +.select-button:hover { + background: #3B82F6; + transform: translateY(-2rpx); + box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.4); +} + +.select-button-icon { + font-size: 20rpx; + font-weight: 600; +} + +.select-button-text { + font-size: 24rpx; + font-weight: 600; +} + +/* 响应式设计 */ @media (max-width: 750rpx) { .category-card { - padding: 20rpx; - min-height: 140rpx; - margin-bottom: 16rpx; + padding: 0 24rpx 24rpx; + min-height: 550rpx; + margin-bottom: 24rpx; } - .card-desc { - font-size: 18rpx; - margin-bottom: 12rpx; + .product-image-container { + height: 280rpx; } - .category-name { - font-size: 28rpx; + .card-content { + padding-top: 300rpx; + } + + .product-title { + font-size: 32rpx; + line-height: 40rpx; + } + + .product-description { + font-size: 22rpx; + line-height: 32rpx; + } + + .selling-point { + padding: 6rpx 12rpx; + } + + .selling-point-text { + font-size: 18rpx; } - .category-image { - width: 90rpx; - height: 90rpx; + .select-button { + padding: 10rpx 28rpx; + font-size: 22rpx; } } @media (max-width: 414rpx) { .category-card { - padding: 16rpx; - min-height: 120rpx; - margin-bottom: 12rpx; + padding: 0 20rpx 20rpx; + min-height: 500rpx; + margin-bottom: 20rpx; } - .card-desc { - font-size: 16rpx; - margin-bottom: 10rpx; + .product-image-container { + height: 240rpx; } - .category-name { - font-size: 24rpx; + .card-content { + padding-top: 260rpx; + } + + .product-title { + font-size: 28rpx; + line-height: 36rpx; + } + + .product-description { + font-size: 20rpx; + line-height: 28rpx; + } + + .selling-point { + padding: 4rpx 10rpx; + } + + .selling-point-text { + font-size: 16rpx; } - .category-image { - width: 80rpx; - height: 80rpx; + .select-button { + padding: 8rpx 24rpx; + font-size: 20rpx; } } diff --git a/pages/goods-detail/goods-detail.wxml b/pages/goods-detail/goods-detail.wxml index 2b98088..264d60b 100644 --- a/pages/goods-detail/goods-detail.wxml +++ b/pages/goods-detail/goods-detail.wxml @@ -40,7 +40,7 @@ wx:if="{{item.type === 'video'}}" src="{{item.url}}" class="slider-media" - mode="aspectFill" + mode="aspectFit" show-center-play-btn="{{true}}" show-play-btn="{{false}}" controls="{{true}}" @@ -51,7 +51,7 @@ show-mute-btn="{{true}}" enable-progress-gesture="{{true}}" enable-play-gesture="{{true}}" - object-fit="fill" + object-fit="contain" poster="" > @@ -340,14 +340,14 @@ wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}" class="product-media" src="{{item.mediaItems[0].url}}" - mode="aspectFill" + mode="aspectFit" show-center-play-btn="{{true}}" show-play-btn="{{false}}" controls="{{true}}" autoplay="{{true}}" loop="{{true}}" muted="{{true}}" - object-fit="fill" + object-fit="contain" poster="" > @@ -394,14 +394,14 @@ wx:if="{{item.mediaItems && item.mediaItems.length > 0 && item.mediaItems[0].type === 'video'}}" class="product-media" src="{{item.mediaItems[0].url}}" - mode="aspectFill" + mode="aspectFit" show-center-play-btn="{{true}}" show-play-btn="{{false}}" controls="{{true}}" autoplay="{{true}}" loop="{{true}}" muted="{{true}}" - object-fit="fill" + object-fit="contain" poster="" > diff --git a/pages/goods-detail/goods-detail.wxss b/pages/goods-detail/goods-detail.wxss index 17b17a9..d8ccdbc 100644 --- a/pages/goods-detail/goods-detail.wxss +++ b/pages/goods-detail/goods-detail.wxss @@ -130,12 +130,9 @@ /* 视频样式增强 */ video.slider-media { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - object-fit: fill; + width: 100%; + height: 100%; + object-fit: contain; z-index: 1; }