修改商品详情的视频格式

pages/evaluate2/one.js

@@ -6,7 +6,13 @@ Page({
     error: '',
     categories: [],
     selectedCategory: '',
-    showOneKeyLoginModal: false // 是否显示登录弹窗
+    showOneKeyLoginModal: false, // 是否显示登录弹窗
+    categoryDescriptions: {
+      '粉壳': '粉壳蛋由白壳与褐壳蛋鸡杂交而成，蛋壳呈粉红色，表面清洁带白霜。其蛋清浓稠、蛋黄大而饱满，营养丰富且口感细腻',
+      '绿壳': '绿壳蛋是我国特有珍稀鸡种所产的蛋，具有"五黑一绿"特点（黑毛、黑皮、黑骨、黑内脏，产绿壳蛋）。其蛋黄大、蛋清稠，氨基酸含量比普通鸡蛋高5-10倍，被誉为"保健蛋"',
+      '褐壳': '褐壳蛋是我国市场上最常见的鸡蛋类型，由洛岛红、新汉夏等褐壳蛋鸡品种产出。蛋壳呈褐色至深褐色，质地厚实耐运输，蛋黄比例大，适合家庭日常烹饪。常见品种有海兰褐、罗曼褐等。',
+      '土鸡蛋': '土鸡蛋指农家散养鸡在自然环境中觅食所产的蛋，个头较小、蛋壳较薄，蛋清粘稠、蛋黄饱满。口感风味浓郁。'
+    }
   },
   onLoad(options) {
     let productName = '';

pages/evaluate2/one.wxml

@@ -51,21 +51,99 @@
         <view 
           wx:for="{{categories}}" 
           wx:key="item" 
-          class="category-card"
+          class="category-card {{item === '粉壳' ? 'pink-shell-card' : item === '绿壳' ? 'green-shell-card' : item === '褐壳' ? 'brown-shell-card' : 'free-range-card'}}"
           data-category="{{item}}"
           bindtap="selectCategory"
         >
+          <!-- 标签系统 -->
+          <view class="card-labels">
+            <view class="feature-label">
+              <text class="feature-label-text">{{item === '绿壳' ? '珍稀品种' : item === '粉壳' ? '杂交品种' : item === '褐壳' ? '常见品种' : '农家散养'}}</text>
+            </view>
+            <view class="category-label">
+              <text class="category-label-text">{{item}}系列</text>
+            </view>
+          </view>
+          
+          <!-- 产品图片区域 -->
+          <view class="product-image-container">
+            <image 
+              src="../../images/OIP-C.png" 
+              mode="aspectFill"
+              class="product-image"
+            />
+          </view>
+          
+          <!-- 文字信息区域 -->
           <view class="card-content">
-            <text class="card-desc">点击选择此类型查看相关商品</text>
+            <text class="product-title">{{item}}鸡蛋</text>
-            <view class="card-body">
+            <text class="product-description">{{categoryDescriptions[item] || '点击选择此类型查看相关商品'}}</text>
-              <text class="category-name">{{item}}</text>
+            
-              <view class="category-image">
+            <!-- 卖点标签 -->
-                <image 
+            <view class="selling-points">
-                  src="https://via.placeholder.com/120x120?text={{item}}" 
+              <!-- 粉壳鸡蛋卖点 -->
-                  mode="aspectFill"
+              <view wx:if="{{item === '粉壳'}}" class="selling-point">
-                  class="category-img"
+                <text class="selling-point-icon">🧬</text>
-                />
+                <text class="selling-point-text">杂交品种</text>
+              </view>
+              <view wx:if="{{item === '粉壳'}}" class="selling-point">
+                <text class="selling-point-icon">🌸</text>
+                <text class="selling-point-text">粉红蛋壳</text>
+              </view>
+              <view wx:if="{{item === '粉壳'}}" class="selling-point">
+                <text class="selling-point-icon">👅</text>
+                <text class="selling-point-text">口感细腻</text>
+              </view>
+              
+              <!-- 绿壳鸡蛋卖点 -->
+              <view wx:if="{{item === '绿壳'}}" class="selling-point">
+                <text class="selling-point-icon">🍃</text>
+                <text class="selling-point-text">五黑一绿</text>
+              </view>
+              <view wx:if="{{item === '绿壳'}}" class="selling-point">
+                <text class="selling-point-icon">💪</text>
+                <text class="selling-point-text">高氨基酸</text>
               </view>
+              <view wx:if="{{item === '绿壳'}}" class="selling-point">
+                <text class="selling-point-icon">🏥</text>
+                <text class="selling-point-text">保健功效</text>
+              </view>
+              
+              <!-- 褐壳鸡蛋卖点 -->
+              <view wx:if="{{item === '褐壳'}}" class="selling-point">
+                <text class="selling-point-icon">🔥</text>
+                <text class="selling-point-text">常见品种</text>
+              </view>
+              <view wx:if="{{item === '褐壳'}}" class="selling-point">
+                <text class="selling-point-icon">📦</text>
+                <text class="selling-point-text">耐运输</text>
+              </view>
+              <view wx:if="{{item === '褐壳'}}" class="selling-point">
+                <text class="selling-point-icon">🍳</text>
+                <text class="selling-point-text">日常烹饪</text>
+              </view>
+              
+              <!-- 土鸡蛋卖点 -->
+              <view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
+                <text class="selling-point-icon">🌾</text>
+                <text class="selling-point-text">自然觅食</text>
+              </view>
+              <view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
+                <text class="selling-point-icon">🥚</text>
+                <text class="selling-point-text">蛋黄饱满</text>
+              </view>
+              <view wx:if="{{item === '土鸡蛋'}}" class="selling-point">
+                <text class="selling-point-icon">🥘</text>
+                <text class="selling-point-text">风味浓郁</text>
+              </view>
+            </view>
+            
+            <!-- 按钮区域 -->
+            <view class="card-footer">
+              <button class="select-button" bindtap="selectCategory" data-category="{{item}}">
+                <text class="select-button-icon">→</text>
+                <text class="select-button-text">选择</text>
+              </button>
             </view>
           </view>
         </view>

pages/evaluate2/one.wxss

@@ -404,109 +404,284 @@
   box-sizing: border-box;
 }
 
+/* 卡片基础框架 */
 .category-card {
   background: #ffffff;
-  border-radius: 12rpx;
+  border-radius: 20rpx;
-  padding: 24rpx;
+  padding: 0 32rpx 32rpx;
   cursor: pointer;
-  min-height: 160rpx;
+  min-height: 600rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 32rpx;
-  border: 1rpx solid #f0f0f0;
   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);
+  transform: translateY(-8rpx);
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  box-shadow: 0 12rpx 24rpx rgba(0,0,0,0.12);
-  border-color: #e0e0e0;
 }
 
