v2体验版

2026-08-31 13:35:50 +08:00
parent 3b4a2f9a78
commit 3bd58e05c5
28 changed files with 299 additions and 115 deletions
@@ -0,0 +1,86 @@
+<template>
+  <!-- 通用文本选项选择（物流/印花/工艺）：胶囊样式，选中橙色边框+橙色文字 -->
+  <view class="option-wrap">
+    <text class="title">{{ title }}</text>
+
+    <view class="option-list">
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="option-item"
+        :class="{ active: selected === item }"
+        @tap="selectOption(item)"
+      >
+        <text class="option-text">{{ item }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'OptionSelector',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default: () => []
+    },
+    selected: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  methods: {
+    selectOption(item) {
+      this.$emit('select', item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.option-wrap {
+  padding: 30rpx 20rpx; /* 15px 10px */
+  background: #ffffff;
+}
+
+/* 标题 */
+.title {
+  display: block;
+  font-size: 29rpx; /* 15px */
+  color: #000000;
+  line-height: 33rpx;
+  margin-bottom: 30rpx; /* 15px */
+}
+
+/* 选项列表 */
+.option-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx; /* 8px */
+}
+
+/* 单个胶囊：与颜色选择样式一致 */
+.option-item {
+  padding: 10rpx 24rpx; /* 5px 12px */
+  border: 1rpx solid #f2f2f2;
+  border-radius: 120rpx; /* 60px */
+  background: #ffffff;
+}
+.option-item.active {
+  border-color: #ff6800;
+}
+
+.option-text {
+  font-size: 27rpx; /* 14px */
+  color: #000000;
+  line-height: 33rpx;
+}
+.option-item.active .option-text {
+  color: #ff6800;
+}
+</style>