style：移动端适配

pages/index.vue

@@ -3,6 +3,7 @@ import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 
 const consultationOpen = ref(false)
+const mobileMenuOpen = ref(false)
 const notice = ref('')
 const pageRoot = ref(null)
 let animationContext
@@ -98,9 +99,11 @@ const deliverySteps = [
 ]
 
 function scrollToSection(id) {
+  mobileMenuOpen.value = false
   document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 function openConsultation() {
+  mobileMenuOpen.value = false
   consultationOpen.value = true
   notice.value = ''
 }
@@ -173,6 +176,52 @@ onMounted(async () => {
     reveal('.testimonial-section .section-title', '.testimonial-section')
     reveal('.testimonial-track article', '.testimonial-track', { y: 22, stagger: 0.1 })
     reveal('.cta-content', '.cta-section', { y: 26 })
+
+    ScrollTrigger.matchMedia({
+      '(max-width: 760px)': () => {
+        gsap.to('.logo-track', {
+          xPercent: -50,
+          duration: 24,
+          ease: 'none',
+          repeat: -1
+        })
+
+        gsap.to('.ring:first-child', {
+          x: -12,
+          rotation: -2,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: '.model-layout',
+            start: 'top bottom',
+            end: 'bottom top',
+            scrub: 0.8
+          }
+        })
+
+        gsap.to('.ring:nth-child(2)', {
+          x: 12,
+          rotation: 2,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: '.model-layout',
+            start: 'top bottom',
+            end: 'bottom top',
+            scrub: 0.8
+          }
+        })
+
+        gsap.to('.cta-art', {
+          yPercent: -6,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: '.cta-section',
+            start: 'top bottom',
+            end: 'bottom top',
+            scrub: 0.8
+          }
+        })
+      }
+    })
   }, pageRoot.value)
 })
 
@@ -198,10 +247,45 @@ onBeforeUnmount(() => animationContext?.revert())
             {{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
           </button>
         </nav>
+        <button
+          class="mobile-menu-button"
+          :class="{ open: mobileMenuOpen }"
+          type="button"
+          :aria-expanded="mobileMenuOpen"
+          aria-controls="mobile-navigation"
+          :aria-label="mobileMenuOpen ? '关闭导航菜单' : '打开导航菜单'"
+          @click="mobileMenuOpen = !mobileMenuOpen"
+        >
+          <span class="menu-glyph" aria-hidden="true">{{ mobileMenuOpen ? '×' : '☰' }}</span>
+        </button>
         <button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
       </div>
     </header>
 
+    <Transition name="mobile-nav">
+      <nav
+        v-if="mobileMenuOpen"
+        id="mobile-navigation"
+        class="mobile-navigation"
+        aria-label="移动端导航"
+      >
+        <div class="page-width mobile-navigation-inner">
+          <button
+            v-for="([label, target], index) in navItems"
+            :key="`mobile-${target}`"
+            :class="{ active: index === 0 }"
+            @click="scrollToSection(target)"
+          >
+            <span>{{ label }}</span
+            ><b>↗</b>
+          </button>
+          <button class="mobile-consult-button" @click="openConsultation">
+            立即免费咨询 <b>→</b>
+          </button>
+        </div>
+      </nav>
+    </Transition>
+
     <section class="hero-section">
       <div class="hero-art" aria-hidden="true"></div>
       <div class="page-width hero-content">