1238 lines
29 KiB
Vue
1238 lines
29 KiB
Vue
<script setup>
|
||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||
import { getCaseBySlug, resultSnapshots } from '~/data/cases'
|
||
|
||
const route = useRoute()
|
||
const { openConsultation } = useConsultation()
|
||
const caseStudy = getCaseBySlug(route.params.slug)
|
||
|
||
if (!caseStudy) {
|
||
throw createError({ statusCode: 404, statusMessage: '案例不存在' })
|
||
}
|
||
|
||
useHead({
|
||
title: `${caseStudy.title}｜客户案例`,
|
||
meta: [{ name: 'description', content: caseStudy.description }]
|
||
})
|
||
|
||
function requestSimilarPlan(source) {
|
||
openConsultation({
|
||
title: '获取教育培训行业增长方案',
|
||
industry: caseStudy.industry,
|
||
source
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="case-detail-page">
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<SiteHeader />
|
||
|
||
<main id="main-content">
|
||
<section class="detail-hero">
|
||
<div class="detail-hero-mesh" aria-hidden="true"></div>
|
||
<div class="page-width">
|
||
<nav class="breadcrumb" aria-label="面包屑导航">
|
||
<NuxtLink to="/">首页</NuxtLink><span>/</span><NuxtLink to="/cases">客户案例</NuxtLink
|
||
><span>/</span><b>{{ caseStudy.industry }}</b>
|
||
</nav>
|
||
<div class="detail-hero-grid">
|
||
<div class="detail-hero-copy">
|
||
<div class="case-meta">
|
||
<span>{{ caseStudy.industry }}</span
|
||
><span>{{ caseStudy.client }}</span
|
||
><span>合作周期 {{ caseStudy.duration }}</span>
|
||
</div>
|
||
<h1>{{ caseStudy.title }}</h1>
|
||
<p>{{ caseStudy.description }}</p>
|
||
<button
|
||
class="primary-button"
|
||
type="button"
|
||
@click="requestSimilarPlan('案例详情 Hero')"
|
||
>
|
||
获取同类行业方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
<div class="detail-hero-result">
|
||
<div class="result-label">PROJECT OUTCOME</div>
|
||
<div class="result-orbit">
|
||
<i></i><i></i><i></i>
|
||
<div>
|
||
<small>核心问题覆盖率</small><strong>88%</strong><span>项目启动前为 11%</span>
|
||
</div>
|
||
</div>
|
||
<div class="result-side result-side-one">
|
||
<strong>+215%</strong><span>官网 AI 来源流量</span>
|
||
</div>
|
||
<div class="result-side result-side-two">
|
||
<strong>+190%</strong><span>精准学员咨询量</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="overview-section">
|
||
<div class="page-width overview-grid">
|
||
<header class="section-heading">
|
||
<p class="section-kicker">01 · 项目背景</p>
|
||
<h2>品牌实力不弱，<br />但没有被 AI 完整理解</h2>
|
||
</header>
|
||
<div class="overview-content">
|
||
<p v-for="paragraph in caseStudy.background" :key="paragraph">{{ paragraph }}</p>
|
||
<aside class="objective-box">
|
||
<strong>客户希望解决</strong>
|
||
<ul>
|
||
<li v-for="objective in caseStudy.objectives" :key="objective">{{ objective }}</li>
|
||
</ul>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="baseline-section">
|
||
<div class="page-width">
|
||
<header class="center-heading">
|
||
<p class="section-kicker">02 · 前期调研</p>
|
||
<h2>先找到品牌没有进入推荐的原因</h2>
|
||
<p>
|
||
项目组选取 150
|
||
个高频问题进行基线测试，并从推荐表现、信息完整度与转化链路三个层面判断问题。
|
||
</p>
|
||
</header>
|
||
<div class="baseline-grid">
|
||
<article
|
||
v-for="(item, index) in caseStudy.baseline"
|
||
:key="item[0]"
|
||
:class="{ wide: index === 4 }"
|
||
>
|
||
<span>0{{ index + 1 }}</span>
|
||
<h3>{{ item[0] }}</h3>
|
||
<p>{{ item[1] }}</p>
|
||
</article>
|
||
</div>
|
||
<div class="baseline-conclusion">
|
||
<span>综合判断</span>
|
||
<p>品牌并非缺少业务实力，而是缺少面向 AI 搜索场景的结构化内容表达和可信信源覆盖。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="solution-detail-section">
|
||
<div class="page-width">
|
||
<header class="solution-detail-heading">
|
||
<div>
|
||
<p class="section-kicker">03 · 解决方案</p>
|
||
<h2>围绕家长完整决策路径，重建内容与信任证据</h2>
|
||
</div>
|
||
<p>
|
||
先完善 AI 可以识别的品牌基础认知，再强化推荐类问题中的信任依据，最后打通咨询转化链路。
|
||
</p>
|
||
</header>
|
||
|
||
<section class="question-framework">
|
||
<div class="subsection-index">A</div>
|
||
<div class="subsection-copy">
|
||
<p>四维全旅程问题库</p>
|
||
<h3>从 150 个基线问题，扩展为 420+ 条真实提问</h3>
|
||
</div>
|
||
<div class="question-grid">
|
||
<article v-for="(item, index) in caseStudy.questionFramework" :key="item.title">
|
||
<span>0{{ index + 1 }}</span>
|
||
<h4>{{ item.title }}</h4>
|
||
<p>{{ item.content }}</p>
|
||
<strong>{{ item.goal }}</strong>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="phase-section">
|
||
<div class="subsection-index">B</div>
|
||
<div class="subsection-copy">
|
||
<p>分阶段内容建设</p>
|
||
<h3>先让品牌稳定出现，再争取推荐优先级</h3>
|
||
</div>
|
||
<div class="phase-list">
|
||
<article v-for="phase in caseStudy.phases" :key="phase.number">
|
||
<span>{{ phase.number }}</span>
|
||
<div>
|
||
<h4>{{ phase.title }}</h4>
|
||
<p>{{ phase.text }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="distribution-section">
|
||
<div class="subsection-index">C</div>
|
||
<div class="subsection-copy">
|
||
<p>可信信源分发</p>
|
||
<h3>建立“权威层—讨论层—平台层”矩阵</h3>
|
||
</div>
|
||
<div class="distribution-map">
|
||
<article v-for="(item, index) in caseStudy.distribution" :key="item[0]">
|
||
<span>0{{ index + 1 }}</span>
|
||
<h4>{{ item[0] }}</h4>
|
||
<strong>{{ item[1] }}</strong>
|
||
<p>{{ item[2] }}</p>
|
||
</article>
|
||
<div class="distribution-center">
|
||
<small>同一套</small><strong>品牌事实</strong><span>统一表达</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="monitor-section">
|
||
<div class="subsection-index">D</div>
|
||
<div class="subsection-copy">
|
||
<p>持续监测与迭代</p>
|
||
<h3>每一轮结果，都进入下一轮内容调整</h3>
|
||
</div>
|
||
<div class="monitor-track">
|
||
<span>问题覆盖率</span><span>品牌提及率</span><span>前三推荐率</span
|
||
><span>信息准确率</span><span>AI 来源流量</span><span>咨询线索质量</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="result-section">
|
||
<div class="page-width">
|
||
<header class="center-heading">
|
||
<p class="section-kicker">04 · 项目成果</p>
|
||
<h2>从“几乎不被推荐”到稳定进入家长决策场景</h2>
|
||
<p>以下指标用于展示项目推进前后的变化，不代表对其他项目作出相同效果承诺。</p>
|
||
</header>
|
||
<div class="result-table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>核心指标</th>
|
||
<th>项目前</th>
|
||
<th>项目后 / 峰值</th>
|
||
<th>变化说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="row in caseStudy.resultTable" :key="row[0]">
|
||
<th>{{ row[0] }}</th>
|
||
<td>{{ row[1] }}</td>
|
||
<td>
|
||
<strong>{{ row[2] }}</strong>
|
||
</td>
|
||
<td>{{ row[3] }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="outcome-grid">
|
||
<article v-for="(outcome, index) in caseStudy.outcomes" :key="outcome[1]">
|
||
<span>0{{ index + 1 }}</span
|
||
><strong>{{ outcome[0] }}</strong>
|
||
<p>{{ outcome[1] }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="detail-summary-section">
|
||
<div class="page-width detail-summary-grid">
|
||
<div class="summary-quote">
|
||
<span>项目复盘</span>
|
||
<blockquote>
|
||
GEO 的价值不是再增加一个投放渠道，而是帮助品牌进入用户做决定之前的那一次提问。
|
||
</blockquote>
|
||
</div>
|
||
<div class="summary-copy">
|
||
<p>
|
||
项目累计产出 210+ 篇合规内容，覆盖教育媒体、垂类平台、家长社区与知识问答平台等 15
|
||
类渠道。
|
||
</p>
|
||
<p>
|
||
AI 来源用户的页面停留时长、课程页访问率与咨询意向优于传统广告流量。项目推进至第 4
|
||
个月时，客户启动年度续约沟通，并新增小学段课程的 GEO 推广需求。
|
||
</p>
|
||
<button
|
||
class="primary-button small"
|
||
type="button"
|
||
@click="requestSimilarPlan('案例总结板块')"
|
||
>
|
||
获取同类方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="related-section">
|
||
<div class="page-width">
|
||
<header class="related-heading">
|
||
<div>
|
||
<p class="section-kicker">其他行业结果</p>
|
||
<h2>不同路径，同样关注业务结果</h2>
|
||
</div>
|
||
<NuxtLink to="/cases">返回全部案例 <AppIcon name="arrow-right" /></NuxtLink>
|
||
</header>
|
||
<div class="related-grid">
|
||
<article v-for="snapshot in resultSnapshots.slice(0, 3)" :key="snapshot.industry">
|
||
<img :src="snapshot.cover" :alt="`${snapshot.industry}案例结果`" />
|
||
<div>
|
||
<span>{{ snapshot.industry }}</span>
|
||
<h3>{{ snapshot.title }}</h3>
|
||
<strong>{{ snapshot.metric }}</strong>
|
||
<p>{{ snapshot.secondary }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="detail-cta">
|
||
<div class="detail-cta-art" aria-hidden="true"></div>
|
||
<div class="page-width detail-cta-content">
|
||
<p>希望品牌也进入用户的 AI 推荐列表？</p>
|
||
<h2>先做一次可见性诊断，<br />找到最值得优先解决的问题</h2>
|
||
<button
|
||
class="primary-button"
|
||
type="button"
|
||
@click="requestSimilarPlan('案例详情底部 CTA')"
|
||
>
|
||
获取教育行业增长方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<SiteFooter />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.case-detail-page {
|
||
--detail-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);
|
||
}
|
||
.section-kicker {
|
||
margin: 0;
|
||
color: var(--detail-blue);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
}
|
||
.detail-hero {
|
||
position: relative;
|
||
min-height: 690px;
|
||
isolation: isolate;
|
||
background: #eff6ff;
|
||
}
|
||
.detail-hero-mesh {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(circle at 79% 38%, rgba(72, 156, 255, 0.26), transparent 28%),
|
||
linear-gradient(112deg, #f8fbff, #e6f1ff);
|
||
}
|
||
.detail-hero-mesh::after {
|
||
position: absolute;
|
||
inset: 0;
|
||
content: '';
|
||
opacity: 0.18;
|
||
background-image:
|
||
linear-gradient(rgba(55, 125, 214, 0.08) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(55, 125, 214, 0.08) 1px, transparent 1px);
|
||
background-size: 58px 58px;
|
||
mask-image: linear-gradient(90deg, transparent, #000);
|
||
}
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding-top: 28px;
|
||
color: #8291a4;
|
||
font-size: 11px;
|
||
}
|
||
.breadcrumb a {
|
||
color: #71849a;
|
||
text-decoration: none;
|
||
}
|
||
.breadcrumb a:hover {
|
||
color: #247ce9;
|
||
}
|
||
.breadcrumb b {
|
||
color: #4d6e93;
|
||
font-weight: 600;
|
||
}
|
||
.detail-hero-grid {
|
||
min-height: 625px;
|
||
display: grid;
|
||
grid-template-columns: 1.05fr 0.95fr;
|
||
align-items: center;
|
||
gap: 70px;
|
||
padding: 35px 0 70px;
|
||
}
|
||
.case-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 9px;
|
||
}
|
||
.case-meta span {
|
||
padding: 7px 10px;
|
||
border: 1px solid rgba(70, 136, 217, 0.18);
|
||
border-radius: 4px;
|
||
color: #597794;
|
||
background: rgba(255, 255, 255, 0.55);
|
||
font-size: 10px;
|
||
}
|
||
.detail-hero-copy h1 {
|
||
max-width: 780px;
|
||
margin: 22px 0 0;
|
||
color: #344359;
|
||
font-size: clamp(42px, 4vw, 65px);
|
||
letter-spacing: -0.055em;
|
||
line-height: 1.2;
|
||
}
|
||
.detail-hero-copy > p {
|
||
max-width: 690px;
|
||
margin: 23px 0 0;
|
||
color: #68798e;
|
||
font-size: 15px;
|
||
line-height: 1.85;
|
||
}
|
||
.detail-hero-copy .primary-button {
|
||
margin-top: 31px;
|
||
}
|
||
.detail-hero-result {
|
||
position: relative;
|
||
width: min(520px, 100%);
|
||
aspect-ratio: 1;
|
||
justify-self: end;
|
||
}
|
||
.result-label {
|
||
position: absolute;
|
||
top: 5%;
|
||
right: 6%;
|
||
color: #7895b6;
|
||
font-size: 9px;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
.result-orbit {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 360px;
|
||
height: 360px;
|
||
border: 1px dashed rgba(48, 132, 232, 0.36);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.result-orbit::before {
|
||
position: absolute;
|
||
inset: 45px;
|
||
content: '';
|
||
border: 1px solid rgba(52, 135, 232, 0.24);
|
||
border-radius: 50%;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(255, 255, 255, 0.9),
|
||
rgba(128, 195, 255, 0.19) 60%,
|
||
transparent
|
||
);
|
||
}
|
||
.result-orbit > div {
|
||
position: absolute;
|
||
z-index: 3;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 190px;
|
||
height: 190px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 13px solid rgba(255, 255, 255, 0.64);
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
background: linear-gradient(145deg, #2c82f0, #48b8e8);
|
||
box-shadow: 0 25px 48px rgba(37, 121, 225, 0.29);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.result-orbit small {
|
||
font-size: 10px;
|
||
opacity: 0.8;
|
||
}
|
||
.result-orbit strong {
|
||
margin-top: 6px;
|
||
font-size: 42px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.result-orbit span {
|
||
margin-top: 3px;
|
||
font-size: 9px;
|
||
opacity: 0.75;
|
||
}
|
||
.result-orbit i {
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 3px solid #fff;
|
||
border-radius: 50%;
|
||
background: #2e84ef;
|
||
box-shadow: 0 6px 15px rgba(42, 127, 232, 0.32);
|
||
}
|
||
.result-orbit i:nth-child(1) {
|
||
top: -7px;
|
||
left: 50%;
|
||
}
|
||
.result-orbit i:nth-child(2) {
|
||
right: 7%;
|
||
bottom: 18%;
|
||
background: #4fc2e8;
|
||
}
|
||
.result-orbit i:nth-child(3) {
|
||
bottom: 5%;
|
||
left: 18%;
|
||
background: #776ff0;
|
||
}
|
||
.result-side {
|
||
position: absolute;
|
||
z-index: 4;
|
||
min-width: 140px;
|
||
padding: 17px;
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
border-radius: 12px 4px 12px 4px;
|
||
background: rgba(255, 255, 255, 0.82);
|
||
box-shadow: 0 16px 35px rgba(53, 112, 183, 0.13);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.result-side strong {
|
||
display: block;
|
||
color: #277fec;
|
||
font-size: 25px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.result-side span {
|
||
color: #74869b;
|
||
font-size: 9px;
|
||
}
|
||
.result-side-one {
|
||
top: 18%;
|
||
right: 0;
|
||
}
|
||
.result-side-two {
|
||
bottom: 16%;
|
||
left: 0;
|
||
}
|
||
.overview-section {
|
||
padding: 116px 0 130px;
|
||
}
|
||
.overview-grid {
|
||
display: grid;
|
||
grid-template-columns: 0.72fr 1.28fr;
|
||
gap: 95px;
|
||
align-items: start;
|
||
}
|
||
.section-heading {
|
||
position: sticky;
|
||
top: 105px;
|
||
}
|
||
.section-heading h2,
|
||
.center-heading h2,
|
||
.solution-detail-heading h2,
|
||
.related-heading h2 {
|
||
margin: 15px 0 0;
|
||
color: #344359;
|
||
font-size: clamp(32px, 3vw, 48px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.28;
|
||
}
|
||
.overview-content > p {
|
||
margin: 0 0 20px;
|
||
color: #66788e;
|
||
font-size: 15px;
|
||
line-height: 1.95;
|
||
}
|
||
.objective-box {
|
||
margin-top: 35px;
|
||
padding: 30px;
|
||
border-radius: 15px 5px 15px 5px;
|
||
background: #eef6ff;
|
||
}
|
||
.objective-box > strong {
|
||
color: #3c5877;
|
||
font-size: 13px;
|
||
}
|
||
.objective-box ul {
|
||
display: grid;
|
||
gap: 13px;
|
||
margin: 18px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.objective-box li {
|
||
position: relative;
|
||
padding-left: 18px;
|
||
color: #6b7d92;
|
||
font-size: 13px;
|
||
line-height: 1.65;
|
||
}
|
||
.objective-box li::before {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 0;
|
||
width: 6px;
|
||
height: 6px;
|
||
content: '';
|
||
border-radius: 50%;
|
||
background: #3d8fee;
|
||
}
|
||
.baseline-section {
|
||
padding: 110px 0 126px;
|
||
background: #eef7ff;
|
||
}
|
||
.center-heading {
|
||
max-width: 820px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.center-heading > p:last-child {
|
||
max-width: 670px;
|
||
margin: 18px auto 0;
|
||
color: #748498;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
.baseline-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
margin-top: 60px;
|
||
}
|
||
.baseline-grid article {
|
||
min-height: 205px;
|
||
padding: 28px;
|
||
border-radius: 14px 5px 14px 5px;
|
||
background: rgba(255, 255, 255, 0.72);
|
||
box-shadow: inset 0 1px 0 #fff;
|
||
}
|
||
.baseline-grid article.wide {
|
||
grid-column: span 4;
|
||
min-height: 135px;
|
||
}
|
||
.baseline-grid span {
|
||
color: #8ba8c7;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
}
|
||
.baseline-grid h3 {
|
||
margin: 34px 0 0;
|
||
color: #3c526b;
|
||
font-size: 17px;
|
||
}
|
||
.baseline-grid p {
|
||
margin: 10px 0 0;
|
||
color: #77879a;
|
||
font-size: 12px;
|
||
line-height: 1.65;
|
||
}
|
||
.baseline-grid article.wide h3 {
|
||
margin-top: 20px;
|
||
}
|
||
.baseline-conclusion {
|
||
display: grid;
|
||
grid-template-columns: 120px 1fr;
|
||
align-items: center;
|
||
gap: 28px;
|
||
margin-top: 25px;
|
||
padding: 27px 30px;
|
||
border-left: 3px solid #358bf0;
|
||
background: rgba(255, 255, 255, 0.58);
|
||
}
|
||
.baseline-conclusion span {
|
||
color: #2f7edc;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.baseline-conclusion p {
|
||
margin: 0;
|
||
color: #61768f;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
.solution-detail-section {
|
||
padding: 116px 0 132px;
|
||
}
|
||
.solution-detail-heading {
|
||
display: grid;
|
||
grid-template-columns: 1.18fr 0.82fr;
|
||
align-items: end;
|
||
gap: 80px;
|
||
}
|
||
.solution-detail-heading > p {
|
||
margin: 0 0 6px;
|
||
color: #748398;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
}
|
||
.question-framework,
|
||
.phase-section,
|
||
.distribution-section,
|
||
.monitor-section {
|
||
display: grid;
|
||
grid-template-columns: 70px 0.62fr 1.38fr;
|
||
gap: 35px;
|
||
padding: 78px 0;
|
||
border-bottom: 1px solid #e0e8f1;
|
||
}
|
||
.subsection-index {
|
||
color: rgba(65, 126, 199, 0.2);
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
.subsection-copy > p {
|
||
margin: 2px 0 0;
|
||
color: #2c80e9;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.subsection-copy h3 {
|
||
margin: 13px 0 0;
|
||
color: #3a4e66;
|
||
font-size: 24px;
|
||
line-height: 1.45;
|
||
}
|
||
.question-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 13px;
|
||
}
|
||
.question-grid article {
|
||
min-height: 205px;
|
||
padding: 25px;
|
||
border-radius: 13px 4px 13px 4px;
|
||
background: #f1f6fc;
|
||
}
|
||
.question-grid span {
|
||
color: #93abc4;
|
||
font-size: 9px;
|
||
}
|
||
.question-grid h4 {
|
||
margin: 25px 0 0;
|
||
color: #3d536d;
|
||
font-size: 17px;
|
||
}
|
||
.question-grid p {
|
||
margin: 9px 0 0;
|
||
color: #77879b;
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
}
|
||
.question-grid strong {
|
||
display: block;
|
||
margin-top: 16px;
|
||
color: #4b80b9;
|
||
font-size: 10px;
|
||
line-height: 1.55;
|
||
}
|
||
.phase-list {
|
||
display: grid;
|
||
gap: 15px;
|
||
}
|
||
.phase-list article {
|
||
display: grid;
|
||
grid-template-columns: 54px 1fr;
|
||
gap: 20px;
|
||
padding: 27px;
|
||
border-left: 2px solid #4b98ef;
|
||
background: #f3f8fd;
|
||
}
|
||
.phase-list > article > span {
|
||
color: #4089df;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
}
|
||
.phase-list h4 {
|
||
margin: 0;
|
||
color: #3e536b;
|
||
font-size: 17px;
|
||
}
|
||
.phase-list p {
|
||
margin: 9px 0 0;
|
||
color: #75869a;
|
||
font-size: 12px;
|
||
line-height: 1.7;
|
||
}
|
||
.distribution-map {
|
||
position: relative;
|
||
min-height: 360px;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.distribution-map article {
|
||
position: relative;
|
||
z-index: 2;
|
||
min-height: 230px;
|
||
padding: 27px 22px;
|
||
border: 1px solid #e0eaf5;
|
||
border-radius: 14px 5px 14px 5px;
|
||
background: rgba(255, 255, 255, 0.88);
|
||
box-shadow: 0 16px 32px rgba(60, 118, 189, 0.09);
|
||
}
|
||
.distribution-map article > span {
|
||
color: #95abc4;
|
||
font-size: 9px;
|
||
}
|
||
.distribution-map h4 {
|
||
margin: 24px 0 0;
|
||
color: #3d536c;
|
||
font-size: 18px;
|
||
}
|
||
.distribution-map article strong {
|
||
display: block;
|
||
margin-top: 10px;
|
||
color: #3784df;
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
}
|
||
.distribution-map article p {
|
||
margin: 10px 0 0;
|
||
color: #7a899b;
|
||
font-size: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
.distribution-center {
|
||
position: absolute;
|
||
z-index: 3;
|
||
top: 0;
|
||
left: 50%;
|
||
width: 112px;
|
||
height: 112px;
|
||
display: grid;
|
||
place-content: center;
|
||
justify-items: center;
|
||
border: 8px solid #fff;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
background: linear-gradient(145deg, #3185ee, #50bce7);
|
||
box-shadow: 0 17px 32px rgba(40, 127, 228, 0.25);
|
||
transform: translate(-50%, -36%);
|
||
}
|
||
.distribution-center small,
|
||
.distribution-center span {
|
||
font-size: 8px;
|
||
opacity: 0.73;
|
||
}
|
||
.distribution-center strong {
|
||
margin: 3px 0;
|
||
font-size: 14px;
|
||
}
|
||
.monitor-track {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
gap: 11px;
|
||
}
|
||
.monitor-track span {
|
||
padding: 12px 15px;
|
||
border-radius: 5px;
|
||
color: #557596;
|
||
background: #eef6ff;
|
||
font-size: 11px;
|
||
}
|
||
.result-section {
|
||
padding: 112px 0 130px;
|
||
background: #eef7ff;
|
||
}
|
||
.result-table-wrap {
|
||
margin-top: 58px;
|
||
overflow-x: auto;
|
||
border-radius: 15px 5px 15px 5px;
|
||
box-shadow: 0 22px 50px rgba(59, 117, 186, 0.1);
|
||
}
|
||
.result-table-wrap table {
|
||
width: 100%;
|
||
min-width: 900px;
|
||
border-collapse: collapse;
|
||
background: rgba(255, 255, 255, 0.88);
|
||
}
|
||
.result-table-wrap th,
|
||
.result-table-wrap td {
|
||
padding: 19px 22px;
|
||
border-bottom: 1px solid #e1ebf5;
|
||
color: #6d7e92;
|
||
font-size: 11px;
|
||
line-height: 1.55;
|
||
text-align: left;
|
||
}
|
||
.result-table-wrap thead th {
|
||
color: #47617e;
|
||
background: #e3f0fd;
|
||
font-size: 10px;
|
||
}
|
||
.result-table-wrap tbody th {
|
||
color: #405873;
|
||
font-weight: 600;
|
||
}
|
||
.result-table-wrap td strong {
|
||
color: #267eec;
|
||
font-size: 14px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.outcome-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 14px;
|
||
margin-top: 26px;
|
||
}
|
||
.outcome-grid article {
|
||
min-height: 170px;
|
||
padding: 25px;
|
||
border-radius: 13px 4px 13px 4px;
|
||
background: rgba(255, 255, 255, 0.68);
|
||
}
|
||
.outcome-grid span {
|
||
color: #9bb0c7;
|
||
font-size: 9px;
|
||
}
|
||
.outcome-grid strong {
|
||
display: block;
|
||
margin-top: 27px;
|
||
color: #287fec;
|
||
font-size: 22px;
|
||
}
|
||
.outcome-grid p {
|
||
margin: 7px 0 0;
|
||
color: #728298;
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
}
|
||
.detail-summary-section {
|
||
padding: 112px 0 126px;
|
||
}
|
||
.detail-summary-grid {
|
||
display: grid;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
gap: 85px;
|
||
align-items: center;
|
||
}
|
||
.summary-quote {
|
||
padding: 48px;
|
||
border-radius: 7px 20px 7px 20px;
|
||
color: #fff;
|
||
background: linear-gradient(135deg, #236fcf, #42aee3);
|
||
box-shadow: 0 26px 55px rgba(37, 111, 203, 0.2);
|
||
}
|
||
.summary-quote > span {
|
||
font-size: 10px;
|
||
letter-spacing: 0.13em;
|
||
opacity: 0.72;
|
||
}
|
||
.summary-quote blockquote {
|
||
margin: 30px 0 0;
|
||
font-size: 27px;
|
||
font-weight: 600;
|
||
line-height: 1.55;
|
||
}
|
||
.summary-copy p {
|
||
margin: 0 0 20px;
|
||
color: #6d7e92;
|
||
font-size: 14px;
|
||
line-height: 1.85;
|
||
}
|
||
.summary-copy .primary-button {
|
||
margin-top: 11px;
|
||
}
|
||
.related-section {
|
||
padding: 108px 0 124px;
|
||
background: #f2f7fd;
|
||
}
|
||
.related-heading {
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: space-between;
|
||
gap: 30px;
|
||
}
|
||
.related-heading > a {
|
||
padding-bottom: 5px;
|
||
border-bottom: 1px solid #91bce9;
|
||
color: #287ce4;
|
||
font-size: 12px;
|
||
text-decoration: none;
|
||
}
|
||
.related-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
margin-top: 44px;
|
||
}
|
||
.related-grid article {
|
||
overflow: hidden;
|
||
border-radius: 14px 5px 14px 5px;
|
||
background: #fff;
|
||
transition:
|
||
transform 0.24s,
|
||
box-shadow 0.24s;
|
||
}
|
||
.related-grid article:hover {
|
||
box-shadow: 0 20px 40px rgba(60, 119, 189, 0.13);
|
||
transform: translateY(-5px);
|
||
}
|
||
.related-grid img {
|
||
width: 100%;
|
||
height: 175px;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
.related-grid article > div {
|
||
padding: 24px;
|
||
}
|
||
.related-grid span {
|
||
color: #3b85dd;
|
||
font-size: 9px;
|
||
}
|
||
.related-grid h3 {
|
||
min-height: 56px;
|
||
margin: 12px 0 0;
|
||
color: #3b4f67;
|
||
font-size: 17px;
|
||
line-height: 1.55;
|
||
}
|
||
.related-grid strong {
|
||
display: block;
|
||
margin-top: 18px;
|
||
color: #277fec;
|
||
font-size: 23px;
|
||
}
|
||
.related-grid p {
|
||
margin: 5px 0 0;
|
||
color: #7b8a9c;
|
||
font-size: 10px;
|
||
}
|
||
.detail-cta {
|
||
position: relative;
|
||
min-height: 430px;
|
||
display: grid;
|
||
place-items: center;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
}
|
||
.detail-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;
|
||
}
|
||
.detail-cta-content {
|
||
padding: 75px 0;
|
||
text-align: center;
|
||
}
|
||
.detail-cta-content > p {
|
||
margin: 0;
|
||
color: #237df0;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.detail-cta-content h2 {
|
||
margin: 17px 0 0;
|
||
color: #2f75cc;
|
||
font-size: clamp(32px, 3.2vw, 50px);
|
||
letter-spacing: -0.045em;
|
||
line-height: 1.3;
|
||
}
|
||
.detail-cta-content .primary-button {
|
||
margin-top: 29px;
|
||
}
|
||
@media (max-width: 980px) {
|
||
.detail-hero-grid,
|
||
.overview-grid,
|
||
.solution-detail-heading,
|
||
.detail-summary-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.detail-hero-grid {
|
||
gap: 25px;
|
||
padding-top: 58px;
|
||
}
|
||
.detail-hero-result {
|
||
justify-self: center;
|
||
}
|
||
.section-heading {
|
||
position: static;
|
||
}
|
||
.overview-grid {
|
||
gap: 40px;
|
||
}
|
||
.baseline-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.baseline-grid article.wide {
|
||
grid-column: span 2;
|
||
}
|
||
.solution-detail-heading {
|
||
gap: 14px;
|
||
}
|
||
.solution-detail-heading > p {
|
||
margin: 0;
|
||
}
|
||
.question-framework,
|
||
.phase-section,
|
||
.distribution-section,
|
||
.monitor-section {
|
||
grid-template-columns: 60px 1fr;
|
||
}
|
||
.question-grid,
|
||
.phase-list,
|
||
.distribution-map,
|
||
.monitor-track {
|
||
grid-column: 2;
|
||
}
|
||
.outcome-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.related-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.related-grid article:last-child {
|
||
display: none;
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.breadcrumb {
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
}
|
||
.detail-hero-copy h1 {
|
||
font-size: clamp(37px, 10vw, 49px);
|
||
}
|
||
.detail-hero-copy > p {
|
||
font-size: 14px;
|
||
}
|
||
.detail-hero-result {
|
||
aspect-ratio: 0.95;
|
||
}
|
||
.result-orbit {
|
||
width: 310px;
|
||
height: 310px;
|
||
}
|
||
.result-orbit > div {
|
||
width: 150px;
|
||
height: 150px;
|
||
border-width: 10px;
|
||
}
|
||
.result-orbit strong {
|
||
font-size: 34px;
|
||
}
|
||
.result-side {
|
||
min-width: 117px;
|
||
padding: 13px;
|
||
}
|
||
.result-side strong {
|
||
font-size: 20px;
|
||
}
|
||
.overview-section,
|
||
.baseline-section,
|
||
.solution-detail-section,
|
||
.result-section,
|
||
.detail-summary-section,
|
||
.related-section {
|
||
padding-top: 76px;
|
||
padding-bottom: 86px;
|
||
}
|
||
.objective-box {
|
||
padding: 24px 20px;
|
||
}
|
||
.baseline-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.baseline-grid article.wide {
|
||
grid-column: auto;
|
||
}
|
||
.baseline-conclusion {
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
}
|
||
.question-framework,
|
||
.phase-section,
|
||
.distribution-section,
|
||
.monitor-section {
|
||
grid-template-columns: 38px 1fr;
|
||
gap: 15px;
|
||
padding: 55px 0;
|
||
}
|
||
.subsection-index {
|
||
font-size: 38px;
|
||
}
|
||
.question-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.distribution-map {
|
||
grid-template-columns: 1fr;
|
||
min-height: auto;
|
||
padding-top: 70px;
|
||
}
|
||
.distribution-map article {
|
||
min-height: 170px;
|
||
}
|
||
.distribution-center {
|
||
top: 0;
|
||
}
|
||
.monitor-track span {
|
||
padding: 10px;
|
||
}
|
||
.outcome-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.outcome-grid article {
|
||
min-height: 130px;
|
||
}
|
||
.summary-quote {
|
||
padding: 34px 24px;
|
||
}
|
||
.summary-quote blockquote {
|
||
font-size: 22px;
|
||
}
|
||
.related-heading {
|
||
align-items: start;
|
||
flex-direction: column;
|
||
}
|
||
.related-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.related-grid article:last-child {
|
||
display: block;
|
||
}
|
||
.detail-cta {
|
||
min-height: 390px;
|
||
}
|
||
.detail-cta-content h2 br {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|