212 lines
8.7 KiB
Vue
212 lines
8.7 KiB
Vue
<script setup>
|
||
import { computed, ref, watch } from "vue";
|
||
import { insightCategories, insightOverview, insights } from "~/data/insights";
|
||
|
||
const heroRoutes = [
|
||
{ label: "页面路径", href: "/insights", path: "/insights" },
|
||
{ label: "白皮书详情", href: "/insights/geo-full-intent-whitepaper", path: "/insights/geo-full-intent-whitepaper" },
|
||
{ label: "联系页", href: "/contact", path: "/contact" },
|
||
];
|
||
|
||
const route = useRoute();
|
||
const activeCategory = ref("全部");
|
||
|
||
const whitepapers = computed(() => insights.filter((item) => item.category === "白皮书"));
|
||
const hotInsights = computed(() => insights.filter((item) => item.featured).slice(0, 2));
|
||
const featured = computed(() => insights.find((item) => item.featured));
|
||
|
||
const filteredInsights = computed(() =>
|
||
activeCategory.value === "全部"
|
||
? insights
|
||
: insights.filter((item) => item.category === activeCategory.value),
|
||
);
|
||
|
||
const listRoutes = [
|
||
{ label: "模块锚点", href: "#insight-library", path: "/insights#insight-library" },
|
||
{ label: "行业干货", href: "/insights?category=行业干货", path: "/insights?category=行业干货" },
|
||
{ label: "白皮书", href: "/insights?category=白皮书", path: "/insights?category=白皮书" },
|
||
];
|
||
|
||
const resourceRoutes = [
|
||
{ label: "白皮书路径", href: "/insights/geo-full-intent-whitepaper", path: "/insights/geo-full-intent-whitepaper" },
|
||
{ label: "咨询入口", href: "/#contact", path: "/#contact" },
|
||
];
|
||
|
||
watch(
|
||
() => route.query.category,
|
||
(category) => {
|
||
activeCategory.value =
|
||
typeof category === "string" && insightCategories.includes(category)
|
||
? category
|
||
: "全部";
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
useHead({
|
||
title: "全域营销增长洞察 - 大马棒·云途全域 GEO",
|
||
meta: [
|
||
{
|
||
name: "description",
|
||
content:
|
||
"围绕 GEO、AI 搜索、全域营销和行业增长，持续沉淀文章与白皮书内容。",
|
||
},
|
||
],
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<WebsiteShell>
|
||
<section
|
||
class="relative overflow-hidden bg-black bg-cover bg-center text-white"
|
||
style="background-image: url('/images/blog-growth-strategy.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>INSIGHTS</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 时代品牌 GEO 增长方法。
|
||
</p>
|
||
<div class="mt-8" data-hero-reveal>
|
||
<SectionRouteLinks :routes="heroRoutes" light />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="insight-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]">Insight Overview</p>
|
||
<h2 class="section-title mt-4">{{ insightOverview.intro.title }}</h2>
|
||
<p class="mt-4 text-base leading-8 text-[#666]">{{ insightOverview.intro.description }}</p>
|
||
</div>
|
||
<SectionRouteLinks :routes="insightOverview.intro.routes" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="insight-library" class="bg-white py-20">
|
||
<div class="container-gm">
|
||
<div class="mb-8 flex flex-col gap-4 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-[#a1a1a1]">Insights</p>
|
||
<h2 class="section-title mt-4">文章列表、热门推荐与分类筛选</h2>
|
||
</div>
|
||
<SectionRouteLinks :routes="listRoutes" />
|
||
</div>
|
||
|
||
<article
|
||
v-if="featured"
|
||
class="grid overflow-hidden rounded-lg border border-gm-border bg-[#f7f8f7] lg:grid-cols-[1.05fr_0.95fr]"
|
||
data-reveal
|
||
>
|
||
<div class="p-8 md:p-12">
|
||
<p class="text-sm font-medium text-gm-green">精选观点</p>
|
||
<h2 class="mt-4 text-balance text-3xl font-semibold leading-tight text-[#262626] md:text-[42px]">
|
||
{{ featured.title }}
|
||
</h2>
|
||
<p class="mt-5 max-w-2xl text-base leading-8 text-[#777]">{{ featured.excerpt }}</p>
|
||
<p class="mt-8 text-sm text-[#999]">{{ featured.date }} · {{ featured.category }}</p>
|
||
<p class="mt-3 font-mono text-[11px] text-[#999]">内容路径 {{ featured.path }}</p>
|
||
</div>
|
||
<img
|
||
:src="featured.image"
|
||
:alt="featured.title"
|
||
class="h-full min-h-[320px] w-full object-cover"
|
||
/>
|
||
</article>
|
||
|
||
<div class="mt-12 flex flex-wrap gap-3" data-reveal>
|
||
<button
|
||
v-for="category in insightCategories"
|
||
: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 filteredInsights"
|
||
: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-52 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-lg font-semibold leading-7 text-[#262626]">{{ item.title }}</h3>
|
||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.excerpt }}</p>
|
||
<p class="mt-5 text-xs text-[#9b9b9b]">{{ item.date }}</p>
|
||
<p class="mt-3 font-mono text-[11px] text-[#999]">内容路径 {{ item.path }}</p>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="whitepapers" 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]">Resources</p>
|
||
<h2 class="section-title mt-4">{{ insightOverview.resourceTitle }}</h2>
|
||
</div>
|
||
<SectionRouteLinks :routes="resourceRoutes" />
|
||
</div>
|
||
|
||
<div class="mt-10 grid gap-5 lg:grid-cols-[0.85fr_1.15fr]">
|
||
<div class="grid gap-5" data-stagger>
|
||
<article
|
||
v-for="item in whitepapers"
|
||
:key="item.slug"
|
||
class="rounded-lg border border-gm-border bg-white p-6"
|
||
data-stagger-item
|
||
>
|
||
<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>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="grid gap-5 md:grid-cols-2" data-stagger>
|
||
<NuxtLink
|
||
v-for="item in hotInsights"
|
||
: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">Hot Insight</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>
|
||
</div>
|
||
</section>
|
||
|
||
<CtaSection />
|
||
</WebsiteShell>
|
||
</template>
|