ct/app/components/AppHeader.vue

<script lang="ts" setup>
import type {NavigationMenuItem} from '@nuxt/ui'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: '首页',
    to: '/',

  },
  {
    label: '共享解决方案',
    active: route.path.startsWith('/sharedSolutions'),
    children: [
      {
        label: '共享单车',
        icon: 'i-lucide-bike',
        description: '一种新型环保共享经济，最大化的利用了公共道路通过率',
        to: '/sharedSolutions/bike',
      },
      {
        label: '景区共享电动车',
        icon: 'i-lucide-map-pin',
        description: '有助于缓解交通堵塞，以及公路的磨损，减少空气污染，降低对能量的依赖性',
        to: '/sharedSolutions/scenicEbike',
      },
      {
        label: '共享滑板车',
        icon: 'i-lucide-scooter',
        description: '新的共享出行方式，轻便省力',
        to: '/sharedSolutions/scooter',
      },
      {
        label: '共享陪护床',
        icon: 'i-lucide-bed',
        description: '立足医院民生需求而诞生，解决医患家属的休息问题',
        to: '/sharedSolutions/bed',
      },
      {
        label: '共享电动车',
        icon: 'i-lucide-car',
        description: '通过扫码开锁，循环共享',
        to: '/sharedSolutions/eBike',
      },
      {
        label: '共享充电宝',
        icon: 'i-lucide-battery',
        description: '企业提供的充电租赁设备，用户扫码取出后即可使用，用完后就近归还',
        to: '/sharedSolutions/powerbank',
      }
    ]
  },
  {
    label: '行业解决方案',
    active: route.path.startsWith('/industrySolutions'),
    children: [
      {
        label: '智能电动车',
        icon: 'i-lucide-file-text',
        description: '打造智能电动车时代方便用户的出行，让骑车出行便捷',
        to: '/industrySolutions/ElectCar',
      }, {
        label: '共享电动车',
        icon: 'i-lucide-file-text',
        description: '通过扫码开锁，循环共享',
        to: '/sharedSolutions/eBike',
      }

    ]
  },
  {
    label: '软件应用开发',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  },
  {
    label: '物联网解决方案',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  },
  {
    label: '关于创特',
    to: '/about',

  }, {
    label: '后台管理',
    to: 'https://ele.ccttiot.com/login',
    target: '_blank'
  }

])
</script>

<template>
  <UHeader class="min-w-full">
    <template #title>
      <IndexLogo class="h-6 w-auto"/>
    </template>

    <UNavigationMenu :items="items" color="primary"/>

    <template #right>
      <ColorModeButton/>
    </template>
    <template #body>
      <div class="px-4 py-2">
        <UNavigationMenu
            :items="items"
            class="-mx-2.5"
            color="primary"
            orientation="vertical"
        />
      </div>
    </template>
  </UHeader>
</template>