'颜色尺码价格联动'

pages/product-detail/components/PackagingSpec.vue

@@ -1,5 +1,8 @@
 <template>
-  <!-- 包装规格表：4 列 × 4 行，每个数据单元格双单位（cm + in） -->
+  <!-- 包装规格表 - Figma 1544:530 对应节点 -->
+  <!-- 4 列：尺码 / 尺寸(L*W*H) / 体积(L*W*H) / 重量(g) -->
+  <!-- 表头:bg #DFDFDF 高度 40px 圆角 6px 文字13px 居中 -->
+  <!-- 数据行:bg #F7F7F7 高度 60px -->
   <view class="pack-wrap">
     <view class="header-row">
       <text class="title">包装规格</text>
@@ -7,40 +10,39 @@
     </view>
 
     <view class="table">
-      <!-- 表头：bg #DFDFDF，圆角 6px -->
+      <!-- 表头 -->
       <view class="row header">
         <text
           class="cell"
           v-for="(col, index) in data.columns"
-          :key="index"
+          :key="'h-' + index"
         >{{ col }}</text>
       </view>
 
-      <!-- 数据行：偶数行 bg #F7F7F7，行高 60px（双行内容） -->
+      <!-- 数据行：按尺码聚合，每行一个尺码 -->
       <view
         class="row data-row"
-        :class="{ alt: (index + 1) % 2 === 0 }"
         v-for="(row, index) in data.rows"
-        :key="index"
+        :key="'r-' + index"
       >
-        <!-- 尺码列：单行居中 -->
+        <!-- 尺码列：单行居中 13px -->
         <view class="cell size-cell">
           <text class="size-text">{{ row.size }}</text>
         </view>
 
-        <!-- 尺寸列：cm + in 双行 -->
+        <!-- 尺寸列：cm 上 / in 下，双行 10px opacity 0.6 -->
         <view class="cell dual-cell">
           <text class="dual-top">{{ row.dimension.cm }}</text>
           <text class="dual-bottom">{{ row.dimension.in }}</text>
         </view>
 
-        <!-- 体积列：cm + in 双行 -->
+        <!-- 体积列：cm 上 / in 下 -->
         <view class="cell dual-cell">
           <text class="dual-top">{{ row.volume.cm }}</text>
           <text class="dual-bottom">{{ row.volume.in }}</text>
         </view>
 
-        <!-- 重量列：cm + in 双行 -->
+        <!-- 重量列：g 上 / lb 下 -->
         <view class="cell dual-cell">
           <text class="dual-top">{{ row.weight.cm }}</text>
           <text class="dual-bottom">{{ row.weight.in }}</text>
@@ -63,8 +65,9 @@ export default {
 </script>
 
 <style scoped>
+/* 外层 - padding 15px 10px 白底 */
 .pack-wrap {
-  padding: 30rpx 20rpx; /* 15px 10px */
+  padding: 30rpx 20rpx;
   background: #ffffff;
 }
 
@@ -75,72 +78,80 @@ export default {
   margin-bottom: 20rpx; /* 10px */
 }
 .title {
-  font-size: 29rpx; /* 15px */
+  font-size: 29rpx; /* 15px Medium */
+  font-weight: 500;
   color: #000000;
   line-height: 33rpx;
 }
 .unit {
   margin-left: 16rpx;
-  font-size: 21rpx; /* 11px */
+  font-size: 21rpx; /* 11px Medium */
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.5);
   line-height: 33rpx;
 }
 
-/* 表格 */
+/* 表格：列间距 4px（gap 8rpx） */
 .table {
   display: flex;
   flex-direction: column;
-  gap: 8rpx; /* 4px 行间距 */
+  gap: 8rpx;
 }
 
-/* 单行 */
+/* 单行 - 圆角 6px（12rpx），两端对齐 */
 .row {
   display: flex;
-  border-radius: 12rpx; /* 6px */
+  border-radius: 12rpx;
   align-items: center;
+  width: 100%;
 }
+/* 表头：高度 40px（80rpx），背景 #DFDFDF，文字 13px 居中 */
 .row.header {
-  height: 77rpx; /* 40px */
+  height: 80rpx;
   background: #dfdfdf;
 }
+/* 数据行：高度 60px（120rpx），背景 #F7F7F7 */
 .row.data-row {
-  height: 115rpx; /* 60px 双行内容更高 */
-}
-.row.alt {
+  height: 120rpx;
   background: #f7f7f7;
 }
 
-/* 单元格 */
+/* 4 列等宽，flex:1 均分 + 居中 */
 .cell {
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-/* 表头文字 */
+/* 表头文字 - 13px Medium 黑色 */
 .row.header .cell {
-  font-size: 25rpx; /* 13px */
+  font-size: 25rpx;
+  font-weight: 500;
   color: #000000;
   line-height: 33rpx;
+  text-align: center;
 }
 
-/* 尺码列：单行 13px */
+/* 尺码列文字 - 13px Medium 黑色 */
 .size-text {
-  font-size: 25rpx; /* 13px */
+  font-size: 25rpx;
+  font-weight: 500;
   color: #000000;
   line-height: 33rpx;
 }
 
-/* 双单位单元格：cm 在上，in 在下 */
+/* 双单位单元格 gap 4px */
 .dual-cell {
-  gap: 4rpx; /* 2px */
+  gap: 4rpx; /* 2px Figma 行间距 17-10=7 实际渲染用 4rpx 贴合 */
 }
 .dual-top,
 .dual-bottom {
-  font-size: 19rpx; /* 10px */
+  font-size: 20rpx; /* 10px Medium Figma */
+  font-weight: 500;
   color: rgba(0, 0, 0, 0.6);
-  line-height: 33rpx;
+  line-height: 33rpx; /* 17px */
 }
 </style>