70 lines
1.2 KiB
Vue
70 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="search-index">
|
||
|
|
<h2 class="section-title">搜索索引</h2>
|
||
|
|
<div class="search-tags">
|
||
|
|
<span
|
||
|
|
class="tag"
|
||
|
|
v-for="tag in popularTags"
|
||
|
|
:key="tag"
|
||
|
|
@click="handleTagClick(tag)"
|
||
|
|
>
|
||
|
|
{{ tag }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import { useRouter } from 'vue-router';
|
||
|
|
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const popularTags = ref([
|
||
|
|
'红色思政', '党史学习', '新时代精神', '爱国主义',
|
||
|
|
'社会主义核心价值观', '中国梦', '改革开放', '脱贫攻坚'
|
||
|
|
]);
|
||
|
|
|
||
|
|
function handleTagClick(tag: string) {
|
||
|
|
router.push(`/search?keyword=${encodeURIComponent(tag)}`);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.search-index {
|
||
|
|
padding: 40px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #141F38;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-tags {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tag {
|
||
|
|
padding: 8px 16px;
|
||
|
|
background: #f5f5f5;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: #C62828;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|