From 620e57534758aa2e1d010438c47b11e7631ec7f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E9=A3=9E=E6=B4=8B?=
 <15778543+xufeiyang6017@user.noreply.gitee.com>
Date: Sat, 24 Jan 2026 16:17:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96evaluate1=E9=A1=B5=E9=9D=A2UI?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=EF=BC=8C=E5=8C=85=E6=8B=AC=EF=BC=9A=201.=20?=
 =?UTF-8?q?=E6=94=B9=E8=BF=9Bproduct-list=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B03=E5=88=97=E5=B8=83=E5=B1=80=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=8E=BB=E7=92=83=E8=B4=A8=E6=84=9F=E5=92=8C?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=202.=20=E6=94=B9=E8=BF=9Bi?=
 =?UTF-8?q?ndex=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=AE=9E=E7=8E=B03=E5=88=97?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E8=B4=A8=E6=84=9F=E5=92=8C=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E5=95=86=E5=93=81=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=203.=20=E9=87=8D=E5=86=99spec-detail?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=EF=BC=8C=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E6=8B=A5=E6=8C=A4=E5=92=8C=E8=B6=85=E5=B1=8F=E5=B9=95=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=8E=BB=E7=92=83=E8=B4=A8?=
 =?UTF-8?q?=E6=84=9F=E5=92=8C=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=204.=20?=
 =?UTF-8?q?=E7=A1=AE=E4=BF=9D=E6=89=80=E6=9C=89=E9=A1=B5=E9=9D=A2=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1=EF=BC=8C=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E5=B1=8F=E5=B9=95=E5=B0=BA=E5=AF=B8=205.=20?=
 =?UTF-8?q?=E4=B8=BA=E6=89=80=E6=9C=89=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=80=E8=87=B4=E7=9A=84=E7=8E=B0=E4=BB=A3UI=E9=A3=8E?=
 =?UTF-8?q?=E6=A0=BC=E5=92=8C=E4=BA=A4=E4=BA=92=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/evaluate1/index.wxml        |  50 ++--
 pages/evaluate1/index.wxss        | 461 +++++++++++++++++++-----------
 pages/evaluate1/product-list.wxml |  24 +-
 pages/evaluate1/product-list.wxss | 248 +++++++++++-----
 pages/evaluate1/spec-detail.js    |  16 ++
 pages/evaluate1/spec-detail.wxml  |  74 +++--
 pages/evaluate1/spec-detail.wxss  | 418 ++++++++++++++++++++++-----
 7 files changed, 919 insertions(+), 372 deletions(-)

diff --git a/pages/evaluate1/index.wxml b/pages/evaluate1/index.wxml
index 7119886..b684b08 100644
--- a/pages/evaluate1/index.wxml
+++ b/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="goBackToProductList" type="default" class="back-button">返回上一步</button>
+        <button bindtap="loadSpecifications" data-product="{{productName}}" class="btn-primary">重新加载</button>
+        <button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
       </view>
     </view>
     
     <!-- 商品信息 -->
-    <view wx:else class="product-info">
-      <text class="product-label">商品名称：</text>
-      <text class="product-value">{{productName}}</text>
-      <button bindtap="goBackToProductList" type="default" class="back-button">返回上一步</button>
+    <view wx:else class="product-card">
+      <view class="product-info-container">
+        <view class="product-info-row">
+          <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">
-            <text class="spec-price">¥{{item.finalPriceText}}</text>
-            <view class="spec-arrow">→</view>
+          <view class="spec-price">
+            <text class="price-label">参考价格</text>
+            <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 class="hint-icon">📋</view>
-      <text>该商品暂无可用规格</text>
+    <view wx:if="{{!loading && !error && specifications.length === 0}}" class="empty-state" style="height: 600rpx; display: flex; box-sizing: border-box">
+      <view class="empty-icon">📋</view>
+      <text class="empty-text">该商品暂无可用规格</text>
+      <button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
     </view>
   </view>
 </view>
\ No newline at end of file
diff --git a/pages/evaluate1/index.wxss b/pages/evaluate1/index.wxss
index 07e0b76..a68830e 100644
--- a/pages/evaluate1/index.wxss
+++ b/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;
-  color: #333;
+  font-weight: 700;
+  color: #2c3e50;
   letter-spacing: 2rpx;
 }
 
 .content {
   flex: 1;
-  padding: 20rpx;
-}
-
-.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;
+  padding: 16rpx;
 }
 
+/* 加载状态 */
 .loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 100rpx 0;
