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

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,87 @@
+<template>
+  <!-- 尺码选择：5 个按钮横排，选中态橙色边框+橙色文字（背景仍为浅灰） -->
+  <view class="size-wrap">
+    <text class="title">尺码</text>
+
+    <view class="size-list">
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="size-item"
+        :class="{ active: selected === item }"
+        @tap="selectSize(item)"
+      >
+        <text class="size-text">{{ item }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SizeSelector',
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    selected: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    selectSize(size) {
+      this.$emit('select', size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.size-wrap {
+  padding: 30rpx 20rpx; /* 15px 10px */
+  background: #ffffff;
+}
+
+/* 标题 */
+.title {
+  display: block;
+  font-size: 29rpx; /* 15px */
+  color: #000000;
+  line-height: 33rpx;
+  margin-bottom: 30rpx; /* 15px */
+}
+
+/* 尺码列表横排 */
+.size-list {
+  display: flex;
+  gap: 12rpx; /* 6px */
+}
+
+/* 单个尺码按钮 44x34，圆角 4px，背景 #F7F7F7 */
+.size-item {
+  width: 85rpx; /* 44px */
+  height: 65rpx; /* 34px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7f7f7;
+  border: 1rpx solid transparent;
+  border-radius: 8rpx; /* 4px */
+}
+
+/* 选中：橙色边框 + 橙色文字（背景保持 #F7F7F7） */
+.size-item.active {
+  border-color: #ff6800;
+}
+
+.size-text {
+  font-size: 25rpx; /* 13px */
+  color: #000000;
+  line-height: 33rpx;
+}
+.size-item.active .size-text {
+  color: #ff6800;
+}
+</style>