761 lines
20 KiB
Vue
761 lines
20 KiB
Vue
<template>
|
||
<div class="decision-case-page" :class="{ 'has-fixed-tabs': isTabsFixed }">
|
||
<div class="decor decor--blue"></div>
|
||
<div class="decor decor--purple"></div>
|
||
<div class="decor decor--deep-blue"></div>
|
||
<div class="decor decor--deep-purple"></div>
|
||
|
||
<section class="case-hero">
|
||
<img class="case-hero__bg" :src="bannerImg" alt="">
|
||
<div class="case-container">
|
||
<div class="case-hero__content">
|
||
<h1>投策智能体</h1>
|
||
<p>
|
||
面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告。帮助企业快速梳理核心信息，预判市场走向，辅助降低决策偏差，提升投资方案的科学性与可行性。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section ref="caseTabs" class="case-tabs" :class="{ 'is-fixed': isTabsFixed }">
|
||
<div class="case-container">
|
||
<button
|
||
v-for="tab in tabs"
|
||
:key="tab.id"
|
||
type="button"
|
||
class="tab-item"
|
||
:class="{ 'tab-active': activeTab === tab.id }"
|
||
@click="scrollToSection(tab.id)"
|
||
>
|
||
{{ tab.label }}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<main class="case-main">
|
||
<section id="scenarios" class="case-section">
|
||
<div class="case-container">
|
||
<div class="section-heading">
|
||
<h2>应用场景</h2>
|
||
<p>覆盖企业投资决策全链路</p>
|
||
</div>
|
||
<div class="scenario-grid">
|
||
<article v-for="item in scenarios" :key="item.title" class="feature-card">
|
||
<div class="feature-card__head">
|
||
<div class="icon-gradient">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||
</svg>
|
||
</div>
|
||
<h3>{{ item.title }}</h3>
|
||
</div>
|
||
<p>{{ item.desc }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="solution" class="case-section">
|
||
<div class="case-container">
|
||
<div class="section-heading">
|
||
<h2>企业决策的困境与解决方案</h2>
|
||
<p>聚焦数据收集、研报撰写、知识管理、智能应用四大维度</p>
|
||
</div>
|
||
<div class="solution-grid">
|
||
<article class="problem-card">
|
||
<h3>
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
</svg>
|
||
困境：数据丰富，洞察贫乏
|
||
</h3>
|
||
<div class="list-block">
|
||
<div v-for="item in problems" :key="item.title" class="list-item list-item--danger">
|
||
<div class="list-icon">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>{{ item.title }}</h4>
|
||
<p>{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="solution-card">
|
||
<h3>
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
解决方案：E决策平台核心能力
|
||
</h3>
|
||
<p class="solution-card__intro">
|
||
聚焦“数据收集、研报撰写、知识管理、智能应用”四大维度，帮助企业构建专属知识体系，赋能科学决策。
|
||
</p>
|
||
<div class="ability-list">
|
||
<div v-for="item in abilities" :key="item.title" class="ability-item">
|
||
<div class="ability-icon icon-gradient">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>{{ item.title }}</h4>
|
||
<p>{{ item.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="highlights" class="case-section">
|
||
<div class="case-container">
|
||
<div class="section-heading">
|
||
<h2>项目亮点</h2>
|
||
<p>一次研究，双格式交付</p>
|
||
</div>
|
||
<div class="highlight-grid">
|
||
<article v-for="item in highlights" :key="item.title" class="feature-card">
|
||
<div class="feature-card__head">
|
||
<div class="icon-gradient">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
|
||
</svg>
|
||
</div>
|
||
<h3>{{ item.title }}</h3>
|
||
</div>
|
||
<p>{{ item.desc }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<section class="case-cta">
|
||
<div class="case-container case-cta__inner">
|
||
<h2>开始使用投策智能体</h2>
|
||
<p>让AI赋能您的投资决策，一次研究，双格式交付</p>
|
||
<button type="button" @click="handleContact">联系销售</button>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'DecisionCase',
|
||
data() {
|
||
return {
|
||
activeTab: 'scenarios',
|
||
isTabsFixed: false,
|
||
tabsOriginTop: 0,
|
||
tabs: [
|
||
{ id: 'scenarios', label: '应用场景' },
|
||
{ id: 'solution', label: '解决方案' },
|
||
{ id: 'highlights', label: '项目亮点' }
|
||
],
|
||
scenarios: [
|
||
{
|
||
title: '投资可行性研究',
|
||
desc: '自动收集行业数据、市场趋势、政策信息，生成专业的投资可行性分析报告，辅助决策者快速评估项目价值与风险。',
|
||
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
|
||
},
|
||
{
|
||
title: '市场调研分析',
|
||
desc: '整合多维度市场数据，自动分析市场规模、竞争格局、发展趋势，生成详实的市场调研报告，支撑业务决策。',
|
||
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
|
||
},
|
||
{
|
||
title: '竞品分析',
|
||
desc: '自动收集竞品信息，分析产品特性、市场策略、用户反馈，生成竞品对比分析报告，帮助企业制定差异化竞争策略。',
|
||
icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
|
||
}
|
||
],
|
||
problems: [
|
||
{
|
||
title: '数据孤岛严重',
|
||
desc: '数据分散在不同业务系统中、或者网站信源中，难以打通整合，阻碍全面分析与决策。',
|
||
icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
|
||
},
|
||
{
|
||
title: '知识沉淀难',
|
||
desc: '关键业务知识与专家经验主要存在于个人头脑中，随人员流动而流失。',
|
||
icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
|
||
},
|
||
{
|
||
title: '报告撰写耗时费力',
|
||
desc: '手工整理数据、制作高质量决策报告过程繁琐，效率低下，难以快速响应需求。',
|
||
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
|
||
}
|
||
],
|
||
abilities: [
|
||
{
|
||
title: '数据收集与整合',
|
||
desc: '自动抓取内外部数据源，打破壁垒，统一数据口径',
|
||
icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
|
||
},
|
||
{
|
||
title: '知识管理与沉淀',
|
||
desc: '将非结构化文档转化为结构化知识图谱，沉淀企业核心资产',
|
||
icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'
|
||
},
|
||
{
|
||
title: '智能应用与问答',
|
||
desc: '支持自然语言提问，快速检索与回答，即问即得关键洞察',
|
||
icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'
|
||
},
|
||
{
|
||
title: 'AI辅助研报撰写',
|
||
desc: '输入主题自动生成内容，支持一键导出PDF/PPT',
|
||
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
|
||
}
|
||
],
|
||
highlights: [
|
||
{
|
||
title: '一键生成PDF研究报告',
|
||
desc: '在AI辅助生成研报内容后，系统支持一键导出为格式规范、内容详实的PDF研究报告，满足归档与深度阅读需求。',
|
||
icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
|
||
},
|
||
{
|
||
title: '一键生成PPT演示文稿',
|
||
desc: '除了PDF，系统还支持一键导出为PPT演示文稿，并自动完成逻辑梳理、智能分页和专业排版，即导即用。',
|
||
icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
|
||
}
|
||
],
|
||
bannerImg: require('./img.jpg')
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
const scroller = this.getScrollContainer()
|
||
this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
|
||
scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
|
||
this.handlePageScroll()
|
||
})
|
||
},
|
||
beforeDestroy() {
|
||
this.getScrollContainer().removeEventListener('scroll', this.handlePageScroll)
|
||
},
|
||
methods: {
|
||
getScrollContainer() {
|
||
return document.getElementById('homeOut') || window
|
||
},
|
||
getScrollOffset() {
|
||
const tabs = this.$el.querySelector('.case-tabs')
|
||
const tabsHeight = tabs ? tabs.offsetHeight : 0
|
||
return tabsHeight + 12
|
||
},
|
||
getElementTopInScroller(element, scroller) {
|
||
if (scroller === window) {
|
||
return element.getBoundingClientRect().top + window.pageYOffset
|
||
}
|
||
return element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
|
||
},
|
||
getScrollerTop(scroller) {
|
||
return scroller === window ? window.pageYOffset : scroller.scrollTop
|
||
},
|
||
scrollToSection(sectionName) {
|
||
this.activeTab = sectionName
|
||
const element = this.$el.querySelector(`#${sectionName}`)
|
||
if (element) {
|
||
const scroller = this.getScrollContainer()
|
||
const offset = this.getScrollOffset()
|
||
const top = this.getElementTopInScroller(element, scroller) - offset
|
||
scroller.scrollTo({ top, behavior: 'smooth' })
|
||
}
|
||
},
|
||
handlePageScroll() {
|
||
const scroller = this.getScrollContainer()
|
||
const scrollerTop = this.getScrollerTop(scroller)
|
||
this.isTabsFixed = scrollerTop >= this.tabsOriginTop
|
||
const offsetTop = scrollerTop + this.getScrollOffset() + 24
|
||
const currentTab = this.tabs
|
||
.map(tab => {
|
||
const element = this.$el.querySelector(`#${tab.id}`)
|
||
return element ? { id: tab.id, top: this.getElementTopInScroller(element, scroller) } : null
|
||
})
|
||
.filter(Boolean)
|
||
.reverse()
|
||
.find(tab => offsetTop >= tab.top)
|
||
|
||
if (currentTab) {
|
||
this.activeTab = currentTab.id
|
||
}
|
||
},
|
||
handleContact() {
|
||
this.$message.info('感谢您的关注，我们将尽快与您联系')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.decision-case-page {
|
||
position: relative;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
overflow: visible;
|
||
color: #111827;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
||
}
|
||
|
||
.decision-case-page *,
|
||
.decision-case-page *::before,
|
||
.decision-case-page *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.case-container {
|
||
width: min(100%, 1280px);
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.decor {
|
||
position: absolute;
|
||
border-radius: 999px;
|
||
filter: blur(64px);
|
||
opacity: 0.1;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.decor--blue {
|
||
top: 80px;
|
||
left: 40px;
|
||
width: 256px;
|
||
height: 256px;
|
||
background: linear-gradient(135deg, #60a5fa, #a855f7);
|
||
}
|
||
|
||
.decor--purple {
|
||
top: 384px;
|
||
right: 80px;
|
||
width: 320px;
|
||
height: 320px;
|
||
background: linear-gradient(135deg, #c084fc, #3b82f6);
|
||
}
|
||
|
||
.decor--deep-blue {
|
||
top: 1200px;
|
||
left: 25%;
|
||
width: 288px;
|
||
height: 288px;
|
||
background: linear-gradient(135deg, #3b82f6, #9333ea);
|
||
}
|
||
|
||
.decor--deep-purple {
|
||
top: 2000px;
|
||
right: 33%;
|
||
width: 384px;
|
||
height: 384px;
|
||
background: linear-gradient(135deg, #a855f7, #2563eb);
|
||
}
|
||
|
||
.case-hero {
|
||
position: relative;
|
||
height: min(446px, calc(100vw * 446 / 1551));
|
||
min-height: 260px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.case-hero__bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: fill;
|
||
}
|
||
|
||
.case-hero__content {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 672px;
|
||
padding-top: clamp(46px, 5.2vw, 82px);
|
||
}
|
||
|
||
.case-hero h1 {
|
||
margin: 0 0 24px;
|
||
color: #111827;
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
|
||
.case-hero p {
|
||
margin: 0;
|
||
color: #4b5563;
|
||
font-size: 20px;
|
||
line-height: 1.625;
|
||
}
|
||
|
||
.case-tabs {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 80;
|
||
background: #fff;
|
||
height: 60px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.case-tabs.is-fixed {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.decision-case-page.has-fixed-tabs .case-main {
|
||
padding-top: 60px;
|
||
}
|
||
|
||
.case-tabs .case-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32px;
|
||
height: 100%;
|
||
}
|
||
|
||
.tab-item {
|
||
height: 100%;
|
||
padding: 12px 16px;
|
||
color: #374151;
|
||
font-weight: 500;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-item:hover,
|
||
.tab-active {
|
||
color: #3b82f6;
|
||
background: #eff6ff;
|
||
}
|
||
|
||
.case-main {
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
.case-section {
|
||
position: relative;
|
||
padding: 64px 0;
|
||
}
|
||
|
||
.section-heading {
|
||
margin-bottom: 48px;
|
||
text-align: center;
|
||
}
|
||
|
||
.section-heading h2 {
|
||
margin: 0 0 16px;
|
||
color: #111827;
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.section-heading p {
|
||
margin: 0;
|
||
color: #4b5563;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.scenario-grid,
|
||
.solution-grid,
|
||
.highlight-grid {
|
||
display: grid;
|
||
gap: 32px;
|
||
}
|
||
|
||
.scenario-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.solution-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.highlight-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
max-width: 1024px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.feature-card,
|
||
.problem-card,
|
||
.solution-card {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.feature-card {
|
||
padding: 32px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.feature-card__head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
margin: 0;
|
||
color: #111827;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.highlight-grid .feature-card h3 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.feature-card p {
|
||
margin: 0;
|
||
color: #4b5563;
|
||
line-height: 1.625;
|
||
}
|
||
|
||
.icon-gradient {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
min-width: 40px;
|
||
height: 40px;
|
||
color: #fff;
|
||
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.icon-gradient svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.problem-card,
|
||
.solution-card {
|
||
padding: 32px;
|
||
border-left: 4px solid;
|
||
}
|
||
|
||
.problem-card {
|
||
border-left-color: #ef4444;
|
||
}
|
||
|
||
.solution-card {
|
||
border-left-color: #3b82f6;
|
||
}
|
||
|
||
.problem-card h3,
|
||
.solution-card h3 {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0 0 24px;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.problem-card h3 {
|
||
color: #dc2626;
|
||
}
|
||
|
||
.solution-card h3 {
|
||
color: #2563eb;
|
||
}
|
||
|
||
.problem-card h3 svg,
|
||
.solution-card h3 svg {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.list-block {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.list-icon,
|
||
.ability-icon {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.list-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
color: #dc2626;
|
||
background: #fee2e2;
|
||
}
|
||
|
||
.list-icon svg,
|
||
.ability-icon svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.list-item h4,
|
||
.ability-item h4 {
|
||
margin: 0 0 8px;
|
||
color: #111827;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.list-item p,
|
||
.ability-item p,
|
||
.solution-card__intro {
|
||
margin: 0;
|
||
color: #4b5563;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.solution-card__intro {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.ability-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.ability-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px;
|
||
background: #eff6ff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.ability-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.ability-item p {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.case-cta {
|
||
padding: 80px 0;
|
||
color: #fff;
|
||
background : linear-gradient(90deg, #334155, #1e293b);
|
||
/* background: #fff; */
|
||
}
|
||
|
||
.case-cta__inner {
|
||
max-width: 896px;
|
||
text-align: center;
|
||
}
|
||
|
||
.case-cta h2 {
|
||
margin: 0 0 24px;
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.case-cta p {
|
||
margin: 0 0 32px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-size: 20px;
|
||
}
|
||
|
||
.case-cta button {
|
||
padding: 16px 32px;
|
||
color: #2563eb;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
background: #fff;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.case-cta button:hover {
|
||
background: #eff6ff;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.solution-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.case-hero {
|
||
min-height: auto;
|
||
padding: 64px 0;
|
||
}
|
||
|
||
.case-hero__content {
|
||
padding-top: 24px;
|
||
}
|
||
|
||
.case-hero h1 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.case-hero p,
|
||
.section-heading p,
|
||
.case-cta p {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.case-tabs {
|
||
top: 0;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.case-tabs .case-container {
|
||
gap: 12px;
|
||
min-width: max-content;
|
||
}
|
||
|
||
.section-heading h2,
|
||
.case-cta h2 {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.scenario-grid,
|
||
.highlight-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.feature-card,
|
||
.problem-card,
|
||
.solution-card {
|
||
padding: 24px;
|
||
}
|
||
}
|
||
</style>
|