430 lines
16 KiB
Vue
430 lines
16 KiB
Vue
<script setup>
|
||
import { gsap } from 'gsap'
|
||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||
|
||
const consultationOpen = ref(false)
|
||
const notice = ref('')
|
||
const pageRoot = ref(null)
|
||
let animationContext
|
||
|
||
const navItems = [
|
||
['首页', 'home'],
|
||
['营销增长服务', 'model'],
|
||
['行业解决方案', 'industries'],
|
||
['开放客户案例平台', 'cases'],
|
||
['核心优势', 'advantages'],
|
||
['全球营销增长洞察', 'delivery'],
|
||
['关于我们', 'footer']
|
||
]
|
||
|
||
const logos = [
|
||
'Bond',
|
||
'WaSun',
|
||
'西西能源',
|
||
'CIIC',
|
||
'SUNAC',
|
||
'B+ WORKS',
|
||
'Bond',
|
||
'WaSun',
|
||
'西西能源',
|
||
'CIIC',
|
||
'SUNAC',
|
||
'B+ WORKS'
|
||
]
|
||
const stats = [
|
||
['300+', '累计服务客户', '/images/lanhu/slices/home-group100-image26@2x.png'],
|
||
['12+', '覆盖行业', '/images/lanhu/slices/home-group101-image27@2x.png'],
|
||
['126%', '客户AI搜索曝光平均提升', '/images/lanhu/slices/home-group102-image28@2x.png'],
|
||
['65%', '客户转化链路效率平均提升', '/images/lanhu/slices/home-group103-image29@2x.png']
|
||
]
|
||
const corePoints = [
|
||
['曝光', '打造AI搜索语境下的品牌信任声量，一次布局 长期复用'],
|
||
['获客', '流量，让每一分投入都有回报 让曝光直接落地为可跟进的精准线索，告别无效']
|
||
]
|
||
const advantageCards = [
|
||
['全域媒体资源优势', '5000+权威官媒+10万+优质自媒体矩阵'],
|
||
['全链路闭环优势', '行业唯一打通「纯曝光+内容资产沉淀+转化闭环」'],
|
||
['全客群定制优势', '覆盖全类型经营主体，一对一专属定制专属方案']
|
||
]
|
||
const caseImages = [
|
||
'/images/lanhu/slices/home-group90-image15@2x.png',
|
||
'/images/lanhu/slices/home-group91-image16@2x.png',
|
||
'/images/lanhu/slices/home-group92-image17@2x.png',
|
||
'/images/lanhu/slices/home-group93-image18@2x.png'
|
||
]
|
||
const industryCards = [
|
||
[
|
||
'本地生活',
|
||
'AI搜索全域曝光提升320%月均精准线索新增80+，持续获得品牌声量与业务线索',
|
||
'/images/lanhu/slices/home-group34-group74-image5@2x.png'
|
||
],
|
||
[
|
||
'快消',
|
||
'AI搜索全域曝光提升320%月均精准线索新增80+，让内容价值更快兑现',
|
||
'/images/lanhu/slices/home-group35-group72-image5@2x.png'
|
||
],
|
||
[
|
||
'美妆',
|
||
'AI搜索全域曝光提升320%月均精准线索新增80+，建立多渠道信任背书',
|
||
'/images/lanhu/slices/home-group36-group71-image5@2x.png'
|
||
]
|
||
]
|
||
const deliverySteps = [
|
||
[
|
||
'需求诊断',
|
||
'一对一沟通，分析品牌现状与增长痛点',
|
||
'/images/lanhu/slices/home-group78-image10@2x.png'
|
||
],
|
||
[
|
||
'方案定制',
|
||
'定制专属GEO策略，明确交付节点与预期效果',
|
||
'/images/lanhu/slices/home-group80-group77-image9@2x.png'
|
||
],
|
||
[
|
||
'内容落地',
|
||
'真人内容生产+媒体矩阵投放，全流程同步进度',
|
||
'/images/lanhu/slices/home-group86-group76-image8@2x.png'
|
||
],
|
||
[
|
||
'数据优化',
|
||
'定期数据复盘，动态调整策略，持续优化效果',
|
||
'/images/lanhu/slices/home-group34-group74-image5@2x.png'
|
||
],
|
||
[
|
||
'资产沉淀',
|
||
'交付完整内容资产与增长报告，实现长效复用',
|
||
'/images/lanhu/slices/home-group35-group72-image5@2x.png'
|
||
]
|
||
]
|
||
|
||
function scrollToSection(id) {
|
||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||
}
|
||
function openConsultation() {
|
||
consultationOpen.value = true
|
||
notice.value = ''
|
||
}
|
||
function submitConsultation() {
|
||
consultationOpen.value = false
|
||
notice.value = '已收到您的咨询，我们将尽快与您联系。'
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await nextTick()
|
||
|
||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches || !pageRoot.value) return
|
||
|
||
gsap.registerPlugin(ScrollTrigger)
|
||
|
||
animationContext = gsap.context(() => {
|
||
const reveal = (targets, trigger, options = {}) => {
|
||
gsap.from(targets, {
|
||
autoAlpha: 0,
|
||
y: 34,
|
||
duration: 0.72,
|
||
ease: 'power3.out',
|
||
stagger: 0.1,
|
||
clearProps: 'transform,opacity,visibility',
|
||
scrollTrigger: {
|
||
trigger,
|
||
start: 'top 82%',
|
||
once: true
|
||
},
|
||
...options
|
||
})
|
||
}
|
||
|
||
const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
|
||
heroTimeline
|
||
.from('.site-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',
|
||
{ autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.09, clearProps: 'all' },
|
||
'-=0.22'
|
||
)
|
||
.from(
|
||
'.button-row button',
|
||
{ autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
|
||
'-=0.12'
|
||
)
|
||
|
||
gsap.to('.hero-art', {
|
||
scale: 1.025,
|
||
yPercent: 1,
|
||
duration: 9,
|
||
ease: 'sine.inOut',
|
||
repeat: -1,
|
||
yoyo: true
|
||
})
|
||
|
||
reveal('.intro-section .section-title', '.intro-section')
|
||
reveal('.stats-panel .stat-item', '.stats-panel', { y: 26, stagger: 0.12 })
|
||
reveal('.model-layout .ring', '.model-layout', { x: -24, y: 12, stagger: 0.16 })
|
||
reveal('.core-value', '.model-layout', { x: 28, y: 0, delay: 0.12 })
|
||
reveal('.advantages-section .section-title', '.advantages-section')
|
||
reveal('.lead-advantage', '.lead-advantage')
|
||
reveal('.advantage-grid article', '.advantage-grid', { y: 24, stagger: 0.12 })
|
||
reveal('.cases-section .section-title', '.cases-section')
|
||
reveal('.case-panel article', '.case-panel', { y: 24, stagger: 0.1 })
|
||
reveal('.industry-grid article', '.industry-grid', { y: 26, stagger: 0.12 })
|
||
reveal('.delivery-banner', '.delivery-banner', { y: 22 })
|
||
reveal('.delivery-grid article', '.delivery-grid', { y: 22, stagger: 0.1 })
|
||
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 })
|
||
}, pageRoot.value)
|
||
})
|
||
|
||
onBeforeUnmount(() => animationContext?.revert())
|
||
</script>
|
||
|
||
<template>
|
||
<main id="home" ref="pageRoot" class="site-shell">
|
||
<header class="site-header">
|
||
<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: index === 0 }"
|
||
@click="scrollToSection(target)"
|
||
>
|
||
{{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
|
||
</button>
|
||
</nav>
|
||
<button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
|
||
</div>
|
||
</header>
|
||
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<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
|
||
>
|
||
<div class="model-layout">
|
||
<img
|
||
class="ring"
|
||
src="/images/lanhu/slices/home-group80-group83-image11@2x.png"
|
||
alt="声量资产环"
|
||
/>
|
||
<img
|
||
class="ring"
|
||
src="/images/lanhu/slices/home-group86-group87-image12@2x.png"
|
||
alt="获客转化环"
|
||
/>
|
||
<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>
|
||
<button class="primary-button small" @click="openConsultation">
|
||
了解业务详情 <b>→</b>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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=""
|
||
/>
|
||
<div>
|
||
<h3>{{ title }}</h3>
|
||
<p><b>核心点：</b>{{ text }}</p>
|
||
<p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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">
|
||
<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
|
||
>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" @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>
|
||
</template>
|