huijia-website/app/components/Header.vue

<!--
 * @Author: LiZhiWei
 * @Date: 2026-01-13 15:41:49
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-22 10:51:05
 * @Description: 
-->
<!--
 * @Author: LiZhiWei
 * @Description: AppHeader
-->
<template>
  <header class="landing-header" :class="{ 'is-scrolled': y > 0 }">
    <div class="landing-container header-content">
      <NuxtLink to="/">
        <i class="header-logo"></i>
      </NuxtLink>

      <nav class="hidden sm:flex items-center gap-52px text-16px text-#334155 h-full">
        <NuxtLink to="/" class="nav-link flex items-center">首页</NuxtLink>
        <div class="group h-full flex items-center">
          <NuxtLink to="/" class="nav-link flex items-center">产品中心</NuxtLink>
          <div
            class="fixed left-0 top-80px w-full hidden bg-white shadow-lg border-t border-gray-100 group-hover:block z-50 animate-fade-in-down"
          >
            <div class="landing-container py-32px flex justify-start">
              <div class="grid grid-cols-2 gap-24px">
                <NuxtLink
                  v-for="(item, idx) in productItems"
                  :key="idx"
                  :to="item.link"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="product-card group/item"
                >
                  <i :class="[item.icon, 'product-icon']"></i>
                  <div class="flex flex-col justify-center py-14px">
                    <div
                      class="font-s-16px color-#000000 pf-sc-semibold group-hover/item:text-#0F67F8 transition-colors"
                    >
                      {{ item.title }}
                    </div>
                    <div class="font-s-14px pf-sc-regular text-#64748b lh-22px mb-12px">
                      {{ item.desc }}
                    </div>
                    <div class="flex items-center text-14px text-#0F67F8">
                      查看详情
                      <i
                        class="i-custom-arrow-right-c ml-4px wh-18px color-#0F67F8 group-hover/item:translate-x-5px transition-all duration-300"
                      ></i>
                    </div>
                  </div>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
        <div class="group h-full flex items-center">
          <NuxtLink to="/" class="nav-link flex items-center">解决方案</NuxtLink>
          <!-- Mega Menu -->
          <div
            class="fixed left-0 top-60px sm:top-80px w-full bg-white shadow-lg border-t border-gray-100 hidden group-hover:block z-50 animate-fade-in-down"
          >
            <div class="landing-container py-40px flex">
              <!-- Left Sidebar -->
              <div class="w-240px border-r border-gray-100 pr-40px shrink-0">
                <div class="text-18px font-600 mb-20px text-#1e293b">解决方案分类</div>
                <div class="flex flex-col gap-4px">
                  <div
                    v-for="(tab, index) in abilityTabs"
                    :key="index"
                    class="px-16px py-12px rounded-8px cursor-pointer text-14px transition-colors"
                    :class="
                      activeCategory === index
                        ? 'bg-#ECEFF6 text-#0F67F8 pf-sc-semibold'
                        : 'text-#091221/70'
                    "
                    @mouseenter="activeCategory = index"
                  >
                    {{ tab.title }}
                  </div>
                </div>
              </div>

              <!-- Right Content -->
              <div class="flex-1 pl-60px">
                <div class="grid grid-cols-2 gap-x-60px gap-y-40px">
                  <div
                    v-for="(item, idx) in currentItems"
                    :key="idx"
                    class="flex gap-16px group/item cursor-pointer"
                  >
                    <!-- Icon -->
                    <i :class="[item.icon, 'wh-48px']"></i>

                    <!-- Text -->
                    <div>
                      <div
                        class="text-16px font-600 text-#1e293b mb-8px group-hover/item:text-#2563eb transition-colors"
                      >
                        {{ item.title }}
                      </div>
                      <div class="text-12px text-#64748b lh-20px line-clamp-2">{{ item.desc }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <NuxtLink to="/" class="nav-link flex items-center">客户案例</NuxtLink>
        <NuxtLink to="/" class="nav-link flex items-center">知产专利</NuxtLink>
        <NuxtLink to="/about" class="nav-link flex items-center">关于绘家</NuxtLink>
        <!-- <NuxtLink to="/" class="nav-link flex items-center">联系合作</NuxtLink> -->
      </nav>

      <div class="flex items-center gap-30px lt-sm:hidden">
        <i class="i-custom-head-phone h-28px w-199px"></i>
        <button class="btn-primary btn-apply" @click="openConsultation">
          <span class="lh-20px">免费咨询</span>
        </button>
      </div>

      <button class="menu-toggle-btn" @click="isMobileMenuOpen = !isMobileMenuOpen">
        <i v-if="!isMobileMenuOpen" class="i-custom-menu menu-icon"></i>
        <i v-else class="i-ep-close menu-icon"></i>
      </button>
    </div>
  </header>

  <!-- Mobile Menu Overlay -->
  <div
    v-if="isMobileMenuOpen"
    class="fixed inset-0 top-80px lt-sm:top-128px bg-white z-90 sm:hidden flex flex-col animate-fade-in-down overflow-hidden"
  >
    <nav class="flex-1 overflow-y-auto py-20px px-24px">
      <div class="flex flex-col gap-8px text-16px text-#334155 font-500">
        <NuxtLink
          to="/"
          class="mobile-nav-item flex items-center justify-between group"
          @click="isMobileMenuOpen = false"
        >
          <span>首页</span>
        </NuxtLink>

        <!-- Product Center Section -->
        <div class="border-b border-gray-100">
          <div
            class="mobile-nav-item mobile-submenu-trigger"
            :class="{ 'text-#0F67F8': isMobileProductsOpen }"
            @click="toggleMobileSubmenu('products')"
          >
            <span>产品中心</span>
            <i
              class="i-ep-arrow-right transition-transform duration-300 text-gray-300"
              :class="{
                'rotate-90': isMobileProductsOpen,
                'text-#0F67F8': isMobileProductsOpen,
              }"
            ></i>
          </div>

          <div
            v-show="isMobileProductsOpen"
            class="pl-12px pb-16px flex flex-col gap-12px animate-fade-in"
          >
            <NuxtLink
              v-for="(item, idx) in productItems"
              :key="idx"
              :to="item.link"
              target="_blank"
              class="mobile-product-card"
            >
              <i :class="[item.icon, 'mobile-product-icon']"></i>
              <div class="flex flex-col">
                <div class="text-15px font-600 text-#1e293b">{{ item.title }}</div>
                <div class="text-12px text-#64748b mt-2px">{{ item.desc }}</div>
              </div>
            </NuxtLink>
          </div>
        </div>

        <!-- Solutions Section -->
        <div class="border-b border-gray-100">
          <div
            class="mobile-nav-item mobile-submenu-trigger"
            :class="{ 'text-#0F67F8': isMobileSolutionsOpen }"
            @click="toggleMobileSubmenu('solutions')"
          >
            <span>解决方案</span>
            <i
              class="i-ep-arrow-right transition-transform duration-300 text-gray-300"
              :class="{
                'rotate-90': isMobileSolutionsOpen,
                'text-#0F67F8': isMobileSolutionsOpen,
              }"
            ></i>
          </div>

          <div
            v-show="isMobileSolutionsOpen"
            class="pl-12px pb-16px flex flex-col gap-24px animate-fade-in"
          >
            <div v-for="(tab, idx) in abilityTabs" :key="idx">
              <div
                class="font-600 text-15px text-#1e293b mb-12px pl-10px border-l-3 border-#0F67F8 flex items-center h-16px"
              >
                {{ tab.title }}
              </div>
              <div class="pl-4px grid grid-cols-2 gap-x-10px gap-y-10px">
                <div v-for="(item, i) in abilities[tab.id]" :key="i" class="mobile-solution-card">
                  <i :class="[item.icon, 'mobile-solution-icon']"></i>
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <NuxtLink
          to="/"
          class="mobile-nav-item flex items-center justify-between group"
          @click="isMobileMenuOpen = false"
        >
          <span>客户案例</span>
          <i class="i-ep-arrow-right text-gray-300 text-12px group-active:text-#0F67F8"></i>
        </NuxtLink>
        <NuxtLink
          to="/about"
          class="mobile-nav-item flex items-center justify-between group"
          @click="isMobileMenuOpen = false"
        >
          <span>关于绘家</span>
        </NuxtLink>
        <!-- <NuxtLink
          to="/"
          class="mobile-nav-item flex items-center justify-between group"
          @click="isMobileMenuOpen = false"
        >
          <span>联系合作</span>
        </NuxtLink> -->
      </div>
    </nav>
  </div>
