86 行
1.7 KiB
Vue
86 行
1.7 KiB
Vue
<template>
|
|
<nav class="faq-nav" aria-label="问题分类">
|
|
<ul class="faq-nav-list">
|
|
<li v-for="cat in categories" :key="cat.id">
|
|
<a
|
|
:href="`#${cat.id}`"
|
|
class="faq-nav-item"
|
|
:class="{ active: activeCat === cat.id }"
|
|
@click.prevent="$emit('select', cat.id)"
|
|
>
|
|
{{ cat.name }}
|
|
<span class="faq-nav-count">{{ cat.questions.length }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
categories: { type: Array, required: true },
|
|
activeCat: { type: String, default: '' },
|
|
})
|
|
|
|
defineEmits(['select'])
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.faq-nav {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
// 移动端右侧渐变提示可横滑
|
|
mask-image: linear-gradient(to right, #000 85%, transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
|
|
|
|
.respond-md({
|
|
mask-image: none;
|
|
-webkit-mask-image: none;
|
|
overflow-x: visible;
|
|
});
|
|
}
|
|
|
|
.faq-nav-list {
|
|
display: flex;
|
|
gap: @space-sm;
|
|
min-width: max-content;
|
|
|
|
.respond-md({
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
});
|
|
}
|
|
|
|
.faq-nav-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: @space-xs;
|
|
padding: @space-sm @space-lg;
|
|
font-size: @font-size-sm;
|
|
color: @color-text-secondary;
|
|
background: @color-bg-gray;
|
|
border-radius: @border-radius-full;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: all @transition-fast;
|
|
min-height: 44px;
|
|
touch-action: manipulation;
|
|
|
|
&:hover {
|
|
background: @color-primary-bg;
|
|
color: @color-primary;
|
|
}
|
|
|
|
&.active {
|
|
background: @color-primary;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.faq-nav-count {
|
|
font-size: @font-size-xs;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|