meilan-app/src/components/select-tag/select-tag.vue

<template>
    <div class="time-tag-container">
        <div class="custom-tag-container">
            <div v-for="tag in tags" :key="tag.value" class="custom-tag"
                :class="{ 'active': selectedValue === tag.value }" @click="handleTagClick(tag)">
                <span class="tag-text">{{ tag.label }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SelectTag',
    props: {
        tags: {
            type: Array,
            default: () => []
        },
        selectedValue: {
            type: String,
            default: ''
        }
    },
    methods: {
        handleTagClick(tag) {
            if (tag.value === 'custom') {
                // 触发自定义时间选择器显示事件
                this.$emit('show-custom-picker', tag.value);
            } else {
                // 触发普通时间范围变化事件
                this.$emit('change', tag.value);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.time-tag-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 30rpx;
}

.custom-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5rpx;
    align-items: center;
}

.custom-tag {
    display: flex;
    align-items: center;
    padding: 7rpx 15rpx;

    color: #FFFFFF;

    border-radius: 20rpx;
    font-size: 24rpx;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-tag.active {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.2);
}

// .custom-tag:hover {
//     background: rgba(255, 255, 255, 0.4);
//     border-color: rgba(255, 255, 255, 0.6);
// }

.tag-text {
    // margin-right: 8rpx;
}
</style>