</template>

<script setup lang="ts">
  import { abilities, abilityTabs } from '~/constants/common'

  const { openConsultation } = useConsultation()
  const { y } = useWindowScroll()

  const isMobileMenuOpen = ref(false)
  const isMobileSolutionsOpen = ref(false)
  const isMobileProductsOpen = ref(false)

  const toggleMobileSubmenu = (menu: 'products' | 'solutions') => {
    if (menu === 'products') {
      isMobileProductsOpen.value = !isMobileProductsOpen.value
      if (isMobileProductsOpen.value) isMobileSolutionsOpen.value = false
    } else {
      isMobileSolutionsOpen.value = !isMobileSolutionsOpen.value
      if (isMobileSolutionsOpen.value) isMobileProductsOpen.value = false
    }
  }

  const activeCategory = ref(0)

  const productItems = [
    {
      title: '绘管家',
      desc: '智慧物业综合管理云平台',
      icon: 'i-custom-cp-hgj',
      link: 'https://www.huiguanjia.cn/',
    },
    {
      title: '绘服务',
      desc: '足不出户尽享物业服务',
      icon: 'i-custom-cp-hfw',
      link: 'https://www.huifuwu.cn/',
    },
  ]

  const currentItems = computed(() => {
    const activeTabId = abilityTabs[activeCategory.value]?.id
    return activeTabId ? abilities[activeTabId] : []
  })
