Zhanglj/BigStickNewOfficialWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Zhanglj
2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/solutions/[slug].vue
+193
View File
@@ -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>
pages/solutions/index.vue
+253
View File
@@ -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>