248 lines
16 KiB
Vue
248 lines
16 KiB
Vue
<script setup>
|
||
import Button from '~/components/ui/button/Button.vue'
|
||
|
||
const consultationOpen = ref(false)
|
||
const notice = ref('')
|
||
|
||
const navItems = [
|
||
{ label: '首页', target: 'home' },
|
||
{ label: '营销增长服务', target: 'model' },
|
||
{ label: '行业解决方案', target: 'industry' },
|
||
{ label: '内容生产服务', target: 'advantages' },
|
||
{ label: '核心优势', target: 'advantages' },
|
||
{ label: '案例与媒体资源', target: 'cases' },
|
||
{ label: '关于我们', target: 'footer' }
|
||
]
|
||
|
||
const stats = [
|
||
{ value: '300+', label: '服务客户群体' },
|
||
{ value: '12+', label: '覆盖行业' },
|
||
{ value: '126%', label: '客户 AI 搜索曝光提升' },
|
||
{ value: '65%', label: '客户月均精准线索提升' }
|
||
]
|
||
|
||
const valuePoints = [
|
||
{ title: '曝光', text: '打造 AI 搜索语境下的品牌信任声望，一次布局长期复用。' },
|
||
{ title: '获客', text: '从曝光到获客全链路承接，避免流量断层，实现品效协同。' }
|
||
]
|
||
|
||
const advantages = [
|
||
{ title: '全域媒体资源优势', detail: '5000+ 权威官媒 + 10万+ 优质自媒体矩阵', image: '/images/lanhu/slices/home-group37-group70-image5@2x.png' },
|
||
{ title: '真人内容生产优势', detail: '行业独家 5万真人分布式内容生产网络', image: '/images/lanhu/slices/home-group36-group71-image5@2x.png' },
|
||
{ title: '全链路闭环优势', detail: '从品牌声量到转化增长，形成全链路业务闭环', image: '/images/lanhu/slices/home-group35-group72-image5@2x.png' },
|
||
{ title: '全客群定制优势', detail: '覆盖全类型经营主体，一对一专属定制方案', image: '/images/lanhu/slices/home-group34-group74-image5@2x.png' }
|
||
]
|
||
|
||
const cases = [
|
||
{ category: '企业服务', result: 'AI 搜索全域曝光提升 320%，月均精准线索新增 80+' },
|
||
{ category: '品牌营销', result: '搜索语境占位提升，建立多渠道权威信任背书' },
|
||
{ category: '本地生活', result: '内容矩阵联动，带动门店咨询与转化增长' },
|
||
{ category: '消费品牌', result: '真人内容规模化生产，提升品牌声量与转化' }
|
||
]
|
||
|
||
const industries = ['本地生活', '快消', '美妆']
|
||
|
||
const deliverySteps = [
|
||
['需求诊断', '一对一沟通，分析品牌现状与增长目标'],
|
||
['方案定制', '定制专属 GEO 策略，明确关键节点与节奏'],
|
||
['内容落地', '真人内容生产 + 媒体资源投放，全程跟进'],
|
||
['数据优化', '定期复盘数据，动态调整策略，持续提升'],
|
||
['资产沉淀', '沉淀持续增长的品牌资产，实现长效复用']
|
||
]
|
||
|
||
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 = '已收到您的咨询，我们将尽快与您联系。'
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<main id="home" class="overflow-hidden bg-white text-ink">
|
||
<header class="sticky top-0 z-30 border-b border-slate-200 bg-white/95 backdrop-blur">
|
||
<div class="mx-auto flex h-11 max-w-[1280px] items-center justify-between px-5">
|
||
<a href="#home" class="shrink-0">
|
||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="大马棒营销咨询集团" class="h-9 w-auto object-contain">
|
||
</a>
|
||
<nav class="hidden items-center gap-7 text-xs text-slate-600 xl:flex" aria-label="主导航">
|
||
<button v-for="(item, index) in navItems" :key="item.target" class="whitespace-nowrap transition hover:text-primary" :class="index === 0 ? 'font-semibold text-primary' : ''" @click="scrollToSection(item.target)">
|
||
{{ item.label }}
|
||
</button>
|
||
</nav>
|
||
<Button class="h-6 rounded-full px-3 text-[10px]" @click="openConsultation">登录</Button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="relative isolate h-[372px] overflow-hidden bg-[#f5f9ff]">
|
||
<img src="/images/lanhu/slices/home-container25-image2@2x.png" alt="" class="pointer-events-none absolute inset-0 z-0 h-full w-full max-w-none object-cover" aria-hidden="true">
|
||
<div class="relative z-10 mx-auto grid h-full max-w-[1280px] items-center px-8 py-12 sm:grid-cols-[48%_52%] sm:px-[12.65%]">
|
||
<div class="relative z-10 pt-2">
|
||
<h1 class="text-[48px] font-bold leading-[1.38] tracking-tight text-ink sm:text-[32px]">
|
||
<span class="block whitespace-nowrap">大马棒 · 云途全域 GEO</span>
|
||
<span class="block whitespace-nowrap">让品牌在 AI 时代拥有持续增长力</span>
|
||
</h1>
|
||
<div class="mt-4 flex flex-wrap gap-x-3 gap-y-2 text-xs text-slate-600">
|
||
<span>✓ 5万真人内容生产网络</span>
|
||
<span>✓ 5000+ 自营资源矩阵</span>
|
||
<span>✓ 全链路转化闭环</span>
|
||
</div>
|
||
<div class="mt-6 flex flex-wrap gap-3">
|
||
<Button class="h-10 rounded-[4px] px-5 text-xs" @click="openConsultation">免费定制 <span class="ml-1">→</span></Button>
|
||
<Button variant="outline" class="h-10 rounded-[4px] px-5 text-xs" @click="scrollToSection('cases')">查看成功案例</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="border-y border-slate-100 bg-white py-5">
|
||
<div class="mx-auto flex max-w-[960px] items-center justify-between gap-5 px-4 text-xs font-semibold text-slate-400 sm:text-sm">
|
||
<span>and</span><span>WaSun</span><span>企业服务</span><span>CiiC</span><span>SUNX</span><span>品牌营销</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mx-auto max-w-[960px] px-4 py-16 text-center">
|
||
<h2 class="text-2xl font-bold tracking-tight">已服务 <span class="text-primary">300+</span> 全类型经营主体，覆盖 <span class="text-primary">12+</span> 主流行业</h2>
|
||
<p class="mt-2 text-xs text-muted">We have provided services to over 300 full-spectrum business entities </p>
|
||
<p class="mt-2 text-xs text-muted">spanning more than a dozen mainstream industry sectors</p>
|
||
<div class="mt-8 grid grid-cols-2 gap-4 md:grid-cols-4">
|
||
<article v-for="(stat, index) in stats" :key="stat.label" class="rounded-xl bg-gradient-to-br from-white to-blue-50 px-3 py-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
|
||
<img v-if="index === 0" src="/images/lanhu/slices/home-group37-group70-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
|
||
<img v-else-if="index === 1" src="/images/lanhu/slices/home-group36-group71-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
|
||
<div class="text-2xl font-bold text-primary">{{ stat.value }}</div>
|
||
<div class="mt-1 text-xs text-slate-500">{{ stat.label }}</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="model" class="relative overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#e3f4ff_100%)] py-16">
|
||
<div class="mx-auto max-w-[960px] px-4 text-center">
|
||
<h2 class="text-2xl font-bold">独创「<span class="text-primary">GEO双环增长模型</span>」，实现品效协同长效增长</h2>
|
||
<p class="mt-2 text-xs text-muted">Original “GEO Dual-Ring Growth Model” Delivers Long-term Growth Through Integrated Brand Building And Conversion Performance</p>
|
||
<div class="mt-8 grid items-center gap-6 md:grid-cols-[1fr_1fr_1.1fr]">
|
||
<img src="/images/lanhu/slices/home-group80-group83-image11@2x.png" alt="品牌声量增长环" class="mx-auto size-40 object-contain">
|
||
<img src="/images/lanhu/slices/home-group86-group87-image12@2x.png" alt="转化增长环" class="mx-auto size-40 object-contain">
|
||
<div class="rounded-xl bg-white/70 p-6 text-left shadow-[0_12px_32px_rgba(48,121,255,0.12)]">
|
||
<h3 class="font-semibold text-primary">业务核心价值点</h3>
|
||
<div v-for="point in valuePoints" :key="point.title" class="mt-5 border-b border-slate-200 pb-4 last:border-0 last:pb-0">
|
||
<h4 class="font-medium text-slate-800">{{ point.title }}</h4>
|
||
<p class="mt-2 text-sm leading-6 text-slate-500">{{ point.text }}</p>
|
||
</div>
|
||
<Button class="mt-5" @click="openConsultation">了解业务详情 <span class="ml-1">→</span></Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="advantages" class="bg-[#edf8ff] py-16">
|
||
<div class="mx-auto max-w-[960px] px-4">
|
||
<div class="text-center">
|
||
<h2 class="text-2xl font-bold text-primary">四大核心优势</h2>
|
||
<p class="mt-2 text-xs text-muted">Four Core Advantages</p>
|
||
</div>
|
||
<div class="mt-9 grid gap-4 sm:grid-cols-2">
|
||
<article v-for="advantage in advantages" :key="advantage.title" class="flex min-h-36 items-center gap-5 rounded-lg bg-white/85 p-5 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
|
||
<img :src="advantage.image" alt="" class="size-20 shrink-0 object-contain">
|
||
<div>
|
||
<h3 class="font-semibold text-primary">{{ advantage.title }}</h3>
|
||
<p class="mt-2 text-sm leading-6 text-slate-500">{{ advantage.detail }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="cases" class="relative overflow-hidden py-16">
|
||
<div class="absolute inset-0 bg-[url('/images/lanhu/slices/home-group75-image7@2x.png')] bg-cover bg-center opacity-45" />
|
||
<div class="relative mx-auto max-w-[960px] px-4">
|
||
<div class="text-center">
|
||
<h2 class="text-2xl font-bold text-primary">真实落地成果，见证增长实效</h2>
|
||
<p class="mt-2 text-xs text-muted">Practical Delivered Results That Demonstrate Tangible Growth Outcomes</p>
|
||
</div>
|
||
<div class="mt-9 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||
<article v-for="(item, index) in cases" :key="item.category" class="overflow-hidden rounded-xl bg-white shadow-[0_10px_24px_rgba(48,121,255,0.12)]">
|
||
<div class="grid h-28 place-items-center bg-gradient-to-br from-blue-100 via-white to-sky-100">
|
||
<img :src="advantages[index].image" alt="" class="size-16 object-contain">
|
||
</div>
|
||
<div class="p-4">
|
||
<h3 class="font-semibold text-slate-800">{{ item.category }}</h3>
|
||
<p class="mt-2 text-xs leading-5 text-slate-500">{{ item.result }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="mt-8 text-center"><Button @click="openConsultation">查看全部案例 <span class="ml-1">→</span></Button></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="industry" class="mx-auto max-w-[960px] px-4 py-16">
|
||
<div class="text-center">
|
||
<h2 class="text-2xl font-bold">深耕 <span class="text-primary">12+</span> 行业，定制专属 GEO 增长方案</h2>
|
||
<p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
|
||
</div>
|
||
<div class="mt-9 grid gap-5 md:grid-cols-3">
|
||
<article v-for="(industry, index) in industries" :key="industry" class="relative overflow-hidden rounded-xl bg-gradient-to-br from-sky-50 via-white to-blue-100 p-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
|
||
<img :src="advantages[index].image" alt="" class="absolute -right-3 -top-2 size-28 opacity-35">
|
||
<h3 class="relative text-lg font-semibold text-slate-800">{{ industry }}</h3>
|
||
<p class="relative mt-4 text-sm leading-6 text-slate-600">为 {{ industry }} 品牌定制 AI 搜索内容策略、媒体资源布局与增长转化方案。</p>
|
||
<div class="relative mt-5 flex gap-2"><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">内容策略</span><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">全域曝光</span></div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="bg-[#eff9ff] py-16">
|
||
<div class="mx-auto max-w-[960px] px-4">
|
||
<div class="text-center">
|
||
<h2 class="text-2xl font-bold"><span class="text-primary">5步标准化</span>交付流程，透明可控效果可追溯</h2>
|
||
<p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
|
||
</div>
|
||
<div class="mt-9 rounded-xl bg-white/80 p-6 shadow-[0_10px_30px_rgba(48,121,255,0.08)]">
|
||
<ol class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
<li v-for="(step, index) in deliverySteps" :key="step[0]" class="flex gap-4 rounded-lg border border-blue-50 bg-white p-4">
|
||
<span class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-100 text-sm font-bold text-primary">0{{ index + 1 }}</span>
|
||
<div><h3 class="font-semibold text-slate-800">{{ step[0] }}</h3><p class="mt-1 text-xs leading-5 text-slate-500">{{ step[1] }}</p></div>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mx-auto max-w-[960px] px-4 py-16">
|
||
<div class="text-center"><h2 class="text-2xl font-bold">客户真实评价，见证<span class="text-primary">服务品质</span></h2><p class="mt-2 text-xs text-muted">Genuine Client Testimonials Attest To Our Service Quality</p></div>
|
||
<div class="mt-8 grid gap-4 md:grid-cols-3">
|
||
<blockquote v-for="name in ['企业服务客户', '消费品牌客户', '本地生活客户']" :key="name" class="rounded-xl bg-slate-50 p-6 text-sm leading-7 text-slate-500">
|
||
<span class="text-3xl font-bold text-blue-200">“</span>通过全域 GEO 布局，我们在 AI 搜索场景中持续获得了更高质量的品牌曝光与业务线索。<footer class="mt-4 font-medium text-slate-700">— {{ name }}</footer>
|
||
</blockquote>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="relative overflow-hidden bg-primary py-14 text-center text-white">
|
||
<img src="/images/lanhu/slices/home-group105-image31@2x.png" alt="" class="absolute inset-0 size-full object-cover opacity-70">
|
||
<div class="relative mx-auto max-w-2xl px-4"><h2 class="text-2xl font-bold leading-relaxed">AI 搜索增长风口已至，大马棒 · 云途全域 GEO 助力企业打造品牌双环增长体系</h2><p class="mt-3 text-sm text-blue-50">免费获取 1 对 1 GEO 诊断方案</p><Button class="mt-6 bg-white text-primary hover:bg-slate-100" @click="openConsultation">立即咨询 <span class="ml-1">→</span></Button></div>
|
||
</section>
|
||
|
||
<footer id="footer" class="bg-[#111d24] py-10 text-slate-300">
|
||
<div class="mx-auto grid max-w-[960px] gap-8 px-4 md:grid-cols-[1.2fr_1fr_auto]">
|
||
<div><h2 class="text-lg font-bold text-white">成都大马棒传媒有限公司</h2><p class="mt-3 text-sm leading-6 text-slate-400">全域增长咨询与内容营销服务，为品牌构建 AI 时代的持续增长力。</p></div>
|
||
<div class="text-sm leading-7 text-slate-400"><div>服务热线：132-254-2153</div><div>商务合作：business@damabang.com</div><div>工作时间：周一至周五 09:30 - 18:30</div></div>
|
||
<div class="grid size-24 place-items-center rounded bg-white/10 text-xs text-slate-400">关注我们<br>获取方案</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<div v-if="consultationOpen" class="fixed inset-0 z-40 grid place-items-center bg-slate-950/45 px-4" @click.self="consultationOpen = false">
|
||
<section class="w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl" role="dialog" aria-modal="true" aria-labelledby="consult-title">
|
||
<h2 id="consult-title" class="text-lg font-bold text-ink">咨询全域 GEO 方案</h2>
|
||
<p class="mt-2 text-sm leading-6 text-muted">提交后，我们会为您匹配专属增长方案。</p>
|
||
<div class="mt-6 flex justify-end gap-3"><Button variant="outline" @click="consultationOpen = false">暂不咨询</Button><Button @click="submitConsultation">提交咨询</Button></div>
|
||
</section>
|
||
</div>
|
||
<p v-if="notice" class="fixed bottom-5 left-1/2 z-50 -translate-x-1/2 rounded-full bg-slate-900 px-5 py-3 text-sm text-white shadow-xl" role="status">{{ notice }}</p>
|
||
</main>
|
||
</template>
|