</script>

<style scoped lang="scss">
  .landing-header {
    @apply fixed top-0 left-0 z-100 w-full bg-transparent transition-all duration-300 ease;

    &:hover,
    &.is-scrolled {
      @apply bg-white/80 backdrop-blur-12px shadow-[0_4px_20px_rgba(0,0,0,0.05)] border-b border-white/10;
    }

    @media (max-width: 767px) {
      @apply bg-white/80 backdrop-blur-12px shadow-[0_4px_20px_rgba(0,0,0,0.05)] border-b border-white/10;
    }
  }

  .nav-link {
    @apply relative py-8px text-[var(--hj-text-2)] transition-all duration-200 ease;

    &:hover,
    .group:hover & {
      @apply text-[var(--hj-primary)] font-600;
    }

    &::after {
      @apply content-[''] absolute bottom-0 left-1/2 w-0 h-3px bg-[var(--hj-primary)] transition-all duration-300 ease -translate-x-1/2;
    }

    &:hover::after,
    .group:hover &::after {
      @apply w-30px;
    }
  }

  .btn-primary {
    @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF] border-none outline-none hover:opacity-80;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }

  .animate-fade-in-down {
    animation: fadeInDown 0.2s ease-out forwards;

    &::before {
      content: '';
      @apply absolute -top-10px left-0 w-full h-10px;
    }
  }

  .mobile-nav-item {
    @apply py-16px border-b border-gray-100 text-#334155 active:text-#0F67F8 transition-colors;
  }

  .safe-area-bottom {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* Extracted Styles */
  .header-content {
    @apply flex items-center justify-between gap-16px h-80px;
    @apply lt-sm:h-128px lt-sm:px-24px;
  }

  .header-logo {
    @apply i-custom-logo w-160px h-32px;
    @apply lt-sm:w-213px lt-sm:h-64px;
  }

  .product-card {
    @apply flex gap-16px p-8px w-358px rounded-8px bg-#f6f8fd cursor-pointer transition-all duration-300 border border-transparent;
    @apply hover:border-gray-100 hover:shadow-sm;
  }

  .product-icon {
    @apply wh-106px flex-shrink-0;
  }

  .btn-apply {
    @apply text-white font-medium w-134px h-40px pf-sc-medium font-s-16px rounded-8px hidden sm:block;
  }

  .menu-toggle-btn {
    @apply sm:hidden text-#334155;
  }

  .menu-icon {
    @apply lt-sm:wh-48px;
  }

  .mobile-submenu-trigger {
    @apply flex items-center justify-between !border-none cursor-pointer;
  }

  .mobile-product-card {
    @apply flex items-center gap-12px p-12px rounded-8px bg-gray-50/80 border border-gray-100 transition-all duration-200;
    @apply active:bg-blue-50 active:border-blue-200;
  }

  .mobile-product-icon {
    @apply wh-40px flex-shrink-0;
  }

  .mobile-solution-card {
    @apply text-13px text-#475569 bg-gray-50/80 border border-gray-100 rounded-8px py-12px px-10px flex items-center justify-start text-left transition-all duration-200 gap-8px;
    @apply active:bg-blue-50 active:border-blue-200 active:text-blue-600;
  }

  .mobile-solution-icon {
    @apply wh-20px flex-shrink-0;
  }
</style>