feat: header 菜单栏

layouts/default.vue

@@ -1,15 +1,15 @@
 <template>
   <header
     class="fixed left-0 right-0 top-0 z-50 w-full bg-transparent"
-    :class="{
-      'backdrop-blur-2xl': isScrolled || isNavbarOpen,
-      'h-full': isNavbarOpen,
-    }"
+    :class="{ 'h-full': isNavbarOpen }"
   >
     <div
-      class="header-bg max-w-[1920px] mx-auto flex h-17 sm:h-13 w-full items-center justify-between px-28 sm:px-6 md:px-[88px]"
+      class="max-w-[1920px] mx-auto flex h-17 sm:h-13 w-full items-center justify-between px-28 sm:px-6 md:px-[88px] peer"
+      v-if="!updateStateNavbar"
     >
-      <h1 class="text-3xl md:text-2xl sm:text-base font-bold text-[#52AC63]">BTDK</h1>
+      <h1 class="text-3xl md:text-2xl sm:text-base font-bold text-[#52AC63] relative z-20">
+        <NuxtLink to="/">BTDK</NuxtLink>
+      </h1>
       <nav class="absolute inset-0">
         <ul
           class="flex justify-center text-xl gap-x-4 leading-17 sm:leading-13 text-white sm:hidden md:hidden"
@@ -17,12 +17,40 @@
           <li
             v-for="nav in navItems"
             :key="nav.path"
-            class="relative h-full w-32 text-center text-inherit after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-full after:origin-top-right after:scale-x-0 after:bg-[#52AC63] after:transition-[transform] after:duration-300 after:content-[''] hover:after:origin-top-left hover:after:scale-x-100"
+            class="w-32 text-center text-inherit cursor-pointer"
+            :class="{ 'group/submenu': !!nav.children?.length }"
             @click="onNavPush(nav)"
           >
-            <span class="text-inherit">
-              {{ nav.name }}
-            </span>
+            <div
+              class="relative h-full after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-full after:origin-top-right after:scale-x-0 after:bg-[#52AC63] after:transition-[transform] after:duration-300 after:content-[''] hover:after:origin-top-left hover:after:scale-x-100"
+            >
+              <span class="text-inherit">
+                {{ nav.name }}
+              </span>
+            </div>
+
+            <div
+              class="absolute top-17 left-0 right-0 grid grid-rows-[0fr] group-hover/submenu:grid-rows-[1fr] transition-all duration-[400ms]"
+            >
+              <ul
+                class="h-0 overflow-hidden flex justify-center md:flex-col transition-[height] bg-[rgba(18,21,26,.6)] duration-[400ms] backdrop-blur-2xl group-hover/submenu:h-[72px]"
+              >
+                <li
+                  v-for="child in nav.children"
+                  :key="child.path"
+                  class="group/submenuitem mr-[120px] md:mr-[80px] cursor-pointer last:mr-0 text-[hsla(0,0%,100%,.9)]"
+                  @click="event => onChildNavPush(child, event)"
+                >
+                  <div
+                    class="relative h-full after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:w-full after:origin-top-right after:scale-x-0 after:bg-[#52AC63] after:transition-[transform] after:duration-300 after:content-[''] hover:after:origin-top-left hover:after:scale-x-100"
+                  >
+                    <span class="text-inherit">
+                      {{ child.name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
           </li>
         </ul>
       </nav>
@@ -101,6 +129,13 @@
         </transition>
       </Menu>
     </div>
+    <div
+      class="absolute h-17 top-0 w-full -z-10 peer-hover:backdrop-blur-2xl peer-hover:bg-[rgba(92,92,92,0.4)] peer-hover:bg-gradient-to-r peer-hover:from-black/50 peer-hover:to-black/50"
+      :class="{
+        'backdrop-blur-2xl': isScrolled || isNavbarOpen,
+        'header-bg': isScrolled,
+      }"
+    ></div>
   </header>
   <slot />
   <footer></footer>
@@ -133,12 +168,39 @@ const toggleNavbar = (open: boolean) => {
   isNavbarOpen.value = !isNavbarOpen.value
 }
 
+const updateStateNavbar = ref(false)
+
 function onNavPush(nav: any) {
   if (!!nav.break) {
     window.open(nav.url, '_blank')
     return
   }
-  router.push(nav.path)
+
+  if (nav.path) {
+    router.push(nav.path)
+    updateStateNavbar.value = true
+    nextTick(() => {
+      updateStateNavbar.value = false
+    })
+  }
+}
+
+function onChildNavPush(child: any, event: Event) {
+  event.stopPropagation()
+  event.preventDefault()
+
+  if (!!child.break) {
+    window.open(child.url, '_blank')
+    return
+  }
+
+  if (child.path) {
+    router.push(child.path)
+    updateStateNavbar.value = true
+    nextTick(() => {
+      updateStateNavbar.value = false
+    })
+  }
 }
 
 function onNavClick(nav: any, menuOpen: boolean) {
@@ -156,7 +218,7 @@ const navItems = [
   },
   {
     name: '产品中心',
-    path: '/products',
+    path: '',
     children: [
       {
         name: 'BK-1000',
@@ -188,7 +250,7 @@ const navItems = [
 </script>
 <style scoped>
 .header-bg {
-  /* @apply bg-[rgba(92,92,92,0.4)] bg-gradient-to-r from-black/40 to-black/40; */
+  @apply bg-[rgba(92,92,92,0.4)] bg-gradient-to-r from-black/50 to-black/50;
 }
 
 /* 子菜单展开收缩动画 */