2025-01-08 14:13:16 +08:00

79 lines
2.2 KiB
Vue

<script setup lang="ts">
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from './ui/navigation-menu'
const header_data: Record<string, { title: string, href: string }[]> = {
探空气球: [{
title: '重力波单次',
href: '/balloon/single',
}, {
title: '重力波统计',
href: '/balloon/year',
}],
流星雷达: [{
title: '潮汐波强度',
href: '/radar/v1',
}, {
title: '潮汐波时空变化',
href: '/radar/v2',
}],
Saber: [
{
title: '波动拟合图',
href: '/saber/plot_wave_fitting',
},
{
title: '日数据傅里叶变换分析',
href: '/saber/day_fft_ifft_plot',
},
{
title: '日周期波动能量分析',
href: '/saber/day_cycle_power_wave_plot',
},
{
// month_power_wave_plot
title: ' 月度波动能量分析',
href: '/saber/month_power_wave_plot',
},
],
}
</script>
<template>
<NavigationMenu class="mx-auto">
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuLink href="/" :class="navigationMenuTriggerStyle()">
主页
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem v-for="(thisHeader, headers) in header_data" :key="headers">
<NavigationMenuTrigger>{{ headers }}</NavigationMenuTrigger>
<NavigationMenuContent>
<ul class="w-60 flex flex-col gap-3 p-6">
<li v-for="header in thisHeader" :key="header.href" class="row-span-3">
<NavigationMenuLink as-child>
<a
class="block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors space-y-1 focus:bg-accent hover:bg-accent focus:text-accent-foreground hover:text-accent-foreground"
:href="header.href"
>
<div class="text-sm font-medium leading-none">
{{ header.title }}
</div>
</a>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</template>