-  color: #666;
+  padding: 160rpx 0;
 }
 
 .loading-spinner {
-  width: 60rpx;
-  height: 60rpx;
-  border: 6rpx solid #f3f3f3;
-  border-top: 6rpx solid #FF6B81;
+  width: 80rpx;
+  height: 80rpx;
+  border: 8rpx solid rgba(74, 144, 226, 0.2);
+  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;
-  padding: 40rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  text-align: center;
 }
 
 .error-icon {
-  font-size: 60rpx;
-  margin-bottom: 20rpx;
+  font-size: 80rpx;
+  margin-bottom: 24rpx;
 }
 
-.error text {
-  display: block;
-  color: #ff4d4f;
-  margin-bottom: 30rpx;
+.error-text {
   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 {
-  width: 200rpx;
-  height: 70rpx;
-  line-height: 70rpx;
+.btn-primary {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
   font-size: 28rpx;
-  border-radius: 35rpx;
-  background-color: #FF6B81;
+  font-weight: 600;
+  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 {
-  display: flex;
-  gap: 20rpx;
-  margin-top: 20rpx;
+.btn-primary:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.5);
 }
 
-.button-group button {
+.btn-secondary {
   flex: 1;
-  height: 70rpx;
-  line-height: 70rpx;
+  height: 80rpx;
+  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 {
-  font-size: 30rpx;
-  font-weight: bold;
-  color: #333;
-  padding-left: 15rpx;
-  border-left: 5rpx solid #FF6B81;
+.btn-back:hover {
+  background: rgba(74, 144, 226, 0.1);
+  transform: translateY(-2rpx);
+  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.2);
 }
 
-.section-count {
-  font-size: 24rpx;
-  color: #999;
-  background-color: #f5f5f5;
-  padding: 5rpx 15rpx;
-  border-radius: 20rpx;
+.btn-back-icon {
+  margin-right: 8rpx;
+  font-size: 20rpx;
 }
 
-.product-list,
-.spec-list {
-  background-color: #fff;
-  border-radius: 12rpx;
-  padding: 30rpx;
-  margin-bottom: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+.btn-back-text {
+  font-size: 22rpx;
 }
 
-.product-items,
-.spec-items {
-  display: flex;
-  flex-direction: column;
-  gap: 15rpx;
+/* 商品信息卡片 */
+.product-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  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-info-container {
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.product-item {
+.product-info-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30rpx;
-  border-radius: 10rpx;
-  background-color: #f9f9f9;
-  border: 1rpx solid #eee;
-  transition: all 0.3s ease;
-  cursor: pointer;
+  margin-bottom: 16rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.product-label {
+  font-size: 24rpx;
+  color: #666;
+  font-weight: 500;
+  flex: 1;
 }
 
-.spec-item {
+.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;
+}
+
+.section-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  padding: 30rpx;
-  border-radius: 10rpx;
-  background-color: #f9f9f9;
-  border: 1rpx solid #eee;
+  align-items: center;
+  margin-bottom: 24rpx;
+  padding: 0 8rpx;
+}
+
+.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 {
-  flex: 1;
+.spec-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6rpx;
+  height: 100%;
+  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
 }
 
-.spec-price-arrow {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 10rpx;
-  width: 100%;
+.spec-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,
-.spec-item:hover {
-  background-color: #f0f0f0;
+.spec-card:active {
   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 {
-  background-color: #FFE6E6;
-  border-color: #FF6B81;
-  color: #FF6B81;
+.spec-info {
+  margin-bottom: 20rpx;
+  flex: 1;
+  display: flex;
+  align-items: center;
 }
 
-.product-name,
 .spec-name {
   font-size: 28rpx;
-  color: #333;
-  flex: 1;
+  font-weight: 600;
+  color: #2c3e50;
+  line-height: 1.4;
+  word-break: break-word;
+  padding-right: 40rpx;
 }
 
 .spec-price {
-  font-size: 28rpx;
-  font-weight: bold;
-  color: #FF6B81;
-  margin-right: 20rpx;
+  display: flex;
+  flex-direction: column;
+  margin-top: 16rpx;
 }
 
-.product-item.selected .product-name {
-  color: #FF6B81;
-  font-weight: bold;
+.price-label {
+  font-size: 20rpx;
+  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;
-  color: #999;
-  margin-left: 20rpx;
+  position: absolute;
+  top: 32rpx;
+  right: 28rpx;
+  font-size: 32rpx;
+  color: #4a90e2;
+  font-weight: bold;
+  opacity: 0.6;
+  transition: all 0.3s ease;
 }
 
-.product-item.selected .product-arrow {
-  color: #FF6B81;
+.spec-card:hover .spec-arrow {
+  opacity: 1;
+  transform: translateX(4rpx);
 }
 
-.hint {
+/* 空状态 */
+.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 100rpx 0;
-  color: #999;
-  font-size: 28rpx;
+  padding: 160rpx 0;
+  text-align: center;
 }
 
-.hint-icon {
-  font-size: 80rpx;
-  margin-bottom: 30rpx;
+.empty-icon {
+  font-size: 160rpx;
+  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-list {
-    padding: 20rpx;
+  .spec-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16rpx;
   }
   
-  .product-item,
-  .spec-item {
-    padding: 20rpx;
+  .product-card {
+    padding: 28rpx;
+  }
+  
+  .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;
   }
 }
diff --git a/pages/evaluate1/product-list.wxml b/pages/evaluate1/product-list.wxml
index 4b9e376..a9a526e 100644
--- a/pages/evaluate1/product-list.wxml
+++ b/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>
-      <button bindtap="loadProductNames" type="primary" class="retry-button">重试</button>
+      <text class="error-text">{{error}}</text>
+      <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-count">{{productNames.length}}个</text>
+        <text class="section-title">商品列表</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>
diff --git a/pages/evaluate1/product-list.wxss b/pages/evaluate1/product-list.wxss
index d0e5cfa..3c82648 100644
--- a/pages/evaluate1/product-list.wxss
+++ b/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;
-  color: #333;
+  font-weight: 700;
+  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;
-  color: #666;
+  padding: 160rpx 0;
 }
 
 .loading-spinner {
-  width: 60rpx;
-  height: 60rpx;
-  border: 6rpx solid #f3f3f3;
-  border-top: 6rpx solid #FF6B81;
+  width: 80rpx;
+  height: 80rpx;
+  border: 8rpx solid rgba(74, 144, 226, 0.2);
+  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;
-  padding: 40rpx;
-  background-color: #fff;
-  border-radius: 12rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  text-align: center;
 }
 
 .error-icon {
-  font-size: 60rpx;
-  margin-bottom: 20rpx;
+  font-size: 80rpx;
+  margin-bottom: 24rpx;
 }
 
-.error text {
-  display: block;
-  color: #ff4d4f;
-  margin-bottom: 30rpx;
+.error-text {
   font-size: 28rpx;
-  text-align: center;
+  color: #e74c3c;
+  margin-bottom: 32rpx;
+  line-height: 1.5;
 }
 
-.retry-button {
-  width: 200rpx;
-  height: 70rpx;
-  line-height: 70rpx;
+/* 按钮样式 */
+.btn-primary {
+  width: 240rpx;
+  height: 80rpx;
+  line-height: 80rpx;
   font-size: 28rpx;
-  border-radius: 35rpx;
-  background-color: #FF6B81;
+  font-weight: 600;
+  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;
-  color: #333;
-  padding-left: 15rpx;
-  border-left: 5rpx solid #FF6B81;
+  font-weight: 700;
+  color: #2c3e50;
+  padding-left: 16rpx;
+  border-left: 6rpx solid #4a90e2;
 }
 
 .section-count {
   font-size: 24rpx;
   color: #999;
-  background-color: #f5f5f5;
-  padding: 5rpx 15rpx;
+  background: rgba(74, 144, 226, 0.1);
+  padding: 6rpx 16rpx;
   border-radius: 20rpx;
 }
 
-.product-list {
-  background-color: #fff;
-  border-radius: 12rpx;
-  padding: 30rpx;
-  margin-bottom: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
+/* 商品网格布局 */
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+  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 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 30rpx;
-  border-radius: 10rpx;
-  background-color: #f9f9f9;
-  border: 1rpx solid #eee;
-  transition: all 0.3s ease;
-  cursor: pointer;
+.product-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6rpx;
+  background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%);
+}
+
+.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 {
-  background-color: #f0f0f0;
+.product-card:active {
   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;
-  color: #999;
-  margin-left: 20rpx;
+  position: absolute;
+  bottom: 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 {
-    padding: 20rpx;
+  .product-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16rpx;
   }
   
-  .product-item {
-    padding: 20rpx;
+  .product-card {
+    padding: 28rpx 20rpx;
+    min-height: 160rpx;
   }
   
   .title {
@@ -171,10 +246,35 @@
   }
   
   .section-title {
-    font-size: 26rpx;
+    font-size: 28rpx;
+  }
+  
+  .product-name {
+    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: 26rpx;
+    font-size: 22rpx;
+  }
+  
+  .product-icon {
+    font-size: 50rpx;
   }
 }
diff --git a/pages/evaluate1/spec-detail.js b/pages/evaluate1/spec-detail.js
index 0a47a20..4194c37 100644
--- a/pages/evaluate1/spec-detail.js
+++ b/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;
diff --git a/pages/evaluate1/spec-detail.wxml b/pages/evaluate1/spec-detail.wxml
index 701718f..e4c2898 100644
--- a/pages/evaluate1/spec-detail.wxml
+++ b/pages/evaluate1/spec-detail.wxml
@@ -1,45 +1,59 @@
-<view class="container">
-  <view class="header">
-    <text class="title">{{productName}}</text>
+<view class="page-container">
+  <!-- 头部导航栏 -->
+  <view class="page-header">
+    <text class="header-title">{{productName || '规格详情'}}</text>
   </view>
   
-  <view class="content">
-    <view class="spec-card">
-      <view class="spec-item">
-        <text class="label">规格：</text>
-        <text class="value">{{specification}}</text>
+  <!-- 主要内容区域 -->
+  <view class="main-content">
+    <!-- 规格信息卡片 -->
+    <view class="info-card">
+      <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">
-        <text class="label">单价：</text>
-        <text class="value price">¥{{price || 0}}</text>
-      </view>
-      <view class="spec-info">
-        <text>您已选择此规格进行估价</text>
+      <view class="info-row">
+        <text class="info-label">单价</text>
+        <text class="info-value price">¥{{price || 0}}</text>
       </view>
+      <text class="info-hint">您已选择此规格进行估价</text>
     </view>
     
-    <view class="quantity-section">
-      <text class="label">件数：</text>
-      <input 
-        class="quantity-input" 
-        type="number" 
-        value="{{quantity}}" 
-        bindinput="onQuantityChange" 
-        min="1"
-      />
+    <!-- 数量设置卡片 -->
+    <view class="control-card">
+      <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>
-      <text class="result-value">¥{{totalPrice > 0 ? totalPrice : ''}}</text>
+    <!-- 结果展示卡片 -->
+    <view class="result-card" wx:if="{{totalPrice > 0}}">
+      <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>
\ No newline at end of file
diff --git a/pages/evaluate1/spec-detail.wxss b/pages/evaluate1/spec-detail.wxss
index ff2b602..8fd2942 100644
--- a/pages/evaluate1/spec-detail.wxss
+++ b/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;
-  border-bottom: 1rpx solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
-.title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333;
+.header-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  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;
-  border-radius: 12rpx;
-  padding: 40rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
-  margin-bottom: 40rpx;
+/* 卡片基础样式 */
+.info-card,
+.control-card,
+.result-card {
+  background: rgba(255, 255, 255, 0.95);
+  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;
+}
+
+.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);
 }
 
-.spec-item {
+/* 卡片标题 */
+.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 {
-  font-size: 28rpx;
-  color: #666;
-  margin-right: 20rpx;
-  width: 120rpx;
+.info-row:last-child {
+  border-bottom: none;
 }
 
-.value {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #FF6B81;
-  flex: 1;
+.info-label {
+  font-size: 26rpx;
+  color: #64748b;
+  font-weight: 500;
 }
 
-.price {
-  color: #FF6B81;
+.info-value {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #2c3e50;
 }
 
-.spec-info {
-  padding-top: 20rpx;
-  border-top: 1rpx solid #eee;
+.info-value.price {
+  color: #ef4444;
+  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;
-  color: #999;
+/* 数量控制 */
+.quantity-box {
+  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-radius: 8rpx;
-  padding: 0 20rpx;
+  border: 2rpx solid rgba(96, 165, 250, 0.4);
+  border-radius: 16rpx;
+  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;
-  justify-content: center;
-  margin-bottom: 30rpx;
+/* 按钮区域 */
+.button-section {
+  margin-top: 12rpx;
 }
 
-.calculate-button {
-  width: 80%;
-  height: 80rpx;
+.button-section.bottom {
+  margin-top: 20rpx;
+}
+
+/* 按钮样式 */
+.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;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.result-section {
+/* 结果行 */
+.result-row {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  margin-bottom: 40rpx;
-  padding: 20rpx;
-  background-color: #f9f9f9;
-  border-radius: 8rpx;
+  padding: 20rpx 0;
 }
 
 .result-label {
-  font-size: 28rpx;
-  color: #666;
-  margin-right: 20rpx;
-  width: 120rpx;
+  font-size: 26rpx;
+  color: #64748b;
+  font-weight: 500;
 }
 
 .result-value {
   font-size: 36rpx;
-  font-weight: bold;
-  color: #FF6B81;
-  flex: 1;
+  font-weight: 700;
+  color: #ef4444;
+  text-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.2);
 }
 
-.action {
-  display: flex;
-  justify-content: center;
+/* 结果提示 */
+.result-hint {
+  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%;
-  height: 80rpx;
-  font-size: 28rpx;
-  border-radius: 40rpx;
+/* 响应式设计 */
+@media (max-width: 750rpx) {
+  .main-content {
+    padding: 20rpx;
+    gap: 20rpx;
+  }
+  
+  .info-card,
+  .control-card,
+  .result-card {
+    padding: 28rpx;
+  }
+  
+  .header-title {
+    font-size: 28rpx;
+  }
+  
+  .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;
+  }
 }