优化evaluate1页面UI设计，包括：

1. 改进product-list页面，实现3列布局，添加玻璃质感和动画效果
2. 改进index页面，实现3列布局，添加玻璃质感和动画效果，优化商品信息显示
3. 重写spec-detail页面布局，解决拥挤和超屏幕问题，添加玻璃质感和动画效果
4. 确保所有页面响应式设计，适配不同屏幕尺寸
5. 为所有页面添加一致的现代UI风格和交互效果

pages/evaluate1/index.wxml

@@ -1,61 +1,73 @@
 <view class="container">
+  <!-- 头部导航栏 -->
   <view class="header">
-    <text class="title">选择规格</text>
+    <view class="header-content" style="width: 4200rpx; display: block; box-sizing: border-box; height: 124rpx">
+      <text class="title">规格选择</text>
+    </view>
   </view>
   
   <view class="content">
     <!-- 加载中状态 -->
     <view wx:if="{{loading}}" class="loading">
       <view class="loading-spinner"></view>
-      <text>加载中...</text>
+      <text class="loading-text">正在加载规格数据...</text>
     </view>
     
     <!-- 错误提示 -->
-    <view wx:if="{{error}}" class="error">
+    <view wx:if="{{error}}" class="error-card">
       <view class="error-icon">⚠️</view>
-      <text>{{error}}</text>
+      <text class="error-text">{{error}}</text>
       <view class="button-group">
-        <button bindtap="loadSpecifications" data-product="{{productName}}" type="primary" class="retry-button">重试</button>
+        <button bindtap="loadSpecifications" data-product="{{productName}}" class="btn-primary">重新加载</button>
-        <button bindtap="goBackToProductList" type="default" class="back-button">返回上一步</button>
+        <button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
       </view>
     </view>
     
     <!-- 商品信息 -->
-    <view wx:else class="product-info">
+    <view wx:else class="product-card">
-      <text class="product-label">商品名称：</text>
+      <view class="product-info-container">
-      <text class="product-value">{{productName}}</text>
+        <view class="product-info-row">
-      <button bindtap="goBackToProductList" type="default" class="back-button">返回上一步</button>
+          <text class="product-label">商品名称</text>
+          <button bindtap="goBackToProductList" class="btn-back" style="width: 172rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx; height: 87rpx">
+            <text class="btn-back-icon">←</text>
+            <text class="btn-back-text">更换商品</text>
+          </button>
+        </view>
+        <text class="product-name">{{productName}}</text>
+      </view>
     </view>
     
     <!-- 规格列表 -->
-    <view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-list">
+    <view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section">
       <view class="section-header">
         <text class="section-title">可用规格</text>
         <text class="section-count">{{specifications.length}}个</text>
       </view>
-      <view class="spec-items">
+      <view class="spec-grid">
         <view 
           wx:for="{{specifications}}" 
           wx:key="item.name" 
-          class="spec-item"
+          class="spec-card"
           data-spec="{{item}}"
           bindtap="goToSpecDetail"
         >
           <view class="spec-info">
             <text class="spec-name">{{item.name}}</text>
           </view>
-          <view class="spec-price-arrow">
+          <view class="spec-price">
-            <text class="spec-price">¥{{item.finalPriceText}}</text>
+            <text class="price-label">参考价格</text>
-            <view class="spec-arrow">→</view>
+            <text class="price-value">¥{{item.finalPriceText}}</text>
           </view>
+          <view class="spec-arrow">→</view>
         </view>
       </view>
     </view>
     
     <!-- 无规格提示 -->
-    <view wx:if="{{!loading && !error && specifications.length === 0}}" class="hint">
+    <view wx:if="{{!loading && !error && specifications.length === 0}}" class="empty-state" style="height: 600rpx; display: flex; box-sizing: border-box">
-      <view class="hint-icon">📋</view>
+      <view class="empty-icon">📋</view>
-      <text>该商品暂无可用规格</text>
+      <text class="empty-text">该商品暂无可用规格</text>
+      <button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
     </view>
   </view>
 </view>

pages/evaluate1/index.wxss

@@ -2,81 +2,52 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 }
 
 .header {
+  background: #fff;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header-content {
   padding: 30rpx 0;
   text-align: center;
-  background-color: #fff;
-  border-bottom: 1rpx solid #eee;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
 }
 
 .title {
   font-size: 36rpx;
-  font-weight: bold;
+  font-weight: 700;
-  color: #333;
+  color: #2c3e50;
   letter-spacing: 2rpx;
 }
 
 .content {
   flex: 1;
-  padding: 20rpx;
+  padding: 16rpx;
-}
-
-.product-info {
-  background-color: #fff;
-  border-radius: 12rpx;
-  padding: 30rpx;
-  margin-bottom: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 20rpx;
-}
-
-.back-button {
-  width: 100%;
-  height: 70rpx;
-  line-height: 70rpx;
-  font-size: 28rpx;
-  border-radius: 35rpx;
-  margin-top: 10rpx;
-}
-
-.product-label {
-  font-size: 28rpx;
-  color: #666;
-  margin-right: 20rpx;
-}
-
-.product-value {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #FF6B81;
-  flex: 1;
 }
 
