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