beehive/app/components/AppHeader.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 '}"