You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
1.0 KiB
24 lines
1.0 KiB
<template>
|
|
<scroll-view class="cat-scroll" scroll-x :show-scrollbar="false">
|
|
<view class="cat-tabs">
|
|
<view v-for="c in categories" :key="c" class="cat-tab" :class="{ active: active === c }" @tap="$emit('change', c)">
|
|
{{ c === 'all' ? '🔥 全部' : c }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CategoryTab',
|
|
props: { categories: { type: Array, default: () => [] }, active: { type: String, default: 'all' } },
|
|
emits: ['change']
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cat-scroll{white-space:nowrap;padding:12rpx 0}
|
|
.cat-tabs{display:inline-flex;gap:12rpx;padding:0 20rpx}
|
|
.cat-tab{display:inline-block;padding:14rpx 32rpx;border-radius:40rpx;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);font-size:26rpx;font-weight:600;white-space:nowrap;flex-shrink:0}
|
|
.cat-tab.active{background:linear-gradient(135deg,var(--orange),var(--gold));color:#fff;border-color:transparent;font-weight:700;box-shadow:0 4rpx 24rpx rgba(245,166,35,.3)}
|
|
</style>
|