huijia-website/app/components/Header.vue

<!--
 * @Author: LiZhiWei
 * @Date: 2026-01-13 15:41:49
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2026-01-19 09:33:54
 * @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-xs:px-15px"
    >
      <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-20px xl:gap-52px text-16px xl:text-16px text-#334155 h-full"
      >
        <NuxtLink to="/" class="nav-link flex items-center">首页</NuxtLink>
        <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>
          <!-- 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="/" class="nav-link flex items-center">联系合作</NuxtLink>
      </nav>

      <div class="flex items-center gap-30px lt-sm:hidden">
        <span class="flex items-center gap-14px hidden sm:flex">
          <i class="i-custom-telephone wh-28px"></i>
          <span class="font-s-28px font-bold text-#28292E d-din-pro-600-semibold">
            400-600-7709
          </span>
        </span>
        <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 lt-xs:top-60px bg-white z-90 sm:hidden flex flex-col p-20px animate-fade-in-down"
  >
    <nav class="flex flex-col gap-20px text-16px text-#334155 font-500">
      <NuxtLink to="/" class="py-10px border-b border-gray-100" @click="isMobileMenuOpen = false">
        首页
      </NuxtLink>
      <NuxtLink to="/" class="py-10px border-b border-gray-100" @click="isMobileMenuOpen = false">
        产品中心
      </NuxtLink>
      <div class="py-10px border-b border-gray-100">
        <div class="mb-10px">解决方案</div>
        <div class="pl-16px flex flex-col gap-10px text-14px text-gray-500">
          <div v-for="(cat, idx) in solutionCategories" :key="idx">
            <div class="font-600 text-gray-700 mb-4px">{{ cat.name }}</div>
            <div class="pl-8px flex flex-col gap-6px">
              <div v-for="(item, i) in cat.items" :key="i" class="py-2px">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <NuxtLink to="/" class="py-10px border-b border-gray-100" @click="isMobileMenuOpen = false">
        客户案例
      </NuxtLink>
      <NuxtLink to="/" class="py-10px border-b border-gray-100" @click="isMobileMenuOpen = false">
        关于绘家
      </NuxtLink>
      <NuxtLink to="/" class="py-10px border-b border-gray-100" @click="isMobileMenuOpen = false">
        联系合作
      </NuxtLink>
    </nav>

    <div class="mt-auto pt-20px border-t border-gray-100">
      <div class="flex items-center gap-10px mb-20px justify-center">
        <i class="i-custom-telephone wh-24px"></i>
        <span class="font-s-20px font-bold text-#28292E">400-600-7709</span>
      </div>
      <button
        class="btn-primary text-white font-medium w-full h-44px rounded-8px text-16px"
        @click="
          () => {
            openConsultation()
            isMobileMenuOpen = false
          }
        "
      >
        申请试用
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  const { openConsultation } = useConsultation()
  const { y } = useWindowScroll()

  const isMobileMenuOpen = ref(false)

  const activeCategory = ref(0)

  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);
    }
  }

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

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