+/* 加载状态 */
 .loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 100rpx 0;
+  padding: 160rpx 0;
-  color: #666;
 }
 
 .loading-spinner {
-  width: 60rpx;
+  width: 80rpx;
-  height: 60rpx;
+  height: 80rpx;
-  border: 6rpx solid #f3f3f3;
+  border: 8rpx solid rgba(74, 144, 226, 0.2);
-  border-top: 6rpx solid #FF6B81;
+  border-top: 8rpx solid #4a90e2;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 20rpx;
+  margin-bottom: 32rpx;
 }
 
 @keyframes spin {
@@ -84,204 +55,326 @@
   100% { transform: rotate(360deg); }
 }
 
-.error {
+.loading-text {
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+/* 错误提示卡片 */
+.error-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 48rpx;
+  margin: 32rpx 0;
+  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  text-align: center;
-  padding: 40rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
 }
 
 .error-icon {
-  font-size: 60rpx;
+  font-size: 80rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 24rpx;
 }
 
-.error text {
+.error-text {
-  display: block;
-  color: #ff4d4f;
-  margin-bottom: 30rpx;
   font-size: 28rpx;
-  text-align: center;
+  color: #e74c3c;
+  margin-bottom: 32rpx;
+  line-height: 1.5;
+}
+
+/* 按钮样式 */
+.button-group {
+  display: flex;
+  gap: 16rpx;
+  width: 100%;
+  max-width: 600rpx;
 }
 
-.retry-button {
+.btn-primary {
-  width: 200rpx;
+  flex: 1;
-  height: 70rpx;
+  height: 80rpx;
-  line-height: 70rpx;
+  line-height: 80rpx;
   font-size: 28rpx;
-  border-radius: 35rpx;
+  font-weight: 600;
-  background-color: #FF6B81;
+  border-radius: 40rpx;
+  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
   color: #fff;
+  border: none;
+  box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4);
+  transition: all 0.3s ease;
 }
 
-.button-group {
+.btn-primary:hover {
-  display: flex;
+  transform: translateY(-2rpx);
-  gap: 20rpx;
+  box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5);
-  margin-top: 20rpx;
 }
 
-.button-group button {
+.btn-secondary {
   flex: 1;
-  height: 70rpx;
+  height: 80rpx;
-  line-height: 70rpx;
+  line-height: 80rpx;
   font-size: 28rpx;
-  border-radius: 35rpx;
+  font-weight: 600;
+  border-radius: 40rpx;
+  background: #fff;
+  color: #4a90e2;
+  border: 2rpx solid #4a90e2;
+  transition: all 0.3s ease;
 }
 
-.section-header {
+.btn-secondary:hover {
+  background: rgba(74, 144, 226, 0.05);
+  transform: translateY(-2rpx);
+}
+
+.btn-back {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 20rpx;
+  justify-content: center;
+  padding: 8rpx 24rpx;
+  font-size: 24rpx;
+  color: #4a90e2;
+  background: transparent;
+  border: 1rpx solid #4a90e2;
+  border-radius: 20rpx;
+  transition: all 0.3s ease;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
 }
 
-.section-title {
+.btn-back:hover {
-  font-size: 30rpx;
+  background: rgba(74, 144, 226, 0.1);
-  font-weight: bold;
+  transform: translateY(-2rpx);
-  color: #333;
+  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2);
-  padding-left: 15rpx;
-  border-left: 5rpx solid #FF6B81;
 }
 
-.section-count {
+.btn-back-icon {
-  font-size: 24rpx;
+  margin-right: 8rpx;
-  color: #999;
+  font-size: 20rpx;
-  background-color: #f5f5f5;
-  padding: 5rpx 15rpx;
-  border-radius: 20rpx;
 }
 
-.product-list,
+.btn-back-text {
-.spec-list {
+  font-size: 22rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-  padding: 30rpx;
-  margin-bottom: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
 }
 
-.product-items,
+/* 商品信息卡片 */
-.spec-items {
+.product-card {
-  display: flex;
+  background: rgba(255, 255, 255, 0.95);
-  flex-direction: column;
+  border-radius: 20rpx;
-  gap: 15rpx;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
+  backdrop-filter: blur(8rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
 }
 
-.product-item {
+.product-info-container {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.product-info-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30rpx;
+  margin-bottom: 16rpx;
-  border-radius: 10rpx;
+  width: 100%;
-  background-color: #f9f9f9;
+  box-sizing: border-box;
-  border: 1rpx solid #eee;
+}
-  transition: all 0.3s ease;
+
-  cursor: pointer;
+.product-label {
+  font-size: 24rpx;
+  color: #666;
+  font-weight: 500;
+  flex: 1;
+}
+
+.product-name {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #2c3e50;
+  line-height: 1.4;
+  word-break: break-word;
+  margin-top: 12rpx;
+  padding: 12rpx 0;
+  border-top: 1rpx solid #f1f5f9;
+}
+
+/* 规格列表区域 */
+.spec-section {
+  margin-top: 24rpx;
 }
 
-.spec-item {
+.section-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  padding: 30rpx;
+  margin-bottom: 24rpx;
-  border-radius: 10rpx;
+  padding: 0 8rpx;
-  background-color: #f9f9f9;
+}
-  border: 1rpx solid #eee;
+
+.section-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #2c3e50;
+  padding-left: 16rpx;
+  border-left: 6rpx solid #4a90e2;
+}
+
+.section-count {
+  font-size: 24rpx;
+  color: #999;
+  background: rgba(74, 144, 226, 0.1);
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
+}
+
+/* 规格网格布局 */
+.spec-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+  margin-top: 16rpx;
+}
+
+/* 规格卡片 */
+.spec-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  padding: 32rpx 24rpx;
+  box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
   transition: all 0.3s ease;
   cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(8rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
+  min-height: 200rpx;
+  display: flex;
   flex-direction: column;
-  gap: 15rpx;
 }
 
-.spec-info {
+.spec-card::before {
-  flex: 1;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6rpx;
+  height: 100%;
+  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
 }
 
-.spec-price-arrow {
+.spec-card:hover {
-  display: flex;
+  transform: translateY(-6rpx);
-  justify-content: flex-end;
+  box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
-  align-items: center;
+  background: rgba(255, 255, 255, 1);
-  gap: 10rpx;
-  width: 100%;
 }
 
-.product-item:hover,
+.spec-card:active {
-.spec-item:hover {
-  background-color: #f0f0f0;
   transform: translateY(-2rpx);
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
 }
 
-.product-item.selected {
+.spec-info {
-  background-color: #FFE6E6;
+  margin-bottom: 20rpx;
-  border-color: #FF6B81;
+  flex: 1;
-  color: #FF6B81;
+  display: flex;
+  align-items: center;
 }
 
-.product-name,
 .spec-name {
   font-size: 28rpx;
-  color: #333;
+  font-weight: 600;
-  flex: 1;
+  color: #2c3e50;
+  line-height: 1.4;
+  word-break: break-word;
+  padding-right: 40rpx;
 }
 
 .spec-price {
-  font-size: 28rpx;
+  display: flex;
-  font-weight: bold;
+  flex-direction: column;
-  color: #FF6B81;
+  margin-top: 16rpx;
-  margin-right: 20rpx;
 }
 
-.product-item.selected .product-name {
+.price-label {
-  color: #FF6B81;
+  font-size: 20rpx;
-  font-weight: bold;
+  color: #999;
+  margin-bottom: 4rpx;
+}
+
+.price-value {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #e74c3c;
+  transition: all 0.3s ease;
+}
+
+.spec-card:hover .price-value {
+  transform: scale(1.05);
 }
 
-.product-arrow,
 .spec-arrow {
-  font-size: 30rpx;
+  position: absolute;
-  color: #999;
+  top: 32rpx;
-  margin-left: 20rpx;
+  right: 28rpx;
+  font-size: 32rpx;
+  color: #4a90e2;
+  font-weight: bold;
+  opacity: 0.6;
+  transition: all 0.3s ease;
 }
 
-.product-item.selected .product-arrow {
+.spec-card:hover .spec-arrow {
-  color: #FF6B81;
+  opacity: 1;
+  transform: translateX(4rpx);
 }
 
-.hint {
+/* 空状态 */
+.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 100rpx 0;
+  padding: 160rpx 0;
-  color: #999;
+  text-align: center;
-  font-size: 28rpx;
 }
 
-.hint-icon {
+.empty-icon {
-  font-size: 80rpx;
+  font-size: 160rpx;
-  margin-bottom: 30rpx;
+  margin-bottom: 40rpx;
+  opacity: 0.6;
+}
+
+.empty-text {
+  font-size: 32rpx;
+  color: #666;
+  margin-bottom: 48rpx;
+  line-height: 1.4;
+  padding: 0 40rpx;
 }
 
 /* 响应式设计 */
-@media (max-width: 375px) {
+@media (max-width: 750rpx) {
   .content {
-    padding: 15rpx;
+    padding: 20rpx;
   }
   
-  .product-list,
+  .spec-grid {
-  .spec-list {
+    grid-template-columns: repeat(3, 1fr);
-    padding: 20rpx;
+    gap: 16rpx;
   }
   
-  .product-item,
+  .product-card {
-  .spec-item {
+    padding: 28rpx;
-    padding: 20rpx;
+  }
+  
+  .spec-card {
+    padding: 28rpx 20rpx;
+    min-height: 180rpx;
   }
   
   .title {
@@ -289,11 +382,45 @@
   }
   
   .section-title {
-    font-size: 26rpx;
+    font-size: 28rpx;
+  }
+  
+  .product-name {
+    font-size: 28rpx;
+  }
+  
+  .price-value {
+    font-size: 32rpx;
+  }
+  
+  .button-group {
+    flex-direction: column;
+    gap: 12rpx;
+  }
+  
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+  }
+}
+
+/* 小屏幕设备适配 */
+@media (max-width: 414rpx) {
+  .spec-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12rpx;
+  }
+  
+  .spec-card {
+    padding: 24rpx 16rpx;
+    min-height: 160rpx;
   }
   
-  .product-name,
   .spec-name {
-    font-size: 26rpx;
+    font-size: 24rpx;
+  }
+  
+  .price-value {
+    font-size: 28rpx;
   }
 }

pages/evaluate1/product-list.wxml

@@ -1,36 +1,40 @@
 <view class="container">
+  <!-- 头部导航栏 -->
   <view class="header">
-    <text class="title">选择商品</text>
+    <view class="header-content" style="width: 800rpx; display: block; box-sizing: border-box">
+      <text class="title">商品选择</text>
+    </view>
   </view>
   
   <view class="content">
     <!-- 加载中状态 -->
     <view wx:if="{{loading}}" class="loading">
       <view class="loading-spinner"></view>
-      <text>加载中...</text>
+      <text class="loading-text">正在加载商品数据...</text>
     </view>
     
     <!-- 错误提示 -->
-    <view wx:if="{{error}}" class="error">
+    <view wx:if="{{error}}" class="error-card">
       <view class="error-icon">⚠️</view>
-      <text>{{error}}</text>
+      <text class="error-text">{{error}}</text>
-      <button bindtap="loadProductNames" type="primary" class="retry-button">重试</button>
+      <button bindtap="loadProductNames" class="btn-primary">重新加载</button>
     </view>
     
     <!-- 商品名称列表 -->
-    <view wx:else class="product-list">
+    <view wx:else class="product-section">
       <view class="section-header">
-        <text class="section-title">商品名称</text>
+        <text class="section-title">商品列表</text>
-        <text class="section-count">{{productNames.length}}个</text>
+        <text class="section-count">{{productNames.length}}个商品</text>
       </view>
-      <view class="product-items">
+      <view class="product-grid" style="width: 700rpx; display: grid; box-sizing: border-box">
         <view 
           wx:for="{{productNames}}" 
           wx:key="*this" 
-          class="product-item"
+          class="product-card"
           data-product="{{item}}"
           bindtap="selectProduct"
         >
+          <view class="product-icon">🛍️</view>
           <text class="product-name">{{item}}</text>
           <view class="product-arrow">→</view>
         </view>

pages/evaluate1/product-list.wxss

@@ -2,47 +2,52 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 }
 
 .header {
+  background: #fff;
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header-content {
   padding: 30rpx 0;
   text-align: center;
-  background-color: #fff;
-  border-bottom: 1rpx solid #eee;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
 }
 
 .title {
   font-size: 36rpx;
-  font-weight: bold;
+  font-weight: 700;
-  color: #333;
+  color: #2c3e50;
   letter-spacing: 2rpx;
 }
 
 .content {
   flex: 1;
-  padding: 20rpx;
+  padding: 16rpx;
 }
 
+/* 加载状态 */
 .loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 100rpx 0;
+  padding: 160rpx 0;
-  color: #666;
 }
 
 .loading-spinner {
-  width: 60rpx;
+  width: 80rpx;
-  height: 60rpx;
+  height: 80rpx;
-  border: 6rpx solid #f3f3f3;
+  border: 8rpx solid rgba(74, 144, 226, 0.2);
-  border-top: 6rpx solid #FF6B81;
+  border-top: 8rpx solid #4a90e2;
   border-radius: 50%;
   animation: spin 1s linear infinite;
-  margin-bottom: 20rpx;
+  margin-bottom: 32rpx;
 }
 
 @keyframes spin {
@@ -50,120 +55,190 @@
   100% { transform: rotate(360deg); }
 }
 
-.error {
+.loading-text {
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+/* 错误提示卡片 */
+.error-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 48rpx;
+  margin: 32rpx 0;
+  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  text-align: center;
-  padding: 40rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
 }
 
 .error-icon {
-  font-size: 60rpx;
+  font-size: 80rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 24rpx;
 }
 
-.error text {
+.error-text {
-  display: block;
-  color: #ff4d4f;
-  margin-bottom: 30rpx;
   font-size: 28rpx;
-  text-align: center;
+  color: #e74c3c;
+  margin-bottom: 32rpx;
+  line-height: 1.5;
 }
 
-.retry-button {
+/* 按钮样式 */
-  width: 200rpx;
+.btn-primary {
-  height: 70rpx;
+  width: 240rpx;
-  line-height: 70rpx;
+  height: 80rpx;
+  line-height: 80rpx;
   font-size: 28rpx;
-  border-radius: 35rpx;
+  font-weight: 600;
-  background-color: #FF6B81;
+  border-radius: 40rpx;
+  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
   color: #fff;
+  border: none;
+  box-shadow: 0 4rpx 12rpx rgba(96, 165, 250, 0.4);
+  transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5);
+}
+
+/* 商品列表区域 */
+.product-section {
+  margin-top: 24rpx;
 }
 
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20rpx;
+  margin-bottom: 24rpx;
+  padding: 0 8rpx;
 }
 
 .section-title {
   font-size: 30rpx;
-  font-weight: bold;
+  font-weight: 700;
-  color: #333;
+  color: #2c3e50;
-  padding-left: 15rpx;
+  padding-left: 16rpx;
-  border-left: 5rpx solid #FF6B81;
+  border-left: 6rpx solid #4a90e2;
 }
 
 .section-count {
   font-size: 24rpx;
   color: #999;
-  background-color: #f5f5f5;
+  background: rgba(74, 144, 226, 0.1);
-  padding: 5rpx 15rpx;
+  padding: 6rpx 16rpx;
   border-radius: 20rpx;
 }
 
-.product-list {
+/* 商品网格布局 */
-  background-color: #fff;
+.product-grid {
-  border-radius: 12rpx;
+  display: grid;
-  padding: 30rpx;
+  grid-template-columns: repeat(3, 1fr);
-  margin-bottom: 30rpx;
+  gap: 20rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+  margin-top: 16rpx;
 }
 
-.product-items {
+/* 商品卡片 */
+.product-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  padding: 32rpx 24rpx;
+  box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 15rpx;
+  align-items: center;
+  text-align: center;
+  min-height: 180rpx;
+  backdrop-filter: blur(8rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
 }
 
-.product-item {
+.product-card::before {
-  display: flex;
+  content: '';
-  justify-content: space-between;
+  position: absolute;
-  align-items: center;
+  top: 0;
-  padding: 30rpx;
+  left: 0;
-  border-radius: 10rpx;
+  width: 100%;
-  background-color: #f9f9f9;
+  height: 6rpx;
-  border: 1rpx solid #eee;
+  background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
-  transition: all 0.3s ease;
+}
-  cursor: pointer;
+
+.product-card:hover {
+  transform: translateY(-6rpx);
+  box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.15);
+  background: rgba(255, 255, 255, 1);
 }
 
-.product-item:hover {
+.product-card:active {
-  background-color: #f0f0f0;
   transform: translateY(-2rpx);
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
+  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.12);
+}
+
+.product-icon {
+  font-size: 72rpx;
+  margin-bottom: 20rpx;
+  opacity: 0.9;
+  transition: all 0.3s ease;
+}
+
+.product-card:hover .product-icon {
+  transform: scale(1.1);
+  opacity: 1;
 }
 
 .product-name {
   font-size: 28rpx;
-  color: #333;
+  font-weight: 600;
+  color: #2c3e50;
+  line-height: 1.4;
+  word-break: break-word;
+  margin-bottom: 20rpx;
   flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8rpx;
 }
 
 .product-arrow {
-  font-size: 30rpx;
+  position: absolute;
-  color: #999;
+  bottom: 20rpx;
-  margin-left: 20rpx;
+  right: 24rpx;
+  font-size: 28rpx;
+  color: #4a90e2;
+  font-weight: bold;
+  opacity: 0.6;
+  transition: all 0.3s ease;
+}
+
+.product-card:hover .product-arrow {
+  opacity: 1;
+  transform: translateX(4rpx);
 }
 
 /* 响应式设计 */
-@media (max-width: 375px) {
+@media (max-width: 750rpx) {
   .content {
-    padding: 15rpx;
+    padding: 20rpx;
   }
   
-  .product-list {
+  .product-grid {
-    padding: 20rpx;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16rpx;
   }
   
-  .product-item {
+  .product-card {
-    padding: 20rpx;
+    padding: 28rpx 20rpx;
+    min-height: 160rpx;
   }
   
   .title {
@@ -171,10 +246,35 @@
   }
   
   .section-title {
-    font-size: 26rpx;
+    font-size: 28rpx;
   }
   
   .product-name {
-    font-size: 26rpx;
+    font-size: 24rpx;
+  }
+  
+  .product-icon {
+    font-size: 60rpx;
+  }
+}
+
+/* 小屏幕设备适配 */
+@media (max-width: 414rpx) {
+  .product-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12rpx;
+  }
+  
+  .product-card {
+    padding: 20rpx 16rpx;
+    min-height: 140rpx;
+  }
+  
+  .product-name {
+    font-size: 22rpx;
+  }
+  
+  .product-icon {
+    font-size: 50rpx;
   }
 }

pages/evaluate1/spec-detail.js

@@ -40,6 +40,22 @@ Page({
     });
   },
   
+  // 减少数量
+  decreaseQuantity() {
+    if (this.data.quantity > 1) {
+      this.setData({
+        quantity: this.data.quantity - 1
+      });
+    }
+  },
+  
+  // 增加数量
+  increaseQuantity() {
+    this.setData({
+      quantity: this.data.quantity + 1
+    });
+  },
+  
   // 计算价格
   calculatePrice() {
     const totalPrice = Math.round(this.data.price * this.data.quantity * 10) / 10;

pages/evaluate1/spec-detail.wxml

@@ -1,45 +1,59 @@
-<view class="container">
+<view class="page-container">
-  <view class="header">
+  <!-- 头部导航栏 -->
-    <text class="title">{{productName}}</text>
+  <view class="page-header">
+    <text class="header-title">{{productName || '规格详情'}}</text>
   </view>
   
-  <view class="content">
+  <!-- 主要内容区域 -->
-    <view class="spec-card">
+  <view class="main-content">
-      <view class="spec-item">
+    <!-- 规格信息卡片 -->
-        <text class="label">规格：</text>
+    <view class="info-card">
-        <text class="value">{{specification}}</text>
+      <text class="card-subtitle">规格信息</text>
+      <view class="info-row">
+        <text class="info-label">规格</text>
+        <text class="info-value">{{specification}}</text>
       </view>
-      <view class="spec-item">
+      <view class="info-row">
-        <text class="label">单价：</text>
+        <text class="info-label">单价</text>
-        <text class="value price">¥{{price || 0}}</text>
+        <text class="info-value price">¥{{price || 0}}</text>
-      </view>
-      <view class="spec-info">
-        <text>您已选择此规格进行估价</text>
       </view>
+      <text class="info-hint">您已选择此规格进行估价</text>
     </view>
     
-    <view class="quantity-section">
+    <!-- 数量设置卡片 -->
-      <text class="label">件数：</text>
+    <view class="control-card">
-      <input 
+      <text class="card-subtitle">数量设置</text>
+      <view class="quantity-box">
+        <button bindtap="decreaseQuantity" class="quantity-btn minus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">-</button>
+        <input style="width: 420rpx; display: block; box-sizing: border-box" 
           class="quantity-input" 
           type="number" 
           value="{{quantity}}" 
           bindinput="onQuantityChange" 
           min="1"
         />
+        <button bindtap="increaseQuantity" class="quantity-btn plus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">+</button>
+      </view>
     </view>
     
-    <view class="calculate-section">
+    <!-- 计算按钮 -->
-      <button bindtap="calculatePrice" type="primary" class="calculate-button">计算价格</button>
+    <view class="button-section">
+      <button bindtap="calculatePrice" class="primary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">计算预估价格</button>
     </view>
     
-    <view class="result-section">
+    <!-- 结果展示卡片 -->
-      <text class="result-label">预估：</text>
+    <view class="result-card" wx:if="{{totalPrice > 0}}">
-      <text class="result-value">¥{{totalPrice > 0 ? totalPrice : ''}}</text>
+      <text class="card-subtitle">预估结果</text>
+      <view class="result-row">
+        <text class="result-label">预估总价</text>
+        <text class="result-value">¥{{totalPrice}}</text>
+      </view>
+      <text class="result-hint">此价格为预估价格，实际价格可能会有所变动</text>
     </view>
     
-    <view class="action">
+    <!-- 返回按钮 -->
-      <button bindtap="goBack" type="default">返回</button>
+    <view class="button-section bottom">
+      <button bindtap="goBack" class="secondary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">返回规格列表</button>
     </view>
   </view>
 </view>

pages/evaluate1/spec-detail.wxss

@@ -1,127 +1,401 @@
-.container {
+/* 页面容器 */
+.page-container {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
 }
 
-.header {
+/* 头部样式 */
-  padding: 30rpx 0;
+.page-header {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10rpx);
+  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
+  padding: 28rpx 0;
   text-align: center;
-  background-color: #fff;
+  position: sticky;
-  border-bottom: 1rpx solid #eee;
+  top: 0;
+  z-index: 10;
 }
 
-.title {
+.header-title {
-  font-size: 32rpx;
+  font-size: 30rpx;
-  font-weight: bold;
+  font-weight: 700;
-  color: #333;
+  color: #2c3e50;
+  letter-spacing: 1rpx;
 }
 
-.content {
+/* 主要内容区域 */
-  padding: 30rpx;
+.main-content {
+  flex: 1;
+  padding: 24rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+  padding-bottom: 48rpx;
+  box-sizing: border-box;
 }
 
-.spec-card {
+/* 卡片基础样式 */
-  background-color: #fff;
+.info-card,
-  border-radius: 12rpx;
+.control-card,
-  padding: 40rpx;
+.result-card {
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+  background: rgba(255, 255, 255, 0.95);
-  margin-bottom: 40rpx;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.08);
+  backdrop-filter: blur(12rpx);
+  border: 1rpx solid rgba(255, 255, 255, 0.4);
+  transition: all 0.3s ease;
+  box-sizing: border-box;
 }
 
-.spec-item {
+.info-card:hover,
+.control-card:hover,
+.result-card:hover {
+  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.12);
+  transform: translateY(-4rpx);
+  background: rgba(255, 255, 255, 0.98);
+}
+
+/* 卡片标题 */
+.card-subtitle {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #64748b;
+  margin-bottom: 24rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid #f1f5f9;
+}
+
+/* 信息行样式 */
+.info-row {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  margin-bottom: 30rpx;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f8fafc;
 }
 
-.label {
+.info-row:last-child {
-  font-size: 28rpx;
+  border-bottom: none;
-  color: #666;
-  margin-right: 20rpx;
-  width: 120rpx;
 }
 
-.value {
+.info-label {
-  font-size: 32rpx;
+  font-size: 26rpx;
-  font-weight: bold;
+  color: #64748b;
-  color: #FF6B81;
+  font-weight: 500;
-  flex: 1;
 }
 
-.price {
+.info-value {
-  color: #FF6B81;
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #2c3e50;
 }
 
-.spec-info {
+.info-value.price {
-  padding-top: 20rpx;
+  color: #ef4444;
-  border-top: 1rpx solid #eee;
+  font-size: 32rpx;
+  font-weight: 700;
+}
+
+/* 提示信息 */
+.info-hint {
+  font-size: 22rpx;
+  color: #94a3b8;
   text-align: center;
+  margin-top: 20rpx;
+  padding-top: 20rpx;
+  border-top: 1rpx solid #f1f5f9;
 }
 
-.spec-info text {
+/* 数量控制 */
-  font-size: 24rpx;
+.quantity-box {
-  color: #999;
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  margin-top: 12rpx;
+  justify-content: center;
 }
 
-.quantity-section {
+.quantity-btn {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 36rpx;
+  font-weight: bold;
+  background: rgba(255, 255, 255, 0.9);
+  color: #3b82f6;
+  border: 2rpx solid rgba(96, 165, 250, 0.4);
+  backdrop-filter: blur(12rpx);
   display: flex;
   align-items: center;
-  margin-bottom: 30rpx;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+}
+
+.quantity-btn:hover {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: rgba(59, 130, 246, 0.6);
+  transform: scale(1.1);
+}
+
+.quantity-btn.minus:hover {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.6);
+  color: #ef4444;
+}
+
+.quantity-btn.plus:hover {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: rgba(16, 185, 129, 0.6);
+  color: #10b981;
 }
 
 .quantity-input {
-  flex: 1;
+  width: 160rpx;
   height: 80rpx;
-  border: 2rpx solid #ddd;
+  border: 2rpx solid rgba(96, 165, 250, 0.4);
-  border-radius: 8rpx;
+  border-radius: 16rpx;
-  padding: 0 20rpx;
+  padding: 0 24rpx;
   font-size: 28rpx;
+  font-weight: 600;
+  text-align: center;
+  color: #2c3e50;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(12rpx);
+  box-shadow: inset 0 2rpx 8rpx rgba(0,0,0,0.08);
+  box-sizing: border-box;
 }
 
-.calculate-section {
+/* 按钮区域 */
-  display: flex;
+.button-section {
-  justify-content: center;
+  margin-top: 12rpx;
-  margin-bottom: 30rpx;
 }
 
-.calculate-button {
+.button-section.bottom {
-  width: 80%;
+  margin-top: 20rpx;
-  height: 80rpx;
+}
+
+/* 按钮样式 */
+.primary-btn {
+  width: 100%;
+  height: 92rpx;
+  line-height: 92rpx;
   font-size: 28rpx;
-  border-radius: 40rpx;
+  font-weight: 600;
+  border-radius: 46rpx;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: #fff;
+  border: none;
+  box-shadow: 0 6rpx 24rpx rgba(59, 130, 246, 0.4);
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.primary-btn:hover {
+  transform: translateY(-4rpx);
+  box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.5);
+}
+
+.secondary-btn {
+  width: 100%;
+  height: 84rpx;
+  line-height: 84rpx;
+  font-size: 26rpx;
+  font-weight: 600;
+  border-radius: 42rpx;
+  background: rgba(255, 255, 255, 0.95);
+  color: #3b82f6;
+  border: 2rpx solid rgba(59, 130, 246, 0.4);
+  backdrop-filter: blur(12rpx);
+  transition: all 0.3s ease;
+  text-align: center;
+  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
+}
+
+.secondary-btn:hover {
+  background: rgba(59, 130, 246, 0.08);
+  border-color: rgba(59, 130, 246, 0.6);
+  transform: translateY(-4rpx);
+  box-shadow: 0 6rpx 24rpx rgba(59, 130, 246, 0.3);
+}
+
+/* 结果卡片 */
+.result-card {
+  animation: fadeInUp 0.6s ease-out;
 }
 
-.result-section {
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 结果行 */
+.result-row {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  margin-bottom: 40rpx;
+  padding: 20rpx 0;
-  padding: 20rpx;
-  background-color: #f9f9f9;
-  border-radius: 8rpx;
 }
 
 .result-label {
-  font-size: 28rpx;
+  font-size: 26rpx;
-  color: #666;
+  color: #64748b;
-  margin-right: 20rpx;
+  font-weight: 500;
-  width: 120rpx;
 }
 
 .result-value {
   font-size: 36rpx;
-  font-weight: bold;
+  font-weight: 700;
-  color: #FF6B81;
+  color: #ef4444;
-  flex: 1;
+  text-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.2);
 }
 
-.action {
+/* 结果提示 */
-  display: flex;
+.result-hint {
-  justify-content: center;
+  font-size: 22rpx;
+  color: #94a3b8;
+  text-align: center;
+  margin-top: 16rpx;
+  padding-top: 16rpx;
+  border-top: 1rpx solid #f1f5f9;
+  line-height: 1.5;
 }
 
-button {
+/* 响应式设计 */
-  width: 80%;
+@media (max-width: 750rpx) {
-  height: 80rpx;
+  .main-content {
+    padding: 20rpx;
+    gap: 20rpx;
+  }
+  
+  .info-card,
+  .control-card,
+  .result-card {
+    padding: 28rpx;
+  }
+  
+  .header-title {
     font-size: 28rpx;
-  border-radius: 40rpx;
+  }
+  
+  .card-subtitle {
+    font-size: 24rpx;
+    margin-bottom: 20rpx;
+  }
+  
+  .info-label,
+  .info-value {
+    font-size: 24rpx;
+  }
+  
+  .info-value.price {
+    font-size: 30rpx;
+  }
+  
+  .result-value {
+    font-size: 32rpx;
+  }
+  
+  .quantity-box {
+    gap: 20rpx;
+  }
+  
+  .quantity-btn {
+    width: 72rpx;
+    height: 72rpx;
+    font-size: 32rpx;
+  }
+  
+  .quantity-input {
+    width: 140rpx;
+    height: 72rpx;
+    font-size: 26rpx;
+  }
+  
+  .primary-btn {
+    height: 84rpx;
+    line-height: 84rpx;
+    font-size: 26rpx;
+  }
+  
+  .secondary-btn {
+    height: 76rpx;
+    line-height: 76rpx;
+    font-size: 24rpx;
+  }
+}
+
+/* 小屏幕设备适配 */
+@media (max-width: 375rpx) {
+  .main-content {
+    padding: 16rpx;
+    gap: 16rpx;
+  }
+  
+  .info-card,
+  .control-card,
+  .result-card {
+    padding: 24rpx;
+  }
+  
+  .header-title {
+    font-size: 26rpx;
+  }
+  
+  .card-subtitle {
+    font-size: 22rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .info-label,
+  .info-value {
+    font-size: 22rpx;
+  }
+  
+  .info-value.price {
+    font-size: 28rpx;
+  }
+  
+  .result-value {
+    font-size: 28rpx;
+  }
+  
+  .quantity-box {
+    gap: 16rpx;
+  }
+  
+  .quantity-btn {
+    width: 64rpx;
+    height: 64rpx;
+    font-size: 28rpx;
+  }
+  
+  .quantity-input {
+    width: 120rpx;
+    height: 64rpx;
+    font-size: 24rpx;
+  }
+  
+  .primary-btn {
+    height: 76rpx;
+    line-height: 76rpx;
+    font-size: 24rpx;
+  }
+  
+  .secondary-btn {
+    height: 68rpx;
+    line-height: 68rpx;
+    font-size: 22rpx;
+  }
 }