更新首页

app/components/ExpertNavSidebar.vue

@@ -0,0 +1,78 @@
+<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>