87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<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>
|