929 lines
22 KiB
Vue
929 lines
22 KiB
Vue
<script setup>
|
||
import SiteHeader from '~/components/site/SiteHeader.vue'
|
||
import SiteFooter from '~/components/site/SiteFooter.vue'
|
||
|
||
const activeIndustry = ref('enterprise')
|
||
const { openConsultation } = useConsultation()
|
||
|
||
useHead({
|
||
title: '行业解决方案｜大马棒·云途全域 GEO',
|
||
meta: [
|
||
{
|
||
name: 'description',
|
||
content:
|
||
'面向企业服务、教育培训、本地生活、医疗健康与电商零售行业，提供基于真实用户决策路径的 GEO 获客转化方案。'
|
||
}
|
||
]
|
||
})
|
||
|
||
const industries = [
|
||
{
|
||
id: 'enterprise',
|
||
name: '企业服务',
|
||
summary: 'SaaS/软件/企服公司的获客与转化增长方案',
|
||
icon: '/images/lanhu/slices/切图 41@2x.png',
|
||
color: '#3b82ff',
|
||
question: 'SaaS/软件/企服公司 最头疼什么？',
|
||
answer: '决策动不动几个月，客户到处比方案，搜一圈下来你连备选名单都没进。',
|
||
tacticTitle: '不追流量，追“信任”。',
|
||
tactic:
|
||
'B 端采购者搜的是问题，不是品牌名。我们在行业媒体做背书，在“怎么解决XX问题”的页面里埋你的方案，让客户在比选阶段就看到你。',
|
||
actions: [
|
||
'行业媒体深度稿+创始人访谈，拉高品牌水位',
|
||
'占住“行业解决方案”“系统怎么选”这类长尾词',
|
||
'持续输出白皮书、案例复盘，养客户信任'
|
||
],
|
||
imageText: ['长尾关键词布局1200+', '有效线索成本直降45%']
|
||
},
|
||
{
|
||
id: 'education',
|
||
name: '教育培训',
|
||
summary: '教育机构招生引流与品牌口碑建设方案',
|
||
icon: '/images/lanhu/slices/切图 42@2x.png',
|
||
color: '#20c781',
|
||
question: '教育机构 最担心什么？',
|
||
answer: '家长会反复搜索口碑、课程效果和真实评价，任何一处信息缺口都会影响咨询。',
|
||
tacticTitle: '把“别人怎么说你”系统管理起来。',
|
||
tactic:
|
||
'围绕择校指南、课程比较、避坑经验与真实学习反馈，覆盖家长从了解、比较到报名咨询的完整路径。',
|
||
actions: [
|
||
'构建真实学员口碑内容矩阵，覆盖主流搜索与内容平台',
|
||
'围绕“机构怎么样”“课程值得吗”等问题精准布局',
|
||
'用场景化内容引导咨询，让搜索流量进入课程承接页'
|
||
],
|
||
imageText: ['口碑内容矩阵覆盖800+', '试听咨询率提升38%']
|
||
},
|
||
{
|
||
id: 'local-life',
|
||
name: '本地生活',
|
||
summary: '餐饮美业休闲娱乐门店引流获客方案',
|
||
icon: '/images/lanhu/slices/切图 43@2x.png',
|
||
color: '#ff7a2f',
|
||
question: '本地生活门店 最怕什么？',
|
||
answer: '用户就在附近搜，搜完就决定去哪一家；搜不到你，就等于把客户送给隔壁。',
|
||
tacticTitle: '不是做大曝光，而是让附近的人搜得到你。',
|
||
tactic:
|
||
'围绕真实消费场景，在本地生活平台、内容社区和短视频渠道建立稳定覆盖，让用户从看到、心动到到店之间少走一步。',
|
||
actions: [
|
||
'覆盖本地生活平台内容，占住同城与附近搜索位置',
|
||
'组合同城达人和真实顾客内容，避免假种草',
|
||
'明确位置、场景、产品与消费理由，缩短到店路径'
|
||
],
|
||
imageText: ['同城搜索覆盖95%', '到店咨询量提升170%']
|
||
},
|
||
{
|
||
id: 'healthcare',
|
||
name: '医疗健康',
|
||
summary: '医疗机构品牌信任建设与患者获取方案',
|
||
icon: '/images/lanhu/slices/切图 44@2x.png',
|
||
color: '#ff525f',
|
||
question: '医疗健康机构 最关键什么？',
|
||
answer: '用户先相信你的专业，才敢把健康交给你；同时内容表达必须稳定合规。',
|
||
tacticTitle: '不做擦边推广，建设合规权威形象。',
|
||
tactic:
|
||
'以合规科普为核心，把专业能力转化为用户看得懂、AI 能识别的内容，在用户搜索健康问题时持续呈现准确、稳定的专业声音。',
|
||
actions: [
|
||
'体系化输出合规科普内容，强化专业人设与核心 IP',
|
||
'覆盖用户从“查症状”到“选机构”的全流程问题',
|
||
'系统维护公开口碑，及时纠正过时与不准确信息'
|
||
],
|
||
imageText: ['合规科普体系搭建', '品牌信任持续沉淀']
|
||
},
|
||
{
|
||
id: 'ecommerce',
|
||
name: '电商零售',
|
||
summary: '电商零售品牌内容种草与转化承接方案',
|
||
icon: '/images/lanhu/slices/切图 45@2x.png',
|
||
color: '#a85cff',
|
||
question: '电商零售品牌 最容易卡在哪里？',
|
||
answer: '平台流量越来越贵，用户被种草后却搜不到品牌内容，信任验证断在站外。',
|
||
tacticTitle: '填满用户主动搜索品牌时看到的内容。',
|
||
tactic:
|
||
'通过种草、测评、使用场景、短视频与直播承接，串起“被种草—主动搜—找到品牌—进入店铺或私域”的完整路径。',
|
||
actions: [
|
||
'全平台种草内容布局，持续提升品牌主动搜索热度',
|
||
'产品测评与使用场景内容，降低理解和决策门槛',
|
||
'把搜索流量承接至店铺、直播间与私域，沉淀复购用户'
|
||
],
|
||
imageText: ['内容资产沉淀30000+', '自然流量占比提升60%']
|
||
}
|
||
]
|
||
|
||
const activeDetail = computed(
|
||
() => industries.find((industry) => industry.id === activeIndustry.value) || industries[0]
|
||
)
|
||
|
||
function selectIndustry(id) {
|
||
activeIndustry.value = id
|
||
document.getElementById('industry-plan')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
|
||
}
|
||
|
||
function requestIndustryPlan(industry, source) {
|
||
openConsultation({ title: `获取${industry}行业方案`, industry, source })
|
||
}
|
||
|
||
function requestCustomPlan(source) {
|
||
openConsultation({ title: '咨询定制行业方案', source })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="solutions-page">
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<SiteHeader />
|
||
|
||
<main id="main-content">
|
||
<section class="solutions-hero">
|
||
<div class="page-width solutions-hero-inner">
|
||
<div class="solutions-hero-copy">
|
||
<p class="hero-badge"><span></span>专业营销增长服务商</p>
|
||
<h1>让每一个行业<br />都有一套自己的增长打法</h1>
|
||
<p>
|
||
深度理解不同行业的增长痛点与用户决策路径，基于真实用户决策路径，匹配针对性的获客转化策略。
|
||
</p>
|
||
<button
|
||
class="solutions-primary-button"
|
||
type="button"
|
||
@click="requestCustomPlan('行业解决方案页 Hero')"
|
||
>
|
||
获取专属方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
|
||
<img
|
||
class="solutions-hero-art"
|
||
src="/images/lanhu/slices/组 352@2x.png"
|
||
alt="行业增长策略视觉"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="industry-overview">
|
||
<div class="page-width">
|
||
<header class="solutions-section-heading">
|
||
<h2>哪些企业必须拥有<span>自己的增长打法</span></h2>
|
||
<p>Which Enterprises Must Develop Their Own Growth Strategies?</p>
|
||
</header>
|
||
|
||
<div class="industry-card-grid">
|
||
<button
|
||
v-for="industry in industries"
|
||
:key="industry.id"
|
||
class="industry-card"
|
||
type="button"
|
||
:class="{ active: activeIndustry === industry.id }"
|
||
:style="{ '--industry-color': industry.color }"
|
||
@click="selectIndustry(industry.id)"
|
||
>
|
||
<img :src="industry.icon" :alt="`${industry.name}图标`" />
|
||
<strong>{{ industry.name }}</strong>
|
||
<span>{{ industry.summary }}</span>
|
||
<small>了解更多 <AppIcon name="arrow-right" /></small>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="industry-plan" class="industry-plan-section">
|
||
<div class="page-width">
|
||
<header class="solutions-section-heading">
|
||
<h2>我们如何<span>帮助客户</span></h2>
|
||
<p>How We Support Our Customers</p>
|
||
</header>
|
||
|
||
<div class="industry-plan-layout">
|
||
<div class="industry-tabs" aria-label="行业解决方案切换">
|
||
<button
|
||
v-for="industry in industries"
|
||
:key="`tab-${industry.id}`"
|
||
type="button"
|
||
:class="{ active: activeIndustry === industry.id }"
|
||
@click="activeIndustry = industry.id"
|
||
>
|
||
<img :src="industry.icon" alt="" />
|
||
<span>
|
||
<strong>{{ industry.name }}</strong>
|
||
<small>{{ industry.summary.split('与')[0] }}</small>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
|
||
<Transition name="solution-card" mode="out-in">
|
||
<article :key="activeDetail.id" class="solution-detail-card">
|
||
<div class="question-card">
|
||
<img src="/images/lanhu/slices/切图 39@2x.png" alt="" />
|
||
<div>
|
||
<strong>{{ activeDetail.question }}</strong>
|
||
<p>{{ activeDetail.answer }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-block">
|
||
<h3><span></span>我们怎么打</h3>
|
||
<p>{{ activeDetail.tacticTitle }} {{ activeDetail.tactic }}</p>
|
||
</div>
|
||
|
||
<div class="detail-block">
|
||
<h3><span></span>具体做几件事</h3>
|
||
<ul>
|
||
<li v-for="action in activeDetail.actions" :key="action">{{ action }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="result-visual">
|
||
<img src="/images/lanhu/slices/home-group95-image21@2x.png" alt="" />
|
||
<p>
|
||
<strong>{{ activeDetail.imageText[0] }}</strong>
|
||
<span>{{ activeDetail.imageText[1] }}</span>
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</Transition>
|
||
</div>
|
||
|
||
<div class="plan-actions">
|
||
<button
|
||
class="solutions-primary-button"
|
||
type="button"
|
||
@click="requestIndustryPlan(activeDetail.name, `${activeDetail.name}行业方案板块`)"
|
||
>
|
||
看{{ activeDetail.name }}完整方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
<button
|
||
class="solutions-ghost-button"
|
||
type="button"
|
||
@click="requestCustomPlan('行业方案咨询')"
|
||
>
|
||
立即咨询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="more-industries-section">
|
||
<div class="page-width more-industries-inner">
|
||
<div>
|
||
<h2>没在上面找到你的行业？</h2>
|
||
<p>
|
||
快消、地产、金融、汽车、法律……我们服务过的不止这些。无论你属于什么行业、处于什么发展阶段，我们都会基于你的品牌现状与增长目标，匹配最合适的营销策略。
|
||
</p>
|
||
</div>
|
||
<button
|
||
class="solutions-outline-light"
|
||
type="button"
|
||
@click="requestCustomPlan('更多行业板块')"
|
||
>
|
||
咨询定制方案 <AppIcon name="arrow-right" />
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<SiteFooter />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.solutions-page {
|
||
--solutions-blue: #237df0;
|
||
--solutions-ink: #333947;
|
||
overflow: hidden;
|
||
color: var(--solutions-ink);
|
||
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);
|
||
}
|
||
|
||
.solutions-hero {
|
||
position: relative;
|
||
min-height: 528px;
|
||
display: grid;
|
||
align-items: center;
|
||
isolation: isolate;
|
||
background: linear-gradient(180deg, #f8faff 0%, #f3f7ff 100%);
|
||
}
|
||
|
||
.solutions-hero::after {
|
||
position: absolute;
|
||
z-index: -1;
|
||
inset: 0;
|
||
content: '';
|
||
background: radial-gradient(circle at 55% 45%, rgba(110, 172, 255, 0.16), transparent 28%);
|
||
}
|
||
|
||
.solutions-hero-inner {
|
||
position: relative;
|
||
min-height: 528px;
|
||
display: grid;
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
align-items: center;
|
||
}
|
||
|
||
.solutions-hero-copy {
|
||
position: relative;
|
||
z-index: 2;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.hero-badge {
|
||
width: fit-content;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
margin: 0;
|
||
padding: 8px 13px;
|
||
border: 1px solid rgba(50, 136, 252, 0.34);
|
||
border-radius: 999px;
|
||
color: #287df4;
|
||
background: rgba(255, 255, 255, 0.55);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hero-badge span {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #5fa7ff;
|
||
}
|
||
|
||
.solutions-hero-copy h1 {
|
||
margin: 22px 0 0;
|
||
color: #3c3f48;
|
||
font-size: clamp(38px, 3.7vw, 56px);
|
||
font-weight: 800;
|
||
letter-spacing: 0;
|
||
line-height: 1.43;
|
||
}
|
||
|
||
.solutions-hero-copy > p:not(.hero-badge) {
|
||
max-width: 610px;
|
||
margin: 15px 0 0;
|
||
color: #687386;
|
||
font-size: 16px;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.solutions-primary-button,
|
||
.solutions-ghost-button,
|
||
.solutions-outline-light {
|
||
height: 45px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 0 24px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition:
|
||
transform 0.22s ease,
|
||
box-shadow 0.22s ease,
|
||
border-color 0.22s ease;
|
||
}
|
||
|
||
.solutions-primary-button {
|
||
margin-top: 30px;
|
||
color: #fff;
|
||
background: linear-gradient(100deg, #453cff 0%, #08aef5 100%);
|
||
box-shadow: 0 12px 24px rgba(31, 125, 240, 0.2);
|
||
}
|
||
|
||
.solutions-primary-button:hover,
|
||
.solutions-ghost-button:hover,
|
||
.solutions-outline-light:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.solutions-primary-button:hover {
|
||
box-shadow: 0 16px 30px rgba(31, 125, 240, 0.28);
|
||
}
|
||
|
||
.solutions-hero-art {
|
||
width: min(850px, 63vw);
|
||
justify-self: end;
|
||
transform: translate(70px, -5px);
|
||
filter: drop-shadow(0 28px 36px rgba(36, 123, 224, 0.12));
|
||
}
|
||
|
||
.industry-overview {
|
||
position: relative;
|
||
padding: 77px 0 92px;
|
||
background:
|
||
radial-gradient(circle at 18% 84%, rgba(166, 231, 255, 0.13), transparent 24%),
|
||
radial-gradient(circle at 82% 34%, rgba(252, 205, 232, 0.12), transparent 24%), #fff;
|
||
}
|
||
|
||
.solutions-section-heading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.solutions-section-heading h2 {
|
||
margin: 0;
|
||
color: #3c3f48;
|
||
font-size: clamp(30px, 2.55vw, 43px);
|
||
font-weight: 800;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.solutions-section-heading h2 span {
|
||
color: #287df4;
|
||
}
|
||
|
||
.solutions-section-heading p {
|
||
width: fit-content;
|
||
margin: 14px auto 0;
|
||
color: #9da3ad;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.industry-card-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 16px;
|
||
margin-top: 44px;
|
||
}
|
||
|
||
.industry-card {
|
||
min-height: 240px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
padding: 23px 23px 21px;
|
||
border: 1px solid #cad8e8;
|
||
border-radius: 11px;
|
||
color: #4b5564;
|
||
background: rgba(255, 255, 255, 0.72);
|
||
text-align: left;
|
||
transition:
|
||
transform 0.22s ease,
|
||
box-shadow 0.22s ease,
|
||
border-color 0.22s ease,
|
||
background 0.22s ease;
|
||
}
|
||
|
||
.industry-card:hover,
|
||
.industry-card.active {
|
||
border-color: color-mix(in srgb, var(--industry-color), #ffffff 18%);
|
||
background: #fff;
|
||
box-shadow: 0 18px 42px rgba(68, 120, 190, 0.12);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.industry-card img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.industry-card strong {
|
||
margin-top: 20px;
|
||
color: #343944;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.industry-card > span {
|
||
min-height: 45px;
|
||
margin-top: 10px;
|
||
color: #606a79;
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.industry-card small {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
margin-top: auto;
|
||
color: var(--industry-color);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.industry-plan-section {
|
||
padding: 82px 0 95px;
|
||
background: linear-gradient(180deg, #f6fbff 0%, #f3f7fb 100%);
|
||
}
|
||
|
||
.industry-plan-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(330px, 1fr) minmax(520px, 1.08fr);
|
||
gap: 18px;
|
||
margin-top: 42px;
|
||
}
|
||
|
||
.industry-tabs {
|
||
display: grid;
|
||
gap: 18px;
|
||
}
|
||
|
||
.industry-tabs button {
|
||
min-height: 105px;
|
||
display: grid;
|
||
grid-template-columns: 66px 1fr;
|
||
align-items: center;
|
||
gap: 20px;
|
||
padding: 0 25px;
|
||
border: 1px solid transparent;
|
||
border-radius: 12px;
|
||
color: #3d4654;
|
||
background: #fff;
|
||
text-align: left;
|
||
box-shadow: 0 10px 24px rgba(87, 124, 169, 0.035);
|
||
transition:
|
||
border-color 0.22s ease,
|
||
background 0.22s ease,
|
||
box-shadow 0.22s ease,
|
||
transform 0.22s ease;
|
||
}
|
||
|
||
.industry-tabs button.active {
|
||
border-color: #4087ff;
|
||
background: #edf5ff;
|
||
box-shadow: 0 16px 34px rgba(44, 124, 240, 0.1);
|
||
}
|
||
|
||
.industry-tabs button:hover {
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.industry-tabs img {
|
||
width: 54px;
|
||
height: 54px;
|
||
}
|
||
|
||
.industry-tabs strong,
|
||
.industry-tabs small {
|
||
display: block;
|
||
}
|
||
|
||
.industry-tabs strong {
|
||
color: #353b46;
|
||
font-size: 19px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.industry-tabs small {
|
||
margin-top: 7px;
|
||
color: #687282;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.solution-detail-card {
|
||
min-height: 600px;
|
||
padding: 52px 28px 30px;
|
||
border-radius: 13px;
|
||
background: #fff;
|
||
box-shadow: 0 24px 55px rgba(65, 100, 143, 0.08);
|
||
}
|
||
|
||
.question-card {
|
||
display: grid;
|
||
grid-template-columns: 60px 1fr;
|
||
gap: 17px;
|
||
align-items: center;
|
||
padding: 23px 28px;
|
||
border-radius: 7px;
|
||
background: linear-gradient(90deg, rgba(244, 249, 255, 0.95), rgba(255, 255, 255, 0.9));
|
||
}
|
||
|
||
.question-card img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.question-card strong {
|
||
color: #287df4;
|
||
font-size: 17px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.question-card p {
|
||
margin: 8px 0 0;
|
||
color: #5c8ee8;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.detail-block {
|
||
margin-top: 29px;
|
||
}
|
||
|
||
.detail-block h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11px;
|
||
margin: 0;
|
||
color: #3d4551;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.detail-block h3 span {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 35% 35%, #fff 0 18%, #46a8ff 20% 100%);
|
||
box-shadow: 0 0 0 4px rgba(50, 150, 255, 0.1);
|
||
}
|
||
|
||
.detail-block p {
|
||
margin: 15px 0 0;
|
||
color: #5e6673;
|
||
font-size: 15px;
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.detail-block ul {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin: 16px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.detail-block li {
|
||
position: relative;
|
||
padding-left: 24px;
|
||
color: #5d6775;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.detail-block li::before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
color: #16c781;
|
||
content: '✓';
|
||
font-weight: 800;
|
||
}
|
||
|
||
.result-visual {
|
||
position: relative;
|
||
margin-top: 33px;
|
||
overflow: hidden;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.result-visual img {
|
||
width: 100%;
|
||
height: 172px;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.result-visual p {
|
||
position: absolute;
|
||
top: 34px;
|
||
left: 36px;
|
||
margin: 0;
|
||
color: #2e3540;
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.result-visual strong,
|
||
.result-visual span {
|
||
display: block;
|
||
}
|
||
|
||
.result-visual strong {
|
||
color: #19202b;
|
||
}
|
||
|
||
.result-visual span {
|
||
color: #207af0;
|
||
}
|
||
|
||
.plan-actions {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
margin-top: 42px;
|
||
}
|
||
|
||
.plan-actions .solutions-primary-button {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.solutions-ghost-button {
|
||
min-width: 154px;
|
||
border: 1px solid #8f97a3;
|
||
color: #4d5663;
|
||
background: transparent;
|
||
}
|
||
|
||
.solutions-ghost-button:hover {
|
||
border-color: #247df4;
|
||
color: #247df4;
|
||
}
|
||
|
||
.solution-card-enter-active,
|
||
.solution-card-leave-active {
|
||
transition:
|
||
opacity 0.2s ease,
|
||
transform 0.22s ease;
|
||
}
|
||
|
||
.solution-card-enter-from,
|
||
.solution-card-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
|
||
.more-industries-section {
|
||
padding: 80px 0;
|
||
color: #fff;
|
||
background-color: #1a1a2e !important;
|
||
}
|
||
|
||
.more-industries-inner {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
align-items: center;
|
||
gap: 60px;
|
||
}
|
||
|
||
.more-industries-inner h2 {
|
||
margin: 0;
|
||
color: #fff;
|
||
font-size: clamp(28px, 2.4vw, 40px);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.more-industries-inner p {
|
||
max-width: 800px;
|
||
margin: 18px 0 0;
|
||
color: rgba(255, 255, 255, 0.62);
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.solutions-outline-light {
|
||
min-width: 166px;
|
||
border: 1px solid rgba(255, 255, 255, 0.82);
|
||
color: #fff;
|
||
background: transparent;
|
||
}
|
||
|
||
.solutions-outline-light:hover {
|
||
border-color: #fff;
|
||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
|
||
}
|
||
|
||
@media (max-width: 1180px) {
|
||
.solutions-hero-art {
|
||
width: min(760px, 62vw);
|
||
transform: translate(36px, 0);
|
||
}
|
||
|
||
.industry-card-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.industry-plan-layout {
|
||
grid-template-columns: 0.9fr 1.1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.solutions-page :deep(.subsite-header) {
|
||
height: 58px;
|
||
}
|
||
|
||
.solutions-hero,
|
||
.solutions-hero-inner {
|
||
min-height: auto;
|
||
}
|
||
|
||
.solutions-hero-inner {
|
||
grid-template-columns: 1fr;
|
||
padding-top: 70px;
|
||
padding-bottom: 60px;
|
||
}
|
||
|
||
.solutions-hero-art {
|
||
width: min(680px, 100%);
|
||
justify-self: center;
|
||
margin-top: 28px;
|
||
transform: none;
|
||
}
|
||
|
||
.industry-card-grid,
|
||
.industry-plan-layout,
|
||
.more-industries-inner {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.industry-tabs {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.industry-tabs button {
|
||
min-height: 92px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
.solutions-hero-inner {
|
||
padding-top: 48px;
|
||
}
|
||
|
||
.solutions-hero-copy h1 {
|
||
font-size: clamp(31px, 9vw, 40px);
|
||
line-height: 1.38;
|
||
}
|
||
|
||
.solutions-hero-copy > p:not(.hero-badge) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.solutions-hero-art {
|
||
width: 135%;
|
||
margin-left: -20%;
|
||
}
|
||
|
||
.industry-overview,
|
||
.industry-plan-section {
|
||
padding-top: 62px;
|
||
padding-bottom: 68px;
|
||
}
|
||
|
||
.industry-card-grid {
|
||
gap: 13px;
|
||
}
|
||
|
||
.industry-card {
|
||
min-height: 205px;
|
||
}
|
||
|
||
.industry-tabs {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.solution-detail-card {
|
||
min-height: auto;
|
||
padding: 24px 18px;
|
||
}
|
||
|
||
.question-card {
|
||
grid-template-columns: 48px 1fr;
|
||
padding: 18px;
|
||
}
|
||
|
||
.question-card img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
.result-visual img {
|
||
height: 150px;
|
||
}
|
||
|
||
.result-visual p {
|
||
top: 26px;
|
||
left: 22px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.plan-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.more-industries-section {
|
||
padding: 58px 0;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.solutions-page *,
|
||
.solutions-page *::before,
|
||
.solutions-page *::after {
|
||
scroll-behavior: auto !important;
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
</style>
|