299 lines
13 KiB
Vue
299 lines
13 KiB
Vue
<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>
|