89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
|
import type {NavigationMenuItem} from '@nuxt/ui'
|
|
|
|
const route = useRoute()
|
|
|
|
const items = computed<NavigationMenuItem[]>(() => [{
|
|
label: '首页',
|
|
to: '/',
|
|
icon: 'i-lucide-book-open',
|
|
// active: route.path.startsWith('')
|
|
}, {
|
|
label: '产品与服务',
|
|
|
|
icon: 'i-lucide-box',
|
|
active: route.path.startsWith('/product'),
|
|
children: [
|
|
{label: '智慧蜂场建设', to: '/product/beenfactory'},
|
|
{label: '智能蜂箱研制', to: '/product/beenhive'},
|
|
{label: '质量安全溯源', to: '/product/beensafe'},
|
|
{label: '蜂产业大数据', to: '/product/beendata'},
|
|
{label: '知识服务中心', to: '/product/knowledge'},
|
|
]
|
|
}, {
|
|
label: '应用实例',
|
|
icon: 'i-simple-icons-figma',
|
|
to: 'https://go.nuxt.com/figma-ui',
|
|
target: '_blank'
|
|
}, {
|
|
label: '典型案例',
|
|
icon: 'i-lucide-rocket',
|
|
to: 'https://github.com/nuxt/ui/releases',
|
|
target: '_blank'
|
|
}, {
|
|
label: '新闻资讯',
|
|
to: '/docs/components',
|
|
icon: 'i-lucide-box',
|
|
active: route.path.startsWith('/docs/components')
|
|
}, {
|
|
label: '关于我们',
|
|
to: '/docs/components',
|
|
icon: 'i-lucide-box',
|
|
active: route.path.startsWith('/docs/components')
|
|
},
|
|
{
|
|
label: '联系我们',
|
|
to: '/contact',
|
|
icon: 'i-lucide-box',
|
|
active: route.path.startsWith('/contact')
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader>
|
|
<!-- 标题部分 -->
|
|
<template #title>
|
|
<view class="h-6 w-auto text-primary">
|
|
创特蜂箱
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 导航菜单 -->
|
|
<UNavigationMenu
|
|
:items="items"
|
|
|
|
highlight
|
|
highlight-color="primary"
|
|
/>
|
|
|
|
<!-- 右侧区域 -->
|
|
<template #right>
|
|
<view class="text-primary">
|
|
商户管理
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 移动端菜单 -->
|
|
<template #body>
|
|
<UNavigationMenu
|
|
:items="items"
|
|
class="-mx-2.5 bg-teal-50/80"
|
|
orientation="vertical"
|
|
/>
|
|
</template>
|
|
</UHeader>
|
|
</template>
|
|
|
|
|