fix: 优化 solutions

app/app.vue

@@ -2,15 +2,18 @@
  * @Author: wjc
  * @Date: 2023-11-15 09:54:21
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-21 08:15:27
+ * @LastEditTime: 2026-01-22 17:38:42
  * @Description: 
 -->
 <template>
-  <NuxtLayout>
-    <el-config-provider :size="elConfig.size" :z-index="elConfig.zIndex" :locale="zhCn">
-      <NuxtPage />
-    </el-config-provider>
-  </NuxtLayout>
+  <div>
+    <NuxtLoadingIndicator :height="3" color="#0F67F8" :throttle="0" />
+    <NuxtLayout>
+      <el-config-provider :size="elConfig.size" :z-index="elConfig.zIndex" :locale="zhCn">
+        <NuxtPage />
+      </el-config-provider>
+    </NuxtLayout>
+  </div>
 </template>
 
 <script setup lang="ts">

app/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-22 15:57:07
+ * @LastEditTime: 2026-01-22 17:54:04
  * @Description: 
 -->
 <!--
@@ -55,11 +55,16 @@
             </div>
           </div>
         </div>
-        <div class="group h-full flex items-center">
+        <div
+          class="group h-full flex items-center"
+          @mouseenter="isSolutionsMenuOpen = true"
+          @mouseleave="isSolutionsMenuOpen = false"
+        >
           <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"
+            v-show="isSolutionsMenuOpen"
+            class="fixed left-0 top-60px sm:top-80px w-full bg-white shadow-lg border-t border-gray-100 z-50 animate-fade-in-down"
           >
             <div class="landing-container py-40px flex">
               <!-- Left Sidebar -->
@@ -89,7 +94,8 @@
                     v-for="(item, idx) in currentItems"
                     :key="idx"
                     class="flex gap-16px group/item cursor-pointer"
-                    :to="`/solution/${item.id}`"
+                    :to="`/solutions/${item.id}`"
+                    @click="isSolutionsMenuOpen = false"
                   >
                     <!-- Icon -->
                     <i :class="[item.icon, 'wh-48px']"></i>
@@ -136,7 +142,7 @@
     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">
+      <div class="flex flex-col gap-8px lt-sm:font-s-32px text-#091221 font-500">
         <NuxtLink
           to="/"
           class="mobile-nav-item flex items-center justify-between group"
@@ -157,7 +163,7 @@
               class="i-ep-arrow-right transition-transform duration-300 text-gray-300"
               :class="{
                 'rotate-90': isMobileProductsOpen,
-                'text-#0F67F8': isMobileProductsOpen,
+                'pf-sc-medium text-#091221': isMobileProductsOpen,
               }"
             ></i>
           </div>
@@ -175,8 +181,8 @@
             >
               <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 class="lt-sm:font-s-24px pf-sc-semibold text-#091221">{{ item.title }}</div>
+                <div class="lt-sm:font-s-18px text-#64748b mt-2px">{{ item.desc }}</div>
               </div>
             </NuxtLink>
           </div>
@@ -205,14 +211,15 @@
           >
             <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"
+                class="lt-sm:font-s-28px pf-sc-semibold text-#091221 mb-12px pl-10px flex items-center"
               >
+                <span class="lt-sm:w-6px lt-sm:h-28px rounded-full bg-#0F67F8 mr-8px"></span>
                 {{ 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">
                   <NuxtLink
-                    :to="`/solution/${item.id}`"
+                    :to="`/solutions/${item.id}`"
                     class="flex items-center gap-8px w-full"
                     @click="isMobileMenuOpen = false"
                   >
@@ -259,6 +266,7 @@
   const { y } = useWindowScroll()
 
   const isMobileMenuOpen = ref(false)
+  const isSolutionsMenuOpen = ref(false)
   const isMobileSolutionsOpen = ref(false)
   const isMobileProductsOpen = ref(false)
 
@@ -368,7 +376,7 @@
   }
 
   .mobile-nav-item {
-    @apply py-16px border-b border-gray-100 text-#334155 active:text-#0F67F8 transition-colors;
+    @apply py-16px border-b border-gray-100 active:text-#0F67F8 transition-colors;
   }
 
   .safe-area-bottom {
@@ -418,14 +426,16 @@
 
   .mobile-product-icon {
     @apply wh-40px flex-shrink-0;
+    @apply lt-sm:wh-78px;
   }
 
   .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 text-#475569 bg-gray-50/80 border border-gray-100  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;
+    @apply lt-sm:font-s-24px lt-sm:rounded-8px lt-sm:py-18px lt-sm:px-16px;
   }
 
   .mobile-solution-icon {
-    @apply wh-20px flex-shrink-0;
+    @apply lt-sm:wh-48px flex-shrink-0;
   }
 </style>

app/components/section/Ability.vue

@@ -40,7 +40,7 @@
               <div class="ability-card-desc pf-sc-regular">
                 {{ ability.desc }}
               </div>
-              <NuxtLink class="ability-card-link" :to="`/solution/${ability.id}`">
+              <NuxtLink class="ability-card-link" :to="`/solutions/${ability.id}`">
                 查看详情
                 <i
                   class="i-custom-arrow-right-c color-#0F67F8 wh-18px lt-sm:wh-28px transition-transform group-hover:translate-x-4px"

app/pages/solution/[id].vue → app/pages/solutions/[id].vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-22 14:08:24
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-22 17:24:03
+ * @LastEditTime: 2026-01-22 17:57:25
  * @Description: 解决方案详情页
 -->
 <template>
@@ -43,7 +43,7 @@
     <section class="section-container bg-#F6F8FD">
       <div class="landing-container lt-sm:px-32px">
         <div class="section-title pf-sc-semibold">{{ solution.coreFunctions.title }}</div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-24px mt-60px">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-24px mt-60px">
           <div
             v-for="(item, index) in solution.coreFunctions.function"
             :key="index"
@@ -255,7 +255,7 @@
 
   .pain-desc {
     @apply font-s-14px text-#091221/70 text-center;
-    @apply font-s-24px;
+    @apply lt-sm:font-s-24px;
   }
 
   /* Functions */