huijia-website/app/components/Header.vue

<!--
 * @Author: LiZhiWei
 * @Date: 2026-01-13 15:41:49
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-21 15:22:17
 * @Description: 
-->
<!--
 * @Author: LiZhiWei
 * @Description: AppHeader
-->
<template>
  <header class="landing-header" :class="{ 'is-scrolled': y > 0 }">
    <div
      class="landing-container h-80px flex items-center justify-between gap-16px lt-sm:h-128px lt-sm:px-24px"
    >
      <i class="i-custom-logo w-160px h-32px lt-sm:w-213px lt-sm:h-64px"></i>

      <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="flex gap-16px p-8px w-358px rounded-8px bg-#f6f8fd cursor-pointer group/item transition-all duration-300 border border-transparent hover:border-gray-100 hover:shadow-sm"
                >
                  <i :class="[item.icon, 'wh-106px flex-shrink-0']"></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-16px pf-sc-regular text-#28292e/75 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="(cat, index) in solutionCategories"
                    :key="index"
                    class="px-16px py-12px rounded-4px cursor-pointer text-14px transition-colors"
                    :class="
                      activeCategory === index
                        ? 'bg-#ECEFF6 text-#0F67F8 font-500'
                        : 'text-#091221/70'
                    "
                    @mouseenter="activeCategory = index"
                  >
                    {{ cat.name }}
                  </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 text-white font-medium w-134px h-40px pf-sc-medium font-s-16px rounded-8px hidden sm:block"
          @click="openConsultation"
        >
          <span class="lh-20px">申请试用</span>
        </button>
      </div>

      <button class="sm:hidden text-#334155" @click="isMobileMenuOpen = !isMobileMenuOpen">
        <i v-if="!isMobileMenuOpen" class="i-custom-menu lt-sm:wh-48px"></i>
        <i v-else class="i-ep-close lt-sm:wh-48px"></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 flex items-center justify-between !border-none cursor-pointer"
            :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="flex items-center gap-12px p-12px rounded-8px bg-gray-50/80 active:bg-blue-50 border border-gray-100 active:border-blue-200 transition-all duration-200"
            >
              <i :class="[item.icon, 'wh-40px flex-shrink-0']"></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 flex items-center justify-between !border-none cursor-pointer"
            :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="(cat, idx) in solutionCategories" :key="idx">
              <div
                class="font-600 text-15px text-#1e293b mb-12px pl-10px border-l-3 border-#0F67F8 flex items-center h-16px"
              >
                {{ cat.name }}
              </div>
              <div class="pl-4px grid grid-cols-2 gap-x-10px gap-y-10px">
                <div
                  v-for="(item, i) in cat.items"
                  :key="i"
                  class="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 active:bg-blue-50 active:border-blue-200 active:text-blue-600 transition-all duration-200 gap-8px"
                >
                  <i :class="[item.icon, 'wh-20px flex-shrink-0']"></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">
  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 solutionCategories = [
    {
      name: '物业管理系统',
      items: [
        {
          title: '智慧收费系统',
          desc: '自动生成账单、线上多渠道支付、实时对账、智能催缴，收缴率显著提升，财务效率提高80%',
          icon: 'i-custom-sf',
        },
        {
          title: '综合工单调度',
          desc: '报修、投诉线上提交、智能派单、全程跟踪、业主评价，形成服务闭环，提升响应速度与满意度',
          icon: 'i-custom-gd',
        },
        {
          title: '移动巡检巡更',
          desc: '扫码打卡、规范流程、问题实时上报，确保服务质量可追溯，降低管理盲区，提升巡检效率',
          icon: 'i-custom-ydxj',
        },
        {
          title: '智慧车场管理',
          desc: '无人值守、自动识别、线上缴费，降低人工成本70%，杜绝收费漏洞，提升车场运营效率',
          icon: 'i-custom-zhcc',
        },
        {
          title: '数据决策中心',
          desc: '多维度经营报表、收缴率分析、业主满意度洞察，数据可视化呈现，助力科学决策与精细运营',
          icon: 'i-custom-sjjc',
        },
        {
          title: '资产与租赁管理',
          desc: '房屋、车位、客户档案数字化管理，合同、费用一目了然，提升资产利用率与租赁管理效率',
          icon: 'i-custom-zczl',
        },
      ],
    },
    {
      name: '业主服务平台',
      items: [
        // Placeholder content for demo purposes
        {
          title: '业主移动端',
          desc: '提供便捷的线上服务入口，提升业主体验',
          icon: 'i-carbon-user-role',
          iconBg: 'bg-#3b82f6',
        },
      ],
    },
    {
      name: '智能硬件物联',
      items: [
        // Placeholder content for demo purposes
        {
          title: '智能门禁',
          desc: '安全便捷的通行体验，支持人脸识别',
          icon: 'i-carbon-gateway',
          iconBg: 'bg-#3b82f6',
        },
      ],
    },
  ]

  const currentItems = computed(() => solutionCategories[activeCategory.value]?.items || [])
</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));
  }
</style>