'首页样式'

pages/index/components/StepsFlow.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- 4步开始你的按需定制生意 -->
+  <!-- 4步开始你的按需定制生意 - Figma 1433:1295 -->
   <view class="steps-section">
     <text class="section-title">4步开始你的按需定制生意</text>
 
@@ -14,21 +14,21 @@
           @tap="onStepTap(index)"
         >
           <text class="step-num">{{ item.step }}</text>
-          <text class="step-title">{{ item.title }}</text>
-          <text class="step-desc">{{ item.desc }}</text>
+          <view class="step-text">
+            <text class="step-title">{{ item.title }}</text>
+            <text class="step-desc">{{ item.desc }}</text>
+          </view>
         </view>
       </view>
     </scroll-view>
 
-    <!-- 预览大图 -->
+    <!-- 预览大图 - image 25 370x370 6px圆角 -->
     <view class="preview-wrap">
-      <view class="preview-img-box">
-        <image
-          class="preview-img"
-          src="/static/images/home/image_25_1484_1689.png"
-          mode="widthFix"
-        ></image>
-      </view>
+      <image
+        class="preview-img"
+        src="/static/images/home/image_25_1484_1689.png"
+        mode="widthFix"
+      ></image>
     </view>
   </view>
 </template>
@@ -59,91 +59,97 @@ export default {
 <style scoped>
 .steps-section {
   width: 100%;
-  padding: 60rpx 0 0 0;
+  padding: 0;
   background: #ffffff;
 }
 
-/* 区块标题 - 设计稿 20px/400/#1a1a1a */
+/* 区块标题 - 20px Heavy #1A1A1A 居中 */
 .section-title {
   display: block;
-  padding: 0 32rpx;
-  font-size: 38rpx;
-  font-weight: 700;
+  text-align: center;
+  font-size: 40rpx;
+  font-weight: 900;
   color: #1a1a1a;
-  margin-bottom: 32rpx;
+  line-height: 1.45;
+  margin-top: 96rpx;
+  margin-bottom: 64rpx;
 }
 
 /* 步骤卡片横向滚动 */
 .steps-scroll {
   width: 100%;
   white-space: nowrap;
+  padding: 0 20rpx;
+  box-sizing: border-box;
 }
 .steps-list {
   display: inline-flex;
-  gap: 20rpx;
-  padding: 0 32rpx;
+  gap: 16rpx;
 }
+/* 卡片 - 166x80 圆角6px */
 .step-card {
   flex-shrink: 0;
-  width: 320rpx;
-  padding: 28rpx 24rpx;
-  background: #f8f8f8;
+  width: 332rpx;
+  height: 160rpx;
+  padding: 20rpx;
+  background: #f2f2f2;
   border-radius: 12rpx;
+  box-sizing: border-box;
   display: flex;
-  flex-direction: column;
+  align-items: flex-start;
+  gap: 16rpx;
 }
 .step-card.active {
   background: #ff6800;
 }
-/* 步骤编号 - 设计稿 16px/900/#ff6800 (未选中) / #ffffff (选中) */
+/* 步骤编号 - 16px Black weight 900 */
 .step-num {
   font-size: 32rpx;
   font-weight: 900;
   color: #ff6800;
-  line-height: 1;
-  margin-bottom: 12rpx;
+  line-height: 52rpx;
 }
 .step-card.active .step-num {
   color: #ffffff;
 }
-/* 步骤标题 - 设计稿 16px/400/#1a1a1a (未选中) / #ffffff (选中) */
+.step-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+/* 步骤标题 - 16px Medium */
 .step-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 8rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #000000;
+  line-height: 44rpx;
 }
 .step-card.active .step-title {
   color: #ffffff;
 }
-/* 步骤描述 - 设计稿 10px/400/#ffffff (选中态描述) */
+/* 步骤描述 - 10px Regular opacity 0.6 */
 .step-desc {
+  margin-top: 6rpx;
   font-size: 20rpx;
-  color: #999999;
-  line-height: 1.5;
+  color: #000000;
+  opacity: 0.6;
+  line-height: 1.45;
   white-space: normal;
 }
 .step-card.active .step-desc {
-  color: rgba(255, 255, 255, 0.85);
+  color: #ffffff;
+  opacity: 1;
 }
 
-/* 预览大图 */
+/* 预览大图 - 370x370 6px圆角 */
 .preview-wrap {
-  margin-top: 50rpx;
-  padding: 0 32rpx;
-}
-.preview-img-box {
-  width: 100%;
-  background: #ff6800;
-  border-radius: 12rpx;
-  padding: 20rpx;
+  margin-top: 20rpx;
+  padding: 0 20rpx;
   box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 .preview-img {
   width: 100%;
+  border-radius: 12rpx;
   display: block;
 }
 </style>