对比价格ui优化

pages/goods-detail/goods-detail.js

@@ -1368,7 +1368,7 @@ Page({
     compareStep: 1,             // 当前步骤（1：选择品种，2：选择规格）
     categoryOptions: ['全部', '绿壳', '粉壳', '褐壳'], // 品种选项
     categoryIcons: ['🥚', '🥚', '🥚', '🥚'], // 品种图标
-    categoryDescriptions: ['所有品种', '绿壳鸡蛋', '粉壳鸡蛋', '褐壳鸡蛋'], // 品种描述
+    categoryDescriptions: ['（所有品种）', '（绿壳鸡蛋）', '（粉壳鸡蛋）', '（褐壳鸡蛋）'], // 品种描述
     selectedCategoryIndex: 0,    // 选中的品种索引
     selectedCategory: '',        // 选中的品种
     selectedSpecIndex: 0,        // 选中的规格索引

pages/goods-detail/goods-detail.wxml

@@ -86,7 +86,7 @@
             </view>
           </view>
         </view>
-        <view class="source-description" style="padding: 8rpx 16rpx; background: #f5f5f5; border-radius: 8rpx; font-size: 28rpx; color: #333; margin-top: 4rpx;">
+        <view class="source-description" style="padding: 0rpx 16rpx; background: #f5f5f5; border-radius: 8rpx; font-size: 28rpx; color: #333; margin-top: 4rpx; height: 68rpx; display: block; box-sizing: border-box">
           {{goodsDetail.description || '暂无描述'}}
         </view>
       </view>
@@ -316,17 +316,12 @@
           </view>
           <view class="compare-step {{compareStep === 2 ? 'active' : ''}}">
             <view class="compare-step-circle">{{compareStep === 2 ? '✓' : '2'}}</view>
-            <view class="compare-step-line"></view>
-          </view>
-          <view class="compare-step">
-            <view class="compare-step-circle">3</view>
           </view>
         </view>
       </view>
       
       <!-- 标题和引导文字 -->
       <view class="compare-modal-header">
-        <text class="compare-modal-title">{{compareStep === 1 ? '选择鸡蛋品种' : '选择鸡蛋规格'}}</text>
         <text class="compare-modal-subtitle">{{compareStep === 1 ? '请选择您想对比的鸡蛋品种' : '请选择您想对比的鸡蛋规格'}}</text>
       </view>
       
@@ -357,7 +352,7 @@
           <view wx:for="{{currentSpecifications}}" wx:key="index" class="compare-option {{selectedSpecIndex === index ? 'selected' : ''}}" bindtap="selectSpec" data-index="{{index}}">
             <view class="compare-option-info spec-info">
               <text class="compare-option-name">{{item.display || item.weightSpec}}</text>
-              <text class="compare-option-desc">{{item.price ? '价格：¥' + item.price : '价格：暂无'}}</text>
+           
             </view>
             <view class="compare-option-radio {{selectedSpecIndex === index ? 'selected' : ''}}">
               <view wx:if="{{selectedSpecIndex === index}}" class="compare-option-radio-inner"></view>
@@ -376,7 +371,7 @@
         <block wx:elif="{{compareStep === 2}}">
           <view class="compare-footer-buttons">
             <button class="compare-back-button" bindtap="prevStep">
-              返回
+              上一步
             </button>
             <button class="compare-confirm-button" bindtap="confirmCompare">
               确认

pages/goods-detail/goods-detail.wxss

@@ -840,14 +840,14 @@ video.slider-media .wx-video-volume-icon {
 }
 
 .compare-modal-container {
-  width: 340px;
+  width: 380px;
   background-color: #fff;
   border-radius: 20px;
   box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
   animation: slideUp 0.3s ease-out;
   display: flex;
   flex-direction: column;
-  max-height: 560px;
+  max-height: 600px;
 }
 
 @keyframes fadeIn {
@@ -870,14 +870,14 @@ video.slider-media .wx-video-volume-icon {
 
 /* 步骤指示器 */
 .compare-step-container {
-  height: 120px;
+  height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .compare-step-wrapper {
-  width: 280px;
+  width: 240px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -886,12 +886,21 @@ video.slider-media .wx-video-volume-icon {
 .compare-step {
   display: flex;
   align-items: center;
-  flex: 1;
+  position: relative;
+  width: 50%;
+}
+
+.compare-step:first-child {
+  justify-content: flex-start;
+}
+
+.compare-step:last-child {
+  justify-content: flex-end;
 }
 
 .compare-step-circle {
-  width: 32px;
+  width: 28px;
-  height: 32px;
+  height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -901,6 +910,7 @@ video.slider-media .wx-video-volume-icon {
   background-color: #E5E7EB;
   color: #9CA3AF;
   z-index: 1;
+  position: relative;
 }
 
 .compare-step.active .compare-step-circle {
@@ -909,10 +919,14 @@ video.slider-media .wx-video-volume-icon {
 }
 
 .compare-step-line {
-  flex: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: -50%;
   height: 2px;
   background-color: #E5E7EB;
-  margin: 0 12px;
+  transform: translateY(-50%);
+  z-index: 0;
 }
 
 .compare-step-line.active {
@@ -921,28 +935,28 @@ video.slider-media .wx-video-volume-icon {
 
 /* 标题和引导文字 */
 .compare-modal-header {
-  padding: 0 24px 24px;
+  padding: 0 24px 20px;
   text-align: center;
 }
 
 .compare-modal-title {
-  font-size: 18px;
+  font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
   color: #1A1A1A;
-  line-height: 24px;
+  line-height: 28px;
   margin-bottom: 4px;
 }
 
 .compare-modal-subtitle {
-  font-size: 14px;
+  font-size: 18px;
-  font-weight: 400;
+  font-weight: 600;
   color: #666666;
-  line-height: 20px;
+  line-height: 28px;
 }
 
 /* 已选品种提示区 */
 .compare-selected-category {
-  width: 292px;
+  width: 332px;
   height: 48px;
   background-color: #F0F7FF;
   border-radius: 12px;
@@ -970,7 +984,7 @@ video.slider-media .wx-video-volume-icon {
 .compare-content {
   flex: 1;
   padding: 0 24px 24px;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 /* 选项样式 */
@@ -983,7 +997,7 @@ video.slider-media .wx-video-volume-icon {
   display: flex;
   align-items: center;
   padding: 0 16px;
-  transition: all 0.3s ease;
+  /* 移除过渡动画以提高iOS性能 */
 }
 
 .compare-option.selected {
@@ -1012,10 +1026,10 @@ video.slider-media .wx-video-volume-icon {
 }
 
 .compare-option-name {
-  font-size: 16px;
+  font-size: 18px;
-  font-weight: 400;
+  font-weight: 500;
   color: #666666;
-  line-height: 22px;
+  line-height: 24px;
   margin-bottom: 4px;
 }
 
@@ -1039,7 +1053,7 @@ video.slider-media .wx-video-volume-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  /* 移除过渡动画以提高iOS性能 */
 }
 
 .compare-option-radio.selected {
@@ -1059,7 +1073,7 @@ video.slider-media .wx-video-volume-icon {
 }
 
 .compare-next-button {
-  width: 292px;
+  width: 332px;
   height: 44px;
   background-color: #165DFF;
   color: #FFFFFF;
@@ -1075,15 +1089,10 @@ video.slider-media .wx-video-volume-icon {
   margin: 0;
 }
 
-.compare-next-button:active {
-  background-color: #0E47D9;
-  transform: scale(0.98);
-}
-
 .compare-footer-buttons {
   display: flex;
   gap: 12px;
-  width: 292px;
+  width: 332px;
 }
 
 .compare-back-button {