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/insights.vue
+211
View File
@@ -0,0 +1,211 @@
<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>