init
This commit is contained in:
+159
@@ -0,0 +1,159 @@
|
||||
<script setup>
|
||||
import { aboutPage } from "~/data/about";
|
||||
import { footerData } from "~/data/navigation";
|
||||
|
||||
const heroRoutes = [
|
||||
{ label: "页面路径", href: "/about", path: "/about" },
|
||||
{ label: "发展历程", href: "/about#history", path: "/about#history" },
|
||||
{ label: "联系页", href: "/contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const introRoutes = [
|
||||
{ label: "模块锚点", href: "#company-intro", path: "/about#company-intro" },
|
||||
{ label: "发展历程", href: "/about#history", path: "/about#history" },
|
||||
{ label: "联系我们", href: "/about#contact-us", path: "/about#contact-us" },
|
||||
];
|
||||
|
||||
const historyRoutes = [
|
||||
{ label: "模块锚点", href: "#history", path: "/about#history" },
|
||||
{ label: "首页", href: "/", path: "/" },
|
||||
{ label: "服务页", href: "/services", path: "/services" },
|
||||
];
|
||||
|
||||
useHead({
|
||||
title: "关于我们 - 大马棒·云途全域 GEO",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: aboutPage.hero.description,
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
:style="{ backgroundImage: `url(${aboutPage.hero.image})` }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>
|
||||
{{ aboutPage.hero.eyebrow }}
|
||||
</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
{{ aboutPage.hero.title }}
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
{{ aboutPage.hero.description }}
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks :routes="heroRoutes" light />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="company-intro" class="bg-white py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Company Intro</p>
|
||||
<h2 class="section-title mt-4">公司介绍与团队能力</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ aboutPage.intro }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="introRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-8 md:grid-cols-3" data-stagger>
|
||||
<article
|
||||
v-for="value in aboutPage.values"
|
||||
:key="value.title"
|
||||
class="rounded-[24px] border border-gm-border bg-white p-7 shadow-sm"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<h2 class="text-2xl font-semibold text-[#262626]">{{ value.title }}</h2>
|
||||
<p class="mt-4 text-sm leading-7 text-[#777]">{{ value.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="history" class="bg-[#f7f8f7] py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Growth System</p>
|
||||
<h2 class="section-title mt-4">发展历程与核心协同能力</h2>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="historyRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-12 lg:grid-cols-[0.85fr_1.15fr]">
|
||||
<div data-reveal>
|
||||
<p class="text-base leading-8 text-[#666]">用全域 GEO 帮助品牌建立长期增长资产。</p>
|
||||
<div class="mt-8 flex flex-wrap gap-3">
|
||||
<span
|
||||
v-for="capability in aboutPage.team"
|
||||
:key="capability"
|
||||
class="rounded-full border border-gm-border bg-white px-4 py-2 text-sm text-[#666]"
|
||||
>
|
||||
{{ capability }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5" data-stagger>
|
||||
<article
|
||||
v-for="item in aboutPage.timeline"
|
||||
:key="item.year"
|
||||
class="rounded-[24px] border border-gm-border bg-white p-6"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-3xl font-semibold text-gm-green">{{ item.year }}</p>
|
||||
<p class="mt-3 text-base leading-8 text-[#666]">{{ item.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact-us" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Contact</p>
|
||||
<h2 class="section-title mt-4">联系我们</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">如果你希望进一步了解服务方式、合作节奏或行业方案，可以从这里直接进入咨询。</p>
|
||||
</div>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '页脚咨询', href: '/#contact', path: '/#contact' },
|
||||
{ label: '服务总览', href: '/services', path: '/services' },
|
||||
{ label: '解决方案', href: '/solutions', path: '/solutions' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
|
||||
<article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
|
||||
<p class="text-sm font-medium text-[#262626]">电话</p>
|
||||
<p class="mt-3 text-base text-[#666]">{{ footerData.contact.phone }}</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
|
||||
<p class="text-sm font-medium text-[#262626]">邮箱</p>
|
||||
<p class="mt-3 text-base text-[#666]">{{ footerData.contact.email }}</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
|
||||
<p class="text-sm font-medium text-[#262626]">地址</p>
|
||||
<p class="mt-3 text-base text-[#666]">{{ footerData.contact.address }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,117 @@
|
||||
<script setup>
|
||||
import { advantageMatrix, advantages } from "~/data/advantages";
|
||||
|
||||
const heroRoutes = [
|
||||
{ label: "页面路径", href: "/advantages", path: "/advantages" },
|
||||
{ label: "首页优势模块", href: "/#advantages", path: "/#advantages" },
|
||||
{ label: "联系页", href: "/contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const matrixRoutes = [
|
||||
{ label: "模块锚点", href: "#advantage-matrix", path: "/advantages#advantage-matrix" },
|
||||
{ label: "首页优势模块", href: "/#advantages", path: "/#advantages" },
|
||||
{ label: "服务总览", href: "/services", path: "/services" },
|
||||
];
|
||||
|
||||
const gridRoutes = [
|
||||
{ label: "模块锚点", href: "#advantage-grid", path: "/advantages#advantage-grid" },
|
||||
{ label: "行业方案", href: "/solutions", path: "/solutions" },
|
||||
{ label: "客户案例", href: "/cases", path: "/cases" },
|
||||
];
|
||||
|
||||
useHead({
|
||||
title: "核心优势 - 大马棒·云途全域 GEO",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"了解大马棒的真人内容生产网络、全域媒体矩阵、全链路闭环与全客群定制化优势。",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
style="background-image: url('/images/banner-bg.jpg')"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>ADVANTAGES</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
核心优势
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
行业独家的真人内容生产网络、全域媒体资源和双环增长能力，让 GEO 增长更可信、更可控。
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks :routes="heroRoutes" light />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="advantage-matrix" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Advantage Matrix</p>
|
||||
<h2 class="section-title mt-4">资源矩阵与能力基座</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
先用清晰的数据和资源结构，快速建立“为什么大马棒能做成这件事”的基础认知。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="matrixRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
|
||||
<article
|
||||
v-for="item in advantageMatrix"
|
||||
:key="item.label"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-sm"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-3xl font-semibold text-gm-green">{{ item.value }}</p>
|
||||
<h2 class="mt-3 text-lg font-semibold text-[#262626]">{{ item.label }}</h2>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.description }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="advantage-grid" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Advantages</p>
|
||||
<h2 class="section-title mt-4">四大核心优势</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
四项优势分别对应内容生产、媒体资源、增长闭环与行业定制能力，帮助用户快速理解差异化竞争力。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="gridRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
|
||||
<article
|
||||
v-for="item in advantages"
|
||||
:key="item.slug"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-sm"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<p class="text-[28px] font-semibold leading-none text-gm-green">{{ item.metric }}</p>
|
||||
<h3 class="mt-5 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm font-medium leading-7 text-[#333]">{{ item.point }}</p>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.value }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">优势路径 /advantages#advantage-grid</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
+200
@@ -0,0 +1,200 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { caseCategories, caseOverview, cases } from "~/data/cases";
|
||||
|
||||
const heroRoutes = [
|
||||
{ label: "页面路径", href: "/cases", path: "/cases" },
|
||||
{ label: "详情示例", href: "/cases/enterprise-service-geo", path: "/cases/enterprise-service-geo" },
|
||||
{ label: "联系页", href: "/contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const caseListRoutes = [
|
||||
{ label: "模块锚点", href: "#case-library", path: "/cases#case-library" },
|
||||
{ label: "企业服务筛选", href: "/cases?category=企业服务", path: "/cases?category=企业服务" },
|
||||
{ label: "本地生活筛选", href: "/cases?category=本地生活", path: "/cases?category=本地生活" },
|
||||
];
|
||||
|
||||
const relatedRoutes = [
|
||||
{ label: "模块锚点", href: "#case-recommend", path: "/cases#case-recommend" },
|
||||
{ label: "案例详情", href: "/cases/enterprise-service-geo", path: "/cases/enterprise-service-geo" },
|
||||
{ label: "咨询入口", href: "/#contact", path: "/#contact" },
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
const activeCategory = ref("全部");
|
||||
|
||||
const filteredCases = computed(() =>
|
||||
activeCategory.value === "全部"
|
||||
? cases
|
||||
: cases.filter((item) => item.category === activeCategory.value),
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.query.category,
|
||||
(category) => {
|
||||
activeCategory.value =
|
||||
typeof category === "string" && caseCategories.includes(category)
|
||||
? category
|
||||
: "全部";
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
useHead({
|
||||
title: "客户案例 - 大马棒·云途全域 GEO",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"查看大马棒·云途全域 GEO 在企业服务、本地生活、职业教育、电商零售等行业的真实落地成果。",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
style="background-image: url('/images/blog-web-dev.jpg')"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>CASES</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
真实落地成果，见证增长实效
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
用行业案例展示从 AI 搜索曝光、内容资产沉淀到精准线索转化的完整链路。
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks :routes="heroRoutes" light />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="case-overview" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Case Overview</p>
|
||||
<h2 class="section-title mt-4">{{ caseOverview.intro.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ caseOverview.intro.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="caseOverview.intro.routes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4" data-stagger>
|
||||
<AnimatedStat
|
||||
v-for="item in caseOverview.stats"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:suffix="item.suffix"
|
||||
data-stagger-item
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="case-library" class="bg-[#f7f8f7] py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#9a9a9a]">Cases</p>
|
||||
<h2 class="section-title mt-4">行业筛选与案例列表</h2>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="caseListRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex flex-wrap gap-3" data-reveal>
|
||||
<button
|
||||
v-for="category in caseCategories"
|
||||
:key="category"
|
||||
type="button"
|
||||
class="rounded-full border px-6 py-2 text-sm transition-all duration-300"
|
||||
:class="
|
||||
activeCategory === category
|
||||
? 'border-gm-green bg-gm-green text-white'
|
||||
: 'border-gm-border bg-white text-[#666] hover:border-[#d5d5d5]'
|
||||
"
|
||||
@click="activeCategory = category"
|
||||
>
|
||||
{{ category }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in filteredCases"
|
||||
:key="item.title"
|
||||
:to="item.path"
|
||||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-56 overflow-hidden bg-gm-light">
|
||||
<img
|
||||
:src="item.image"
|
||||
:alt="item.title"
|
||||
class="h-full w-full object-cover transition duration-500 hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
class="rounded-full bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-6 grid gap-2">
|
||||
<p v-for="metric in item.metrics" :key="metric" class="text-sm font-medium text-[#262626]">
|
||||
{{ metric }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="case-recommend" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Case Detail Path</p>
|
||||
<h2 class="section-title mt-4">{{ caseOverview.recommendTitle }}</h2>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="relatedRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-2" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in cases.slice(0, 2)"
|
||||
:key="item.slug"
|
||||
:to="item.path"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-4 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ item.result }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">详情路径 {{ item.path }}</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { cases } from "~/data/cases";
|
||||
|
||||
const route = useRoute();
|
||||
const currentCase = computed(() => cases.find((item) => item.slug === route.params.slug));
|
||||
|
||||
const relatedCases = computed(() =>
|
||||
cases.filter((item) => item.slug !== currentCase.value?.slug).slice(0, 3),
|
||||
);
|
||||
|
||||
if (!currentCase.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: "Case not found" });
|
||||
}
|
||||
|
||||
useHead(() => ({
|
||||
title: `${currentCase.value.title} - 大马棒·云途全域 GEO`,
|
||||
meta: [{ name: "description", content: currentCase.value.summary }],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
:style="{ backgroundImage: `url(${currentCase.image})` }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>CASE DETAIL</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
{{ currentCase.title }}
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
{{ currentCase.summary }}
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '返回案例库', href: '/cases', path: '/cases' },
|
||||
{ label: '当前详情', href: currentCase.path, path: currentCase.path },
|
||||
{ label: '联系页', href: '/contact', path: '/contact' },
|
||||
]"
|
||||
light
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
|
||||
<aside class="lg:sticky lg:top-28 lg:self-start" data-reveal>
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Case</p>
|
||||
<h1 class="mt-4 text-balance text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
|
||||
{{ currentCase.title }}
|
||||
</h1>
|
||||
<p class="mt-5 text-base leading-8 text-[#666]">{{ currentCase.summary }}</p>
|
||||
<p class="mt-5 font-mono text-xs text-[#999]">页面路径 {{ currentCase.path }}</p>
|
||||
<NuxtLink to="#contact" class="gm-btn gm-btn-primary mt-8">立即免费咨询</NuxtLink>
|
||||
</aside>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="overflow-hidden rounded-lg border border-gm-border" data-reveal>
|
||||
<img :src="currentCase.image" :alt="currentCase.title" class="h-[320px] w-full object-cover" data-parallax="24" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2" data-stagger>
|
||||
<div
|
||||
v-for="metric in currentCase.metrics"
|
||||
:key="metric"
|
||||
class="rounded-lg border border-gm-border bg-gm-light p-5"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-sm font-medium text-[#262626]">{{ metric }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4" data-stagger>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">项目挑战</h2>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ currentCase.challenge }}</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">解决方案</h2>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ currentCase.solution }}</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">落地结果</h2>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ currentCase.result }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="related-cases" class="bg-[#f7f8f7] py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#9a9a9a]">Cases</p>
|
||||
<h2 class="section-title mt-4">相关案例推荐</h2>
|
||||
</div>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '模块锚点', href: '#related-cases', path: `${currentCase.path}#related-cases` },
|
||||
{ label: '返回案例库', href: '/cases', path: '/cases' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in relatedCases"
|
||||
:key="item.title"
|
||||
:to="item.path"
|
||||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-56 overflow-hidden bg-gm-light">
|
||||
<img :src="item.image" :alt="item.title" class="h-full w-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import { footerData } from "~/data/navigation";
|
||||
|
||||
const heroRoutes = [
|
||||
{ label: "页面路径", href: "/contact", path: "/contact" },
|
||||
{ label: "首页 CTA", href: "/#consult", path: "/#consult" },
|
||||
{ label: "服务总览", href: "/services", path: "/services" },
|
||||
];
|
||||
|
||||
const contactRoutes = [
|
||||
{ label: "首页 CTA", href: "/#consult", path: "/#consult" },
|
||||
{ label: "服务总览", href: "/services", path: "/services" },
|
||||
{ label: "方案总览", href: "/solutions", path: "/solutions" },
|
||||
];
|
||||
|
||||
useHead({
|
||||
title: "联系我们 - 大马棒·云途全域 GEO",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"联系大马棒·云途全域 GEO，获取 1 对 1 增长诊断方案与行业专属 GEO 服务建议。",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
style="background-image: url('/images/banner-bg.jpg')"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>CONTACT</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
联系我们
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
获取 1 对 1 GEO 增长诊断方案，快速判断品牌在曝光、内容、咨询与转化链路上的优化空间。
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks :routes="heroRoutes" light />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact-routes" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Contact Routes</p>
|
||||
<h2 class="section-title mt-4">咨询方式与相关路径</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
可以从电话、邮箱、二维码预留位或服务入口进入咨询，也可以从服务页、方案页、案例页继续回到联系页完成转化。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="contactRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
|
||||
<article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
|
||||
<p class="text-sm font-medium text-[#262626]">电话咨询</p>
|
||||
<p class="mt-3 text-base text-[#666]">{{ footerData.contact.phone }}</p>
|
||||
<p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
|
||||
<p class="text-sm font-medium text-[#262626]">邮件沟通</p>
|
||||
<p class="mt-3 text-base text-[#666]">{{ footerData.contact.email }}</p>
|
||||
<p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
|
||||
<p class="text-sm font-medium text-[#262626]">线下地址</p>
|
||||
<p class="mt-3 text-base text-[#666]">{{ footerData.contact.address }}</p>
|
||||
<p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
+377
@@ -0,0 +1,377 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { advantages } from "~/data/advantages";
|
||||
import { cases } from "~/data/cases";
|
||||
import {
|
||||
clientLogos,
|
||||
clientStats,
|
||||
geoLoopModel,
|
||||
homeSolutionHighlights,
|
||||
processSteps,
|
||||
testimonials,
|
||||
} from "~/data/home";
|
||||
import { ctaSection } from "~/data/navigation";
|
||||
|
||||
const clientRoutes = [
|
||||
{ label: "模块锚点", href: "#clients", path: "/#clients" },
|
||||
{ label: "客户案例", href: "/cases", path: "/cases" },
|
||||
{ label: "核心优势", href: "/advantages", path: "/advantages" },
|
||||
];
|
||||
|
||||
const modelRoutes = [
|
||||
{ label: "模块锚点", href: "#model", path: "/#model" },
|
||||
{ label: "服务总览", href: "/services", path: "/services" },
|
||||
{ label: "咨询入口", href: "#contact", path: "/#contact" },
|
||||
];
|
||||
|
||||
const advantageRoutes = [
|
||||
{ label: "模块锚点", href: "#advantages", path: "/#advantages" },
|
||||
{ label: "核心优势页", href: "/advantages", path: "/advantages" },
|
||||
{ label: "服务总览", href: "/services", path: "/services" },
|
||||
];
|
||||
|
||||
const caseRoutes = [
|
||||
{ label: "模块锚点", href: "#cases", path: "/#cases" },
|
||||
{ label: "案例总览", href: "/cases", path: "/cases" },
|
||||
];
|
||||
|
||||
const solutionRoutes = [
|
||||
{ label: "模块锚点", href: "#solutions", path: "/#solutions" },
|
||||
{ label: "方案总览", href: "/solutions", path: "/solutions" },
|
||||
];
|
||||
|
||||
const processRoutes = [
|
||||
{ label: "模块锚点", href: "#process", path: "/#process" },
|
||||
{ label: "服务总览", href: "/services", path: "/services" },
|
||||
{ label: "咨询入口", href: "#contact", path: "/#contact" },
|
||||
];
|
||||
|
||||
const testimonialRoutes = [
|
||||
{ label: "模块锚点", href: "#testimonials", path: "/#testimonials" },
|
||||
{ label: "客户案例", href: "/cases", path: "/cases" },
|
||||
{ label: "咨询入口", href: "#contact", path: "/#contact" },
|
||||
];
|
||||
|
||||
const featuredCases = computed(() => cases.filter((item) => item.featured).slice(0, 4));
|
||||
|
||||
useHead({
|
||||
title: "大马棒·云途全域 GEO | AI 时代品牌全域增长服务",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"大马棒·云途全域 GEO，帮助品牌在 AI 时代建立曝光、信任、线索与转化闭环，打造长期可复用的增长资产。",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<DambangHeroSection section-id="hero" />
|
||||
|
||||
<section id="clients" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Proof</p>
|
||||
<h2 class="section-title mt-4">已服务 300+ 全类型经营主体，覆盖 12+ 主流行业</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
用规模化服务经验、可量化数据结果和多行业覆盖，先建立品牌可信度。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="clientRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4" data-stagger>
|
||||
<AnimatedStat
|
||||
v-for="metric in clientStats"
|
||||
:key="metric.label"
|
||||
:label="metric.label"
|
||||
:value="metric.value"
|
||||
:suffix="metric.suffix"
|
||||
data-stagger-item
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10">
|
||||
<p class="mb-4 text-xs uppercase tracking-[0.28em] text-[#999]">Covered Industries</p>
|
||||
<div class="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6" data-stagger>
|
||||
<div
|
||||
v-for="logo in clientLogos"
|
||||
:key="logo"
|
||||
class="flex h-12 items-center justify-center rounded border border-gm-border bg-gm-light text-sm text-[#666]"
|
||||
data-stagger-item
|
||||
>
|
||||
{{ logo }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="model" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
|
||||
<div data-reveal>
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">GEO Model</p>
|
||||
<h2 class="section-title mt-4">{{ geoLoopModel.title }}</h2>
|
||||
<p class="mt-5 text-base leading-8 text-[#666]">{{ geoLoopModel.description }}</p>
|
||||
<div class="mt-6">
|
||||
<SectionRouteLinks :routes="modelRoutes" />
|
||||
</div>
|
||||
<NuxtLink :to="geoLoopModel.cta.href" class="gm-btn gm-btn-primary mt-8">
|
||||
{{ geoLoopModel.cta.label }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 md:grid-cols-2" data-stagger data-geo-loop>
|
||||
<article
|
||||
v-for="loop in geoLoopModel.loops"
|
||||
:key="loop.title"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-soft"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<p class="text-sm font-medium text-gm-green">{{ loop.title }}</p>
|
||||
<p class="mt-3 text-[32px] font-semibold leading-none text-[#262626]">{{ loop.value }}</p>
|
||||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ loop.description }}</p>
|
||||
<div class="mt-6 space-y-3">
|
||||
<div
|
||||
v-for="node in loop.nodes"
|
||||
:key="node"
|
||||
class="flex items-center gap-3 rounded border border-gm-border bg-white px-4 py-3 text-sm text-[#555]"
|
||||
data-geo-node
|
||||
>
|
||||
<span class="size-2 shrink-0 rounded-full bg-gm-green" />
|
||||
<span>{{ node }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="advantages" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Advantages</p>
|
||||
<h2 class="section-title mt-4">四大核心优势</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
从真人内容生产、媒体矩阵到增长闭环与行业定制能力，帮助用户快速理解大马棒的差异化竞争力。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-start gap-3 md:items-end">
|
||||
<SectionRouteLinks :routes="advantageRoutes" />
|
||||
<NuxtLink to="/advantages" class="text-sm font-medium text-gm-green">
|
||||
查看核心优势 →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
|
||||
<article
|
||||
v-for="item in advantages"
|
||||
:key="item.slug"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-sm"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<p class="text-[28px] font-semibold leading-none text-gm-green">{{ item.metric }}</p>
|
||||
<h3 class="mt-5 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm font-medium leading-7 text-[#333]">{{ item.point }}</p>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.value }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="cases" class="bg-[#f7f8f7] py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#9a9a9a]">Cases</p>
|
||||
<h2 class="section-title mt-4">真实落地成果，见证增长实效</h2>
|
||||
</div>
|
||||
<div class="flex flex-col items-start gap-3 md:items-end">
|
||||
<SectionRouteLinks :routes="caseRoutes" />
|
||||
<NuxtLink
|
||||
to="/cases"
|
||||
class="inline-flex items-center gap-2 text-sm font-medium text-gm-green"
|
||||
>
|
||||
查看全部案例 <span aria-hidden="true">→</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in featuredCases"
|
||||
:key="item.title"
|
||||
:to="item.path"
|
||||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-56 overflow-hidden bg-gm-light">
|
||||
<img
|
||||
:src="item.image"
|
||||
:alt="item.title"
|
||||
class="h-full w-full object-cover transition duration-500 hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
class="rounded-full bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-6 grid gap-2">
|
||||
<p
|
||||
v-for="metric in item.metrics"
|
||||
:key="metric"
|
||||
class="text-sm font-medium text-[#262626]"
|
||||
>
|
||||
{{ metric }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solutions" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Solutions</p>
|
||||
<h2 class="section-title mt-4">深入 12+ 行业，定制专属 GEO 增长方案</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
让不同行业客户快速找到与自身相关的增长方案，提升业务匹配度感知。
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-start gap-3 md:items-end">
|
||||
<SectionRouteLinks :routes="solutionRoutes" />
|
||||
<NuxtLink to="/solutions" class="text-sm font-medium text-gm-green">
|
||||
获取我的行业专属方案 →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in homeSolutionHighlights"
|
||||
:key="item.slug"
|
||||
:to="item.href"
|
||||
class="group overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-44 overflow-hidden bg-gm-light">
|
||||
<img
|
||||
:src="item.image"
|
||||
:alt="item.title"
|
||||
class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.summary }}</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
class="rounded bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">方案路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="process" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Process</p>
|
||||
<h2 class="section-title mt-4">5 步标准化交付流程，透明可控、效果可追踪</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
标准化流程加透明化交付，让服务可控、结果清晰可见。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="processRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="relative mt-10 grid gap-4 md:grid-cols-5" data-stagger data-process-line>
|
||||
<div class="absolute left-0 top-8 hidden h-px w-full bg-gm-border md:block" />
|
||||
<div class="absolute left-0 top-8 hidden h-px w-0 bg-gm-green md:block" data-flow-line />
|
||||
<article
|
||||
v-for="step in processSteps"
|
||||
:key="step.step"
|
||||
class="relative rounded-lg border border-gm-border bg-white p-5 shadow-sm"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-[24px] font-semibold text-gm-green">{{ step.step }}</p>
|
||||
<h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ step.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ step.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="testimonials" class="bg-white py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Voice</p>
|
||||
<h2 class="section-title mt-4">客户真实评价，见证服务品质</h2>
|
||||
<p class="mt-3 text-[#777]">
|
||||
从真实客户视角补充信任背书，进一步强化团队专业度和落地能力。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="testimonialRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
|
||||
<article
|
||||
v-for="item in testimonials"
|
||||
:key="item.id"
|
||||
class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6 shadow-sm"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="flex size-14 items-center justify-center rounded-lg bg-white text-lg font-semibold text-gm-green">
|
||||
{{ item.name.slice(0, 1) }}
|
||||
</div>
|
||||
<blockquote class="mt-5 text-base leading-8 text-[#555]">
|
||||
“{{ item.quote }}”
|
||||
</blockquote>
|
||||
<p class="mt-6 text-base font-semibold text-[#262626]">{{ item.name }}</p>
|
||||
<p class="text-sm text-[#9b9b9b]">{{ item.title }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection :cta="ctaSection" section-id="consult" />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,211 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { insightCategories, insightOverview, insights } from "~/data/insights";
|
||||
|
||||
const heroRoutes = [
|
||||
{ label: "页面路径", href: "/insights", path: "/insights" },
|
||||
{ label: "白皮书详情", href: "/insights/geo-full-intent-whitepaper", path: "/insights/geo-full-intent-whitepaper" },
|
||||
{ label: "联系页", href: "/contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
const activeCategory = ref("全部");
|
||||
|
||||
const whitepapers = computed(() => insights.filter((item) => item.category === "白皮书"));
|
||||
const hotInsights = computed(() => insights.filter((item) => item.featured).slice(0, 2));
|
||||
const featured = computed(() => insights.find((item) => item.featured));
|
||||
|
||||
const filteredInsights = computed(() =>
|
||||
activeCategory.value === "全部"
|
||||
? insights
|
||||
: insights.filter((item) => item.category === activeCategory.value),
|
||||
);
|
||||
|
||||
const listRoutes = [
|
||||
{ label: "模块锚点", href: "#insight-library", path: "/insights#insight-library" },
|
||||
{ label: "行业干货", href: "/insights?category=行业干货", path: "/insights?category=行业干货" },
|
||||
{ label: "白皮书", href: "/insights?category=白皮书", path: "/insights?category=白皮书" },
|
||||
];
|
||||
|
||||
const resourceRoutes = [
|
||||
{ label: "白皮书路径", href: "/insights/geo-full-intent-whitepaper", path: "/insights/geo-full-intent-whitepaper" },
|
||||
{ label: "咨询入口", href: "/#contact", path: "/#contact" },
|
||||
];
|
||||
|
||||
watch(
|
||||
() => route.query.category,
|
||||
(category) => {
|
||||
activeCategory.value =
|
||||
typeof category === "string" && insightCategories.includes(category)
|
||||
? category
|
||||
: "全部";
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
useHead({
|
||||
title: "全域营销增长洞察 - 大马棒·云途全域 GEO",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"围绕 GEO、AI 搜索、全域营销和行业增长，持续沉淀文章与白皮书内容。",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
style="background-image: url('/images/blog-growth-strategy.jpg')"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>INSIGHTS</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
全域营销增长洞察
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
围绕行业干货文章与行业白皮书，持续沉淀 AI 时代品牌 GEO 增长方法。
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks :routes="heroRoutes" light />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="insight-overview" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Insight Overview</p>
|
||||
<h2 class="section-title mt-4">{{ insightOverview.intro.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ insightOverview.intro.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="insightOverview.intro.routes" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="insight-library" class="bg-white py-20">
|
||||
<div class="container-gm">
|
||||
<div class="mb-8 flex flex-col gap-4 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Insights</p>
|
||||
<h2 class="section-title mt-4">文章列表、热门推荐与分类筛选</h2>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="listRoutes" />
|
||||
</div>
|
||||
|
||||
<article
|
||||
v-if="featured"
|
||||
class="grid overflow-hidden rounded-lg border border-gm-border bg-[#f7f8f7] lg:grid-cols-[1.05fr_0.95fr]"
|
||||
data-reveal
|
||||
>
|
||||
<div class="p-8 md:p-12">
|
||||
<p class="text-sm font-medium text-gm-green">精选观点</p>
|
||||
<h2 class="mt-4 text-balance text-3xl font-semibold leading-tight text-[#262626] md:text-[42px]">
|
||||
{{ featured.title }}
|
||||
</h2>
|
||||
<p class="mt-5 max-w-2xl text-base leading-8 text-[#777]">{{ featured.excerpt }}</p>
|
||||
<p class="mt-8 text-sm text-[#999]">{{ featured.date }} · {{ featured.category }}</p>
|
||||
<p class="mt-3 font-mono text-[11px] text-[#999]">内容路径 {{ featured.path }}</p>
|
||||
</div>
|
||||
<img
|
||||
:src="featured.image"
|
||||
:alt="featured.title"
|
||||
class="h-full min-h-[320px] w-full object-cover"
|
||||
/>
|
||||
</article>
|
||||
|
||||
<div class="mt-12 flex flex-wrap gap-3" data-reveal>
|
||||
<button
|
||||
v-for="category in insightCategories"
|
||||
:key="category"
|
||||
type="button"
|
||||
class="rounded-full border px-6 py-2 text-sm transition-all duration-300"
|
||||
:class="
|
||||
activeCategory === category
|
||||
? 'border-gm-green bg-gm-green text-white'
|
||||
: 'border-gm-border bg-white text-[#666] hover:border-[#d5d5d5]'
|
||||
"
|
||||
@click="activeCategory = category"
|
||||
>
|
||||
{{ category }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in filteredInsights"
|
||||
:key="item.title"
|
||||
:to="item.path"
|
||||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-52 overflow-hidden bg-gm-light">
|
||||
<img :src="item.image" :alt="item.title" class="h-full w-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-3 text-lg font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.excerpt }}</p>
|
||||
<p class="mt-5 text-xs text-[#9b9b9b]">{{ item.date }}</p>
|
||||
<p class="mt-3 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="whitepapers" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Resources</p>
|
||||
<h2 class="section-title mt-4">{{ insightOverview.resourceTitle }}</h2>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="resourceRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 lg:grid-cols-[0.85fr_1.15fr]">
|
||||
<div class="grid gap-5" data-stagger>
|
||||
<article
|
||||
v-for="item in whitepapers"
|
||||
:key="item.slug"
|
||||
class="rounded-lg border border-gm-border bg-white p-6"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-4 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ item.excerpt }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 md:grid-cols-2" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in hotInsights"
|
||||
:key="item.slug"
|
||||
:to="item.path"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">Hot Insight</p>
|
||||
<h3 class="mt-4 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ item.excerpt }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,117 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { insights } from "~/data/insights";
|
||||
|
||||
const route = useRoute();
|
||||
const insight = computed(() => insights.find((item) => item.slug === route.params.slug));
|
||||
|
||||
const relatedInsights = computed(() =>
|
||||
insights.filter((item) => item.slug !== insight.value?.slug).slice(0, 3),
|
||||
);
|
||||
|
||||
if (!insight.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: "Insight not found" });
|
||||
}
|
||||
|
||||
useHead(() => ({
|
||||
title: `${insight.value.title} - 大马棒·云途全域 GEO`,
|
||||
meta: [{ name: "description", content: insight.value.excerpt }],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
:style="{ backgroundImage: `url(${insight.image})` }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>INSIGHT DETAIL</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
{{ insight.title }}
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
{{ insight.excerpt }}
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '返回洞察页', href: '/insights', path: '/insights' },
|
||||
{ label: '当前详情', href: insight.path, path: insight.path },
|
||||
{ label: '联系页', href: '/contact', path: '/contact' },
|
||||
]"
|
||||
light
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
|
||||
<aside class="lg:sticky lg:top-28 lg:self-start" data-reveal>
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Insight</p>
|
||||
<h1 class="mt-4 text-balance text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
|
||||
{{ insight.title }}
|
||||
</h1>
|
||||
<p class="mt-5 text-base leading-8 text-[#666]">{{ insight.excerpt }}</p>
|
||||
<p class="mt-5 text-sm text-[#999]">{{ insight.date }} · {{ insight.category }}</p>
|
||||
<p class="mt-3 font-mono text-xs text-[#999]">页面路径 {{ insight.path }}</p>
|
||||
<NuxtLink to="#contact" class="gm-btn gm-btn-primary mt-8">立即免费咨询</NuxtLink>
|
||||
</aside>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="overflow-hidden rounded-lg border border-gm-border" data-reveal>
|
||||
<img :src="insight.image" :alt="insight.title" class="h-[320px] w-full object-cover" data-parallax="24" />
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gm-border p-6" data-reveal>
|
||||
<p
|
||||
v-for="paragraph in insight.content"
|
||||
:key="paragraph"
|
||||
class="mb-4 text-base leading-8 text-[#666] last:mb-0"
|
||||
>
|
||||
{{ paragraph }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="related-insights" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Related Insights</p>
|
||||
<h2 class="section-title mt-4">相关洞察推荐</h2>
|
||||
</div>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '模块锚点', href: '#related-insights', path: `${insight.path}#related-insights` },
|
||||
{ label: '返回洞察页', href: '/insights', path: '/insights' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in relatedInsights"
|
||||
:key="item.slug"
|
||||
:to="item.path"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-4 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ item.excerpt }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,209 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { cases } from "~/data/cases";
|
||||
import { services } from "~/data/services";
|
||||
|
||||
const route = useRoute();
|
||||
const service = computed(() => services.find((item) => item.slug === route.params.slug));
|
||||
|
||||
const relatedCases = computed(() =>
|
||||
cases.filter((item) => item.tags.some((tag) => service.value?.tags.includes(tag))).slice(0, 3),
|
||||
);
|
||||
|
||||
const serviceProcess = computed(() =>
|
||||
service.value.process.map((title, index) => ({
|
||||
step: String(index + 1).padStart(2, "0"),
|
||||
title,
|
||||
text: service.value.deliverables[index] || service.value.summary,
|
||||
})),
|
||||
);
|
||||
|
||||
if (!service.value) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: "Service not found",
|
||||
});
|
||||
}
|
||||
|
||||
useHead(() => ({
|
||||
title: `${service.value.title} - 大马棒·云途全域 GEO`,
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: service.value.summary,
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
:style="{ backgroundImage: `url(${service.image})` }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>GROWTH SERVICE</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
{{ service.title }}
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
{{ service.summary }}
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '返回服务页', href: '/services', path: '/services' },
|
||||
{ label: '当前详情', href: service.path, path: service.path },
|
||||
{ label: '联系页', href: '/contact', path: '/contact' },
|
||||
]"
|
||||
light
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
|
||||
<aside class="lg:sticky lg:top-28 lg:self-start" data-reveal>
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Service</p>
|
||||
<h1 class="mt-4 text-balance text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
|
||||
{{ service.title }}
|
||||
</h1>
|
||||
<p class="mt-5 text-base leading-8 text-[#666]">{{ service.summary }}</p>
|
||||
<p class="mt-5 font-mono text-xs text-[#999]">页面路径 {{ service.path }}</p>
|
||||
<NuxtLink to="#contact" class="gm-btn gm-btn-primary mt-8">立即免费咨询</NuxtLink>
|
||||
</aside>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="overflow-hidden rounded-lg border border-gm-border" data-reveal>
|
||||
<img :src="service.image" :alt="service.title" class="h-[320px] w-full object-cover" data-parallax="24" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2" data-stagger>
|
||||
<div
|
||||
v-for="metric in service.metrics"
|
||||
:key="metric.label"
|
||||
class="rounded-lg border border-gm-border bg-gm-light p-5"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-2xl font-semibold text-gm-green">{{ metric.value }}</p>
|
||||
<p class="mt-2 text-sm font-medium text-[#262626]">{{ metric.label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4" data-stagger>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">适用客户</h2>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="item in service.fitClients"
|
||||
:key="item"
|
||||
class="rounded-full border border-gm-border bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">核心痛点</h2>
|
||||
<div class="mt-4 grid gap-3">
|
||||
<p v-for="item in service.pains" :key="item" class="text-sm leading-7 text-[#666]">{{ item }}</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">服务交付物</h2>
|
||||
<div class="mt-4 grid gap-3">
|
||||
<p v-for="item in service.deliverables" :key="item" class="text-sm leading-7 text-[#666]">{{ item }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="process" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Process</p>
|
||||
<h2 class="section-title mt-4">服务交付节奏</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
每一步都围绕曝光、内容资产和转化路径推进，让 GEO 增长真正进入运营。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '模块锚点', href: '#process', path: `${service.path}#process` },
|
||||
{ label: '返回服务页', href: '/services', path: '/services' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-10 grid gap-4 md:grid-cols-4" data-stagger data-process-line>
|
||||
<div class="absolute left-0 top-8 hidden h-px w-full bg-gm-border md:block" />
|
||||
<div class="absolute left-0 top-8 hidden h-px w-0 bg-gm-green md:block" data-flow-line />
|
||||
<article
|
||||
v-for="step in serviceProcess"
|
||||
:key="step.step"
|
||||
class="relative rounded-lg border border-gm-border bg-white p-5 shadow-sm"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-[24px] font-semibold text-gm-green">{{ step.step }}</p>
|
||||
<h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ step.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ step.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service-related-cases" class="bg-[#f7f8f7] py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#9a9a9a]">Cases</p>
|
||||
<h2 class="section-title mt-4">相关案例推荐</h2>
|
||||
</div>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '案例总览', href: '/cases', path: '/cases' },
|
||||
{ label: '模块锚点', href: '#service-related-cases', path: `${service.path}#service-related-cases` },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in (relatedCases.length ? relatedCases : cases.slice(0, 3))"
|
||||
:key="item.title"
|
||||
:to="item.path"
|
||||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-56 overflow-hidden bg-gm-light">
|
||||
<img :src="item.image" :alt="item.title" class="h-full w-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection
|
||||
:cta="{
|
||||
title: `想系统升级${service.title}？`,
|
||||
subtitle: service.summary,
|
||||
button: service.cta.label,
|
||||
href: service.cta.href,
|
||||
}"
|
||||
/>
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,298 @@
|
||||
<script setup>
|
||||
import { ctaSection } from "~/data/navigation";
|
||||
import { processSteps } from "~/data/home";
|
||||
import { serviceOverview, services } from "~/data/services";
|
||||
|
||||
const heroRoutes = [
|
||||
{ label: "页面路径", href: "/services", path: "/services" },
|
||||
{ label: "服务详情", href: "/services/brand-exposure", path: "/services/brand-exposure" },
|
||||
{ label: "联系页", href: "/contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const overviewRoutes = [
|
||||
{ label: "模块锚点", href: "#service-overview", path: "/services#service-overview" },
|
||||
{ label: "首页入口", href: "/", path: "/" },
|
||||
{ label: "咨询入口", href: "#contact", path: "/services#contact" },
|
||||
];
|
||||
|
||||
const directionRoutes = [
|
||||
{ label: "模块锚点", href: "#service-directions", path: "/services#service-directions" },
|
||||
{ label: "品牌曝光", href: "/services/brand-exposure", path: "/services/brand-exposure" },
|
||||
{ label: "精准获客转化", href: "/services/lead-conversion", path: "/services/lead-conversion" },
|
||||
];
|
||||
|
||||
const modelRoutes = [
|
||||
{ label: "模块锚点", href: "#service-model", path: "/services#service-model" },
|
||||
{ label: "全域营销", href: "/services/omni-marketing", path: "/services/omni-marketing" },
|
||||
{ label: "行业解决方案", href: "/solutions", path: "/solutions" },
|
||||
];
|
||||
|
||||
const resultRoutes = [
|
||||
{ label: "模块锚点", href: "#service-results", path: "/services#service-results" },
|
||||
{ label: "客户案例", href: "/cases", path: "/cases" },
|
||||
{ label: "案例详情", href: "/cases/enterprise-service-geo", path: "/cases/enterprise-service-geo" },
|
||||
];
|
||||
|
||||
const processRoutes = [
|
||||
{ label: "模块锚点", href: "#service-process", path: "/services#service-process" },
|
||||
{ label: "咨询入口", href: "#contact", path: "/services#contact" },
|
||||
{ label: "关于我们", href: "/about", path: "/about" },
|
||||
];
|
||||
|
||||
useHead({
|
||||
title: "营销增长服务 - 大马棒·云途全域 GEO",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"品牌曝光、精准获客转化、全域营销三大增长服务，帮助企业构建 AI 时代 GEO 增长体系。",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
:style="{ backgroundImage: `url(${serviceOverview.hero.image})` }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>
|
||||
{{ serviceOverview.hero.eyebrow }}
|
||||
</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
{{ serviceOverview.hero.title }}
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
{{ serviceOverview.hero.description }}
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks :routes="heroRoutes" light />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service-overview" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ serviceOverview.overview.eyebrow }}</p>
|
||||
<h2 class="section-title mt-4">{{ serviceOverview.overview.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ serviceOverview.overview.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="overviewRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
<div class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6 md:p-8" data-stagger>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-[#999]">Service Value</p>
|
||||
<div class="mt-6 space-y-4">
|
||||
<div
|
||||
v-for="item in serviceOverview.overview.highlights"
|
||||
:key="item"
|
||||
class="flex gap-3 rounded-lg border border-gm-border bg-white px-4 py-4 text-sm leading-7 text-[#555]"
|
||||
data-stagger-item
|
||||
>
|
||||
<span class="mt-2 size-2 shrink-0 rounded-full bg-gm-green" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gm-border bg-white p-6 md:p-8" data-reveal>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-[#999]">Fit Clients</p>
|
||||
<h3 class="mt-4 text-[22px] font-semibold text-[#262626]">适用客户场景</h3>
|
||||
<div class="mt-6 flex flex-wrap gap-3">
|
||||
<span
|
||||
v-for="item in serviceOverview.overview.audiences"
|
||||
:key="item"
|
||||
class="rounded-full border border-gm-border bg-gm-light px-4 py-2 text-sm text-[#555]"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service-directions" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ serviceOverview.directions.eyebrow }}</p>
|
||||
<h2 class="section-title mt-4">{{ serviceOverview.directions.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ serviceOverview.directions.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="directionRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 lg:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="service in services"
|
||||
:key="service.slug"
|
||||
:to="service.href"
|
||||
class="group rounded-lg border border-gm-border bg-white p-6 shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">{{ service.tags.join(" / ") }}</p>
|
||||
<h3 class="mt-4 text-[22px] font-semibold text-[#262626]">{{ service.title }}</h3>
|
||||
</div>
|
||||
<span class="rounded-full bg-gm-light px-3 py-1 text-xs text-[#666]">{{ service.metrics[0].value }}</span>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ service.summary }}</p>
|
||||
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="client in service.fitClients"
|
||||
:key="client"
|
||||
class="rounded-full border border-gm-border px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ client }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-3">
|
||||
<div
|
||||
v-for="item in service.deliverables.slice(0, 3)"
|
||||
:key="item"
|
||||
class="flex gap-3 text-sm text-[#555]"
|
||||
>
|
||||
<span class="mt-2 size-1.5 shrink-0 rounded-full bg-gm-green" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-6 font-mono text-[11px] text-[#999]">服务路径 {{ service.path }}</p>
|
||||
<span class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
|
||||
查看服务详情 <span aria-hidden="true">→</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service-model" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ serviceOverview.model.eyebrow }}</p>
|
||||
<h2 class="section-title mt-4">{{ serviceOverview.model.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ serviceOverview.model.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="modelRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 lg:grid-cols-3" data-stagger>
|
||||
<article
|
||||
v-for="stage in serviceOverview.model.stages"
|
||||
:key="stage.phase"
|
||||
class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-[28px] font-semibold text-gm-green">{{ stage.phase }}</p>
|
||||
<h3 class="mt-4 text-[22px] font-semibold text-[#262626]">{{ stage.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ stage.summary }}</p>
|
||||
|
||||
<div class="mt-5 space-y-3">
|
||||
<div v-for="point in stage.points" :key="point" class="flex gap-3 text-sm text-[#555]">
|
||||
<span class="mt-2 size-1.5 shrink-0 rounded-full bg-gm-green" />
|
||||
<span>{{ point }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NuxtLink :to="stage.href" class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
|
||||
{{ stage.service }}
|
||||
<span aria-hidden="true">→</span>
|
||||
</NuxtLink>
|
||||
<p class="mt-4 font-mono text-[11px] text-[#999]">模型对应路径 {{ stage.path }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service-results" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ serviceOverview.results.eyebrow }}</p>
|
||||
<h2 class="section-title mt-4">{{ serviceOverview.results.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ serviceOverview.results.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="resultRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<div class="grid gap-4" data-stagger>
|
||||
<article
|
||||
v-for="item in serviceOverview.results.proofs"
|
||||
:key="item.label"
|
||||
class="rounded-lg border border-gm-border bg-white p-6"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-[34px] font-semibold leading-none text-gm-green">{{ item.value }}</p>
|
||||
<h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ item.label }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.note }}</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 md:grid-cols-2" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in serviceOverview.results.cases"
|
||||
:key="item.href"
|
||||
:to="item.href"
|
||||
class="rounded-lg border border-gm-border bg-white p-6 shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">Case Proof</p>
|
||||
<h3 class="mt-4 text-[20px] font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ item.summary }}</p>
|
||||
<p class="mt-6 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||||
<span class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
|
||||
查看案例详情 <span aria-hidden="true">→</span>
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service-process" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Process</p>
|
||||
<h2 class="section-title mt-4">{{ serviceOverview.processTitle }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ serviceOverview.processDescription }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="processRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="relative mt-10 grid gap-4 md:grid-cols-5" data-stagger data-process-line>
|
||||
<div class="absolute left-0 top-8 hidden h-px w-full bg-gm-border md:block" />
|
||||
<div class="absolute left-0 top-8 hidden h-px w-0 bg-gm-green md:block" data-flow-line />
|
||||
<article
|
||||
v-for="step in processSteps"
|
||||
:key="step.step"
|
||||
class="relative rounded-lg border border-gm-border bg-white p-5 shadow-sm"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-[24px] font-semibold text-gm-green">{{ step.step }}</p>
|
||||
<h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ step.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ step.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection :cta="ctaSection" />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,193 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { cases } from "~/data/cases";
|
||||
import { processSteps } from "~/data/home";
|
||||
import { solutions } from "~/data/solutions";
|
||||
|
||||
const route = useRoute();
|
||||
const solution = computed(() => solutions.find((item) => item.slug === route.params.slug));
|
||||
|
||||
const relatedCases = computed(() =>
|
||||
cases.filter((item) => item.category === solution.value?.title).slice(0, 3),
|
||||
);
|
||||
|
||||
if (!solution.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: "Solution not found" });
|
||||
}
|
||||
|
||||
useHead(() => ({
|
||||
title: `${solution.value.title}解决方案 - 大马棒·云途全域 GEO`,
|
||||
meta: [{ name: "description", content: solution.value.summary }],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
:style="{ backgroundImage: `url(${solution.image})` }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>INDUSTRY SOLUTION</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
{{ solution.title }} GEO 增长方案
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
{{ solution.summary }}
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '返回方案页', href: '/solutions', path: '/solutions' },
|
||||
{ label: '当前详情', href: solution.path, path: solution.path },
|
||||
{ label: '联系页', href: '/contact', path: '/contact' },
|
||||
]"
|
||||
light
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
|
||||
<aside class="lg:sticky lg:top-28 lg:self-start" data-reveal>
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Solution</p>
|
||||
<h1 class="mt-4 text-balance text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
|
||||
{{ solution.title }}
|
||||
</h1>
|
||||
<p class="mt-5 text-base leading-8 text-[#666]">{{ solution.summary }}</p>
|
||||
<p class="mt-5 font-mono text-xs text-[#999]">页面路径 {{ solution.path }}</p>
|
||||
<NuxtLink to="#contact" class="gm-btn gm-btn-primary mt-8">立即免费咨询</NuxtLink>
|
||||
</aside>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="overflow-hidden rounded-lg border border-gm-border" data-reveal>
|
||||
<img :src="solution.image" :alt="solution.title" class="h-[320px] w-full object-cover" data-parallax="24" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2" data-stagger>
|
||||
<div
|
||||
v-for="outcome in solution.outcomes"
|
||||
:key="outcome"
|
||||
class="rounded-lg border border-gm-border bg-gm-light p-5"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-sm font-medium text-[#262626]">{{ outcome }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4" data-stagger>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">适用场景</h2>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="item in solution.scenarios"
|
||||
:key="item"
|
||||
class="rounded-full border border-gm-border bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ item }}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">项目挑战</h2>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ solution.challenge }}</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">解决方案</h2>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ solution.solution }}</p>
|
||||
</article>
|
||||
<article class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
||||
<h2 class="text-[20px] font-semibold text-[#262626]">落地结果</h2>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ solution.result }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="process" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Process</p>
|
||||
<h2 class="section-title mt-4">行业方案交付流程</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||||
从诊断到方案定制、内容落地、数据优化与资产沉淀，形成可持续的行业增长路径。
|
||||
</p>
|
||||
</div>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '模块锚点', href: '#process', path: `${solution.path}#process` },
|
||||
{ label: '返回方案页', href: '/solutions', path: '/solutions' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-10 grid gap-4 md:grid-cols-5" data-stagger data-process-line>
|
||||
<div class="absolute left-0 top-8 hidden h-px w-full bg-gm-border md:block" />
|
||||
<div class="absolute left-0 top-8 hidden h-px w-0 bg-gm-green md:block" data-flow-line />
|
||||
<article
|
||||
v-for="step in processSteps"
|
||||
:key="step.step"
|
||||
class="relative rounded-lg border border-gm-border bg-white p-5 shadow-sm"
|
||||
data-stagger-item
|
||||
>
|
||||
<p class="text-[24px] font-semibold text-gm-green">{{ step.step }}</p>
|
||||
<h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ step.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ step.text }}</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution-related-cases" class="bg-[#f7f8f7] py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#9a9a9a]">Cases</p>
|
||||
<h2 class="section-title mt-4">相关案例推荐</h2>
|
||||
</div>
|
||||
<SectionRouteLinks
|
||||
:routes="[
|
||||
{ label: '案例总览', href: '/cases', path: '/cases' },
|
||||
{ label: '模块锚点', href: '#solution-related-cases', path: `${solution.path}#solution-related-cases` },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in (relatedCases.length ? relatedCases : cases.slice(0, 3))"
|
||||
:key="item.title"
|
||||
:to="item.path"
|
||||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-56 overflow-hidden bg-gm-light">
|
||||
<img :src="item.image" :alt="item.title" class="h-full w-full object-cover" loading="lazy" />
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection
|
||||
:cta="{
|
||||
title: `获取${solution.title}专属 GEO 增长方案`,
|
||||
subtitle: solution.summary,
|
||||
button: '立即免费咨询',
|
||||
href: '#contact',
|
||||
}"
|
||||
/>
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
@@ -0,0 +1,253 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { cases } from "~/data/cases";
|
||||
import { solutionOverview, solutions } from "~/data/solutions";
|
||||
|
||||
const heroRoutes = [
|
||||
{ label: "页面路径", href: "/solutions", path: "/solutions" },
|
||||
{ label: "方案详情", href: "/solutions/enterprise-service", path: "/solutions/enterprise-service" },
|
||||
{ label: "联系页", href: "/contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const entryRoutes = [
|
||||
{ label: "模块锚点", href: "#solution-entry", path: "/solutions#solution-entry" },
|
||||
{ label: "首页入口", href: "/", path: "/" },
|
||||
{ label: "咨询入口", href: "#contact", path: "/solutions#contact" },
|
||||
];
|
||||
|
||||
const mappingRoutes = [
|
||||
{ label: "模块锚点", href: "#solution-mapping", path: "/solutions#solution-mapping" },
|
||||
{ label: "企业服务方案", href: "/solutions/enterprise-service", path: "/solutions/enterprise-service" },
|
||||
{ label: "本地生活方案", href: "/solutions/local-life", path: "/solutions/local-life" },
|
||||
];
|
||||
|
||||
const caseRoutes = [
|
||||
{ label: "模块锚点", href: "#solution-cases", path: "/solutions#solution-cases" },
|
||||
{ label: "案例总览", href: "/cases", path: "/cases" },
|
||||
{ label: "案例详情", href: "/cases/local-life-search", path: "/cases/local-life-search" },
|
||||
];
|
||||
|
||||
const moreRoutes = [
|
||||
{ label: "更多行业", href: "/solutions/other-key-industries", path: "/solutions/other-key-industries" },
|
||||
{ label: "快消方案", href: "/solutions/fmcg", path: "/solutions/fmcg" },
|
||||
{ label: "美妆方案", href: "/solutions/beauty", path: "/solutions/beauty" },
|
||||
];
|
||||
|
||||
const featuredCases = computed(() => cases.filter((item) => item.featured).slice(0, 4));
|
||||
|
||||
useHead({
|
||||
title: "行业解决方案 - 大马棒·云途全域 GEO",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"针对企业服务、电商零售、本地生活、职业教育、医疗健康及更多行业，提供专属 GEO 增长方案。",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WebsiteShell>
|
||||
<section
|
||||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||||
:style="{ backgroundImage: `url(${solutionOverview.hero.image})` }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/55" />
|
||||
<div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
|
||||
<div class="container-gm relative z-10 py-24 md:py-32">
|
||||
<p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>
|
||||
{{ solutionOverview.hero.eyebrow }}
|
||||
</p>
|
||||
<h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
|
||||
{{ solutionOverview.hero.title }}
|
||||
</h1>
|
||||
<p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
|
||||
{{ solutionOverview.hero.description }}
|
||||
</p>
|
||||
<div class="mt-8" data-hero-reveal>
|
||||
<SectionRouteLinks :routes="heroRoutes" light />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution-entry" class="bg-[#f4f4f4] py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Solutions</p>
|
||||
<h2 class="section-title mt-4">{{ solutionOverview.entry.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ solutionOverview.entry.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="entryRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in solutions"
|
||||
:key="item.slug"
|
||||
:to="item.href"
|
||||
class="group overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-44 overflow-hidden bg-gm-light">
|
||||
<img
|
||||
:src="item.image"
|
||||
:alt="item.title"
|
||||
class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h3 class="text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.summary }}</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
class="rounded bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">方案路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution-mapping" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ solutionOverview.mapping.eyebrow }}</p>
|
||||
<h2 class="section-title mt-4">{{ solutionOverview.mapping.title }}</h2>
|
||||
<p class="mt-4 text-base leading-8 text-[#666]">{{ solutionOverview.mapping.description }}</p>
|
||||
</div>
|
||||
<SectionRouteLinks :routes="mappingRoutes" />
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-5 md:grid-cols-2" data-stagger>
|
||||
<article
|
||||
v-for="item in solutionOverview.mapping.items"
|
||||
:key="item.industry"
|
||||
class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6"
|
||||
data-stagger-item
|
||||
>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">Industry</p>
|
||||
<h3 class="mt-3 text-[22px] font-semibold text-[#262626]">{{ item.industry }}</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end gap-2">
|
||||
<span
|
||||
v-for="tag in item.tags"
|
||||
:key="tag"
|
||||
class="rounded-full border border-gm-border bg-white px-3 py-1 text-xs text-[#666]"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 space-y-4 text-sm leading-7">
|
||||
<div>
|
||||
<p class="font-medium text-[#262626]">行业痛点</p>
|
||||
<p class="mt-1 text-[#666]">{{ item.pain }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-[#262626]">对应方案</p>
|
||||
<p class="mt-1 text-[#666]">{{ item.plan }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-wrap gap-3">
|
||||
<NuxtLink
|
||||
:to="item.solutionHref"
|
||||
class="inline-flex items-center gap-2 rounded-full border border-gm-green px-4 py-2 text-sm font-medium text-gm-green transition hover:bg-gm-green hover:text-white"
|
||||
>
|
||||
查看行业方案
|
||||
<span aria-hidden="true">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
:to="item.caseHref"
|
||||
class="inline-flex items-center gap-2 rounded-full border border-gm-border bg-white px-4 py-2 text-sm text-[#555] transition hover:border-gm-green hover:text-gm-green"
|
||||
>
|
||||
查看对应案例
|
||||
<span aria-hidden="true">→</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 space-y-2 font-mono text-[11px] text-[#999]">
|
||||
<p>方案路径 {{ item.solutionPath }}</p>
|
||||
<p>案例路径 {{ item.casePath }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution-cases" class="bg-[#f7f8f7] py-20">
|
||||
<div class="container-gm">
|
||||
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between" data-reveal>
|
||||
<div class="max-w-3xl">
|
||||
<p class="text-sm uppercase tracking-[0.3em] text-[#9a9a9a]">Cases</p>
|
||||
<h2 class="section-title mt-4">典型案例，验证行业方案的真实落地结果</h2>
|
||||
</div>
|
||||
<div class="flex flex-col items-start gap-3 md:items-end">
|
||||
<SectionRouteLinks :routes="caseRoutes" />
|
||||
<NuxtLink to="/cases" class="inline-flex items-center gap-2 text-sm font-medium text-gm-green">
|
||||
查看全部案例 <span aria-hidden="true">→</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||||
<NuxtLink
|
||||
v-for="item in featuredCases"
|
||||
:key="item.title"
|
||||
:to="item.path"
|
||||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||||
data-stagger-item
|
||||
data-hover-card
|
||||
>
|
||||
<div class="h-56 overflow-hidden bg-gm-light">
|
||||
<img
|
||||
:src="item.image"
|
||||
:alt="item.title"
|
||||
class="h-full w-full object-cover transition duration-500 hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||||
<h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
|
||||
<div class="mt-6 grid gap-2">
|
||||
<p v-for="metric in item.metrics" :key="metric" class="text-sm font-medium text-[#262626]">
|
||||
{{ metric }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="solution-more" class="bg-white py-16 md:py-20">
|
||||
<div class="container-gm rounded-lg border border-gm-border bg-gm-light p-8 md:p-10" data-reveal>
|
||||
<h2 class="section-title">{{ solutionOverview.more.title }}</h2>
|
||||
<p class="mt-4 max-w-3xl text-base leading-8 text-[#666]">{{ solutionOverview.more.description }}</p>
|
||||
<div class="mt-6">
|
||||
<SectionRouteLinks :routes="moreRoutes" />
|
||||
</div>
|
||||
<NuxtLink to="#contact" class="gm-btn gm-btn-primary mt-8">获取我的行业专属方案</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CtaSection />
|
||||
</WebsiteShell>
|
||||
</template>
|
||||
Reference in New Issue
Block a user