-.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;
+  font-weight: 500;
-  text-align: right;
+  color: #1E293B;
-  margin-bottom: 16rpx;
-  line-height: 1.4;
 }
 
-.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 {
+.category-label-text {
-  font-size: 30rpx;
+  font-size: 20rpx;
   font-weight: 500;
-  color: #333333;
+  color: #FFFFFF;
-  line-height: 1.4;
-  word-break: break-word;
-  flex: 1;
 }
 
-.category-image {
+/* 产品图片区域 */
-  width: 100rpx;
+.product-image-container {
-  height: 100rpx;
+  position: absolute;
-  border-radius: 4rpx;
+  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;
+    padding: 0 24rpx 24rpx;
-    min-height: 140rpx;
+    min-height: 550rpx;
-    margin-bottom: 16rpx;
+    margin-bottom: 24rpx;
   }
   
-  .card-desc {
+  .product-image-container {
-    font-size: 18rpx;
+    height: 280rpx;
-    margin-bottom: 12rpx;
   }
   
-  .category-name {
+  .card-content {
-    font-size: 28rpx;
+    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 {
+  .select-button {
-    width: 90rpx;
+    padding: 10rpx 28rpx;
-    height: 90rpx;
+    font-size: 22rpx;
   }
 }
 
 @media (max-width: 414rpx) {
   .category-card {
-    padding: 16rpx;
+    padding: 0 20rpx 20rpx;
-    min-height: 120rpx;
+    min-height: 500rpx;
-    margin-bottom: 12rpx;
+    margin-bottom: 20rpx;
   }
   
-  .card-desc {
+  .product-image-container {
-    font-size: 16rpx;
+    height: 240rpx;
-    margin-bottom: 10rpx;
   }
   
-  .category-name {
+  .card-content {
-    font-size: 24rpx;
+    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 {
+  .select-button {
-    width: 80rpx;
+    padding: 8rpx 24rpx;
-    height: 80rpx;
+    font-size: 20rpx;
   }
 }
 

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="" >
             </video>
             <!-- 图片处理 -->
@@ -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="" 
               ></video>
               <!-- 图片处理 -->
@@ -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="" 
               ></video>
               <!-- 图片处理 -->

pages/goods-detail/goods-detail.wxss

@@ -130,12 +130,9 @@
 
 /* 视频样式增强 */
 video.slider-media {
-  position: absolute;
+  width: 100%;
-  top: 0;
+  height: 100%;
-  left: 0;
+  object-fit: contain;
-  right: 0;
-  bottom: 0;
-  object-fit: fill;
   z-index: 1;
 }