115 lines
2.5 KiB
Vue
115 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
import type {NavigationMenuItem} from '@nuxt/ui'
|
|
import {onMounted, onUnmounted, ref} from 'vue'
|
|
|
|
const isScrolled = ref(false)
|
|
const headerUI = ref({
|
|
root: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16'
|
|
})
|
|
|
|
const handleScroll = () => {
|
|
isScrolled.value = window.scrollY > 10
|
|
headerUI.value.root = isScrolled.value
|
|
? 'fixed top-0 left-0 right-0 z-50 bg-green-700 h-8 lg:h-16' // 不透明
|
|
: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16' // 半透明
|
|
}
|
|
|
|
onMounted(() => window.addEventListener('scroll', handleScroll))
|
|
onUnmounted(() => window.removeEventListener('scroll', handleScroll))
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
const items = computed<NavigationMenuItem[]>(() => [{
|
|
label: '首页',
|
|
to: '/',
|
|
|
|
// active: route.path.startsWith('')
|
|
}, {
|
|
label: '产品与服务',
|
|
|
|
|
|
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: '应用实例',
|
|
|
|
to: '/example',
|
|
active: route.path.startsWith('/example')
|
|
}, {
|
|
label: '典型案例',
|
|
|
|
to: '/classic',
|
|
active: route.path.startsWith('/classic')
|
|
}, {
|
|
label: '新闻资讯',
|
|
to: '/news',
|
|
|
|
active: route.path.startsWith('/news')
|
|
}, {
|
|
label: '关于我们',
|
|
to: '/about',
|
|
|
|
active: route.path.startsWith('/about')
|
|
},
|
|
{
|
|
label: '联系我们',
|
|
to: '/contact',
|
|
|
|
active: route.path.startsWith('/contact')
|
|
},
|
|
{
|
|
label: '后台管理',
|
|
to: '/contact',
|
|
|
|
active: route.path.startsWith('/admin')
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader
|
|
:ui="{root:'fixed right-0 left-0 h-7 lg:h-16'}"
|
|
|
|
|
|
>
|
|
<!-- 标题部分 -->
|
|
<template #title>
|
|
<view class="h-6 w-auto text-primary">
|
|
创特蜂箱
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 导航菜单 -->
|
|
<UNavigationMenu
|
|
:items="items"
|
|
|
|
|
|
highlight
|
|
highlight-color="primary"
|
|
/>
|
|
|
|
<!-- 右侧区域 -->
|
|
<template #right/>
|
|
|
|
<!-- 移动端菜单 -->
|
|
<template #body>
|
|
<UNavigationMenu
|
|
:items="items"
|
|
class="-mx-2.5 bg-teal-50/80"
|
|
orientation="vertical"
|
|
/>
|
|
</template>
|
|
</UHeader>
|
|
</template>
|
|
//:ui="headerUI"
|
|
//:ui="{link: 'text-white text-lg font-bold '}"
|
|
|
|
|