估价ui优化

pages/evaluate2/index.js

@@ -3,6 +3,7 @@ Page({
     productName: '',
     category: '',
     specifications: [],
+    selectedSpec: '',
     loading: false,
     error: '',
     navigating: false
@@ -474,11 +475,14 @@ Page({
     wx.stopPullDownRefresh();
   },
   
-  // 跳转到规格详情页面
+  // 选择规格
-  goToSpecDetail(e) {
+  selectSpec(e) {
     this.navigateLock(() => {
       const specItem = e.currentTarget.dataset.spec;
-      console.log('点击的规格项:', specItem);
+      this.setData({
+        selectedSpec: specItem.name
+      });
+      console.log('选择的规格项:', specItem);
       console.log('传递的价格:', specItem.finalPriceText);
       console.log('传递的分类:', this.data.category);
       wx.navigateTo({
@@ -487,6 +491,11 @@ Page({
     });
   },
 
+  // 跳转到规格详情页面
+  goToSpecDetail(e) {
+    this.selectSpec(e);
+  },
+  
   // 返回上一页
   goBack() {
     this.navigateLock(() => {

pages/evaluate2/index.wxml

@@ -1,5 +1,37 @@
 <view class="container">
+  <!-- 步骤指示器 -->
+  <view class="step-indicator">
+    <view class="step-item active">
+      <view class="step-number">1</view>
+      <text class="step-text">选择品种</text>
+    </view>
+    <view class="step-line active"></view>
+    <view class="step-item active">
+      <view class="step-number">2</view>
+      <text class="step-text">选择产品</text>
+    </view>
+    <view class="step-line active"></view>
+    <view class="step-item active">
+      <view class="step-number">3</view>
+      <text class="step-text">选择规格</text>
+    </view>
+    <view class="step-line"></view>
+    <view class="step-item">
+      <view class="step-number">4</view>
+      <text class="step-text">查看估价</text>
+    </view>
+  </view>
+  
   <!-- 头部导航栏 -->
+  <view class="header">
+    <view class="header-content">
+      <button class="back-button" bindtap="goBackToProductList">
+        <text class="back-icon">←</text>
+      </button>
+      <text class="title">规格选择</text>
+      <view class="header-right"></view> <!-- 占位，保持标题居中 -->
+    </view>
+  </view>
   <view class="content">
     <!-- 加载中状态 -->
     <view wx:if="{{loading}}" class="loading">
@@ -21,12 +53,17 @@
     <view wx:else class="product-card">
       <view class="product-info-container">
         <view class="product-info-row">
-          <view class="product-name-container">
+          <view class="product-image-container">
+            <image 
+              src="../../images/OIP-C.png" 
+              mode="aspectFill"
+              class="product-image"
+            />
+          </view>
+          <view class="product-details">
             <text class="product-name">{{productName}}</text>
+            <text class="product-hint">请选择重量规格</text>
           </view>
-          <button bindtap="goBackToProductList" class="btn-change-product">
-            <text class="btn-change-product-text">更换商品</text>
-          </button>
         </view>
       </view>
     </view>
@@ -43,9 +80,14 @@
             wx:key="item.name" 
             class="spec-item"
             data-spec="{{item}}"
-            bindtap="goToSpecDetail"
+            bindtap="selectSpec"
           >
-            <text class="spec-name">{{item.name}}</text>
+            <view class="spec-info">
+              <text class="spec-name">{{item.name}}</text>
+            </view>
+            <view class="spec-radio {{selectedSpec === item.name ? 'selected' : ''}}">
+              <view wx:if="selectedSpec === item.name" class="radio-inner"></view>
+            </view>
           </view>
         </view>
         

pages/evaluate2/index.wxss

@@ -6,56 +6,131 @@
   font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 }
 
+/* 步骤指示器 */
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  background: #FFFFFF;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  margin-bottom: 24rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.step-number {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: #E5E5E5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #999;
+  margin-bottom: 8rpx;
+  transition: all 0.3s ease;
+}
+
+.step-text {
+  font-size: 20rpx;
+  color: #999;
+  transition: all 0.3s ease;
+}
+
+.step-item.active .step-number {
+  background: #007AFF;
+  color: #FFFFFF;
+  box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
+}
+
+.step-item.active .step-text {
+  color: #007AFF;
+  font-weight: 500;
+}
+
+.step-line {
+  flex: 1;
+  height: 2rpx;
+  background: #E5E5E5;
+  margin: 0 16rpx;
+  transition: all 0.3s ease;
+}
+
+.step-line.active {
+  background: #007AFF;
+}
+
 .header {
   background: #FFFFFF;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
   position: sticky;
   top: 0;
   z-index: 10;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .header-content {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 24rpx 32rpx;
   width: 100%;
   box-sizing: border-box;
   height: 100rpx;
+  max-width: 100%;
+  position: relative;
 }
 
 .back-button {
   width: 100rpx;
   height: 60rpx;
   line-height: 60rpx;
-  font-size: 26rpx;
+  font-size: 36rpx;
   color: #4a90e2;
   background: transparent;
   border: none;
-  padding: 0;
+  padding: 0 16rpx 0 0;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   border-radius: 8rpx;
   transition: all 0.3s ease;
+  flex-shrink: 0;
+  overflow: visible;
 }
 
 .back-button:hover {
   color: #3b82f6;
   background: rgba(74, 144, 226, 0.1);
-  transform: translateX(-2rpx);
 }
 
 .back-icon {
   margin-right: 8rpx;
-  font-size: 22rpx;
+  font-size: 36rpx;
   font-weight: 600;
+  transition: all 0.3s ease;
+  display: inline-block;
+}
+
+.back-button:hover .back-icon {
+  transform: translateX(-12rpx);
+  font-weight: 700;
 }
 
 .back-text {
-  font-size: 26rpx;
+  font-size: 36rpx;
-  font-weight: 500;
+  font-weight: 700;
 }
 
 .title {
@@ -63,14 +138,19 @@
   font-weight: 700;
   color: #2c3e50;
   letter-spacing: 2rpx;
-  flex: 1;
   text-align: center;
   margin: 0;
   padding: 0;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 300rpx;
 }
 
 .header-right {
-  width: 100rpx;
+  width: 60rpx;
+  flex-shrink: 0;
 }
 
 .content {
@@ -234,17 +314,32 @@
 
 .product-info-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   width: 100%;
   box-sizing: border-box;
 }
 
-.product-name-container {
+.product-image-container {
-  display: flex;
+  width: 120rpx;
-  align-items: center;
+  height: 120rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  margin-right: 24rpx;
+  background: #F5F5F5;
+  flex-shrink: 0;
+}
+
+.product-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-details {
   flex: 1;
-  margin-right: 16rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
 }
 
 .product-name {
@@ -253,13 +348,18 @@
   color: #333;
   line-height: 1.4;
   word-break: break-word;
-  flex: 1;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
+.product-hint {
+  font-size: 24rpx;
+  color: #999;
+  line-height: 1.4;
+}
+
 /* 规格列表区域 */
 .spec-section {
   margin-top: 32rpx;
@@ -293,8 +393,8 @@
 /* 规格列表布局 */
 .spec-list {
   margin-top: 16rpx;
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(2, 1fr);
+  flex-direction: column;
   gap: 16rpx;
   width: 100%;
 }
@@ -302,17 +402,32 @@
 /* 规格项 */
 .spec-item {
   background: #FFFFFF;
+  border: 1rpx solid #E5E5E5;
   border-radius: 12rpx;
-  padding: 32rpx 24rpx;
+  padding: 32rpx 32rpx;
   cursor: pointer;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   width: 100%;
+  box-sizing: border-box;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
   transition: all 0.3s ease;
 }
 
+.spec-radio {
+  width: 32rpx;
+  height: 32rpx;
+  border: 2rpx solid #E5E5E5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+  margin-left: 16rpx;
+}
+
 .spec-item:hover {
   box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
   transform: translateY(-2rpx);
@@ -322,16 +437,59 @@
   background: #F5F5F5;
 }
 
+.spec-item.selected {
+  border: 2rpx solid #007AFF;
+  box-shadow: 0 0 0 4rpx rgba(0,122,255,0.1);
+}
+
+.spec-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
 .spec-name {
   font-size: 30rpx;
   font-weight: 500;
   color: #333;
   line-height: 1.4;
   word-break: break-word;
-  text-align: center;
   padding: 0 8rpx;
 }
 
+.spec-details {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.4;
+  padding: 0 8rpx;
+}
+
+.spec-radio {
+  width: 32rpx;
+  height: 32rpx;
+  border: 2rpx solid #E5E5E5;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.spec-radio.selected {
+  border-color: #007AFF;
+  background: #007AFF;
+}
+
+.radio-inner {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: #FFFFFF;
+  transition: all 0.3s ease;
+}
+
 /* 空状态 */
 .empty-state {
   display: flex;
@@ -407,10 +565,26 @@
     font-size: 28rpx;
   }
   
+  .spec-details {
+    font-size: 22rpx;
+  }
+  
   .spec-list {
-    grid-template-columns: repeat(2, 1fr);
     gap: 16rpx;
   }
+  
+  .product-image-container {
+    width: 100rpx;
+    height: 100rpx;
+  }
+  
+  .product-name {
+    font-size: 28rpx;
+  }
+  
+  .product-hint {
+    font-size: 22rpx;
+  }
 }
 
 /* 小屏幕设备适配 */
@@ -439,6 +613,10 @@
     font-size: 24rpx;
   }
   
+  .spec-details {
+    font-size: 20rpx;
+  }
+  
   .btn-change-product {
     padding: 10rpx 20rpx;
   }
@@ -448,9 +626,21 @@
   }
   
   .spec-list {
-    grid-template-columns: repeat(2, 1fr);
     gap: 12rpx;
   }
+  
+  .product-image-container {
+    width: 80rpx;
+    height: 80rpx;
+  }
+  
+  .product-name {
+    font-size: 26rpx;
+  }
+  
+  .product-hint {
+    font-size: 20rpx;
+  }
 }
 
 /* 暂无更多规格提示 */

pages/evaluate2/one.wxml

@@ -1,5 +1,26 @@
 <view class="container">
-  <!-- 头部导航栏 -->
+  <!-- 步骤指示器 -->
+  <view class="step-indicator">
+    <view class="step-item active">
+      <view class="step-number">1</view>
+      <text class="step-text">选择品种</text>
+    </view>
+    <view class="step-line"></view>
+    <view class="step-item">
+      <view class="step-number">2</view>
+      <text class="step-text">选择产品</text>
+    </view>
+    <view class="step-line"></view>
+    <view class="step-item">
+      <view class="step-number">3</view>
+      <text class="step-text">选择规格</text>
+    </view>
+    <view class="step-line"></view>
+    <view class="step-item">
+      <view class="step-number">4</view>
+      <text class="step-text">查看估价</text>
+    </view>
+  </view>
   
   <!-- 登录弹窗 -->
   <view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">

pages/evaluate2/one.wxss

@@ -6,12 +6,78 @@
   font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 }
 
+/* 步骤指示器 */
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  background: #FFFFFF;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  margin-bottom: 24rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.step-number {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: #E5E5E5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #999;
+  margin-bottom: 8rpx;
+  transition: all 0.3s ease;
+}
+
+.step-text {
+  font-size: 20rpx;
+  color: #999;
+  transition: all 0.3s ease;
+}
+
+.step-item.active .step-number {
+  background: #007AFF;
+  color: #FFFFFF;
+  box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
+}
+
+.step-item.active .step-text {
+  color: #007AFF;
+  font-weight: 500;
+}
+
+.step-line {
+  flex: 1;
+  height: 2rpx;
+  background: #E5E5E5;
+  margin: 0 16rpx;
+  transition: all 0.3s ease;
+}
+
+.step-line.active {
+  background: #007AFF;
+}
+
 .header {
   background: #FFFFFF;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
   position: sticky;
   top: 0;
   z-index: 10;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .header-content {
@@ -23,6 +89,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  max-width: 100%;
 }
 
 .title {
@@ -572,7 +639,11 @@
 .card-footer {
   display: flex;
   justify-content: center;
+  align-items: center;
   margin-top: 16rpx;
+  width: 100%;
+  padding: 0 20rpx;
+  box-sizing: border-box;
 }
 
 .select-button {
@@ -585,9 +656,12 @@
   font-weight: 600;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8rpx;
   box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
   transition: all 0.3s ease;
+  width: 100%;
+  max-width: 200rpx;
 }
 
 .select-button:hover {

pages/evaluate2/product-list.wxml

@@ -1,10 +1,32 @@
 <view class="container">
+  <!-- 步骤指示器 -->
+  <view class="step-indicator">
+    <view class="step-item active">
+      <view class="step-number">1</view>
+      <text class="step-text">选择品种</text>
+    </view>
+    <view class="step-line active"></view>
+    <view class="step-item active">
+      <view class="step-number">2</view>
+      <text class="step-text">选择产品</text>
+    </view>
+    <view class="step-line"></view>
+    <view class="step-item">
+      <view class="step-number">3</view>
+      <text class="step-text">选择规格</text>
+    </view>
+    <view class="step-line"></view>
+    <view class="step-item">
+      <view class="step-number">4</view>
+      <text class="step-text">查看估价</text>
+    </view>
+  </view>
+  
   <!-- 头部导航栏 -->
   <view class="header">
     <view class="header-content">
       <button class="back-button" bindtap="goBackToCategories">
         <text class="back-icon">←</text>
-        <text class="back-text">分类</text>
       </button>
       <text class="title">商品选择</text>
       <view class="header-right"></view> <!-- 占位，保持标题居中 -->
@@ -29,18 +51,8 @@
       
       <!-- 商品名称列表 -->
       <view wx:else class="product-section">
-      <!-- 当前选择的分类 -->
-      <view wx:if="{{category}}" class="current-category">
-        <view class="current-category-content">
-          <text class="current-category-name">{{category}}</text>
-        </view>
-        <!-- 价格范围 -->
-        <view wx:if="{{priceRange.hasPrice}}" class="price-range">
-          <text class="price-range-value">¥{{priceRange.min}} - ¥{{priceRange.max}}</text>
-        </view>
-      </view>
       <view class="section-header">
-        <text class="section-title">商品列表</text>
+        <text class="section-title">{{category}}系列的商品列表</text>
         <view class="section-count">{{productNames.length}}个商品</view>
       </view>
       <view class="section-divider"></view>
@@ -54,6 +66,13 @@
           data-product="{{item}}"
           bindtap="selectProduct"
         >
+          <view class="product-image-container">
+            <image 
+              src="../../images/OIP-C.png" 
+              mode="aspectFill"
+              class="product-image"
+            />
+          </view>
           <text class="product-name">{{item}}</text>
         </view>
       </view>

pages/evaluate2/product-list.wxss

@@ -9,22 +9,108 @@
   box-sizing: border-box;
 }
 
+/* 步骤指示器 */
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  background: #FFFFFF;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  margin-bottom: 24rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.step-number {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: #E5E5E5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #999;
+  margin-bottom: 8rpx;
+  transition: all 0.3s ease;
+}
+
+.step-text {
+  font-size: 20rpx;
+  color: #999;
+  transition: all 0.3s ease;
+}
+
+.step-item.active .step-number {
+  background: #007AFF;
+  color: #FFFFFF;
+  box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
+}
+
+.step-item.active .step-text {
+  color: #007AFF;
+  font-weight: 500;
+}
+
+.step-line {
+  flex: 1;
+  height: 2rpx;
+  background: #E5E5E5;
+  margin: 0 16rpx;
+  transition: all 0.3s ease;
+}
+
+.step-line.active {
+  background: #007AFF;
+}
+
 .header {
   background: #FFFFFF;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
   position: sticky;
   top: 0;
   z-index: 10;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .header-content {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 24rpx 32rpx;
   width: 100%;
   box-sizing: border-box;
   height: 100rpx;
+  max-width: 100%;
+}
+
+.title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #2c3e50;
+  letter-spacing: 2rpx;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 300rpx;
+}
+
+.header-content {
+  position: relative;
 }
 
 /* 返回按钮样式 */
@@ -32,34 +118,42 @@
   width: 100rpx;
   height: 60rpx;
   line-height: 60rpx;
-  font-size: 26rpx;
+  font-size: 36rpx;
   color: #4a90e2;
   background: transparent;
   border: none;
-  padding: 0;
+  padding: 0 16rpx 0 0;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   border-radius: 8rpx;
   transition: all 0.3s ease;
+  flex-shrink: 0;
+  overflow: visible;
 }
 
 .back-button:hover {
   color: #3b82f6;
   background: rgba(74, 144, 226, 0.1);
-  transform: translateX(-2rpx);
 }
 
 .back-icon {
   margin-right: 8rpx;
-  font-size: 22rpx;
+  font-size: 36rpx;
   font-weight: 600;
+  transition: all 0.3s ease;
+  display: inline-block;
+}
+
+.back-button:hover .back-icon {
+  transform: translateX(-12rpx);
+  font-weight: 700;
 }
 
 .back-text {
-  font-size: 26rpx;
+  font-size: 36rpx;
-  font-weight: 500;
+  font-weight: 700;
 }
 
 .title {
@@ -74,7 +168,8 @@
 }
 
 .header-right {
-  width: 100rpx;
+  width: 60rpx;
+  flex-shrink: 0;
 }
 
 .content {
@@ -270,16 +365,32 @@
   border-radius: 16rpx;
   padding: 16rpx;
   cursor: pointer;
-  min-height: 120rpx;
+  min-height: 240rpx;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   width: 100%;
   box-sizing: border-box;
   box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
   transition: all 0.3s ease;
 }
 
+.product-image-container {
+  width: 100%;
+  height: 160rpx;
+  margin-bottom: 16rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+  background: #F5F5F5;
+}
+
+.product-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .product-card:hover {
   box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.08);
   transform: translateY(-2rpx);
@@ -311,7 +422,11 @@
   
   .product-card {
     padding: 16rpx;
-    min-height: 110rpx;
+    min-height: 220rpx;
+  }
+  
+  .product-image-container {
+    height: 140rpx;
   }
   
   .title {
@@ -351,7 +466,11 @@
   
   .product-card {
     padding: 16rpx;
-    min-height: 100rpx;
+    min-height: 200rpx;
+  }
+  
+  .product-image-container {
+    height: 120rpx;
   }
   
   .product-name {

pages/evaluate2/spec-detail.wxml

@@ -1,4 +1,26 @@
 <view class="page-container">
+  <!-- 步骤指示器 -->
+  <view class="step-indicator">
+    <view class="step-item active">
+      <view class="step-number">1</view>
+      <text class="step-text">选择品种</text>
+    </view>
+    <view class="step-line active"></view>
+    <view class="step-item active">
+      <view class="step-number">2</view>
+      <text class="step-text">选择产品</text>
+    </view>
+    <view class="step-line active"></view>
+    <view class="step-item active">
+      <view class="step-number">3</view>
+      <text class="step-text">选择规格</text>
+    </view>
+    <view class="step-line active"></view>
+    <view class="step-item active">
+      <view class="step-number">4</view>
+      <text class="step-text">查看估价</text>
+    </view>
+  </view>
   
   <!-- 主要内容区域 -->
   <view class="main-content">

pages/evaluate2/spec-detail.wxss

@@ -8,6 +8,70 @@
   box-sizing: border-box;
 }
 
+/* 步骤指示器 */
+.step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  background: #FFFFFF;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+  margin-bottom: 24rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.step-number {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  background: #E5E5E5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #999;
+  margin-bottom: 8rpx;
+  transition: all 0.3s ease;
+}
+
+.step-text {
+  font-size: 20rpx;
+  color: #999;
+  transition: all 0.3s ease;
+}
+
+.step-item.active .step-number {
+  background: #007AFF;
+  color: #FFFFFF;
+  box-shadow: 0 0 0 8rpx rgba(0,122,255,0.1);
+}
+
+.step-item.active .step-text {
+  color: #007AFF;
+  font-weight: 500;
+}
+
+.step-line {
+  flex: 1;
+  height: 2rpx;
+  background: #E5E5E5;
+  margin: 0 16rpx;
+  transition: all 0.3s ease;
+}
+
+.step-line.active {
+  background: #007AFF;
+}
+
 /* 头部样式 */
 .page-header {
   background: rgba(255, 255, 255, 0.95);