fix: zoom 缩放优化

app/app.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-11-15 09:54:21
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-15 14:50:45
+ * @LastEditTime: 2026-01-21 08:15:27
  * @Description: 
 -->
 <template>
@@ -27,30 +27,6 @@
     size: 'default',
     zIndex: 300,
   })
-
-  if (import.meta.client) {
-    const setDocumentZoom = (zoom: number) => {
-      ;(document.documentElement.style as unknown as { zoom: number }).zoom = zoom
-    }
-
-    const handleResize = () => {
-      const width = window.innerWidth
-      if (width >= 768 && width < 1440) {
-        setDocumentZoom(width / 1920)
-      } else {
-        setDocumentZoom(1)
-      }
-    }
-
-    onMounted(() => {
-      window.addEventListener('resize', handleResize)
-      handleResize()
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', handleResize)
-    })
-  }
 </script>
 
 <style lang="scss">

app/assets/scss/common.scss

@@ -19,6 +19,10 @@ body {
   font-family: 'PingFang SC', '微软雅黑', Helvetica, Arial, sans-serif !important;
 }
 
+html:not(.zoom-ready) body {
+  visibility: hidden;
+}
+
 // 滚动条风格
 .base-html {
   ::-webkit-scrollbar {

app/components/Header.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2026-01-13 15:41:49
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-20 14:00:24
+ * @LastEditTime: 2026-01-20 17:02:39
  * @Description: 
 -->
 <!--
@@ -79,12 +79,7 @@
       </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>
+        <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"

app/pages/index/components/HeroSection.vue → app/components/section/Hero.vue

@@ -68,7 +68,7 @@
 
     .hero-title {
       @apply font-s-48px font-semibold text-#000000;
-      @apply lt-sm:font-s-58px;
+      @apply lt-sm:font-s-56px;
     }
 
     .hero-subtitle {

app/pages/index/components/PartnershipSection.vue → app/components/section/Partnership.vue

@@ -12,11 +12,11 @@
     </div>
 
     <div class="partnership-content">
-      <InspiraMarquee class="partnership-marquee-row1">
+      <inspira-marquee class="partnership-marquee-row1">
         <div v-for="partner in partnersRow1" :key="partner" class="partner-item">
           <img :src="partner" alt="" class="wh-full object-contain" />
         </div>
-      </InspiraMarquee>
+      </inspira-marquee>
       <InspiraMarquee reverse class="partnership-marquee-row2">
         <div v-for="partner in partnersRow2" :key="partner" class="partner-item">
           <img :src="partner" alt="" class="wh-full object-contain" />

app/pages/index/index.vue

@@ -1,30 +1,22 @@
 <!--
  * @Author: LiZhiWei
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-20 11:18:49
+ * @LastEditTime: 2026-01-20 14:42:51
  * @Description: 
 -->
 <template>
   <div class="landing">
-    <HeroSection />
-    <SolutionSection />
-    <AbilitySection />
-    <CasesSection />
-    <PartnershipSection />
-    <HistorySection />
-    <CtaSection />
+    <section-hero />
+    <section-solution />
+    <section-ability />
+    <section-cases />
+    <section-partnership />
+    <section-history />
+    <section-cta />
   </div>
 </template>
 
-<script setup lang="ts">
-  import HeroSection from './components/HeroSection.vue'
-  import SolutionSection from './components/SolutionSection.vue'
-  import AbilitySection from './components/AbilitySection.vue'
-  import CasesSection from './components/CasesSection.vue'
-  import PartnershipSection from './components/PartnershipSection.vue'
-  import HistorySection from './components/HistorySection.vue'
-  import CtaSection from './components/CtaSection.vue'
-</script>
+<script setup lang="ts"></script>
 
 <style scoped lang="scss">
   .landing {

app/plugins/zoom.client.ts

@@ -0,0 +1,48 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  if (import.meta.client) {
+    // 存储上一次的稳定宽度，避免重复计算
+    let lastStableWidth = 0
+
+    // 核心：获取稳定的窗口宽度（解决临时值问题）
+    const getStableWidth = () => {
+      // 读取布局宽度（比 innerWidth 更精准，不受滚动条/缩放影响）
+      return document.documentElement.clientWidth
+    }
+
+    const setZoom = () => {
+      const html = document.documentElement
+      const width = getStableWidth() || window.innerWidth
+      if (width === lastStableWidth && width !== 0) return
+      lastStableWidth = width
+
+      let zoom = 1
+      if (width >= 768 && width < 1440) {
+        zoom = width / 1920
+      }
+
+      html.style.zoom = zoom.toString()
+      html.classList.add('zoom-ready')
+    }
+
+    document.documentElement.classList.remove('zoom-ready')
+    setZoom()
+
+    nuxtApp.hook('app:mounted', () => {
+      requestAnimationFrame(setZoom)
+    })
+
+    window.addEventListener('resize', setZoom)
+
+    return {
+      provide: {
+        refreshZoom: setZoom,
+      },
+    }
+  }
+
+  return {
+    provide: {
+      refreshZoom: () => {},
+    },
+  }
+})

nuxt.config.ts

@@ -3,7 +3,7 @@
  * @Author: wjc
  * @Date: 2023-10-25 19:39:32
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-19 09:24:19
+ * @LastEditTime: 2026-01-20 16:41:11
  * @Description:
  */
 import { loadEnv } from 'vite'
@@ -38,7 +38,7 @@ export default defineNuxtConfig({
     typedPages: false,
   },
   imports: {
-    dirs: [resolve('./stores'), '~/stores'],
+    dirs: [resolve('./stores'), '~/stores', '~/components', '~/components/section'],
   },
   css: ['@unocss/reset/tailwind.css', '~/assets/scss/common.scss'],
   vite: {
@@ -73,6 +73,13 @@ export default defineNuxtConfig({
         { rel: 'icon', href: '/logo.png', sizes: 'any' },
         { rel: 'icon', href: '/logo.png' },
         { rel: 'apple-touch-icon', href: '/logo.png' },
+        {
+          rel: 'preload',
+          href: '/fonts/D-DIN-PRO-600-SemiBold.woff2',
+          as: 'font',
+          type: 'font/woff2',
+          crossorigin: 'anonymous',
+        },
       ],
       meta: [
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },

package.json

@@ -14,7 +14,7 @@
     },
     "dependencies": {
         "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
-        "@unocss/reset": "^65.4.0",
+        "@unocss/reset": "^66.6.0",
         "@vueuse/core": "^12.4.0",
         "axios": "^1.7.9",
         "body-scroll-lock": "4.0.0-beta.0",
@@ -46,8 +46,8 @@
         "@types/qs": "^6.9.18",
         "@typescript-eslint/eslint-plugin": "^8.19.1",
         "@typescript-eslint/parser": "^8.19.1",
-        "@unocss/nuxt": "^65.4.0",
-        "@unocss/runtime": "^65.4.0",
+        "@unocss/nuxt": "^66.6.0",
+        "@unocss/runtime": "^66.6.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitejs/plugin-vue-jsx": "^4.1.1",
         "@vue/tsconfig": "^0.7.0",
@@ -74,7 +74,7 @@
         "stylelint-order": "^6.0.4",
         "stylelint-scss": "^6.10.0",
         "typescript": "^5.7.3",
-        "unocss": "^65.4.0",
+        "unocss": "^66.6.0",
         "unplugin-auto-import": "^19.0.0",
         "unplugin-icons": "^22.0.0",
         "unplugin-vue-components": "^28.0.0",
@@ -94,4 +94,4 @@
         ]
     },
     "packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6"
-}
+}

uno.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-05-07 20:59:28
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2026-01-19 15:56:48
+ * @LastEditTime: 2026-01-20 16:03:07
  * @Description:
  */
 import {
@@ -26,19 +26,28 @@ export default defineConfig({
       // cdn: 'https://esm.sh/'
       collections: {
         custom: FileSystemIconLoader('./app/assets/icons'),
-        ep: () => import('@iconify-json/ep/icons.json').then((i) => i.default),
+        // ep: () => import('@iconify-json/ep/icons.json').then((i) => i.default),
       },
     }),
   ],
   transformers: [transformerDirectives(), transformerVariantGroup()],
+  content: {
+    pipeline: {
+      include: [/\.(vue|tsx?|jsx?|mdx?|html)($|\?)/],
+    },
+    filesystem: ['app/**/*.{vue,ts,tsx,js,jsx}'],
+  },
   postprocess: (util) => {
     const pxRE = /(-?[\d.]+px)/g
-    // 检查是否属于移动端变体（通过选择器或媒体查询父级判断）
+    // 增强安全性判断，确保在构建扫描阶段不会因 selector 或 parent 为空而报错
+    const selector = util.selector || ''
+    const parent = typeof util.parent === 'string' ? util.parent : ''
+
     const isMobile =
-      util.selector.includes('lt-sm') ||
-      util.selector.includes('lt-xs') ||
-      (util.parent?.includes('max-width: 767') ?? false) ||
-      (util.parent?.includes('max-width: 479') ?? false)
+      selector.includes('lt-sm') ||
+      selector.includes('lt-xs') ||
+      parent.includes('max-width: 767.9px') ||
+      parent.includes('max-width: 479.9px')
 
     if (isMobile) {
       util.entries.forEach((i) => {
@@ -59,10 +68,10 @@ export default defineConfig({
     [/^m-v-(.+)$/, ([, d]) => ({ 'margin-top': `${d}`, 'margin-bottom': `${d}` })],
     [/^p-h-(.+)$/, ([, d]) => ({ 'padding-left': `${d}`, 'padding-right': `${d}` })],
     [/^p-v-(.+)$/, ([, d]) => ({ 'padding-top': `${d}`, 'padding-bottom': `${d}` })],
-    [/^max-w-(\s+)$/, ([, d]) => ({ 'max-width': `${d}` })],
-    [/^min-w-(\s+)$/, ([, d]) => ({ 'min-width': `${d}` })],
-    [/^max-h-[(\s+)]$/, ([, d]) => ({ 'max-height': `${d}` })],
-    [/^min-h-[(\s+)]$/, ([, d]) => ({ 'min-height': `${d}` })],
+    [/^max-w-(.+)$/, ([, d]) => ({ 'max-width': `${d}` })],
+    [/^min-w-(.+)$/, ([, d]) => ({ 'min-width': `${d}` })],
+    [/^max-h-(.+)$/, ([, d]) => ({ 'max-height': `${d}` })],
+    [/^min-h-(.+)$/, ([, d]) => ({ 'min-height': `${d}` })],
     [/^font-s-(\d+(\.\d+)?\w+)$/, ([, d]) => ({ 'font-size': `${d}` })],
     [/^wh-(.+)$/, ([, d]) => ({ width: `${d}`, height: `${d}` })],
     [/^bg-color-(\d+)$/, ([, d]) => ({ 'background-color': `${d}` })],