feat:完善其余页面

pages/index.vue

@@ -1,26 +1,14 @@
 <script setup>
 import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import SiteHeader from '~/components/site/SiteHeader.vue'
+import SiteFooter from '~/components/site/SiteFooter.vue'
 
-const consultationOpen = ref(false)
-const mobileMenuOpen = ref(false)
-const activeSection = ref('home')
-const headerScrolled = ref(false)
-const notice = ref('')
 const pageRoot = ref(null)
+const { openConsultation: openGlobalConsultation } = useConsultation()
 let animationContext
 let animationMedia
 
-const navItems = [
-  ['首页', 'home'],
-  ['营销增长服务', 'model'],
-  ['行业解决方案', 'industries'],
-  ['开放客户案例平台', 'cases'],
-  ['核心优势', 'advantages'],
-  ['全球营销增长洞察', 'delivery'],
-  ['关于我们', 'footer']
-]
-
 const logos = [
   'Bond',
   'WaSun',
@@ -115,18 +103,8 @@ 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 = ''
-}
-function submitConsultation() {
-  consultationOpen.value = false
-  notice.value = '已收到您的咨询，我们将尽快与您联系。'
+function requestConsultation(source, title = '预约免费 GEO 增长诊断') {
+  openGlobalConsultation({ title, source })
 }
 
 onMounted(async () => {
@@ -156,7 +134,7 @@ onMounted(async () => {
 
     const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
     heroTimeline
-      .from('.site-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
+      .from('.subsite-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
       .from('.hero-copy h1', { autoAlpha: 0, y: 32, duration: 0.7, clearProps: 'all' }, '-=0.12')
       .from(
         '.hero-points span',
@@ -164,7 +142,7 @@ onMounted(async () => {
         '-=0.22'
       )
       .from(
-        '.button-row button',
+        '.button-row > *',
         { autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
         '-=0.12'
       )
@@ -247,30 +225,6 @@ onMounted(async () => {
         cleanup.push(() => element.removeEventListener(event, handler))
       }
 
-      ScrollTrigger.create({
-        start: 80,
-        end: 'max',
-        onToggle: ({ isActive }) => {
-          headerScrolled.value = isActive
-        }
-      })
-
-      navItems.forEach(([, target]) => {
-        const trigger = target === 'home' ? '.hero-section' : `#${target}`
-        if (!document.querySelector(trigger)) return
-        ScrollTrigger.create({
-          trigger,
-          start: 'top 48%',
-          end: 'bottom 48%',
-          onEnter: () => {
-            activeSection.value = target
-          },
-          onEnterBack: () => {
-            activeSection.value = target
-          }
-        })
-      })
-
       const hero = document.querySelector('.hero-section')
       const heroCopy = document.querySelector('.hero-copy')
       if (hero && heroCopy) {
@@ -414,303 +368,235 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <main id="home" ref="pageRoot" class="site-shell">
-    <header class="site-header" :class="{ scrolled: headerScrolled }">
-      <div class="page-width header-inner">
-        <a href="#home" class="brand" aria-label="大马棒首页"
-          ><img
-            src="/images/lanhu/slices/home-group114-image33@2x.png"
-            alt="成都大马棒传媒有限公司"
-        /></a>
-        <nav class="desktop-nav" aria-label="主导航">
-          <button
-            v-for="([label, target], index) in navItems"
-            :key="target"
-            :class="{ active: target === activeSection }"
-            @click="scrollToSection(target)"
-          >
-            {{ 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>
+  <div id="home" ref="pageRoot" class="site-shell">
+    <SiteHeader />
 
-    <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">
-        <div class="hero-copy">
-          <h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
-          <p class="hero-points">
-            <span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
-            ><span>✓ 全链路转化闭环</span>
-          </p>
-          <div class="button-row">
-            <button class="primary-button" @click="openConsultation">免费定制 <b>→</b></button
-            ><button class="outline-button" @click="scrollToSection('cases')">查看成功案例</button>
+    <main>
+      <section class="hero-section">
+        <div class="hero-art" aria-hidden="true"></div>
+        <div class="page-width hero-content">
+          <div class="hero-copy">
+            <h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
+            <p class="hero-points">
+              <span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
+              ><span>✓ 全链路转化闭环</span>
+            </p>
+            <div class="button-row">
+              <button
+                class="primary-button"
+                type="button"
+                @click="requestConsultation('首页 Hero', '免费定制 GEO 增长方案')"
+              >
+                免费定制 <b>→</b></button
+              ><NuxtLink class="outline-button" to="/cases">查看成功案例</NuxtLink>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section class="logo-strip" aria-label="合作品牌">
-      <div class="logo-track">
-        <span
-          v-for="(logo, index) in logos"
-          :key="`${logo}-${index}`"
-          :class="`logo logo-${index % 6}`"
-          >{{ logo }}</span
-        >
-      </div>
-    </section>
+      <section class="logo-strip" aria-label="合作品牌">
+        <div class="logo-track">
+          <span
+            v-for="(logo, index) in logos"
+            :key="`${logo}-${index}`"
+            :class="`logo logo-${index % 6}`"
+            >{{ logo }}</span
+          >
+        </div>
+      </section>
 
-    <section class="intro-section page-width">
-      <SectionTitle
-        >已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
-        >主流行业<template #subtitle
-          >We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning More
-          Than A Dozen Mainstream Industry Sectors</template
-        ></SectionTitle
-      >
-      <div class="stats-panel">
-        <article v-for="stat in stats" :key="stat[1]" class="stat-item">
-          <img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
-          ><span>{{ stat[1] }}</span>
-        </article>
-      </div>
-    </section>
-
-    <section id="model" class="model-section">
-      <div class="page-width">
+      <section class="intro-section page-width">
         <SectionTitle
-          >独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
-            #subtitle
-            >Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
-            Brand Building And Conversion Performance</template
+          >已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
+          >主流行业<template #subtitle
+            >We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning
+            More Than A Dozen Mainstream Industry Sectors</template
           ></SectionTitle
         >
-        <div class="model-layout">
-          <div
-            v-for="model in ringModels"
-            :key="model.title"
-            class="ring ring-diagram"
-            role="img"
-            :aria-label="model.title"
+        <div class="stats-panel">
+          <article v-for="stat in stats" :key="stat[1]" class="stat-item">
+            <img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
+            ><span>{{ stat[1] }}</span>
+          </article>
+        </div>
+      </section>
+
+      <section id="model" class="model-section">
+        <div class="page-width">
+          <SectionTitle
+            >独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
+              #subtitle
+              >Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
+              Brand Building And Conversion Performance</template
+            ></SectionTitle
           >
-            <img class="ring-base" :src="model.image" alt="" />
-            <span
-              v-for="(label, labelIndex) in model.labels"
-              :key="label"
-              :class="`ring-label ring-label-${labelIndex + 1}`"
-              >{{ label }}</span
+          <div class="model-layout">
+            <div
+              v-for="model in ringModels"
+              :key="model.title"
+              class="ring ring-diagram"
+              role="img"
+              :aria-label="model.title"
             >
-            <div class="ring-center-label">
-              <svg v-if="model.icon === 'asset'" viewBox="0 0 48 48" aria-hidden="true">
-                <path d="M10 38V16l14-7 14 7v22H10Z" />
-                <path d="M17 21h4m6 0h4m-14 7h4m6 0h4M22 38v-6h4v6" />
-              </svg>
-              <svg v-else viewBox="0 0 48 48" aria-hidden="true">
-                <circle cx="15" cy="17" r="6" />
-                <circle cx="34" cy="14" r="5" />
-                <circle cx="31" cy="34" r="6" />
-                <path d="m20 18 9-3m2 4v9m-5 4-7-10" />
-              </svg>
-              <strong>{{ model.title }}</strong>
+              <img class="ring-base" :src="model.image" alt="" />
+              <span
+                v-for="(label, labelIndex) in model.labels"
+                :key="label"
+                :class="`ring-label ring-label-${labelIndex + 1}`"
+                >{{ label }}</span
+              >
+              <div class="ring-center-label">
+                <svg v-if="model.icon === 'asset'" viewBox="0 0 48 48" aria-hidden="true">
+                  <path d="M10 38V16l14-7 14 7v22H10Z" />
+                  <path d="M17 21h4m6 0h4m-14 7h4m6 0h4M22 38v-6h4v6" />
+                </svg>
+                <svg v-else viewBox="0 0 48 48" aria-hidden="true">
+                  <circle cx="15" cy="17" r="6" />
+                  <circle cx="34" cy="14" r="5" />
+                  <circle cx="31" cy="34" r="6" />
+                  <path d="m20 18 9-3m2 4v9m-5 4-7-10" />
+                </svg>
+                <strong>{{ model.title }}</strong>
+              </div>
             </div>
-          </div>
-          <div class="core-value">
-            <h3>
-              <img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
-            </h3>
-            <div v-for="point in corePoints" :key="point[0]" class="core-point">
-              <h4><i></i>{{ point[0] }}</h4>
-              <p>{{ point[1] }}</p>
+            <div class="core-value">
+              <h3>
+                <img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
+              </h3>
+              <div v-for="point in corePoints" :key="point[0]" class="core-point">
+                <h4><i></i>{{ point[0] }}</h4>
+                <p>{{ point[1] }}</p>
+              </div>
+              <NuxtLink class="primary-button small" to="/services">了解业务详情 <b>→</b></NuxtLink>
             </div>
-            <button class="primary-button small" @click="openConsultation">
-              了解业务详情 <b>→</b>
-            </button>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section id="advantages" class="advantages-section">
-      <div class="page-width">
-        <SectionTitle
-          ><span class="blue">四大核心</span>优势<template #subtitle
-            >Four Core Advantages</template
-          ></SectionTitle
-        >
-        <div class="lead-advantage">
-          <img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
-          <div>
-            <h3>真人内容生产优势</h3>
-            <p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
-            <p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
-          </div>
-        </div>
-        <div class="advantage-grid">
-          <article v-for="([title, text], index) in advantageCards" :key="title">
-            <img
-              :src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
-              alt=""
-            />
+      <section id="advantages" class="advantages-section">
+        <div class="page-width">
+          <SectionTitle
+            ><span class="blue">四大核心</span>优势<template #subtitle
+              >Four Core Advantages</template
+            ></SectionTitle
+          >
+          <div class="lead-advantage">
+            <img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
             <div>
-              <h3>{{ title }}</h3>
-              <p><b>核心点：</b>{{ text }}</p>
-              <p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
+              <h3>真人内容生产优势</h3>
+              <p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
+              <p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
             </div>
-          </article>
+          </div>
+          <div class="advantage-grid">
+            <article v-for="([title, text], index) in advantageCards" :key="title">
+              <img
+                :src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
+                alt=""
+              />
+              <div>
+                <h3>{{ title }}</h3>
+                <p><b>核心点：</b>{{ text }}</p>
+                <p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
+              </div>
+            </article>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <section id="cases" class="cases-section">
-      <div class="case-background" aria-hidden="true"></div>
-      <div class="page-width case-content">
+      <section id="cases" class="cases-section">
+        <div class="case-background" aria-hidden="true"></div>
+        <div class="page-width case-content">
+          <SectionTitle
+            ><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
+            ><template #subtitle
+              >Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
+            ></SectionTitle
+          >
+          <div class="case-panel">
+            <article v-for="(image, index) in caseImages" :key="image">
+              <img :src="image" :alt="`客户案例 ${index + 1}`" />
+              <p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
+            </article>
+          </div>
+          <div class="center-action">
+            <NuxtLink class="primary-button small" to="/cases">查看全部案例 <b>→</b></NuxtLink>
+          </div>
+        </div>
+      </section>
+
+      <section id="industries" class="industries-section page-width">
         <SectionTitle
-          ><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
-          ><template #subtitle
-            >Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
-          ></SectionTitle
-        >
-        <div class="case-panel">
-          <article v-for="(image, index) in caseImages" :key="image">
-            <img :src="image" :alt="`客户案例 ${index + 1}`" />
-            <p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
-          </article>
-        </div>
-        <div class="center-action">
-          <button class="primary-button small" @click="openConsultation">
-            查看全部案例 <b>→</b>
-          </button>
-        </div>
-      </div>
-    </section>
-
-    <section id="industries" class="industries-section page-width">
-      <SectionTitle
-        >深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
-          >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
-          Solutions<br />Tailored To Clients’ Needs</template
-        ></SectionTitle
-      >
-      <div class="industry-grid">
-        <article v-for="card in industryCards" :key="card[0]">
-          <h3>{{ card[0] }}</h3>
-          <img :src="card[2]" alt="" />
-          <div class="quote">“</div>
-          <p>某企业服务客户：<br />{{ card[1] }}</p>
-          <div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
-        </article>
-      </div>
-    </section>
-
-    <section id="delivery" class="delivery-section">
-      <div class="page-width">
-        <SectionTitle
-          ><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
+          >深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
             >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
             Solutions<br />Tailored To Clients’ Needs</template
           ></SectionTitle
         >
-        <div class="delivery-banner"></div>
-        <div class="delivery-grid">
-          <article v-for="step in deliverySteps" :key="step[0]">
-            <img :src="step[2]" alt="" />
-            <div>
-              <h3>{{ step[0] }}：</h3>
-              <p>{{ step[1] }}</p>
-            </div>
+        <div class="industry-grid">
+          <article v-for="card in industryCards" :key="card[0]">
+            <h3>{{ card[0] }}</h3>
+            <img :src="card[2]" alt="" />
+            <div class="quote">“</div>
+            <p>某企业服务客户：<br />{{ card[1] }}</p>
+            <div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
           </article>
         </div>
-      </div>
-    </section>
-
-    <section class="testimonial-section">
-      <div class="page-width">
-        <SectionTitle
-          >客户真实评价，见证<span class="blue">服务品质</span
-          ><template #subtitle
-            >Genuine Client Testimonials Attest To Our Service Quality</template
-          ></SectionTitle
-        >
-        <div class="testimonial-track">
-          <article v-for="index in 5" :key="index">
-            <header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
-            <p>
-              创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
-            </p>
-          </article>
-        </div>
-      </div>
-    </section>
-
-    <section class="cta-section">
-      <div class="cta-art"></div>
-      <div class="cta-content">
-        <h2>AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系</h2>
-        <p>免费获取1对1GEO增长诊断方案</p>
-        <button class="primary-button" @click="openConsultation">立即免费咨询 <b>→</b></button>
-      </div>
-    </section>
-
-    <footer id="footer" class="site-footer">
-      <div class="page-width footer-main">
-        <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
-        <div class="footer-links">
-          <div v-for="n in 6" :key="n"><b>快捷导航</b><span>企业定位企业定位企业定位</span></div>
-        </div>
-        <div class="qr"><span>▦</span><span>▦</span><small>公众号　　微信二维码</small></div>
-      </div>
-      <div class="footer-bottom">
-        备案信息 备案信息 备案信息　　　版权声明版权声明版权声明　　　友情链接友情链接友情链接
-      </div>
-    </footer>
-
-    <div v-if="consultationOpen" class="dialog-mask" @click.self="consultationOpen = false">
-      <section class="consult-dialog" role="dialog" aria-modal="true">
-        <button class="close" aria-label="关闭" @click="consultationOpen = false">×</button>
-        <h2>咨询全域 GEO 方案</h2>
-        <p>提交后，我们会尽快为您匹配专属增长方案。</p>
-        <button class="primary-button" @click="submitConsultation">提交咨询</button>
       </section>
-    </div>
-    <p v-if="notice" class="toast">{{ notice }}</p>
-  </main>
+
+      <section id="delivery" class="delivery-section">
+        <div class="page-width">
+          <SectionTitle
+            ><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
+              >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
+              Solutions<br />Tailored To Clients’ Needs</template
+            ></SectionTitle
+          >
+          <div class="delivery-banner"></div>
+          <div class="delivery-grid">
+            <article v-for="step in deliverySteps" :key="step[0]">
+              <img :src="step[2]" alt="" />
+              <div>
+                <h3>{{ step[0] }}：</h3>
+                <p>{{ step[1] }}</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="testimonial-section">
+        <div class="page-width">
+          <SectionTitle
+            >客户真实评价，见证<span class="blue">服务品质</span
+            ><template #subtitle
+              >Genuine Client Testimonials Attest To Our Service Quality</template
+            ></SectionTitle
+          >
+          <div class="testimonial-track">
+            <article v-for="index in 5" :key="index">
+              <header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
+              <p>
+                创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="cta-section">
+        <div class="cta-art"></div>
+        <div class="cta-content">
+          <h2>
+            AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系
+          </h2>
+          <p>免费获取1对1GEO增长诊断方案</p>
+          <button class="primary-button" type="button" @click="requestConsultation('首页底部 CTA')">
+            立即免费咨询 <b>→</b>
+          </button>
+        </div>
+      </section>
+    </main>
+
+    <SiteFooter />
+  </div>
 </template>