fix: header 解决方案 hover 修改

app/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-21 15:22:17
+ * @LastEditTime: 2026-01-21 16:10:45
  * @Description: 
 -->
 <!--
@@ -11,10 +11,8 @@
 -->
 <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>
+    <div class="landing-container header-content">
+      <i class="header-logo"></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>
@@ -31,9 +29,9 @@
                   :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"
+                  class="product-card group/item"
                 >
-                  <i :class="[item.icon, 'wh-106px flex-shrink-0']"></i>
+                  <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"
@@ -67,17 +65,17 @@
                 <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"
+                    v-for="(tab, index) in abilityTabs"
                     :key="index"
-                    class="px-16px py-12px rounded-4px cursor-pointer text-14px transition-colors"
+                    class="px-16px py-12px rounded-8px cursor-pointer text-14px transition-colors"
                     :class="
                       activeCategory === index
-                        ? 'bg-#ECEFF6 text-#0F67F8 font-500'
+                        ? 'bg-#ECEFF6 text-#0F67F8 pf-sc-semibold'
                         : 'text-#091221/70'
                     "
                     @mouseenter="activeCategory = index"
                   >
-                    {{ cat.name }}
+                    {{ tab.title }}
                   </div>
                 </div>
               </div>
@@ -117,17 +115,14 @@
 
       <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 class="btn-primary btn-apply" @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 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>
@@ -150,7 +145,7 @@
         <!-- 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="mobile-nav-item mobile-submenu-trigger"
             :class="{ 'text-#0F67F8': isMobileProductsOpen }"
             @click="toggleMobileSubmenu('products')"
           >
@@ -173,9 +168,9 @@
               :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"
+              class="mobile-product-card"
             >
-              <i :class="[item.icon, 'wh-40px flex-shrink-0']"></i>
+              <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>
@@ -187,7 +182,7 @@
         <!-- Solutions Section -->
         <div class="border-b border-gray-100">
           <div
-            class="mobile-nav-item flex items-center justify-between !border-none cursor-pointer"
+            class="mobile-nav-item mobile-submenu-trigger"
             :class="{ 'text-#0F67F8': isMobileSolutionsOpen }"
             @click="toggleMobileSubmenu('solutions')"
           >
@@ -205,19 +200,15 @@
             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 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"
               >
-                {{ cat.name }}
+                {{ tab.title }}
               </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>
+                <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>
@@ -253,6 +244,8 @@
 </template>
 
 <script setup lang="ts">
+  import { abilities, abilityTabs } from '~/constants/common'
+
   const { openConsultation } = useConsultation()
   const { y } = useWindowScroll()
 
@@ -287,69 +280,10 @@
     },
   ]
 
-  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 || [])
+  const currentItems = computed(() => {
+    const activeTabId = abilityTabs[activeCategory.value]?.id
+    return activeTabId ? abilities[activeTabId] : []
+  })
 </script>
 
 <style scoped lang="scss">
@@ -430,4 +364,58 @@
   .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>