201 lines
7.7 KiB
Vue
201 lines
7.7 KiB
Vue
<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>
|