fix: avatar page

pages/avatar/index.vue

@@ -13,7 +13,6 @@
           @tap="openTool(tool.type)"
         >
           <view class="step-num-wrap">
-            <view class="step-line" v-if="idx > 0"></view>
             <view class="step-num">
               <text v-if="activeTool === tool.type">{{ tool.icon }}</text>
               <text v-else>{{ tool.step }}</text>
@@ -713,73 +712,67 @@ onShareAppMessage(async () => {
 
 .top-steps {
   background: #fff;
-  padding: 30rpx 0;
+  padding: 30rpx 40rpx;
   margin-bottom: 20rpx;
   position: sticky;
+  top: var(--window-top);
   z-index: 100;
 
   .step-bar {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 40rpx;
+    background: #f5f5f5;
+    padding: 8rpx;
+    border-radius: 50rpx;
+    position: relative;
   }
 
   .step-item {
     display: flex;
-    flex-direction: column;
     align-items: center;
+    justify-content: center;
+    height: 72rpx;
     position: relative;
     flex: 1;
+    z-index: 2;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 40rpx;
 
     .step-num-wrap {
       display: flex;
       align-items: center;
-      width: 100%;
-      justify-content: center;
-      margin-bottom: 12rpx;
-    }
-
-    .step-line {
-      position: absolute;
-      left: -50%;
-      right: 50%;
-      top: 20rpx;
-      height: 2rpx;
-      background: #eee;
-      z-index: 1;
+      margin-right: 12rpx;
     }
 
     .step-num {
-      width: 40rpx;
-      height: 40rpx;
-      background: #f5f5f5;
+      width: 36rpx;
+      height: 36rpx;
+      background: #e0e0e0;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 20rpx;
-      color: #999;
-      position: relative;
-      z-index: 2;
+      font-size: 18rpx;
+      color: #666;
       transition: all 0.3s;
     }
 
     .step-text {
-      font-size: 24rpx;
-      color: #999;
+      font-size: 26rpx;
+      color: #666;
       transition: all 0.3s;
     }
 
     &.active {
+      background: #fff;
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+
       .step-num {
         background: #ff3b30;
         color: #fff;
-        transform: scale(1.2);
-        box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
       }
+
       .step-text {
-        color: #ff3b30;
+        color: #333;
         font-weight: bold;
       }
     }