'首页样式'

pages/index/components/WhyChoose.vue

@@ -1,15 +1,14 @@
 <template>
-  <!-- 为什么选择 Inkreach -->
+  <!-- 为什么选择 Inkreach - Figma 1458:1492 -->
   <view class="why-section">
-    <text class="section-title">为什么选择Inkreach？</text>
+    <!-- 区块标题 - 20px Heavy #1A1A1A 居中 -->
+    <text class="section-title">为什么选择Inkrecah？</text>
 
+    <!-- 2x2 网格 - 180x80 卡片 -->
     <view class="why-grid">
       <view class="why-card" v-for="(item, index) in reasons" :key="index">
-        <view class="why-icon">
-          <image class="icon-img" :src="getIcon(index)" mode="aspectFit"></image>
-        </view>
+        <image class="why-icon" :src="item.icon" mode="aspectFit"></image>
         <text class="why-title">{{ item.title }}</text>
-        <text class="why-desc">{{ item.desc }}</text>
       </view>
     </view>
   </view>
@@ -23,75 +22,61 @@ export default {
       type: Array,
       default: () => []
     }
-  },
-  methods: {
-    getIcon(index) {
-      const icons = [
-        '/static/icons/home/零库存图标.svg',
-        '/static/icons/home/快速生产图标.svg',
-        '/static/icons/home/优质产品图标.svg',
-        '/static/icons/home/全球配送图标.svg'
-      ]
-      return icons[index] || ''
-    }
   }
 }
 </script>
 
 <style scoped>
+/* 区块 - 灰色背景 #F8F8F8 */
 .why-section {
   width: 100%;
-  padding: 70rpx 0 0 0;
+  padding: 96rpx 0 80rpx 0;
   background: #f8f8f8;
+  box-sizing: border-box;
 }
 
+/* 区块标题 - 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: 30rpx;
+  line-height: 1.45;
+  margin-bottom: 64rpx;
 }
 
-/* 2列网格 - 用 space-between 兼容小程序 */
+/* 2x2 网格 - 自适应2列(避免宽度+间距同时固定导致挤压) */
 .why-grid {
-  padding: 0 32rpx;
+  padding: 0 20rpx;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 20rpx;
 }
 .why-card {
-  width: 330rpx;
-  padding: 36rpx 28rpx;
+  flex: 1 1 calc(50% - 10rpx);
+  min-width: 0;
+  height: 160rpx;
   background: #ffffff;
   border-radius: 12rpx;
   margin-bottom: 20rpx;
-  display: flex;
-  flex-direction: column;
+  padding: 0 40rpx;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
 }
+/* 图标 26x26 */
 .why-icon {
   width: 52rpx;
   height: 52rpx;
-  margin-bottom: 20rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.icon-img {
-  width: 100%;
-  height: 100%;
+  flex-shrink: 0;
 }
+/* 标题 - 16px Bold #000000 */
 .why-title {
-  font-size: 28rpx;
-  font-weight: 500;
-  color: #1a1a1a;
-  margin-bottom: 8rpx;
-}
-.why-desc {
-  font-size: 22rpx;
-  color: #999999;
-  line-height: 1.5;
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #000000;
+  line-height: 1.2;
 }
 </style>