'首页和商品详情页初稿'

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,146 @@
+<template>
+  <!-- 包装规格表：4 列 × 4 行，每个数据单元格双单位（cm + in） -->
+  <view class="pack-wrap">
+    <view class="header-row">
+      <text class="title">包装规格</text>
+      <text class="unit">单位：{{ data.unit }}</text>
+    </view>
+
+    <view class="table">
+      <!-- 表头：bg #DFDFDF，圆角 6px -->
+      <view class="row header">
+        <text
+          class="cell"
+          v-for="(col, index) in data.columns"
+          :key="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"
+      >
+        <!-- 尺码列：单行居中 -->
+        <view class="cell size-cell">
+          <text class="size-text">{{ row.size }}</text>
+        </view>
+
+        <!-- 尺寸列：cm + in 双行 -->
+        <view class="cell dual-cell">
+          <text class="dual-top">{{ row.dimension.cm }}</text>
+          <text class="dual-bottom">{{ row.dimension.in }}</text>
+        </view>
+
+        <!-- 体积列：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 双行 -->
+        <view class="cell dual-cell">
+          <text class="dual-top">{{ row.weight.cm }}</text>
+          <text class="dual-bottom">{{ row.weight.in }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PackagingSpec',
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pack-wrap {
+  padding: 30rpx 20rpx; /* 15px 10px */
+  background: #ffffff;
+}
+
+/* 标题行 */
+.header-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx; /* 10px */
+}
+.title {
+  font-size: 29rpx; /* 15px */
+  color: #000000;
+  line-height: 33rpx;
+}
+.unit {
+  margin-left: 16rpx;
+  font-size: 21rpx; /* 11px */
+  color: rgba(0, 0, 0, 0.5);
+  line-height: 33rpx;
+}
+
+/* 表格 */
+.table {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx; /* 4px 行间距 */
+}
+
+/* 单行 */
+.row {
+  display: flex;
+  border-radius: 12rpx; /* 6px */
+  align-items: center;
+}
+.row.header {
+  height: 77rpx; /* 40px */
+  background: #dfdfdf;
+}
+.row.data-row {
+  height: 115rpx; /* 60px 双行内容更高 */
+}
+.row.alt {
+  background: #f7f7f7;
+}
+
+/* 单元格 */
+.cell {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 表头文字 */
+.row.header .cell {
+  font-size: 25rpx; /* 13px */
+  color: #000000;
+  line-height: 33rpx;
+}
+
+/* 尺码列：单行 13px */
+.size-text {
+  font-size: 25rpx; /* 13px */
+  color: #000000;
+  line-height: 33rpx;
+}
+
+/* 双单位单元格：cm 在上，in 在下 */
+.dual-cell {
+  gap: 4rpx; /* 2px */
+}
+.dual-top,
+.dual-bottom {
+  font-size: 19rpx; /* 10px */
+  color: rgba(0, 0, 0, 0.6);
+  line-height: 33rpx;
+}
+</style>