init

2026-07-10 18:23:41 +08:00
commit bc9e794a57
80 changed files with 19016 additions and 0 deletions
@@ -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>