feat:完善其余页面
This commit is contained in:
+1303
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+211
-325
@@ -1,26 +1,14 @@
|
||||
<script setup>
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||||
|
||||
const consultationOpen = ref(false)
|
||||
const mobileMenuOpen = ref(false)
|
||||
const activeSection = ref('home')
|
||||
const headerScrolled = ref(false)
|
||||
const notice = ref('')
|
||||
const pageRoot = ref(null)
|
||||
const { openConsultation: openGlobalConsultation } = useConsultation()
|
||||
let animationContext
|
||||
let animationMedia
|
||||
|
||||
const navItems = [
|
||||
['首页', 'home'],
|
||||
['营销增长服务', 'model'],
|
||||
['行业解决方案', 'industries'],
|
||||
['开放客户案例平台', 'cases'],
|
||||
['核心优势', 'advantages'],
|
||||
['全球营销增长洞察', 'delivery'],
|
||||
['关于我们', 'footer']
|
||||
]
|
||||
|
||||
const logos = [
|
||||
'Bond',
|
||||
'WaSun',
|
||||
@@ -115,18 +103,8 @@ const deliverySteps = [
|
||||
]
|
||||
]
|
||||
|
||||
function scrollToSection(id) {
|
||||
mobileMenuOpen.value = false
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
function openConsultation() {
|
||||
mobileMenuOpen.value = false
|
||||
consultationOpen.value = true
|
||||
notice.value = ''
|
||||
}
|
||||
function submitConsultation() {
|
||||
consultationOpen.value = false
|
||||
notice.value = '已收到您的咨询，我们将尽快与您联系。'
|
||||
function requestConsultation(source, title = '预约免费 GEO 增长诊断') {
|
||||
openGlobalConsultation({ title, source })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -156,7 +134,7 @@ onMounted(async () => {
|
||||
|
||||
const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
|
||||
heroTimeline
|
||||
.from('.site-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
|
||||
.from('.subsite-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
|
||||
.from('.hero-copy h1', { autoAlpha: 0, y: 32, duration: 0.7, clearProps: 'all' }, '-=0.12')
|
||||
.from(
|
||||
'.hero-points span',
|
||||
@@ -164,7 +142,7 @@ onMounted(async () => {
|
||||
'-=0.22'
|
||||
)
|
||||
.from(
|
||||
'.button-row button',
|
||||
'.button-row > *',
|
||||
{ autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
|
||||
'-=0.12'
|
||||
)
|
||||
@@ -247,30 +225,6 @@ onMounted(async () => {
|
||||
cleanup.push(() => element.removeEventListener(event, handler))
|
||||
}
|
||||
|
||||
ScrollTrigger.create({
|
||||
start: 80,
|
||||
end: 'max',
|
||||
onToggle: ({ isActive }) => {
|
||||
headerScrolled.value = isActive
|
||||
}
|
||||
})
|
||||
|
||||
navItems.forEach(([, target]) => {
|
||||
const trigger = target === 'home' ? '.hero-section' : `#${target}`
|
||||
if (!document.querySelector(trigger)) return
|
||||
ScrollTrigger.create({
|
||||
trigger,
|
||||
start: 'top 48%',
|
||||
end: 'bottom 48%',
|
||||
onEnter: () => {
|
||||
activeSection.value = target
|
||||
},
|
||||
onEnterBack: () => {
|
||||
activeSection.value = target
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const hero = document.querySelector('.hero-section')
|
||||
const heroCopy = document.querySelector('.hero-copy')
|
||||
if (hero && heroCopy) {
|
||||
@@ -414,303 +368,235 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main id="home" ref="pageRoot" class="site-shell">
|
||||
<header class="site-header" :class="{ scrolled: headerScrolled }">
|
||||
<div class="page-width header-inner">
|
||||
<a href="#home" class="brand" aria-label="大马棒首页"
|
||||
><img
|
||||
src="/images/lanhu/slices/home-group114-image33@2x.png"
|
||||
alt="成都大马棒传媒有限公司"
|
||||
/></a>
|
||||
<nav class="desktop-nav" aria-label="主导航">
|
||||
<button
|
||||
v-for="([label, target], index) in navItems"
|
||||
:key="target"
|
||||
:class="{ active: target === activeSection }"
|
||||
@click="scrollToSection(target)"
|
||||
>
|
||||
{{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
|
||||
</button>
|
||||
</nav>
|
||||
<button
|
||||
class="mobile-menu-button"
|
||||
:class="{ open: mobileMenuOpen }"
|
||||
type="button"
|
||||
:aria-expanded="mobileMenuOpen"
|
||||
aria-controls="mobile-navigation"
|
||||
:aria-label="mobileMenuOpen ? '关闭导航菜单' : '打开导航菜单'"
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
>
|
||||
<span class="menu-glyph" aria-hidden="true">{{ mobileMenuOpen ? '×' : '☰' }}</span>
|
||||
</button>
|
||||
<button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="home" ref="pageRoot" class="site-shell">
|
||||
<SiteHeader />
|
||||
|
||||
<Transition name="mobile-nav">
|
||||
<nav
|
||||
v-if="mobileMenuOpen"
|
||||
id="mobile-navigation"
|
||||
class="mobile-navigation"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
<div class="page-width mobile-navigation-inner">
|
||||
<button
|
||||
v-for="([label, target], index) in navItems"
|
||||
:key="`mobile-${target}`"
|
||||
:class="{ active: index === 0 }"
|
||||
@click="scrollToSection(target)"
|
||||
>
|
||||
<span>{{ label }}</span
|
||||
><b>↗</b>
|
||||
</button>
|
||||
<button class="mobile-consult-button" @click="openConsultation">
|
||||
立即免费咨询 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</Transition>
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width hero-content">
|
||||
<div class="hero-copy">
|
||||
<h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
|
||||
<p class="hero-points">
|
||||
<span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
|
||||
><span>✓ 全链路转化闭环</span>
|
||||
</p>
|
||||
<div class="button-row">
|
||||
<button class="primary-button" @click="openConsultation">免费定制 <b>→</b></button
|
||||
><button class="outline-button" @click="scrollToSection('cases')">查看成功案例</button>
|
||||
<main>
|
||||
<section class="hero-section">
|
||||
<div class="hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width hero-content">
|
||||
<div class="hero-copy">
|
||||
<h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
|
||||
<p class="hero-points">
|
||||
<span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
|
||||
><span>✓ 全链路转化闭环</span>
|
||||
</p>
|
||||
<div class="button-row">
|
||||
<button
|
||||
class="primary-button"
|
||||
type="button"
|
||||
@click="requestConsultation('首页 Hero', '免费定制 GEO 增长方案')"
|
||||
>
|
||||
免费定制 <b>→</b></button
|
||||
><NuxtLink class="outline-button" to="/cases">查看成功案例</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="logo-strip" aria-label="合作品牌">
|
||||
<div class="logo-track">
|
||||
<span
|
||||
v-for="(logo, index) in logos"
|
||||
:key="`${logo}-${index}`"
|
||||
:class="`logo logo-${index % 6}`"
|
||||
>{{ logo }}</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<section class="logo-strip" aria-label="合作品牌">
|
||||
<div class="logo-track">
|
||||
<span
|
||||
v-for="(logo, index) in logos"
|
||||
:key="`${logo}-${index}`"
|
||||
:class="`logo logo-${index % 6}`"
|
||||
>{{ logo }}</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="intro-section page-width">
|
||||
<SectionTitle
|
||||
>已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
|
||||
>主流行业<template #subtitle
|
||||
>We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning More
|
||||
Than A Dozen Mainstream Industry Sectors</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="stats-panel">
|
||||
<article v-for="stat in stats" :key="stat[1]" class="stat-item">
|
||||
<img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
|
||||
><span>{{ stat[1] }}</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="model" class="model-section">
|
||||
<div class="page-width">
|
||||
<section class="intro-section page-width">
|
||||
<SectionTitle
|
||||
>独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
|
||||
#subtitle
|
||||
>Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
|
||||
Brand Building And Conversion Performance</template
|
||||
>已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
|
||||
>主流行业<template #subtitle
|
||||
>We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning
|
||||
More Than A Dozen Mainstream Industry Sectors</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="model-layout">
|
||||
<div
|
||||
v-for="model in ringModels"
|
||||
:key="model.title"
|
||||
class="ring ring-diagram"
|
||||
role="img"
|
||||
:aria-label="model.title"
|
||||
<div class="stats-panel">
|
||||
<article v-for="stat in stats" :key="stat[1]" class="stat-item">
|
||||
<img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
|
||||
><span>{{ stat[1] }}</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="model" class="model-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
>独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
|
||||
#subtitle
|
||||
>Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
|
||||
Brand Building And Conversion Performance</template
|
||||
></SectionTitle
|
||||
>
|
||||
<img class="ring-base" :src="model.image" alt="" />
|
||||
<span
|
||||
v-for="(label, labelIndex) in model.labels"
|
||||
:key="label"
|
||||
:class="`ring-label ring-label-${labelIndex + 1}`"
|
||||
>{{ label }}</span
|
||||
<div class="model-layout">
|
||||
<div
|
||||
v-for="model in ringModels"
|
||||
:key="model.title"
|
||||
class="ring ring-diagram"
|
||||
role="img"
|
||||
:aria-label="model.title"
|
||||
>
|
||||
<div class="ring-center-label">
|
||||
<svg v-if="model.icon === 'asset'" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M10 38V16l14-7 14 7v22H10Z" />
|
||||
<path d="M17 21h4m6 0h4m-14 7h4m6 0h4M22 38v-6h4v6" />
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 48 48" aria-hidden="true">
|
||||
<circle cx="15" cy="17" r="6" />
|
||||
<circle cx="34" cy="14" r="5" />
|
||||
<circle cx="31" cy="34" r="6" />
|
||||
<path d="m20 18 9-3m2 4v9m-5 4-7-10" />
|
||||
</svg>
|
||||
<strong>{{ model.title }}</strong>
|
||||
<img class="ring-base" :src="model.image" alt="" />
|
||||
<span
|
||||
v-for="(label, labelIndex) in model.labels"
|
||||
:key="label"
|
||||
:class="`ring-label ring-label-${labelIndex + 1}`"
|
||||
>{{ label }}</span
|
||||
>
|
||||
<div class="ring-center-label">
|
||||
<svg v-if="model.icon === 'asset'" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M10 38V16l14-7 14 7v22H10Z" />
|
||||
<path d="M17 21h4m6 0h4m-14 7h4m6 0h4M22 38v-6h4v6" />
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 48 48" aria-hidden="true">
|
||||
<circle cx="15" cy="17" r="6" />
|
||||
<circle cx="34" cy="14" r="5" />
|
||||
<circle cx="31" cy="34" r="6" />
|
||||
<path d="m20 18 9-3m2 4v9m-5 4-7-10" />
|
||||
</svg>
|
||||
<strong>{{ model.title }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="core-value">
|
||||
<h3>
|
||||
<img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
|
||||
</h3>
|
||||
<div v-for="point in corePoints" :key="point[0]" class="core-point">
|
||||
<h4><i></i>{{ point[0] }}</h4>
|
||||
<p>{{ point[1] }}</p>
|
||||
<div class="core-value">
|
||||
<h3>
|
||||
<img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
|
||||
</h3>
|
||||
<div v-for="point in corePoints" :key="point[0]" class="core-point">
|
||||
<h4><i></i>{{ point[0] }}</h4>
|
||||
<p>{{ point[1] }}</p>
|
||||
</div>
|
||||
<NuxtLink class="primary-button small" to="/services">了解业务详情 <b>→</b></NuxtLink>
|
||||
</div>
|
||||
<button class="primary-button small" @click="openConsultation">
|
||||
了解业务详情 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="advantages" class="advantages-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
><span class="blue">四大核心</span>优势<template #subtitle
|
||||
>Four Core Advantages</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="lead-advantage">
|
||||
<img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
|
||||
<div>
|
||||
<h3>真人内容生产优势</h3>
|
||||
<p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
|
||||
<p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="advantage-grid">
|
||||
<article v-for="([title, text], index) in advantageCards" :key="title">
|
||||
<img
|
||||
:src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
|
||||
alt=""
|
||||
/>
|
||||
<section id="advantages" class="advantages-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
><span class="blue">四大核心</span>优势<template #subtitle
|
||||
>Four Core Advantages</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="lead-advantage">
|
||||
<img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
|
||||
<div>
|
||||
<h3>{{ title }}</h3>
|
||||
<p><b>核心点：</b>{{ text }}</p>
|
||||
<p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
|
||||
<h3>真人内容生产优势</h3>
|
||||
<p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
|
||||
<p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="advantage-grid">
|
||||
<article v-for="([title, text], index) in advantageCards" :key="title">
|
||||
<img
|
||||
:src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
<h3>{{ title }}</h3>
|
||||
<p><b>核心点：</b>{{ text }}</p>
|
||||
<p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="cases" class="cases-section">
|
||||
<div class="case-background" aria-hidden="true"></div>
|
||||
<div class="page-width case-content">
|
||||
<section id="cases" class="cases-section">
|
||||
<div class="case-background" aria-hidden="true"></div>
|
||||
<div class="page-width case-content">
|
||||
<SectionTitle
|
||||
><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
|
||||
><template #subtitle
|
||||
>Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="case-panel">
|
||||
<article v-for="(image, index) in caseImages" :key="image">
|
||||
<img :src="image" :alt="`客户案例 ${index + 1}`" />
|
||||
<p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="center-action">
|
||||
<NuxtLink class="primary-button small" to="/cases">查看全部案例 <b>→</b></NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="industries" class="industries-section page-width">
|
||||
<SectionTitle
|
||||
><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
|
||||
><template #subtitle
|
||||
>Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="case-panel">
|
||||
<article v-for="(image, index) in caseImages" :key="image">
|
||||
<img :src="image" :alt="`客户案例 ${index + 1}`" />
|
||||
<p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="center-action">
|
||||
<button class="primary-button small" @click="openConsultation">
|
||||
查看全部案例 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="industries" class="industries-section page-width">
|
||||
<SectionTitle
|
||||
>深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
|
||||
>With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
|
||||
Solutions<br />Tailored To Clients’ Needs</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="industry-grid">
|
||||
<article v-for="card in industryCards" :key="card[0]">
|
||||
<h3>{{ card[0] }}</h3>
|
||||
<img :src="card[2]" alt="" />
|
||||
<div class="quote">“</div>
|
||||
<p>某企业服务客户：<br />{{ card[1] }}</p>
|
||||
<div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="delivery" class="delivery-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
|
||||
>深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
|
||||
>With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
|
||||
Solutions<br />Tailored To Clients’ Needs</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="delivery-banner"></div>
|
||||
<div class="delivery-grid">
|
||||
<article v-for="step in deliverySteps" :key="step[0]">
|
||||
<img :src="step[2]" alt="" />
|
||||
<div>
|
||||
<h3>{{ step[0] }}：</h3>
|
||||
<p>{{ step[1] }}</p>
|
||||
</div>
|
||||
<div class="industry-grid">
|
||||
<article v-for="card in industryCards" :key="card[0]">
|
||||
<h3>{{ card[0] }}</h3>
|
||||
<img :src="card[2]" alt="" />
|
||||
<div class="quote">“</div>
|
||||
<p>某企业服务客户：<br />{{ card[1] }}</p>
|
||||
<div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonial-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
>客户真实评价，见证<span class="blue">服务品质</span
|
||||
><template #subtitle
|
||||
>Genuine Client Testimonials Attest To Our Service Quality</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="testimonial-track">
|
||||
<article v-for="index in 5" :key="index">
|
||||
<header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
|
||||
<p>
|
||||
创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="cta-art"></div>
|
||||
<div class="cta-content">
|
||||
<h2>AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系</h2>
|
||||
<p>免费获取1对1GEO增长诊断方案</p>
|
||||
<button class="primary-button" @click="openConsultation">立即免费咨询 <b>→</b></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer" class="site-footer">
|
||||
<div class="page-width footer-main">
|
||||
<img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
|
||||
<div class="footer-links">
|
||||
<div v-for="n in 6" :key="n"><b>快捷导航</b><span>企业定位企业定位企业定位</span></div>
|
||||
</div>
|
||||
<div class="qr"><span>▦</span><span>▦</span><small>公众号 微信二维码</small></div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
备案信息 备案信息 备案信息 版权声明版权声明版权声明 友情链接友情链接友情链接
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div v-if="consultationOpen" class="dialog-mask" @click.self="consultationOpen = false">
|
||||
<section class="consult-dialog" role="dialog" aria-modal="true">
|
||||
<button class="close" aria-label="关闭" @click="consultationOpen = false">×</button>
|
||||
<h2>咨询全域 GEO 方案</h2>
|
||||
<p>提交后，我们会尽快为您匹配专属增长方案。</p>
|
||||
<button class="primary-button" @click="submitConsultation">提交咨询</button>
|
||||
</section>
|
||||
</div>
|
||||
<p v-if="notice" class="toast">{{ notice }}</p>
|
||||
</main>
|
||||
|
||||
<section id="delivery" class="delivery-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
|
||||
>With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
|
||||
Solutions<br />Tailored To Clients’ Needs</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="delivery-banner"></div>
|
||||
<div class="delivery-grid">
|
||||
<article v-for="step in deliverySteps" :key="step[0]">
|
||||
<img :src="step[2]" alt="" />
|
||||
<div>
|
||||
<h3>{{ step[0] }}：</h3>
|
||||
<p>{{ step[1] }}</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="testimonial-section">
|
||||
<div class="page-width">
|
||||
<SectionTitle
|
||||
>客户真实评价，见证<span class="blue">服务品质</span
|
||||
><template #subtitle
|
||||
>Genuine Client Testimonials Attest To Our Service Quality</template
|
||||
></SectionTitle
|
||||
>
|
||||
<div class="testimonial-track">
|
||||
<article v-for="index in 5" :key="index">
|
||||
<header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
|
||||
<p>
|
||||
创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="cta-art"></div>
|
||||
<div class="cta-content">
|
||||
<h2>
|
||||
AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系
|
||||
</h2>
|
||||
<p>免费获取1对1GEO增长诊断方案</p>
|
||||
<button class="primary-button" type="button" @click="requestConsultation('首页底部 CTA')">
|
||||
立即免费咨询 <b>→</b>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,696 @@
|
||||
<script setup>
|
||||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||||
import { getInsightBySlug, insights } from '~/data/insights'
|
||||
|
||||
const route = useRoute()
|
||||
const { openConsultation } = useConsultation()
|
||||
const article = computed(() => getInsightBySlug(route.params.slug))
|
||||
|
||||
if (!article.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: '洞察文章不存在' })
|
||||
}
|
||||
|
||||
const articleIndex = computed(() => insights.findIndex((item) => item.slug === article.value.slug))
|
||||
const previousArticle = computed(() => insights[articleIndex.value - 1] || null)
|
||||
const nextArticle = computed(() => insights[articleIndex.value + 1] || null)
|
||||
const relatedArticles = computed(() =>
|
||||
insights.filter((item) => item.slug !== article.value.slug).slice(0, 3)
|
||||
)
|
||||
|
||||
useHead(() => ({
|
||||
title: `${article.value.title}｜云途全域增长洞察`,
|
||||
meta: [
|
||||
{ name: 'description', content: article.value.excerpt },
|
||||
{ property: 'og:title', content: article.value.title },
|
||||
{ property: 'og:description', content: article.value.excerpt },
|
||||
{ property: 'og:image', content: article.value.cover }
|
||||
]
|
||||
}))
|
||||
|
||||
function requestDiagnosis(source) {
|
||||
openConsultation({ title: '预约免费 GEO 增长诊断', source })
|
||||
}
|
||||
|
||||
function requestWhitepaper(source) {
|
||||
openConsultation({ title: '获取 2026 AI 搜索与品牌增长观察', need: '行业白皮书', source })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="article-page">
|
||||
<a class="skip-link" href="#main-content">跳到文章正文</a>
|
||||
<SiteHeader />
|
||||
|
||||
<main id="main-content">
|
||||
<article>
|
||||
<header class="article-hero">
|
||||
<div class="article-hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width article-hero-inner">
|
||||
<nav class="breadcrumbs" aria-label="面包屑">
|
||||
<NuxtLink to="/">首页</NuxtLink><span>/</span
|
||||
><NuxtLink to="/insights">增长洞察</NuxtLink><span>/</span
|
||||
><b>{{ article.category }}</b>
|
||||
</nav>
|
||||
<div class="article-heading">
|
||||
<p>{{ article.category }}</p>
|
||||
<h1>{{ article.title }}</h1>
|
||||
<span>{{ article.excerpt }}</span>
|
||||
<div class="article-byline">
|
||||
<div><strong>云途全域编辑部</strong><small>YUNTU GEO INSIGHTS</small></div>
|
||||
<time :datetime="article.date">{{ article.date }}</time
|
||||
><span>{{ article.readingTime }}</span
|
||||
><span>{{ article.views }} 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="page-width article-layout">
|
||||
<aside class="article-aside">
|
||||
<NuxtLink to="/insights" class="back-link"
|
||||
><AppIcon name="arrow-left" /> 返回洞察列表</NuxtLink
|
||||
>
|
||||
<div>
|
||||
<span>分享主题</span><strong>{{ article.category }}</strong>
|
||||
</div>
|
||||
<button type="button" @click="requestDiagnosis('洞察文章侧边栏')">
|
||||
诊断品牌可见性 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div class="article-content">
|
||||
<figure class="article-cover"><img :src="article.cover" :alt="article.title" /></figure>
|
||||
|
||||
<template v-if="article.sections?.length">
|
||||
<p class="article-lead">{{ article.lead }}</p>
|
||||
<section v-for="(section, index) in article.sections" :key="section.title">
|
||||
<span class="section-number">0{{ index + 1 }}</span>
|
||||
<h2>{{ section.title }}</h2>
|
||||
<p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
|
||||
<div v-if="section.comparison" class="comparison-table">
|
||||
<div class="comparison-head">
|
||||
<span>比较维度</span><span>传统 SEO</span><span>GEO</span>
|
||||
</div>
|
||||
<div v-for="row in section.comparison" :key="row[0]" class="comparison-row">
|
||||
<strong>{{ row[0] }}</strong
|
||||
><span>{{ row[1] }}</span
|
||||
><span>{{ row[2] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<blockquote>
|
||||
GEO
|
||||
的目标不是让品牌在每一个问题里出现，而是在真正影响用户决策的问题中，被准确理解并获得可信推荐。
|
||||
</blockquote>
|
||||
</template>
|
||||
|
||||
<section v-else class="article-draft">
|
||||
<span class="section-number">01</span>
|
||||
<h2>核心观察</h2>
|
||||
<p>{{ article.excerpt }}</p>
|
||||
<div class="draft-note">
|
||||
<strong>完整内容正在编辑</strong>
|
||||
<p>
|
||||
这篇文章的详细数据、方法与案例仍在复核。我们先保留摘要，避免发布未经确认的信息。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="inline-cta">
|
||||
<div>
|
||||
<span>把方法放回你的业务</span>
|
||||
<h3>了解品牌当前在 AI 搜索中的真实表现</h3>
|
||||
</div>
|
||||
<button type="button" @click="requestDiagnosis(`洞察文章：${article.title}`)">
|
||||
预约免费诊断 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<nav class="article-pagination page-width" aria-label="文章翻页">
|
||||
<NuxtLink v-if="previousArticle" :to="`/insights/${previousArticle.slug}`"
|
||||
><span>上一篇</span><strong>{{ previousArticle.title }}</strong></NuxtLink
|
||||
>
|
||||
<div v-else></div>
|
||||
<NuxtLink v-if="nextArticle" :to="`/insights/${nextArticle.slug}`"
|
||||
><span>下一篇</span><strong>{{ nextArticle.title }}</strong></NuxtLink
|
||||
>
|
||||
</nav>
|
||||
|
||||
<section class="related-section">
|
||||
<div class="page-width">
|
||||
<header>
|
||||
<div>
|
||||
<p>继续阅读</p>
|
||||
<h2>相关增长洞察</h2>
|
||||
</div>
|
||||
<button type="button" @click="requestWhitepaper('文章详情白皮书入口')">
|
||||
获取行业白皮书 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</header>
|
||||
<div class="related-grid">
|
||||
<article v-for="item in relatedArticles" :key="item.slug">
|
||||
<NuxtLink :to="`/insights/${item.slug}`"
|
||||
><img :src="item.cover" :alt="item.title"
|
||||
/></NuxtLink>
|
||||
<span>{{ item.category }} · {{ item.date }}</span>
|
||||
<h3>
|
||||
<NuxtLink :to="`/insights/${item.slug}`">{{ item.title }}</NuxtLink>
|
||||
</h3>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.article-page {
|
||||
--article-blue: #237df0;
|
||||
overflow: hidden;
|
||||
color: #344359;
|
||||
background: #fff;
|
||||
}
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #1f70df;
|
||||
transform: translateY(-150%);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.article-hero {
|
||||
position: relative;
|
||||
min-height: 545px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
isolation: isolate;
|
||||
background: #f1f7ff;
|
||||
}
|
||||
.article-hero-art {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 80% 25%, rgba(71, 154, 251, 0.2), transparent 27%),
|
||||
linear-gradient(110deg, #f9fcff, #e8f2ff);
|
||||
}
|
||||
.article-hero-art::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
opacity: 0.18;
|
||||
background-image:
|
||||
linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
mask-image: linear-gradient(90deg, transparent 18%, #000);
|
||||
}
|
||||
.article-hero-inner {
|
||||
padding: 48px 0 60px;
|
||||
}
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 9px;
|
||||
color: #8a9bb0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.breadcrumbs a {
|
||||
color: #6c86a4;
|
||||
text-decoration: none;
|
||||
}
|
||||
.breadcrumbs b {
|
||||
color: #2a7ee6;
|
||||
font-weight: 600;
|
||||
}
|
||||
.article-heading {
|
||||
max-width: 980px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
.article-heading > p {
|
||||
margin: 0;
|
||||
color: #247ce9;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.article-heading h1 {
|
||||
margin: 18px 0 0;
|
||||
color: #34465b;
|
||||
font-size: clamp(42px, 4.4vw, 68px);
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.18;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.article-heading > span {
|
||||
max-width: 770px;
|
||||
display: block;
|
||||
margin-top: 23px;
|
||||
color: #6f8095;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.article-byline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-top: 30px;
|
||||
color: #8595a8;
|
||||
font-size: 10px;
|
||||
}
|
||||
.article-byline > div {
|
||||
display: grid;
|
||||
padding-right: 24px;
|
||||
border-right: 1px solid #cbdbea;
|
||||
}
|
||||
.article-byline strong {
|
||||
color: #526b87;
|
||||
font-size: 11px;
|
||||
}
|
||||
.article-byline small {
|
||||
margin-top: 3px;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.article-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(0, 800px);
|
||||
justify-content: center;
|
||||
gap: 70px;
|
||||
padding-top: 90px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.article-aside {
|
||||
position: sticky;
|
||||
top: 95px;
|
||||
align-self: start;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.article-aside > a {
|
||||
color: #607a98;
|
||||
font-size: 11px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.article-aside > div {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid #dce6f0;
|
||||
}
|
||||
.article-aside span {
|
||||
color: #93a2b3;
|
||||
font-size: 9px;
|
||||
}
|
||||
.article-aside strong {
|
||||
color: #3b5877;
|
||||
font-size: 12px;
|
||||
}
|
||||
.article-aside button {
|
||||
padding: 18px;
|
||||
border-radius: 5px 14px 5px 14px;
|
||||
color: #fff;
|
||||
background: #277fec;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.article-aside button:hover {
|
||||
box-shadow: 0 12px 25px rgba(39, 127, 236, 0.22);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.article-content {
|
||||
min-width: 0;
|
||||
}
|
||||
.article-cover {
|
||||
width: calc(100% + 120px);
|
||||
height: 420px;
|
||||
margin: 0 0 55px -60px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px 22px 5px 22px;
|
||||
background: #edf5fd;
|
||||
}
|
||||
.article-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.article-lead {
|
||||
margin: 0 0 62px;
|
||||
padding: 30px 35px;
|
||||
border-left: 3px solid #2b82ee;
|
||||
color: #49637f;
|
||||
background: #f1f7fd;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.85;
|
||||
}
|
||||
.article-content section {
|
||||
position: relative;
|
||||
margin-top: 66px;
|
||||
}
|
||||
.article-content section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
.section-number {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -54px;
|
||||
color: #8fb2d8;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.article-content h2 {
|
||||
margin: 0 0 25px;
|
||||
color: #34485f;
|
||||
font-size: 30px;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.article-content section > p {
|
||||
margin: 0 0 18px;
|
||||
color: #64778e;
|
||||
font-size: 15px;
|
||||
line-height: 2;
|
||||
}
|
||||
.article-content blockquote {
|
||||
margin: 68px 0 0;
|
||||
padding: 36px 42px;
|
||||
border-radius: 5px 18px 5px 18px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #2778dc, #42aee2);
|
||||
box-shadow: 0 22px 45px rgba(38, 113, 205, 0.18);
|
||||
font-size: 21px;
|
||||
font-weight: 600;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.comparison-table {
|
||||
margin-top: 32px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dce7f2;
|
||||
border-radius: 5px 14px 5px 14px;
|
||||
}
|
||||
.comparison-head,
|
||||
.comparison-row {
|
||||
display: grid;
|
||||
grid-template-columns: 0.65fr 1fr 1fr;
|
||||
}
|
||||
.comparison-head {
|
||||
color: #fff;
|
||||
background: #317fdb;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.comparison-head span,
|
||||
.comparison-row > * {
|
||||
padding: 15px 18px;
|
||||
}
|
||||
.comparison-row {
|
||||
border-top: 1px solid #e0e9f2;
|
||||
color: #667a91;
|
||||
background: #f8fbfe;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.comparison-row strong {
|
||||
color: #3c5877;
|
||||
background: #edf5fc;
|
||||
font-weight: 600;
|
||||
}
|
||||
.draft-note {
|
||||
margin-top: 34px;
|
||||
padding: 28px 30px;
|
||||
border-radius: 5px 15px 5px 15px;
|
||||
background: #f0f6fc;
|
||||
}
|
||||
.draft-note strong {
|
||||
color: #3c5875;
|
||||
font-size: 14px;
|
||||
}
|
||||
.draft-note p {
|
||||
margin: 8px 0 0;
|
||||
color: #78899c;
|
||||
font-size: 12px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.inline-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 35px;
|
||||
margin-top: 72px;
|
||||
padding: 34px 38px;
|
||||
border-radius: 5px 17px 5px 17px;
|
||||
background: #eaf4ff;
|
||||
}
|
||||
.inline-cta span {
|
||||
color: #2b7fe8;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.inline-cta h3 {
|
||||
margin: 9px 0 0;
|
||||
color: #3b536d;
|
||||
font-size: 20px;
|
||||
}
|
||||
.inline-cta button {
|
||||
flex: 0 0 auto;
|
||||
height: 42px;
|
||||
padding: 0 18px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
background: #287fec;
|
||||
font-size: 11px;
|
||||
}
|
||||
.article-pagination {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
padding-top: 42px;
|
||||
padding-bottom: 42px;
|
||||
border-top: 1px solid #dfe8f1;
|
||||
}
|
||||
.article-pagination a {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.article-pagination a:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
.article-pagination span {
|
||||
color: #8c9bab;
|
||||
font-size: 9px;
|
||||
}
|
||||
.article-pagination strong {
|
||||
color: #506983;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.article-pagination a:hover strong {
|
||||
color: #237df0;
|
||||
}
|
||||
.related-section {
|
||||
padding: 96px 0 118px;
|
||||
background: #eef6fd;
|
||||
}
|
||||
.related-section header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
}
|
||||
.related-section header p {
|
||||
margin: 0;
|
||||
color: #247ce9;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.related-section header h2 {
|
||||
margin: 12px 0 0;
|
||||
color: #354a62;
|
||||
font-size: 35px;
|
||||
}
|
||||
.related-section header button {
|
||||
padding: 0 0 5px;
|
||||
border-bottom: 1px solid #94bae3;
|
||||
color: #287bdc;
|
||||
background: transparent;
|
||||
font-size: 11px;
|
||||
}
|
||||
.related-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 0.9fr 0.9fr;
|
||||
gap: 22px;
|
||||
margin-top: 38px;
|
||||
}
|
||||
.related-grid article > a {
|
||||
height: 190px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 4px 14px 4px 14px;
|
||||
}
|
||||
.related-grid article:first-child > a {
|
||||
height: 250px;
|
||||
}
|
||||
.related-grid img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.related-grid article:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.related-grid article > span {
|
||||
display: block;
|
||||
margin-top: 18px;
|
||||
color: #7890aa;
|
||||
font-size: 9px;
|
||||
}
|
||||
.related-grid h3 {
|
||||
margin: 10px 0 0;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.related-grid h3 a {
|
||||
color: #3c526a;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.article-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
.article-aside {
|
||||
position: static;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
.article-aside > div {
|
||||
display: none;
|
||||
}
|
||||
.article-cover {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
.section-number {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.related-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.related-grid article:first-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.article-hero {
|
||||
min-height: auto;
|
||||
}
|
||||
.article-hero-inner {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 52px;
|
||||
}
|
||||
.article-heading {
|
||||
margin-top: 42px;
|
||||
}
|
||||
.article-heading h1 {
|
||||
font-size: clamp(35px, 10vw, 47px);
|
||||
}
|
||||
.article-byline {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 18px;
|
||||
}
|
||||
.article-byline > div {
|
||||
width: 100%;
|
||||
padding: 0 0 12px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #d1dfed;
|
||||
}
|
||||
.article-layout {
|
||||
padding-top: 58px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.article-aside {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-aside button {
|
||||
display: none;
|
||||
}
|
||||
.article-cover {
|
||||
height: 235px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
.article-lead {
|
||||
padding: 24px 21px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.article-content section {
|
||||
margin-top: 52px;
|
||||
}
|
||||
.article-content h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
.comparison-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.comparison-head,
|
||||
.comparison-row {
|
||||
min-width: 600px;
|
||||
}
|
||||
.article-content blockquote {
|
||||
padding: 29px 23px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.inline-cta {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 28px 23px;
|
||||
}
|
||||
.article-pagination {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-pagination a:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
.related-section {
|
||||
padding-top: 76px;
|
||||
padding-bottom: 86px;
|
||||
}
|
||||
.related-section header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.related-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.related-grid article:first-child {
|
||||
grid-column: auto;
|
||||
}
|
||||
.related-grid article:first-child > a {
|
||||
height: 210px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,889 @@
|
||||
<script setup>
|
||||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||||
import { featuredInsight, insightCategories, insights } from '~/data/insights'
|
||||
|
||||
const activeCategory = ref('全部')
|
||||
const visibleCount = ref(4)
|
||||
const { openConsultation } = useConsultation()
|
||||
|
||||
useHead({
|
||||
title: '增长洞察｜大马棒·云途全域 GEO',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'阅读 AI 搜索、GEO 行业知识、增长实战复盘与行业白皮书，了解品牌在生成式搜索中的增长方法。'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const filteredInsights = computed(() => {
|
||||
const list = insights.filter((item) => !item.featured)
|
||||
if (activeCategory.value === '全部') return list
|
||||
if (activeCategory.value === '最新文章') return list.slice(0, 3)
|
||||
return list.filter((item) => item.category === activeCategory.value)
|
||||
})
|
||||
const visibleInsights = computed(() => filteredInsights.value.slice(0, visibleCount.value))
|
||||
const canLoadMore = computed(() => visibleCount.value < filteredInsights.value.length)
|
||||
|
||||
watch(activeCategory, () => {
|
||||
visibleCount.value = 4
|
||||
})
|
||||
|
||||
function requestDiagnosis(source) {
|
||||
openConsultation({ title: '预约免费 GEO 增长诊断', source })
|
||||
}
|
||||
|
||||
function requestWhitepaper(source) {
|
||||
openConsultation({
|
||||
title: '获取 2026 AI 搜索与品牌增长观察',
|
||||
need: '行业白皮书',
|
||||
source
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="insights-page">
|
||||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||||
<SiteHeader />
|
||||
|
||||
<main id="main-content">
|
||||
<section class="insights-hero">
|
||||
<div class="insights-hero-art" aria-hidden="true"></div>
|
||||
<div class="page-width insights-hero-grid">
|
||||
<div class="insights-hero-copy">
|
||||
<p class="page-eyebrow">全域营销增长洞察</p>
|
||||
<h1>行业人在看的东西，<br /><span>全都在这里</span></h1>
|
||||
<p>持续记录 AI 搜索的变化、可执行的 GEO 方法，以及我们从真实项目里得到的判断。</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#insight-library" class="primary-button"
|
||||
>开始阅读 <AppIcon name="bottom"
|
||||
/></a>
|
||||
<button type="button" @click="requestDiagnosis('增长洞察页 Hero')">
|
||||
免费诊断品牌可见性
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editorial-index" aria-label="增长洞察内容索引">
|
||||
<div class="index-header"><span>YUNTU / INSIGHTS</span><small>2026.07</small></div>
|
||||
<strong>06</strong>
|
||||
<p>围绕 AI 搜索、品牌认知与业务转化，建立一套可持续更新的知识索引。</p>
|
||||
<div class="index-lines"><i></i><i></i><i></i><i></i></div>
|
||||
<div class="index-footer">
|
||||
<span>KNOWLEDGE</span><span>PRACTICE</span><span>REPORT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="insight-library" class="insight-library">
|
||||
<div class="page-width">
|
||||
<header class="library-heading">
|
||||
<div>
|
||||
<p class="section-kicker">本期推荐</p>
|
||||
<h2>先从一个关键变化开始</h2>
|
||||
</div>
|
||||
<p>AI 不只是新的流量入口，它正在改变用户理解品牌、比较方案和做出选择的方式。</p>
|
||||
</header>
|
||||
|
||||
<article class="featured-insight">
|
||||
<NuxtLink :to="`/insights/${featuredInsight.slug}`" class="featured-image">
|
||||
<img :src="featuredInsight.cover" :alt="featuredInsight.title" />
|
||||
<span>EDITOR'S PICK</span>
|
||||
</NuxtLink>
|
||||
<div class="featured-copy">
|
||||
<div class="article-meta">
|
||||
<span>{{ featuredInsight.category }}</span
|
||||
><time>{{ featuredInsight.date }}</time>
|
||||
</div>
|
||||
<h2>
|
||||
<NuxtLink :to="`/insights/${featuredInsight.slug}`">{{
|
||||
featuredInsight.title
|
||||
}}</NuxtLink>
|
||||
</h2>
|
||||
<p>{{ featuredInsight.excerpt }}</p>
|
||||
<div class="featured-footer">
|
||||
<NuxtLink :to="`/insights/${featuredInsight.slug}`"
|
||||
>阅读全文 <AppIcon name="arrow-right"
|
||||
/></NuxtLink>
|
||||
<span>{{ featuredInsight.readingTime }} · {{ featuredInsight.views }} 阅读</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<nav class="insight-filters" aria-label="洞察文章分类">
|
||||
<button
|
||||
v-for="category in insightCategories"
|
||||
:key="category"
|
||||
type="button"
|
||||
:class="{ active: activeCategory === category }"
|
||||
@click="activeCategory = category"
|
||||
>
|
||||
{{ category }}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<Transition name="insight-change" mode="out-in">
|
||||
<div :key="activeCategory" class="article-results">
|
||||
<div v-if="visibleInsights.length" class="article-grid">
|
||||
<article
|
||||
v-for="(article, index) in visibleInsights"
|
||||
:key="article.slug"
|
||||
:class="{ lead: index === 0 }"
|
||||
>
|
||||
<NuxtLink :to="`/insights/${article.slug}`" class="article-cover">
|
||||
<img :src="article.cover" :alt="article.title" />
|
||||
<span>{{ article.category }}</span>
|
||||
</NuxtLink>
|
||||
<div class="article-copy">
|
||||
<div class="article-meta">
|
||||
<time>{{ article.date }}</time
|
||||
><span>{{ article.views }} 阅读</span>
|
||||
</div>
|
||||
<h3>
|
||||
<NuxtLink :to="`/insights/${article.slug}`">{{ article.title }}</NuxtLink>
|
||||
</h3>
|
||||
<p>{{ article.excerpt }}</p>
|
||||
<NuxtLink :to="`/insights/${article.slug}`" class="read-link"
|
||||
>查看详情 <AppIcon name="arrow-right"
|
||||
/></NuxtLink>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="insight-empty">
|
||||
<span>CONTENT IN PROGRESS</span>
|
||||
<h3>该分类内容正在整理</h3>
|
||||
<p>可以先预约诊断，我们会结合你的行业分享对应的 GEO 判断与资料。</p>
|
||||
<button
|
||||
class="primary-button small"
|
||||
type="button"
|
||||
@click="requestDiagnosis('洞察分类空状态')"
|
||||
>
|
||||
预约免费诊断 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
<button v-if="canLoadMore" class="load-more" type="button" @click="visibleCount += 4">
|
||||
加载更多 <AppIcon name="plus" />
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="whitepaper-section">
|
||||
<div class="whitepaper-art" aria-hidden="true"></div>
|
||||
<div class="page-width whitepaper-grid">
|
||||
<div class="whitepaper-number"><span>REPORT</span><strong>2026</strong></div>
|
||||
<div class="whitepaper-copy">
|
||||
<p>行业白皮书</p>
|
||||
<h2>AI 搜索与品牌增长观察</h2>
|
||||
<span>用户行为 · 内容信源 · 衡量框架 · 行业实践</span>
|
||||
</div>
|
||||
<button type="button" @click="requestWhitepaper('增长洞察页白皮书')">
|
||||
获取白皮书 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="insights-cta">
|
||||
<div class="page-width insights-cta-content">
|
||||
<p>阅读方法，也要回到自己的业务</p>
|
||||
<h2>看看你的品牌，正在被 AI 如何理解</h2>
|
||||
<button
|
||||
class="primary-button"
|
||||
type="button"
|
||||
@click="requestDiagnosis('增长洞察页底部 CTA')"
|
||||
>
|
||||
预约免费 GEO 诊断 <AppIcon name="arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.insights-page {
|
||||
--insight-blue: #237df0;
|
||||
overflow: hidden;
|
||||
color: #344359;
|
||||
background: #fff;
|
||||
}
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #1f70df;
|
||||
transform: translateY(-150%);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.page-eyebrow,
|
||||
.section-kicker {
|
||||
margin: 0;
|
||||
color: var(--insight-blue);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.insights-hero {
|
||||
position: relative;
|
||||
min-height: 620px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
isolation: isolate;
|
||||
background: #f2f7fd;
|
||||
}
|
||||
.insights-hero-art {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 78% 28%, rgba(66, 151, 251, 0.23), transparent 27%),
|
||||
linear-gradient(110deg, #f9fcff, #e8f2ff);
|
||||
}
|
||||
.insights-hero-art::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
opacity: 0.2;
|
||||
background-image:
|
||||
linear-gradient(rgba(54, 124, 214, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(54, 124, 214, 0.08) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
mask-image: linear-gradient(90deg, transparent 18%, #000);
|
||||
}
|
||||
.insights-hero-grid {
|
||||
min-height: 620px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.9fr 1.1fr;
|
||||
align-items: center;
|
||||
gap: 90px;
|
||||
padding: 58px 0 66px;
|
||||
}
|
||||
.insights-hero-copy h1 {
|
||||
margin: 16px 0 0;
|
||||
color: #35465c;
|
||||
font-size: clamp(48px, 4.5vw, 72px);
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.16;
|
||||
}
|
||||
.insights-hero-copy h1 span {
|
||||
color: #1978ef;
|
||||
}
|
||||
.insights-hero-copy > p:nth-of-type(2) {
|
||||
max-width: 590px;
|
||||
margin: 24px 0 0;
|
||||
color: #6d7d91;
|
||||
font-size: 15px;
|
||||
line-height: 1.85;
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-top: 31px;
|
||||
}
|
||||
.hero-actions a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.hero-actions > button {
|
||||
color: #546b86;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.editorial-index {
|
||||
position: relative;
|
||||
width: min(570px, 100%);
|
||||
min-height: 390px;
|
||||
justify-self: end;
|
||||
padding: 38px 42px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: 4px 24px 4px 24px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
box-shadow:
|
||||
0 30px 65px rgba(56, 117, 193, 0.14),
|
||||
inset 0 1px 0 #fff;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
.index-header,
|
||||
.index-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #6e8daf;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.editorial-index > strong {
|
||||
display: block;
|
||||
margin-top: 37px;
|
||||
color: #267fec;
|
||||
font-size: 104px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.07em;
|
||||
line-height: 0.9;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.editorial-index > p {
|
||||
max-width: 360px;
|
||||
margin: 23px 0 0;
|
||||
color: #5f748d;
|
||||
font-size: 14px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.index-lines {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
right: 42px;
|
||||
width: 118px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
.index-lines i {
|
||||
height: 1px;
|
||||
background: #b9d2ec;
|
||||
transform-origin: right;
|
||||
}
|
||||
.index-lines i:nth-child(2) {
|
||||
transform: scaleX(0.7);
|
||||
}
|
||||
.index-lines i:nth-child(3) {
|
||||
transform: scaleX(0.45);
|
||||
}
|
||||
.index-lines i:nth-child(4) {
|
||||
transform: scaleX(0.82);
|
||||
}
|
||||
.index-footer {
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
bottom: 35px;
|
||||
left: 42px;
|
||||
padding-top: 17px;
|
||||
border-top: 1px solid #d3e1ef;
|
||||
}
|
||||
.insight-library {
|
||||
padding: 112px 0 132px;
|
||||
}
|
||||
.library-heading {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
align-items: end;
|
||||
gap: 80px;
|
||||
}
|
||||
.library-heading h2 {
|
||||
margin: 15px 0 0;
|
||||
color: #344359;
|
||||
font-size: clamp(32px, 3vw, 48px);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.28;
|
||||
}
|
||||
.library-heading > p {
|
||||
max-width: 540px;
|
||||
margin: 0 0 5px;
|
||||
color: #748398;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.featured-insight {
|
||||
min-height: 450px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.08fr 0.92fr;
|
||||
margin-top: 48px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px 22px 5px 22px;
|
||||
background: #edf6ff;
|
||||
}
|
||||
.featured-image {
|
||||
position: relative;
|
||||
min-height: 450px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.featured-image::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background: linear-gradient(90deg, transparent 65%, rgba(237, 246, 255, 0.85));
|
||||
}
|
||||
.featured-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 0.45s;
|
||||
}
|
||||
.featured-insight:hover img {
|
||||
transform: scale(1.035);
|
||||
}
|
||||
.featured-image > span {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 28px;
|
||||
left: 28px;
|
||||
padding: 8px 11px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background: rgba(34, 112, 209, 0.82);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.featured-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 48px 54px 48px 36px;
|
||||
}
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
color: #8798ab;
|
||||
font-size: 10px;
|
||||
}
|
||||
.article-meta span:first-child {
|
||||
color: #2b7ee5;
|
||||
font-weight: 700;
|
||||
}
|
||||
.featured-copy h2 {
|
||||
margin: 20px 0 0;
|
||||
font-size: clamp(30px, 2.6vw, 42px);
|
||||
line-height: 1.35;
|
||||
}
|
||||
.featured-copy h2 a,
|
||||
.article-copy h3 a {
|
||||
color: #34485f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-copy > p {
|
||||
margin: 18px 0 0;
|
||||
color: #718197;
|
||||
font-size: 13px;
|
||||
line-height: 1.85;
|
||||
}
|
||||
.featured-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #cfdeed;
|
||||
}
|
||||
.featured-footer a,
|
||||
.read-link {
|
||||
color: #247be8;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.featured-footer > span {
|
||||
color: #8997a7;
|
||||
font-size: 9px;
|
||||
}
|
||||
.insight-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 75px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid #e0e9f3;
|
||||
}
|
||||
.insight-filters button {
|
||||
height: 38px;
|
||||
padding: 0 17px;
|
||||
border-radius: 4px;
|
||||
color: #61758c;
|
||||
background: #f1f6fc;
|
||||
font-size: 12px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.insight-filters button:hover,
|
||||
.insight-filters button.active {
|
||||
color: #fff;
|
||||
background: #287ff0;
|
||||
box-shadow: 0 8px 18px rgba(39, 126, 238, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.article-results {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.article-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.article-grid article {
|
||||
display: grid;
|
||||
grid-template-columns: 0.85fr 1.15fr;
|
||||
min-height: 285px;
|
||||
overflow: hidden;
|
||||
border-radius: 14px 4px 14px 4px;
|
||||
background: #f3f7fc;
|
||||
transition:
|
||||
transform 0.25s,
|
||||
box-shadow 0.25s,
|
||||
background 0.25s;
|
||||
}
|
||||
.article-grid article:hover {
|
||||
background: #fff;
|
||||
box-shadow: 0 20px 42px rgba(61, 119, 189, 0.13);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.article-grid article.lead {
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
min-height: 350px;
|
||||
}
|
||||
.article-cover {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.article-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.article-grid article:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.article-cover > span {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
padding: 7px 9px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background: rgba(32, 105, 200, 0.82);
|
||||
font-size: 9px;
|
||||
}
|
||||
.article-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
}
|
||||
.article-copy h3 {
|
||||
margin: 15px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.article-grid article.lead h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
.article-copy > p {
|
||||
margin: 12px 0 0;
|
||||
color: #75859a;
|
||||
font-size: 11px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.read-link {
|
||||
align-self: flex-start;
|
||||
margin-top: 22px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #9bc1e9;
|
||||
}
|
||||
.load-more {
|
||||
min-width: 150px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin: 42px auto 0;
|
||||
border: 1px solid #bad2ea;
|
||||
border-radius: 5px;
|
||||
color: #527497;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.load-more:hover {
|
||||
color: #247be8;
|
||||
border-color: #73aae4;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.insight-empty {
|
||||
min-height: 390px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 45px 20px;
|
||||
border-radius: 16px 5px 16px 5px;
|
||||
background: #f2f7fd;
|
||||
text-align: center;
|
||||
}
|
||||
.insight-empty > span {
|
||||
color: #2a80ea;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.insight-empty h3 {
|
||||
margin: 14px 0 0;
|
||||
color: #3b4f66;
|
||||
font-size: 27px;
|
||||
}
|
||||
.insight-empty p {
|
||||
max-width: 490px;
|
||||
margin: 12px 0 0;
|
||||
color: #7b8b9d;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.insight-empty button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.insight-change-enter-active,
|
||||
.insight-change-leave-active {
|
||||
transition:
|
||||
opacity 0.18s,
|
||||
transform 0.22s;
|
||||
}
|
||||
.insight-change-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(9px);
|
||||
}
|
||||
.insight-change-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.whitepaper-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #eaf4ff;
|
||||
}
|
||||
.whitepaper-art {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url('/images/lanhu/slices/home-group98-image24@2x.png') center / cover no-repeat;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.whitepaper-grid {
|
||||
position: relative;
|
||||
min-height: 310px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.65fr 1.35fr auto;
|
||||
align-items: center;
|
||||
gap: 65px;
|
||||
}
|
||||
.whitepaper-number {
|
||||
display: grid;
|
||||
}
|
||||
.whitepaper-number span {
|
||||
color: #6e92b9;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.whitepaper-number strong {
|
||||
color: #277fec;
|
||||
font-size: 64px;
|
||||
letter-spacing: -0.05em;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.whitepaper-copy p {
|
||||
margin: 0;
|
||||
color: #277fec;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.whitepaper-copy h2 {
|
||||
margin: 13px 0 0;
|
||||
color: #395069;
|
||||
font-size: 35px;
|
||||
}
|
||||
.whitepaper-copy span {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
color: #72869c;
|
||||
font-size: 12px;
|
||||
}
|
||||
.whitepaper-grid > button {
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
background: #277fec;
|
||||
box-shadow: 0 12px 25px rgba(39, 127, 236, 0.2);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.whitepaper-grid > button:hover {
|
||||
background: #176ed8;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.insights-cta {
|
||||
min-height: 410px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
linear-gradient(rgba(248, 252, 255, 0.45), rgba(235, 246, 255, 0.7)),
|
||||
url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
|
||||
}
|
||||
.insights-cta-content {
|
||||
padding: 74px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.insights-cta-content p {
|
||||
margin: 0;
|
||||
color: #237df0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.insights-cta-content h2 {
|
||||
margin: 17px 0 0;
|
||||
color: #3375c5;
|
||||
font-size: clamp(32px, 3.2vw, 50px);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.insights-cta-content button {
|
||||
margin-top: 29px;
|
||||
}
|
||||
@media (max-width: 980px) {
|
||||
.insights-hero,
|
||||
.insights-hero-grid {
|
||||
min-height: auto;
|
||||
}
|
||||
.insights-hero-grid,
|
||||
.library-heading {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.insights-hero-grid {
|
||||
padding-top: 74px;
|
||||
padding-bottom: 66px;
|
||||
}
|
||||
.editorial-index {
|
||||
justify-self: center;
|
||||
}
|
||||
.library-heading {
|
||||
gap: 22px;
|
||||
}
|
||||
.library-heading > p {
|
||||
margin: 0;
|
||||
}
|
||||
.featured-insight {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.featured-image {
|
||||
min-height: 360px;
|
||||
}
|
||||
.featured-image::after {
|
||||
background: linear-gradient(transparent 65%, #edf6ff);
|
||||
}
|
||||
.featured-copy {
|
||||
padding: 42px;
|
||||
}
|
||||
.article-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-grid article.lead {
|
||||
grid-column: auto;
|
||||
}
|
||||
.whitepaper-grid {
|
||||
grid-template-columns: 0.7fr 1.3fr;
|
||||
gap: 35px;
|
||||
padding-top: 54px;
|
||||
padding-bottom: 54px;
|
||||
}
|
||||
.whitepaper-grid > button {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.insights-hero-grid {
|
||||
padding-top: 54px;
|
||||
}
|
||||
.insights-hero-copy h1 {
|
||||
font-size: clamp(39px, 11vw, 52px);
|
||||
}
|
||||
.hero-actions {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
.editorial-index {
|
||||
min-height: 330px;
|
||||
padding: 28px 25px;
|
||||
}
|
||||
.editorial-index > strong {
|
||||
font-size: 82px;
|
||||
}
|
||||
.index-lines {
|
||||
right: 25px;
|
||||
width: 85px;
|
||||
}
|
||||
.index-footer {
|
||||
right: 25px;
|
||||
bottom: 25px;
|
||||
left: 25px;
|
||||
}
|
||||
.insight-library {
|
||||
padding-top: 76px;
|
||||
padding-bottom: 86px;
|
||||
}
|
||||
.featured-image {
|
||||
min-height: 245px;
|
||||
}
|
||||
.featured-copy {
|
||||
padding: 30px 22px 34px;
|
||||
}
|
||||
.featured-footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
.insight-filters {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.insight-filters button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.article-grid article,
|
||||
.article-grid article.lead {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.article-cover {
|
||||
min-height: 210px;
|
||||
}
|
||||
.article-copy {
|
||||
padding: 25px 22px;
|
||||
}
|
||||
.article-grid article.lead h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
.whitepaper-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 22px;
|
||||
}
|
||||
.whitepaper-number strong {
|
||||
font-size: 52px;
|
||||
}
|
||||
.whitepaper-copy h2 {
|
||||
font-size: 29px;
|
||||
}
|
||||
.whitepaper-grid > button {
|
||||
grid-column: auto;
|
||||
}
|
||||
.insights-cta {
|
||||
min-height: 380px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+1878
File diff suppressed because it is too large
Load Diff
+1381
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user