fix: 1920至1200等比缩放

app/app.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-11-15 09:54:21
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-09 16:31:42
+ * @LastEditTime: 2026-01-15 14:41:09
  * @Description: 
 -->
 <template>
@@ -27,6 +27,28 @@
     size: 'default',
     zIndex: 300,
   })
+
+  if (import.meta.client) {
+    const handleResize = () => {
+      const width = window.innerWidth
+      if (width >= 1200 && width <= 1920) {
+        // @ts-ignore
+        document.documentElement.style.zoom = width / 1920
+      } else {
+        // @ts-ignore
+        document.documentElement.style.zoom = 1
+      }
+    }
+
+    onMounted(() => {
+      window.addEventListener('resize', handleResize)
+      handleResize()
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize)
+    })
+  }
 </script>
 
 <style lang="scss">

app/assets/scss/vars.scss

@@ -1,17 +1,21 @@
 :root {
-  --hj-font-sans: 微软雅黑, helvetica, arial, sans-serif;
-  --hj-primary: #0b5cff;
+  --hj-font-sans: 'PingFang SC', 微软雅黑, helvetica, arial, sans-serif;
+  --hj-primary: #0f67f8;
   --hj-primary-600: #1d6bff;
   --hj-primary-700: #0a52e6;
   --hj-primary-200: rgba(11, 92, 255, 18%);
   --hj-primary-soft: rgba(11, 92, 255, 10%);
   --hj-primary-gradient: linear-gradient(135deg, #0b5cff 0%, #67b2ff 100%);
-  --hj-primary-gradient-soft: linear-gradient(135deg, rgba(11, 92, 255, 14%), rgba(103, 178, 255, 26%));
+  --hj-primary-gradient-soft: linear-gradient(
+    135deg,
+    rgba(11, 92, 255, 14%),
+    rgba(103, 178, 255, 26%)
+  );
   --hj-bg: #fff;
   --hj-bg-soft: #f8fbff;
   --hj-bg-footer: #0b1220;
-  --hj-text: #0f172a;
-  --hj-text-2: #334155;
+  --hj-text: #091221;
+  --hj-text-2: #28292e;
   --hj-text-3: #475569;
   --hj-text-muted: #64748b;
   --hj-border: rgba(15, 23, 42, 8%);

app/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-15 14:07:56
+ * @LastEditTime: 2026-01-15 14:43:12
  * @Description: 
 -->
 <!--
@@ -10,7 +10,7 @@
  * @Description: AppHeader
 -->
 <template>
-  <header class="landing-header hover:" :class="{ 'is-scrolled': y > 0 }">
+  <header class="landing-header" :class="{ 'is-scrolled': y > 0 }">
     <div
       class="landing-container h-60px lg:h-80px flex items-center justify-between gap-16px px-20px lg:px-60px xl:px-240px"
     >
@@ -22,18 +22,17 @@
       </button>
 
       <nav
-        class="hidden lg:flex items-center gap-20px xl:gap-52px text-14px xl:text-16px text-#334155 h-full"
+        class="hidden lg:flex items-center gap-20px xl:gap-52px text-16px xl:text-16px text-#334155 h-full"
       >
-        <NuxtLink to="/" class="nav-link">首页</NuxtLink>
-        <NuxtLink to="/" class="nav-link">产品中心</NuxtLink>
-        <div class="group h-full flex items-center">
-          <NuxtLink to="/" class="nav-link h-full flex items-center">解决方案</NuxtLink>
-
+        <NuxtLink to="/" class="nav-link flex items-center">首页</NuxtLink>
+        <NuxtLink to="/" class="nav-link flex items-center">产品中心</NuxtLink>
+        <div class="group flex items-center">
+          <NuxtLink to="/" class="nav-link flex items-center">解决方案</NuxtLink>
           <!-- Mega Menu -->
           <div
             class="fixed left-0 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 xl:px-240px py-40px flex">
+            <div class="landing-container px-20px lg:px-60px xl:px-240px 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>
@@ -81,9 +80,9 @@
           </div>
         </div>
 
-        <NuxtLink to="/" class="nav-link">客户案例</NuxtLink>
-        <NuxtLink to="/" class="nav-link">关于绘家</NuxtLink>
-        <NuxtLink to="/" class="nav-link">联系合作</NuxtLink>
+        <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">
@@ -234,60 +233,34 @@
 
 <style scoped lang="scss">
   .landing-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    width: 100%;
-    background: transparent;
-    transition: all 0.3s ease;
+    @apply fixed top-0 left-0 z-100 w-full bg-transparent transition-all duration-300 ease;
 
     &:hover,
     &.is-scrolled {
-      background: rgba(255, 255, 255, 80%);
-      backdrop-filter: blur(12px);
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 5%);
-      border-bottom: 1px solid rgba(255, 255, 255, 10%);
+      @apply bg-white/80 backdrop-blur-12px shadow-[0_4px_20px_rgba(0,0,0,0.05)] border-b border-white/10;
     }
   }
 
   .nav-link {
-    position: relative;
-    padding: 8px 0;
-    color: var(--hj-text-secondary);
-    transition: all 0.2s ease;
-  }
+    @apply relative py-8px text-[var(--hj-text-2)] transition-all duration-200 ease;
 
-  .nav-link:hover {
-    color: var(--hj-primary-color);
-    font-weight: 600;
-  }
+    &:hover,
+    .group:hover & {
+      @apply text-[var(--hj-primary)] font-600;
+    }
 
-  .nav-link::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 2px;
-    background-color: var(--hj-primary-color);
-    transition: all 0.3s ease;
-    transform: translateX(-50%);
-  }
+    &::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;
+    }
 
-  .nav-link:hover::after {
-    width: 100%;
+    &: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: 0.8;
-    }
+    @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF] border-none outline-none hover:opacity-80;
   }
 
   @keyframes fadeInDown {