Zhanglj
2ff1064de7
这一提交完成了多项功能升级与优化： 1. 新增全局浮动客服组件，集成腾讯云TRTC聊天能力并添加错误格式化工具 2. 新增图片资源并调整部分静态文件结构 3. 优化案例页面：重构筛选逻辑、新增空状态处理、添加加载更多功能 4. 优化首页布局：修复统计数字动画、调整移动端适配样式、优化轮播逻辑 5. 重构官方内容获取工具：添加缓存机制、优化媒体资源处理 6. 优化API代理配置，移除默认本地代理并新增环境变量配置 7. 新增页面数据恢复刷新逻辑，优化页面交互体验 8. 修复按钮组件冗余代码，调整头部导航移动端样式
1105 lines
27 KiB
Vue
1105 lines
27 KiB
Vue
<script setup>
|
||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||
const { ALL_LABEL, bySortAndTime, fetchPublicCategories, fetchPublicContent, normalizeCase } =
|
||
useOfficialContent()
|
||
|
||
const activeCategory = ref(ALL_LABEL)
|
||
const snapshotVisibleCount = ref(3)
|
||
const { openConsultation } = useConsultation()
|
||
|
||
const { data: pageData } = await useAsyncData('public-cases', async () => {
|
||
const [rows, categories] = await Promise.all([
|
||
fetchPublicContent('CASE'),
|
||
fetchPublicCategories().catch(() => ({}))
|
||
])
|
||
|
||
return {
|
||
cases: rows.sort(bySortAndTime).map((item) => normalizeCase(item, new Map())),
|
||
categories: categories || {}
|
||
}
|
||
})
|
||
useRefreshNuxtDataOnResume('public-cases')
|
||
|
||
const cases = computed(() => pageData.value?.cases || [])
|
||
const caseCategories = computed(() => [
|
||
ALL_LABEL,
|
||
...Array.from(
|
||
new Set(
|
||
(pageData.value?.categories?.caseIndustries || []).map((item) => item.name).filter(Boolean)
|
||
)
|
||
)
|
||
])
|
||
const filteredCases = computed(() => {
|
||
if (activeCategory.value === ALL_LABEL) return cases.value
|
||
return cases.value.filter((item) => item.industry === activeCategory.value)
|
||
})
|
||
const primaryCases = computed(() => {
|
||
if (activeCategory.value === ALL_LABEL) return cases.value.filter((item) => item.isFeatured)
|
||
return filteredCases.value.filter((item) => item.isFullCase)
|
||
})
|
||
const resultSnapshots = computed(() =>
|
||
filteredCases.value.filter((item) => item.isRecommended === false)
|
||
)
|
||
const heroPromotion = computed(() => filteredCases.value.filter((item) => item.isRecommended ).slice(0, 3))
|
||
|
||
useHead({
|
||
title: '客户案例｜大马棒·云途全域 GEO',
|
||
meta: [
|
||
{
|
||
name: 'description',
|
||
content:
|
||
'查看大马棒·云途全域 GEO 在教育培训、企业服务、本地生活和电商零售行业中的真实增长路径与结果数据。'
|
||
}
|
||
]
|
||
})
|
||
|
||
const visibleSnapshots = computed(() => resultSnapshots.value.slice(0, snapshotVisibleCount.value))
|
||
const canLoadMoreSnapshots = computed(
|
||
() => snapshotVisibleCount.value < resultSnapshots.value.length
|
||
)
|
||
const hasPrimaryCases = computed(() => primaryCases.value.length > 0)
|
||
const primaryEmptyKicker = computed(() =>
|
||
activeCategory.value === ALL_LABEL ? '精选案例正在整理' : '完整案例正在整理'
|
||
)
|
||
const primaryEmptyTitle = computed(() =>
|
||
activeCategory.value === ALL_LABEL
|
||
? '精选案例尚未上线'
|
||
: `${activeCategory.value}行业的完整案例尚未上线`
|
||
)
|
||
const primaryEmptySource = computed(() =>
|
||
activeCategory.value === ALL_LABEL ? '案例全部精选空状态' : '行业完整案例空状态'
|
||
)
|
||
|
||
watch(activeCategory, () => {
|
||
snapshotVisibleCount.value = 3
|
||
})
|
||
|
||
function requestPlan(industry, source) {
|
||
openConsultation({ title: `获取${industry}行业增长方案`, industry, source })
|
||
}
|
||
|
||
function requestCustomPlan(source) {
|
||
openConsultation({ title: '咨询我的行业增长路径', source })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="cases-page">
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<SiteHeader />
|
||
|
||
<main id="main-content">
|
||
<section class="cases-hero">
|
||
<div class="cases-hero-mesh" aria-hidden="true"></div>
|
||
<div class="page-width cases-hero-grid">
|
||
<div class="cases-hero-copy">
|
||
<p class="page-eyebrow">客户案例</p>
|
||
<h1>那些和客户一起，<br />跑通的<span>全域路径</span></h1>
|
||
<p>
|
||
营销不是全平台撒网，而是找到属于行业的那个入口、那条路径。这里记录我们已经验证过的方法和结果。
|
||
</p>
|
||
<div class="hero-proof-line">
|
||
<div><strong>1000+</strong><span>服务客户</span></div>
|
||
<div><strong>12+</strong><span>覆盖行业</span></div>
|
||
<div><strong>全链路</strong><span>从曝光到咨询</span></div>
|
||
</div>
|
||
<button
|
||
class="primary-button"
|
||
type="button"
|
||
@click="requestCustomPlan('客户案例页 Hero')"
|
||
>
|
||
聊聊我的增长路径 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
|
||
<div class="case-collage" aria-label="不同行业案例结果预览">
|
||
<article
|
||
v-for="(snapshot, index) in heroPromotion"
|
||
:key="snapshot.industry"
|
||
:class="`collage-card collage-card-${index + 1}`"
|
||
>
|
||
<img :src="snapshot.cover" :alt="`${snapshot.industry}案例封面`" />
|
||
<div>
|
||
<span>{{ snapshot.industry }}</span
|
||
><strong>{{ snapshot.metric }}</strong
|
||
><small>{{ snapshot.metricLabel }}</small>
|
||
</div>
|
||
</article>
|
||
<div class="collage-center">
|
||
<img src="/images/cases/real-growth-path.png" alt="真实增长路径" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="case-library-section">
|
||
<div class="page-width">
|
||
<header class="case-library-heading">
|
||
<div>
|
||
<p class="section-kicker">按行业查看</p>
|
||
<h2>结果相似，背后的路径并不相同</h2>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="case-filters" role="group" aria-label="案例行业筛选">
|
||
<button
|
||
v-for="category in caseCategories"
|
||
:key="category"
|
||
type="button"
|
||
:class="{ active: activeCategory === category }"
|
||
@click="activeCategory = category"
|
||
>
|
||
{{ category }}
|
||
</button>
|
||
</div>
|
||
|
||
<Transition name="case-change" mode="out-in">
|
||
<div :key="activeCategory" class="case-results">
|
||
<article
|
||
v-for="caseItem in primaryCases"
|
||
:key="caseItem.id || caseItem.slug"
|
||
class="featured-case"
|
||
>
|
||
<div class="featured-case-image">
|
||
<img :src="caseItem.cover" :alt="`${caseItem.industry}行业 GEO 案例封面`" />
|
||
<span
|
||
>{{ caseItem.industry }} ·
|
||
{{ caseItem.isFullCase ? '完整案例' : '精选案例' }}</span
|
||
>
|
||
</div>
|
||
<div class="featured-case-copy">
|
||
<p>{{ caseItem.client }}</p>
|
||
<h2>{{ caseItem.title }}</h2>
|
||
<span class="featured-summary">{{ caseItem.summary }}</span>
|
||
<div class="featured-metrics">
|
||
<div v-for="metric in caseItem.metrics" :key="metric[1]">
|
||
<strong>{{ metric[0] }}</strong
|
||
><span>{{ metric[1] }}</span>
|
||
</div>
|
||
</div>
|
||
<NuxtLink
|
||
v-if="caseItem.isFullCase && caseItem.slug"
|
||
:to="`/cases/${caseItem.slug}`"
|
||
>查看完整复盘 <AppIcon name="arrow-right"
|
||
/></NuxtLink>
|
||
<button
|
||
v-else
|
||
type="button"
|
||
@click="requestPlan(caseItem.industry, `${caseItem.industry}精选案例`)"
|
||
>
|
||
获取同类方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<div v-if="!hasPrimaryCases" class="case-empty primary-empty">
|
||
<div class="empty-visual" aria-hidden="true"><span></span><span></span><i></i></div>
|
||
<p class="section-kicker">{{ primaryEmptyKicker }}</p>
|
||
<h3>{{ primaryEmptyTitle }}</h3>
|
||
<p>我们可以先结合您的业务情况，分享对应行业的策略思路与可参考指标。</p>
|
||
<button
|
||
class="primary-button small"
|
||
type="button"
|
||
@click="requestPlan(activeCategory, primaryEmptySource)"
|
||
>
|
||
获取{{ activeCategory }}行业建议 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="visibleSnapshots.length" class="snapshot-heading">
|
||
<div>
|
||
<p class="section-kicker">结果快照</p>
|
||
<h3>更多已确认的行业结果</h3>
|
||
</div>
|
||
<span>完整复盘资料将在获得客户授权后陆续开放</span>
|
||
</div>
|
||
|
||
<div v-if="visibleSnapshots.length" class="snapshot-grid">
|
||
<article
|
||
v-for="(snapshot, index) in visibleSnapshots"
|
||
:key="`${activeCategory}-${snapshot.title}`"
|
||
:class="{ wide: index === 0 && activeCategory === ALL_LABEL }"
|
||
>
|
||
<div class="snapshot-image">
|
||
<img :src="snapshot.cover" :alt="`${snapshot.industry}结果快照`" /><span>{{
|
||
snapshot.industry
|
||
}}</span>
|
||
</div>
|
||
<div class="snapshot-copy">
|
||
<small>{{ snapshot.client }}</small>
|
||
<h3>{{ snapshot.title }}</h3>
|
||
<div class="snapshot-result">
|
||
<strong>{{ snapshot.metric }}</strong
|
||
><span>{{ snapshot.metricLabel }}</span>
|
||
</div>
|
||
<p>{{ snapshot.secondary }}</p>
|
||
<button
|
||
type="button"
|
||
@click="requestPlan(snapshot.industry, `${snapshot.industry}案例快照`)"
|
||
>
|
||
获取同类方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<button
|
||
v-if="canLoadMoreSnapshots"
|
||
class="case-load-more"
|
||
type="button"
|
||
@click="snapshotVisibleCount += 2"
|
||
>
|
||
加载更多 <AppIcon name="plus" />
|
||
</button>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="case-method-section">
|
||
<div class="page-width case-method-grid">
|
||
<header>
|
||
<p class="section-kicker">我们如何复盘</p>
|
||
<h2>不只展示一个漂亮数字</h2>
|
||
<p>
|
||
每篇完整案例都会说明项目开始前是什么状态、为什么选择这条路径、执行了什么，以及结果如何被持续监测。
|
||
</p>
|
||
</header>
|
||
<div class="method-list">
|
||
<article>
|
||
<span>01</span>
|
||
<h3>项目背景</h3>
|
||
<p>业务阶段、行业环境与增长目标。</p>
|
||
</article>
|
||
<article>
|
||
<span>02</span>
|
||
<h3>前期基线</h3>
|
||
<p>品牌提及、推荐排序与转化链路。</p>
|
||
</article>
|
||
<article>
|
||
<span>03</span>
|
||
<h3>解决方案</h3>
|
||
<p>问题库、内容建设、信源分发与监测。</p>
|
||
</article>
|
||
<article>
|
||
<span>04</span>
|
||
<h3>业务结果</h3>
|
||
<p>覆盖率、流量、咨询量与线索质量。</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cases-cta">
|
||
<div class="cases-cta-art" aria-hidden="true"></div>
|
||
<div class="page-width cases-cta-content">
|
||
<p>案例只是参考，策略需要从你的业务出发</p>
|
||
<h2>聊聊行业、现状和目标，<br />找到适合你的那条路径</h2>
|
||
<button
|
||
class="primary-button"
|
||
type="button"
|
||
@click="requestCustomPlan('客户案例页底部 CTA')"
|
||
>
|
||
咨询我的行业增长路径 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<SiteFooter />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.cases-page {
|
||
--case-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(--case-blue);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
.cases-hero {
|
||
position: relative;
|
||
min-height: 660px;
|
||
display: grid;
|
||
align-items: center;
|
||
isolation: isolate;
|
||
background: #f1f7ff;
|
||
}
|
||
.cases-hero-mesh {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(circle at 80% 25%, rgba(76, 158, 255, 0.22), transparent 27%),
|
||
radial-gradient(circle at 14% 90%, rgba(97, 200, 235, 0.11), transparent 28%),
|
||
linear-gradient(110deg, #f8fbff, #e8f2ff);
|
||
}
|
||
.cases-hero-mesh::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 20%, #000);
|
||
}
|
||
.cases-hero-grid {
|
||
min-height: 660px;
|
||
display: grid;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
align-items: center;
|
||
gap: 70px;
|
||
padding: 52px 0 60px;
|
||
}
|
||
.cases-hero-copy h1 {
|
||
margin: 15px 0 0;
|
||
color: #37465b;
|
||
font-size: clamp(44px, 4vw, 65px);
|
||
letter-spacing: -0.055em;
|
||
line-height: 1.18;
|
||
}
|
||
.cases-hero-copy h1 span {
|
||
color: #1978ef;
|
||
white-space: nowrap;
|
||
}
|
||
.cases-hero-copy > p:nth-of-type(2) {
|
||
max-width: 620px;
|
||
margin: 24px 0 0;
|
||
color: #68788e;
|
||
font-size: 16px;
|
||
line-height: 1.85;
|
||
}
|
||
.hero-proof-line {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 32px;
|
||
margin-top: 29px;
|
||
}
|
||
.hero-proof-line div {
|
||
display: grid;
|
||
}
|
||
.hero-proof-line strong {
|
||
color: #257dec;
|
||
font-size: 20px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.hero-proof-line span {
|
||
margin-top: 4px;
|
||
color: #8290a2;
|
||
font-size: 10px;
|
||
}
|
||
.cases-hero-copy .primary-button {
|
||
margin-top: 31px;
|
||
}
|
||
.case-collage {
|
||
position: relative;
|
||
width: min(650px, 100%);
|
||
aspect-ratio: 1.05;
|
||
justify-self: end;
|
||
}
|
||
.case-collage::before {
|
||
position: absolute;
|
||
inset: 6% 7%;
|
||
content: '';
|
||
border: 1px dashed rgba(62, 140, 231, 0.28);
|
||
border-radius: 50%;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(255, 255, 255, 0.9),
|
||
rgba(151, 205, 255, 0.18) 48%,
|
||
transparent 69%
|
||
);
|
||
}
|
||
.collage-card {
|
||
position: absolute;
|
||
z-index: 2;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
border-radius: 17px 6px 17px 6px;
|
||
background: rgba(255, 255, 255, 0.86);
|
||
box-shadow: 0 18px 42px rgba(55, 113, 184, 0.17);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.collage-card img {
|
||
width: 100%;
|
||
height: 110px;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
.collage-card > div {
|
||
display: grid;
|
||
padding: 13px 15px;
|
||
}
|
||
.collage-card span {
|
||
color: #7890aa;
|
||
font-size: 9px;
|
||
}
|
||
.collage-card strong {
|
||
margin-top: 4px;
|
||
color: #267eec;
|
||
font-size: 21px;
|
||
}
|
||
.collage-card small {
|
||
color: #6f8095;
|
||
font-size: 9px;
|
||
}
|
||
.collage-card-1 {
|
||
top: 3%;
|
||
left: 7%;
|
||
width: 210px;
|
||
transform: rotate(-3deg);
|
||
}
|
||
.collage-card-2 {
|
||
top: 9%;
|
||
right: 2%;
|
||
width: 190px;
|
||
transform: rotate(3deg);
|
||
}
|
||
.collage-card-3 {
|
||
bottom: 2%;
|
||
left: 2%;
|
||
width: 195px;
|
||
transform: rotate(2deg);
|
||
}
|
||
.collage-card-4 {
|
||
right: 4%;
|
||
bottom: 4%;
|
||
width: 215px;
|
||
transform: rotate(-2deg);
|
||
}
|
||
.collage-center {
|
||
position: absolute;
|
||
z-index: 04;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: min(230px, 68%);
|
||
aspect-ratio: 1838 / 1300;
|
||
overflow: hidden;
|
||
border-radius: 18px;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.collage-center img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
.case-library-section {
|
||
padding: 112px 0 130px;
|
||
}
|
||
.case-library-heading {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 0.85fr;
|
||
align-items: end;
|
||
gap: 80px;
|
||
}
|
||
.case-library-heading h2,
|
||
.case-method-grid h2 {
|
||
margin: 15px 0 0;
|
||
color: #344359;
|
||
font-size: clamp(32px, 3vw, 48px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.28;
|
||
}
|
||
.case-library-heading > p,
|
||
.case-method-grid header > p:last-child {
|
||
max-width: 590px;
|
||
margin: 0 0 5px;
|
||
color: #748398;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
.case-filters {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-top: 43px;
|
||
padding-bottom: 18px;
|
||
border-bottom: 1px solid #e0e9f3;
|
||
}
|
||
.case-filters button {
|
||
height: 38px;
|
||
padding: 0 18px;
|
||
border-radius: 5px;
|
||
color: #62758b;
|
||
background: #f1f6fc;
|
||
font-size: 12px;
|
||
transition: 0.2s;
|
||
}
|
||
.case-filters button:hover,
|
||
.case-filters button.active {
|
||
color: #fff;
|
||
background: #287ff0;
|
||
box-shadow: 0 8px 18px rgba(39, 126, 238, 0.2);
|
||
transform: translateY(-1px);
|
||
}
|
||
.case-results {
|
||
margin-top: 45px;
|
||
}
|
||
.featured-case {
|
||
display: grid;
|
||
grid-template-columns: 1.02fr 0.98fr;
|
||
min-height: 480px;
|
||
overflow: hidden;
|
||
border-radius: 7px 22px 7px 22px;
|
||
background: #eaf4ff;
|
||
box-shadow: 0 28px 60px rgba(60, 123, 201, 0.13);
|
||
}
|
||
.featured-case + .featured-case {
|
||
margin-top: 28px;
|
||
}
|
||
.featured-case-image {
|
||
position: relative;
|
||
min-height: 480px;
|
||
overflow: hidden;
|
||
}
|
||
.featured-case-image::after {
|
||
position: absolute;
|
||
inset: 0;
|
||
content: '';
|
||
background: linear-gradient(90deg, transparent 60%, rgba(234, 244, 255, 0.8));
|
||
}
|
||
.featured-case-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
transform: scale(1.05);
|
||
}
|
||
.featured-case-image > span {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 28px;
|
||
left: 28px;
|
||
padding: 9px 12px;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
background: rgba(31, 107, 205, 0.82);
|
||
font-size: 10px;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.featured-case-copy {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 50px 54px 50px 36px;
|
||
}
|
||
.featured-case-copy > p {
|
||
margin: 0;
|
||
color: #5181b9;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.featured-case-copy h2 {
|
||
max-width: 600px;
|
||
margin: 16px 0 0;
|
||
color: #33465d;
|
||
font-size: clamp(30px, 2.7vw, 43px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.32;
|
||
}
|
||
.featured-summary {
|
||
margin-top: 17px;
|
||
color: #708197;
|
||
font-size: 13px;
|
||
line-height: 1.75;
|
||
}
|
||
.featured-metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 18px;
|
||
margin-top: 28px;
|
||
}
|
||
.featured-metrics div {
|
||
padding-top: 14px;
|
||
border-top: 1px solid #cadced;
|
||
}
|
||
.featured-metrics strong {
|
||
display: block;
|
||
color: #287fec;
|
||
font-size: 19px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.featured-metrics span {
|
||
display: block;
|
||
margin-top: 5px;
|
||
color: #8392a4;
|
||
font-size: 9px;
|
||
}
|
||
.featured-case-copy > a,
|
||
.featured-case-copy > button {
|
||
align-self: flex-start;
|
||
margin-top: 29px;
|
||
padding-bottom: 5px;
|
||
border-radius: 0;
|
||
border-bottom: 1px solid #82b3ea;
|
||
color: #247be8;
|
||
background: transparent;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
}
|
||
.featured-case-copy > a b {
|
||
margin-left: 8px;
|
||
}
|
||
.snapshot-heading {
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: space-between;
|
||
gap: 30px;
|
||
margin-top: 80px;
|
||
}
|
||
.snapshot-heading h3 {
|
||
margin: 12px 0 0;
|
||
color: #35475d;
|
||
font-size: 30px;
|
||
}
|
||
.snapshot-heading > span {
|
||
max-width: 390px;
|
||
color: #8795a6;
|
||
font-size: 11px;
|
||
text-align: right;
|
||
}
|
||
.snapshot-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 25px;
|
||
margin-top: 32px;
|
||
}
|
||
.snapshot-grid article {
|
||
min-height: 310px;
|
||
display: grid;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
overflow: hidden;
|
||
border-radius: 15px 5px 15px 5px;
|
||
background: #f2f7fd;
|
||
transition:
|
||
transform 0.25s,
|
||
box-shadow 0.25s,
|
||
background 0.25s;
|
||
}
|
||
.snapshot-grid article:hover {
|
||
background: #fff;
|
||
box-shadow: 0 20px 42px rgba(61, 119, 189, 0.13);
|
||
transform: translateY(-5px);
|
||
}
|
||
.snapshot-grid article.wide {
|
||
grid-column: 1 / -1;
|
||
grid-template-columns: 1.1fr 0.9fr;
|
||
min-height: 355px;
|
||
}
|
||
.snapshot-image {
|
||
position: relative;
|
||
min-height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.snapshot-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
transition: transform 0.4s;
|
||
}
|
||
.snapshot-grid article:hover img {
|
||
transform: scale(1.04);
|
||
}
|
||
.snapshot-image span {
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 18px;
|
||
padding: 7px 10px;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
background: rgba(33, 111, 208, 0.8);
|
||
font-size: 9px;
|
||
}
|
||
.snapshot-copy {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 30px;
|
||
}
|
||
.snapshot-copy > small {
|
||
color: #7e93aa;
|
||
font-size: 9px;
|
||
}
|
||
.snapshot-copy h3 {
|
||
margin: 11px 0 0;
|
||
color: #384c64;
|
||
font-size: 20px;
|
||
line-height: 1.45;
|
||
}
|
||
.snapshot-result {
|
||
display: grid;
|
||
margin-top: 22px;
|
||
}
|
||
.snapshot-result strong {
|
||
color: #287fec;
|
||
font-size: 28px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.snapshot-result span {
|
||
color: #7f8fa2;
|
||
font-size: 10px;
|
||
}
|
||
.snapshot-copy > p {
|
||
margin: 9px 0 0;
|
||
color: #607997;
|
||
font-size: 11px;
|
||
}
|
||
.snapshot-copy button {
|
||
align-self: flex-start;
|
||
margin-top: 21px;
|
||
padding: 0 0 4px;
|
||
border-bottom: 1px solid #9bc1e9;
|
||
color: #2a7de5;
|
||
background: transparent;
|
||
font-size: 11px;
|
||
}
|
||
.case-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;
|
||
}
|
||
.case-load-more:hover {
|
||
color: #247be8;
|
||
border-color: #73aae4;
|
||
transform: translateY(-2px);
|
||
}
|
||
.case-empty {
|
||
min-height: 440px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 50px 20px;
|
||
border-radius: 18px 6px 18px 6px;
|
||
background: #f1f7fd;
|
||
text-align: center;
|
||
}
|
||
.empty-visual {
|
||
position: relative;
|
||
width: 120px;
|
||
height: 90px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.empty-visual span {
|
||
position: absolute;
|
||
width: 65px;
|
||
height: 55px;
|
||
border: 1px solid #9dc5ee;
|
||
border-radius: 9px 3px 9px 3px;
|
||
background: rgba(255, 255, 255, 0.75);
|
||
}
|
||
.empty-visual span:first-child {
|
||
top: 4px;
|
||
left: 9px;
|
||
transform: rotate(-8deg);
|
||
}
|
||
.empty-visual span:nth-child(2) {
|
||
right: 6px;
|
||
bottom: 4px;
|
||
transform: rotate(8deg);
|
||
}
|
||
.empty-visual i {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 28px;
|
||
left: 45px;
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 7px solid #fff;
|
||
border-radius: 50%;
|
||
background: #3b8fea;
|
||
box-shadow: 0 9px 18px rgba(51, 135, 232, 0.24);
|
||
}
|
||
.case-empty h3 {
|
||
margin: 14px 0 0;
|
||
color: #3b4d63;
|
||
font-size: 27px;
|
||
}
|
||
.case-empty > p:nth-of-type(2) {
|
||
max-width: 500px;
|
||
margin: 12px 0 0;
|
||
color: #7c8b9d;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
.case-empty .primary-button {
|
||
margin-top: 25px;
|
||
}
|
||
.case-change-enter-active,
|
||
.case-change-leave-active {
|
||
transition:
|
||
opacity 0.18s,
|
||
transform 0.22s;
|
||
}
|
||
.case-change-enter-from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
.case-change-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(-6px);
|
||
}
|
||
.case-method-section {
|
||
padding: 108px 0 122px;
|
||
background: #eef7ff;
|
||
}
|
||
.case-method-grid {
|
||
display: grid;
|
||
grid-template-columns: 0.78fr 1.22fr;
|
||
gap: 85px;
|
||
align-items: center;
|
||
}
|
||
.case-method-grid header > p:last-child {
|
||
margin-top: 20px;
|
||
}
|
||
.method-list {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 14px;
|
||
}
|
||
.method-list article {
|
||
min-height: 180px;
|
||
padding: 28px;
|
||
border-radius: 14px 5px 14px 5px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
box-shadow: inset 0 1px 0 #fff;
|
||
}
|
||
.method-list span {
|
||
color: #8da8c6;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
}
|
||
.method-list h3 {
|
||
margin: 26px 0 0;
|
||
color: #38506b;
|
||
font-size: 19px;
|
||
}
|
||
.method-list p {
|
||
margin: 8px 0 0;
|
||
color: #7a899b;
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
.cases-cta {
|
||
position: relative;
|
||
min-height: 430px;
|
||
display: grid;
|
||
place-items: center;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
}
|
||
.cases-cta-art {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(rgba(247, 251, 255, 0.18), rgba(234, 246, 255, 0.46)),
|
||
url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
|
||
}
|
||
.cases-cta-content {
|
||
display: grid;
|
||
justify-items: center;
|
||
padding: 75px 0;
|
||
text-align: center;
|
||
}
|
||
.cases-cta-content > p {
|
||
width: 100%;
|
||
margin: 0;
|
||
color: #237df0;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.cases-cta-content h2 {
|
||
margin: 17px 0 0;
|
||
color: #2f75cc;
|
||
font-size: clamp(32px, 3.2vw, 50px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.3;
|
||
}
|
||
.cases-cta-content .primary-button {
|
||
margin-top: 29px;
|
||
}
|
||
@media (max-width: 980px) {
|
||
.cases-hero,
|
||
.cases-hero-grid {
|
||
min-height: auto;
|
||
}
|
||
.cases-hero-grid {
|
||
grid-template-columns: 1fr;
|
||
padding-top: 74px;
|
||
padding-bottom: 64px;
|
||
}
|
||
.case-collage {
|
||
width: min(650px, 100%);
|
||
justify-self: center;
|
||
margin-top: 10px;
|
||
}
|
||
.case-library-heading,
|
||
.case-method-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 35px;
|
||
}
|
||
.case-library-heading > p {
|
||
margin: 0;
|
||
}
|
||
.featured-case {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.featured-case-image {
|
||
min-height: 360px;
|
||
}
|
||
.featured-case-image::after {
|
||
background: linear-gradient(transparent 65%, #eaf4ff);
|
||
}
|
||
.featured-case-copy {
|
||
padding: 42px;
|
||
}
|
||
.snapshot-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.snapshot-grid article.wide {
|
||
grid-column: auto;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
min-height: 310px;
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.cases-hero-grid {
|
||
padding-top: 54px;
|
||
}
|
||
.cases-hero-copy h1 {
|
||
font-size: clamp(37px, 10vw, 49px);
|
||
}
|
||
.cases-hero-copy > p:nth-of-type(2) {
|
||
font-size: 15px;
|
||
}
|
||
.hero-proof-line {
|
||
gap: 22px;
|
||
}
|
||
.case-collage {
|
||
aspect-ratio: 0.93;
|
||
}
|
||
.collage-card {
|
||
width: 155px;
|
||
}
|
||
.collage-card img {
|
||
height: 82px;
|
||
}
|
||
.collage-card-1 {
|
||
left: 0;
|
||
}
|
||
.collage-card-2 {
|
||
right: 0;
|
||
}
|
||
.collage-card-3 {
|
||
left: 0;
|
||
}
|
||
.collage-card-4 {
|
||
right: 0;
|
||
}
|
||
.collage-center {
|
||
width: 76%;
|
||
}
|
||
.case-library-section {
|
||
padding-top: 76px;
|
||
padding-bottom: 86px;
|
||
}
|
||
.case-filters {
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
padding-bottom: 14px;
|
||
}
|
||
.case-filters button {
|
||
flex: 0 0 auto;
|
||
}
|
||
.featured-case-image {
|
||
min-height: 260px;
|
||
}
|
||
.featured-case-copy {
|
||
padding: 30px 22px 34px;
|
||
}
|
||
.featured-metrics {
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
}
|
||
.featured-metrics div {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
}
|
||
.snapshot-heading {
|
||
align-items: start;
|
||
flex-direction: column;
|
||
}
|
||
.snapshot-heading > span {
|
||
text-align: left;
|
||
}
|
||
.snapshot-grid article,
|
||
.snapshot-grid article.wide {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.snapshot-image {
|
||
min-height: 210px;
|
||
}
|
||
.snapshot-copy {
|
||
padding: 25px 22px;
|
||
}
|
||
.case-method-section {
|
||
padding-top: 76px;
|
||
padding-bottom: 84px;
|
||
}
|
||
.method-list {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.method-list article {
|
||
min-height: 145px;
|
||
}
|
||
.cases-cta {
|
||
min-height: 390px;
|
||
}
|
||
.cases-cta-content h2 br {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|