BigStickNewOfficialWebsite/pages/services/[slug].vue

<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>