79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<template>
|
|
<aside class="expert-nav-sidebar">
|
|
<div class="expert-nav-title">专家资讯</div>
|
|
<NuxtLink
|
|
v-for="item in expertNavItems"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="expert-nav-item"
|
|
:class="{ active: isActive(item.to) }"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mainNav } from '@/config/nav'
|
|
|
|
const route = useRoute()
|
|
const expertNavItems = computed(() => mainNav.find((item) => item.key === 'expert')?.children || [])
|
|
const type = computed(() => (route.query.type as string) || '')
|
|
|
|
function isActive(to: string) {
|
|
if (to === '/expert') {
|
|
return route.path === '/expert' && !type.value
|
|
}
|
|
if (to.startsWith('/expert?type=')) {
|
|
return route.path === '/expert' && type.value === to.split('type=')[1]
|
|
}
|
|
return route.path === to || route.path.startsWith(`${to}/`)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.expert-nav-sidebar {
|
|
position: sticky;
|
|
top: 80px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
border: 1px solid #edf2f7;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.expert-nav-title {
|
|
padding: 14px 18px;
|
|
background: #1e3a5f;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.expert-nav-item {
|
|
display: block;
|
|
padding: 13px 18px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
color: #334155;
|
|
font-size: 14px;
|
|
transition: color 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.expert-nav-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.expert-nav-item:hover,
|
|
.expert-nav-item.active {
|
|
background: #eff6ff;
|
|
color: #1e3a5f;
|
|
font-weight: 700;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.expert-nav-sidebar {
|
|
position: static;
|
|
}
|
|
}
|
|
</style>
|