fix: header修改

app/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-21 11:59:09
+ * @LastEditTime: 2026-01-21 15:22:17
  * @Description: 
 -->
 <!--
@@ -18,7 +18,43 @@
 
       <nav class="hidden sm:flex items-center gap-52px 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>
+          <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 -->
@@ -74,8 +110,9 @@
         </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>
+        <!-- <NuxtLink to="/" class="nav-link flex items-center">联系合作</NuxtLink> -->
       </nav>
 
       <div class="flex items-center gap-30px lt-sm:hidden">
@@ -109,27 +146,56 @@
         >
           <span>首页</span>
         </NuxtLink>
-        <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>
+
+        <!-- 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="isMobileSolutionsOpen = !isMobileSolutionsOpen"
+            @click="toggleMobileSubmenu('solutions')"
           >
             <span>解决方案</span>
             <i
-              class="i-ep-arrow-down transition-transform duration-300 text-gray-300"
+              class="i-ep-arrow-right transition-transform duration-300 text-gray-300"
               :class="{
-                'rotate-180': isMobileSolutionsOpen,
+                'rotate-90': isMobileSolutionsOpen,
                 'text-#0F67F8': isMobileSolutionsOpen,
               }"
             ></i>
@@ -149,8 +215,9 @@
                 <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-10px px-8px flex items-center justify-center text-center active:bg-blue-50 active:border-blue-200 active:text-blue-600 transition-all duration-200"
+                  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>
@@ -173,13 +240,13 @@
         >
           <span>关于绘家</span>
         </NuxtLink>
-        <NuxtLink
+        <!-- <NuxtLink
           to="/"
           class="mobile-nav-item flex items-center justify-between group"
           @click="isMobileMenuOpen = false"
         >
           <span>联系合作</span>
-        </NuxtLink>
+        </NuxtLink> -->
       </div>
     </nav>
   </div>
@@ -191,9 +258,35 @@
 
   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: '物业管理系统',