82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
|
<!-- 国家选择条 - 换行布局(对应 Figma 1511:195) -->
|
|
<view class="country-bar">
|
|
<view class="country-inner">
|
|
<view
|
|
class="country-item"
|
|
:class="{ active: selectedId === item.id }"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
@tap="selectItem(item)"
|
|
>
|
|
<text class="country-flag">{{ item.flag }}</text>
|
|
<text class="country-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CountryBar',
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
selectedId: {
|
|
type: [String, Number],
|
|
default: ''
|
|
}
|
|
},
|
|
methods: {
|
|
selectItem(item) {
|
|
this.$emit('select', item.id)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框 */
|
|
.country-bar {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
padding: 12rpx 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
/* 换行布局(不用横向滚动) */
|
|
.country-inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
/* 单个标签 - padding 4px 10px 圆角 60px */
|
|
.country-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 8rpx 20rpx;
|
|
background: #f7f7f7;
|
|
border-radius: 60rpx;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
line-height: 1.2;
|
|
}
|
|
/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 橙色文字 */
|
|
.country-item.active {
|
|
background: #fff3eb;
|
|
border: 1rpx solid #ff6800;
|
|
color: #ff6800;
|
|
}
|
|
.country-flag {
|
|
font-size: 24rpx;
|
|
}
|
|
/* 文字 12px Medium */
|
|
.country-name {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|