DDAC/app/components/mobile/Header.vue

<template>
  <header class="mb-header">
    <div class="mb-header-container" :style="{ height: headerHeight }">
      <a href="/" class="brand">
        <NuxtImg src="/logo.png" alt="DDAC logo" class="brand-logo" width="14" height="14" />
        <h1 class="brand-title">DDAC</h1>
      </a>
      <div class="mb-header-right">
        <Icon name="lineicons:magnifier" size="20" />
        <Icon name="material-symbols:account-circle-full" size="20" />
        <Icon @click="toggleMenu" name="material-symbols:menu-rounded" size="20" />
      </div>
    </div>
    <Transition name="nav-expand">
      <nav v-show="isMenuOpen" class="mobile-nav">
        <div class="nav-item">
          <NuxtLink to="/mobile" @click="closeMenu">首页</NuxtLink>
        </div>
        <div class="nav-item-wrapper">
          <div class="nav-item" @click="toggleProducts">
            <span>产品</span>
            <Icon name="line-md:chevron-down" class="nav-item-icon" :class="{ 'icon-rotated': isProductsOpen }" />
          </div>
          <Transition name="submenu-expand">
            <div v-show="isProductsOpen" class="dropdown-menu">
              <NuxtLink to="/mobile/products/sdk" class="dropdown-item" @click="closeMenu">
                <img class="item-img" src="~/assets/svg/header/icon1.svg" alt="SDK 安全加固">
                <p>SDK 安全加固</p>
              </NuxtLink>
              <NuxtLink to="/mobile/products/web" class="dropdown-item" @click="closeMenu">
                <img class="item-img" src="~/assets/svg/header/icon2.svg" alt="Web 安全加速">
                <p>Web 安全加速</p>
              </NuxtLink>
              <NuxtLink to="/mobile/products/dns" class="dropdown-item" @click="closeMenu">
                <img class="item-img" src="~/assets/svg/header/icon3.svg" alt="DNS 全球解析">
                <p>DNS 全球解析</p>
              </NuxtLink>
              <NuxtLink to="/mobile/products/boost" class="dropdown-item" @click="closeMenu">
                <img class="item-img" src="~/assets/svg/header/icon4.svg" alt="高防服务器">
                <p>高防服务器</p>
              </NuxtLink>
            </div>
          </Transition>
        </div>
        <div class="nav-item">
          <NuxtLink to="/mobile/solutions" @click="closeMenu">行业解决方案</NuxtLink>
        </div>
        <div class="nav-item">
          <NuxtLink to="/mobile/docs" @click="closeMenu">文档中心</NuxtLink>
        </div>
        <div class="nav-item">
          <NuxtLink to="/mobile/about" @click="closeMenu">了解我们</NuxtLink>
        </div>
      </nav>
    </Transition>
  </header>
</template>

<script setup>
const isMenuOpen = ref(false)
const isProductsOpen = ref(false)

const headerHeight = inject('headerHeight')

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
  // 关闭菜单时也关闭产品子菜单
  if (!isMenuOpen.value) {
    isProductsOpen.value = false
  }
}

const closeMenu = () => {
  isMenuOpen.value = false
  isProductsOpen.value = false
}

const toggleProducts = () => {
  isProductsOpen.value = !isProductsOpen.value
}
</script>

<style lang="scss" scoped>
.mb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #030014;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.mb-header-container {
  height: 44px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 16px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;

  .brand-logo {
    margin-right: 8px;
  }

  .brand-title {
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
  }
}

.mb-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
}

// Nav 展开动画
.nav-expand-enter-active,
.nav-expand-leave-active {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.nav-expand-enter-from,
.nav-expand-leave-to {
  max-height: 0 !important;
}

.nav-expand-enter-to,
.nav-expand-leave-from {
  max-height: 500px !important;
}

// 子菜单展开动画
.submenu-expand-enter-active,
.submenu-expand-leave-active {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.submenu-expand-enter-from,
.submenu-expand-leave-to {
  max-height: 0 !important;
}

.submenu-expand-enter-to,
.submenu-expand-leave-from {
  max-height: 300px !important;
}

.mobile-nav {
  background: #030014;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-height: 500px;
}

.nav-item {
  padding: 10px;
  color: #FFF;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;

  &:last-of-type {
    border-bottom: none;
  }

  a {
    color: inherit;
    text-decoration: none;
    display: block;
  }
}

.nav-item-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  .nav-item {
    border-bottom: none;
  }

  &:last-of-type {
    border-bottom: none;
  }
}

.nav-item-icon {
  transition: transform 0.3s ease;
  float: right;
}

.icon-rotated {
  transform: rotate(180deg);
}

.dropdown-menu {
  background: rgba(63, 63, 63, 0.60);
  max-height: 300px;
  overflow: hidden;
  padding: 0;
}

.dropdown-item {
  padding: 8px 10px 8px 24px;
  display: flex;
  align-items: center;
  color: #bdbdbd;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
  gap: 12px;
  white-space: nowrap;

  &:hover {
    background: transparent;
    color: #ffffff;
  }

  .item-img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.8;
  }

  &:hover .item-img {
    opacity: 1;
  }

  p {
    color: inherit;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    white-space: nowrap;
  }
}
</style>