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

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,114 @@
+<template>
+  <!-- 产品尺码表：5 列 × 4 行，交替行背景 -->
+  <view class="chart-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>
+
+      <!-- 数据行：偶数行（第 2、4 行）bg #F7F7F7，圆角 6px -->
+      <view
+        class="row"
+        :class="{ alt: (index + 1) % 2 === 0 }"
+        v-for="(row, index) in data.rows"
+        :key="index"
+      >
+        <text class="cell">{{ row.size }}</text>
+        <text class="cell">{{ row.shoulder }}</text>
+        <text class="cell">{{ row.chest }}</text>
+        <text class="cell">{{ row.length }}</text>
+        <text class="cell">{{ row.sleeve }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SizeChart',
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-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; /* 8px */
+  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;
+  height: 77rpx; /* 40px */
+  align-items: center;
+  border-radius: 12rpx; /* 6px */
+}
+
+/* 表头行 */
+.row.header {
+  background: #dfdfdf;
+}
+
+/* 偶数行（交替背景） */
+.row.alt {
+  background: #f7f7f7;
+}
+
+/* 单元格：等宽分布 */
+.cell {
+  flex: 1;
+  text-align: center;
+  font-size: 25rpx; /* 13px */
+  color: #000000;
+  line-height: 33rpx;
+}
+.row.header .cell {
+  color: #000000;
+}
+.row:not(.header) .cell {
+  opacity: 0.6;
+}
+.row:not(.header) .cell:first-child {
+  opacity: 1; /* 尺码列不透明 */
+}
+</style>