795 lines
24 KiB
Vue
795 lines
24 KiB
Vue
<template>
|
||
<div class="h5-home">
|
||
<div class="bg-orb bg-orb--1"></div>
|
||
<div class="bg-orb bg-orb--2"></div>
|
||
<div class="bg-orb bg-orb--3"></div>
|
||
<div class="bg-orb bg-orb--4"></div>
|
||
|
||
<img class="home-logo" src="@/views/H5/images/logo.png" alt="开元云">
|
||
<section class="home-hero">
|
||
<div class="hero-content">
|
||
<h1>一个平台，千行百业</h1>
|
||
<h2>智能跃迁</h2>
|
||
<!-- <p class="hero-subtitle">AI 驱动产业升级，让智能真正服务于业务</p> -->
|
||
<div class="hero-actions">
|
||
<button type="button" class="hero-primary" @click="scrollToSolutions">解决方案</button>
|
||
<button type="button" class="hero-secondary" @click="contactSales">联系销售</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="h5-ai-solutions" class="ai-section">
|
||
<div class="section-inner">
|
||
<h2 class="section-title">AI+解决方案</h2>
|
||
<div class="solution-list">
|
||
<article
|
||
v-for="item in solutionCards"
|
||
:key="item.title"
|
||
class="solution-card"
|
||
:style="{ background: item.bg, boxShadow: item.shadow }"
|
||
>
|
||
<button
|
||
v-if="item.scenarioPath"
|
||
type="button"
|
||
class="scenario-link"
|
||
@click="navigateTo(item.scenarioPath)"
|
||
>
|
||
{{ item.scenarioLabel }}
|
||
</button>
|
||
<div >
|
||
<div class="solution-icon" v-html="item.icon"></div>
|
||
<h3>{{ item.title }}</h3>
|
||
<p class="solution-subtitle">{{ item.subtitle }}</p>
|
||
</div>
|
||
<div class="solution-detail">
|
||
<strong>{{ item.detailTitle }}</strong>
|
||
<em>{{ item.detailSubTitle }}</em>
|
||
<p>{{ item.detailDesc }}</p>
|
||
<ul>
|
||
<li v-for="metric in item.metrics" :key="metric.label">
|
||
<b>{{ metric.value }}</b>
|
||
<small>{{ metric.label }}</small>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="case-section">
|
||
<div class="section-inner">
|
||
<h2 class="section-title">成功案例</h2>
|
||
<div class="case-list">
|
||
<article
|
||
v-for="(item, index) in caseCards"
|
||
:key="item.title"
|
||
class="case-card"
|
||
:class="{ 'is-flipped': activeCaseIndex === index }"
|
||
role="button"
|
||
tabindex="0"
|
||
@click="toggleCaseCard(index)"
|
||
@keyup.enter="toggleCaseCard(index)"
|
||
>
|
||
<div class="case-card-inner">
|
||
<div class="case-card-face case-card-front">
|
||
<img :src="item.image" :alt="item.title">
|
||
</div>
|
||
<div class="case-card-face case-card-back">
|
||
<div class="case-content">
|
||
<h3>{{ item.title }}</h3>
|
||
<h4>{{ item.name }}</h4>
|
||
<p>{{ item.desc }}</p>
|
||
<p class="case-summary">{{ item.summary }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="case-cta">
|
||
<div>
|
||
<h2>想了解这些方案如何落地？</h2>
|
||
<p>获取行业专属 AI 解决方案</p>
|
||
</div>
|
||
<button type="button" @click="contactSales">联系我们</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<Footer />
|
||
|
||
<Talk />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { reqNewsList } from '@/api/newsapi/newsapi'
|
||
import Talk from '@/views/homePage/dialog/talk/index.vue'
|
||
import Footer from '../components/footer/footer.vue'
|
||
|
||
export default {
|
||
name: 'H5OfficialHome',
|
||
components: {
|
||
Talk,
|
||
Footer
|
||
},
|
||
data() {
|
||
return {
|
||
newsList: [],
|
||
activeCaseIndex: null,
|
||
solutionCards: [
|
||
{
|
||
title: '群智协作',
|
||
subtitle: '多智能体协同',
|
||
detailTitle: '群智协作',
|
||
detailSubTitle: '多智能体协同',
|
||
detailDesc: '多个AI智能体按角色分工，自主完成信息采集、数据分析、逻辑推理与结论生成的全流程协作。支持动态任务分配与上下文共享，将复杂业务决策从"人串联"变为"智能体并行"，大幅压缩高知识密度工作的完成周期。',
|
||
metrics: [{ value: '10倍+', label: '知识工作效率提升' }, { value: '多源', label: '信息实时融合' }, { value: '高复杂度', label: '决策场景适配' }],
|
||
bg: 'linear-gradient(145deg, rgba(208, 236, 249, .92), rgba(124, 196, 238, .78))',
|
||
shadow: '0 18px 54px rgba(80, 150, 220, .2)',
|
||
scenarioLabel: '投策智能体→',
|
||
scenarioPath: '/h5HomePage/decision-case',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="24" cy="18" r="6"/><circle cx="10" cy="34" r="5"/><circle cx="38" cy="34" r="5"/><path d="m20 23-7 7m15-7 7 7"/></svg>'
|
||
},
|
||
{
|
||
title: '空间觉醒',
|
||
subtitle: 'GIS智能分析',
|
||
detailTitle: '空间觉醒',
|
||
detailSubTitle: 'GIS智能分析',
|
||
detailDesc: '融合地理信息系统、卫星遥感影像、无人机航拍等多维空间数据，AI自动识别地物边界、叠加分析空间关系、校验合规约束。将传统需要人工逐层比对的地理空间判断，升级为分钟级自动完成的空间智能决策。',
|
||
metrics: [{ value: '分钟级', label: '空间分析' }, { value: '90%+', label: '违规识别准确率' }, { value: '70%', label: '人力成本节省' }],
|
||
bg: 'linear-gradient(145deg, rgba(200, 238, 218, .92), rgba(104, 194, 150, .78))',
|
||
shadow: '0 18px 54px rgba(60, 150, 100, .18)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="24" cy="24" r="18"/><ellipse cx="24" cy="24" rx="10" ry="18"/><path d="M6 24h36M8 16h32M8 32h32M24 6v36"/></svg>'
|
||
},
|
||
{
|
||
title: '先见一步',
|
||
subtitle: '智能预测引擎',
|
||
detailTitle: '先见一步',
|
||
detailSubTitle: '智能预测引擎',
|
||
detailDesc: '融合机理模型与数据驱动模型，通过实时采集设备运行参数，AI自主识别早期异常特征并精准预测剩余使用寿命。在故障真正发生前72小时发出预警，让运维从"事后抢修"转变为"事前防御"，最大化保障生产连续性。',
|
||
metrics: [{ value: '95%+', label: '故障预警准确率' }, { value: '60%', label: '非计划停机减少' }, { value: '72小时', label: '预测提前量' }],
|
||
bg: 'linear-gradient(145deg, rgba(214, 240, 224, .92), rgba(122, 204, 158, .78))',
|
||
shadow: '0 18px 54px rgba(60, 150, 100, .18)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><path d="m6 38 10-12 8 6 10-16 8 10M36 22l6 4-4 6M6 40h36M6 8v32"/></svg>'
|
||
},
|
||
{
|
||
title: '洞察入微',
|
||
subtitle: '机器视觉检测',
|
||
detailTitle: '洞察入微',
|
||
detailSubTitle: '机器视觉检测',
|
||
detailDesc: '基于深度学习的高速产线全幅面缺陷检测能力，覆盖表面处理、涂层喷涂、焊接装配等全流程质检环节。不是抽样检查，而是每一寸产品都经过AI逐像素比对，在毫秒级时间内完成缺陷识别与分类，确保出厂品质零妥协。',
|
||
metrics: [{ value: '毫秒级', label: '检测速度' }, { value: '95%', label: '漏检率降低' }, { value: '99.5%+', label: '识别准确率' }],
|
||
bg: 'linear-gradient(145deg, rgba(192, 222, 239, .92), rgba(80, 166, 208, .78))',
|
||
shadow: '0 18px 54px rgba(40, 110, 170, .18)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 24s8-14 20-14 20 14 20 14-8 14-20 14S4 24 4 24z"/><circle cx="24" cy="24" r="7"/><circle cx="24" cy="24" r="3"/></svg>'
|
||
},
|
||
{
|
||
title: '一问即达',
|
||
subtitle: '智能问答知识库',
|
||
detailTitle: '一问即达',
|
||
detailSubTitle: '智能问答知识库',
|
||
detailDesc: '基于企业私有知识库构建的AI问答引擎，支持自然语言直接查询业务数据、技术规范、制度文件。每条回答自动标注权威来源，信息可追溯、可验证。让专家级知识不再锁在文档里，而是像问同事一样即问即答。',
|
||
metrics: [{ value: '<3秒', label: '响应速度' }, { value: '90%', label: '专家知识覆盖率' }, { value: '5倍', label: '决策效率提升' }],
|
||
bg: 'linear-gradient(145deg, rgba(224, 208, 242, .92), rgba(170, 142, 216, .78))',
|
||
shadow: '0 18px 54px rgba(130, 80, 180, .18)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="6" y="8" width="36" height="28" rx="4"/><path d="M6 16h36M24 25v6M18 28h12M18 42h12"/></svg>'
|
||
},
|
||
{
|
||
title: '全程守护',
|
||
subtitle: '设备智能监控',
|
||
detailTitle: '全程守护',
|
||
detailSubTitle: '设备智能监控',
|
||
detailDesc: '为每台设备构建独立监控策略，通过三维可视化实时呈现运行状态。AI自动识别异常并高亮定位故障点，同步输出详细诊断建议和排查步骤。将运维人员从"盯屏找问题"解放出来，让系统主动告诉你问题在哪、怎么修。',
|
||
metrics: [{ value: '1000+', label: '监控点位支持' }, { value: '<1秒', label: '告警响应' }, { value: '40%', label: '运维成本降低' }],
|
||
bg: 'linear-gradient(145deg, rgba(251, 230, 200, .92), rgba(238, 180, 120, .78))',
|
||
shadow: '0 18px 54px rgba(190, 130, 50, .18)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="8" y="10" width="32" height="22" rx="3"/><path d="M18 36h12M24 32v4m-8-12 4 4 6-8"/></svg>'
|
||
},
|
||
{
|
||
title: '触文即懂',
|
||
subtitle: '智能文档解析',
|
||
detailTitle: '触文即懂',
|
||
detailSubTitle: '智能文档解析',
|
||
detailDesc: '支持PDF、Word、扫描件等多种格式一键解析，AI自动提取关键条款、资质要求、评分细则等核心信息并结构化呈现。不是简单的OCR文字识别，而是理解文档语义、判断信息重要性、标注风险点，让冗长文档的核心内容一目了然。',
|
||
metrics: [{ value: '98%+', label: '解析准确率' }, { value: '85%', label: '人工核查时间减少' }, { value: '零遗漏', label: '关键信息' }],
|
||
bg: 'linear-gradient(145deg, rgba(200, 214, 242, .92), rgba(116, 146, 216, .78))',
|
||
shadow: '0 18px 54px rgba(60, 80, 160, .18)',
|
||
scenarioLabel: '合同智能审查→',
|
||
scenarioPath: '/h5HomePage/contract-case',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 6h16l10 10v26a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4zM28 6v10h10M14 24h20M14 31h16"/></svg>'
|
||
},
|
||
{
|
||
title: '端侧即算',
|
||
subtitle: '边缘AI推理',
|
||
detailTitle: '端侧即算',
|
||
detailSubTitle: '边缘AI推理',
|
||
detailDesc: '将AI推理能力部署在生产现场边缘侧，通过轻量化算法实现毫秒级实时决策。数据无需回传云端，在本地即可完成从感知到判断的全流程，确保数据不出厂、响应零延迟。冗余架构设计保障7×24小时持续运行，产线检测永不中断。',
|
||
metrics: [{ value: '<50ms', label: '推理延迟' }, { value: '本地', label: '数据处理不出厂' }, { value: '7×24h', label: '持续运行' }],
|
||
bg: 'linear-gradient(145deg, rgba(216, 204, 240, .92), rgba(150, 124, 212, .78))',
|
||
shadow: '0 18px 54px rgba(90, 60, 160, .18)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="10" y="10" width="28" height="28" rx="4"/><rect x="16" y="16" width="16" height="16" rx="2"/><path d="M18 6v4m6-4v4m6-4v4M18 38v4m6-4v4m6-4v4"/></svg>'
|
||
}
|
||
],
|
||
caseCards: [
|
||
{ title: '智慧工程', name: '中国中铁 · 慧投标智能体', desc: 'AI驱动投标全流程，从标书解读到报价编制，中标率提升显著', summary: '项目概况:为中国中铁打造慧投标智能体+慧途大模型，建立联合创新中心与AI应用创新平台。覆盖投标全流程——标书智能解读、资审自动匹配、报价辅助决策、标书智能编制，实现投标工作从人海战术到AI赋能的跨越式升级。', image: require('@/views/homePage/mainPage/img/case/china-railway-bidding-case.jpg') },
|
||
{ title: '智慧采伐', name: '南宁林业局', desc: '从采伐审批到科学监管——空间智能融合，让数据真正服务林区治理。', summary: '项目概况:为南宁林业局打造林业空间采伐智审系统，融合GIS空间分析、卫星遥感、无人机与传感器多源数据，实现空间与属性数据的一体化智能审核。采伐范围自动核验合规性，审查报告一键生成，审批周期从数天压缩至分钟级，人机协同让每一步决策都有据可依。', image: require('@/views/homePage/mainPage/img/case/nanning-forestry-case.jpg') },
|
||
{ title: 'AI赋能，数智升级', name: '北港大数据', desc: '从投标到决策，从合同到管理——全链路AI智能体，让业务快人一步', summary: '项目概况:为北港大数据打造覆盖招投标、投研分析、合同审查的全链路AI智能体解决方案。以投标智能体引擎实现标书秒级生成、中标率显著提升；以投策智能体引擎将数周研报压缩至分钟级，支撑精准投资决策；以合同智能审查将审查效率提升60%以上，风险漏检率降至3%以下。三款产品无缝衔接，真正打通企业从业务承接到风险管控的数字化闭环', image: require('@/views/homePage/mainPage/img/case/beigang-big-data-case.jpg') }
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
this.getNewsList()
|
||
},
|
||
methods: {
|
||
toggleCaseCard(index) {
|
||
this.activeCaseIndex = this.activeCaseIndex === index ? null : index
|
||
},
|
||
scrollToSolutions() {
|
||
const target = document.getElementById('h5-ai-solutions')
|
||
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||
},
|
||
navigateTo(path) {
|
||
this.$router.push(path).catch((error) => {
|
||
if (!error || error.name !== 'NavigationDuplicated') throw error
|
||
})
|
||
},
|
||
async getNewsList() {
|
||
try {
|
||
const res = await reqNewsList({ url_link: window.location.href, current_page: '1', page_size: '2', title: '', article_type: '', status: '1' })
|
||
if (res && (res.status === true || res.status === 'true')) {
|
||
const list = Array.isArray(res.data) ? res.data : (res.data && (res.data.data || res.data.list)) || []
|
||
this.newsList = list.slice(0, 2)
|
||
}
|
||
} catch (error) {
|
||
this.newsList = []
|
||
}
|
||
},
|
||
contactSales() {
|
||
this.$store.commit('setShowTalk', true)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.h5-home {
|
||
position: relative;
|
||
min-height: 100%;
|
||
overflow: hidden;
|
||
color: #111827;
|
||
background-color: #f0f7ff;
|
||
background-image: linear-gradient(180deg, #f0f7ff 0%, #fff 60%, #f5f8ff 100%);
|
||
}
|
||
|
||
.h5-home > :not(.bg-orb) {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.bg-orb {
|
||
position: fixed;
|
||
z-index: 0;
|
||
border-radius: 50%;
|
||
filter: blur(0.8rem);
|
||
opacity: .3;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bg-orb--1 {
|
||
top: -1rem;
|
||
left: -1rem;
|
||
width: 4rem;
|
||
height: 4rem;
|
||
background: #3b82f6;
|
||
}
|
||
|
||
.bg-orb--2 {
|
||
right: -1.5rem;
|
||
bottom: -1.5rem;
|
||
width: 5rem;
|
||
height: 5rem;
|
||
background: #3b82f6;
|
||
}
|
||
|
||
.bg-orb--3 {
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
background: #ec4899;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.bg-orb--4 {
|
||
right: 20%;
|
||
bottom: 30%;
|
||
width: 3.5rem;
|
||
height: 3.5rem;
|
||
background: #f59e0b;
|
||
}
|
||
|
||
.home-logo {
|
||
position: absolute;
|
||
top: 0.28rem;
|
||
left: 0.28rem;
|
||
z-index: 3;
|
||
display: block;
|
||
width: 1.58rem;
|
||
height: auto;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.home-hero {
|
||
position: relative;
|
||
min-height: 6.8rem;
|
||
box-sizing: border-box;
|
||
padding: 1.05rem 0.44rem 0.78rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
width: 100%;
|
||
max-width: 6.8rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
margin: 0;
|
||
color: #111827;
|
||
font-size: 0.62rem;
|
||
line-height: 1.18;
|
||
font-weight: 800;
|
||
letter-spacing: .02em;
|
||
}
|
||
|
||
.hero-content h2 {
|
||
margin: 0.18rem 0 0;
|
||
color: transparent;
|
||
font-size: 0.72rem;
|
||
line-height: 1.18;
|
||
font-weight: 800;
|
||
letter-spacing: .02em;
|
||
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
max-width: 5.2rem;
|
||
margin: 0.28rem auto 0;
|
||
color: #6b7280;
|
||
font-size: 0.23rem;
|
||
line-height: 1.7;
|
||
font-weight: 700;
|
||
letter-spacing: .08em;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.16rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.hero-actions button {
|
||
min-width: 1.55rem;
|
||
height: 0.58rem;
|
||
padding: 0 0.32rem;
|
||
border-radius: 99px;
|
||
font-size: 0.21rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.hero-primary {
|
||
border: 0;
|
||
color: #fff;
|
||
background: #000;
|
||
box-shadow: 0 0.12rem 0.28rem rgba(37, 90, 255, .22);
|
||
}
|
||
|
||
.hero-secondary {
|
||
border: 0;
|
||
color: #000;
|
||
background: transparent;
|
||
}
|
||
|
||
.section-inner {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 0.32rem;
|
||
}
|
||
|
||
.ai-section,
|
||
.case-section {
|
||
padding: 0.76rem 0 0.92rem;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0 0 0.42rem;
|
||
color: #111827;
|
||
font-size: 0.42rem;
|
||
line-height: 1.35;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.solution-list,
|
||
.case-list,
|
||
.news-list {
|
||
display: grid;
|
||
gap: 0.28rem;
|
||
}
|
||
|
||
.solution-card {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
min-width: 0;
|
||
padding: 0.4rem 0.32rem 0.34rem;
|
||
border: 1px solid rgba(255, 255, 255, .46);
|
||
border-radius: 0.2rem;
|
||
color: rgba(30, 40, 60, .88);
|
||
backdrop-filter: blur(0.18rem) saturate(1.4);
|
||
-webkit-backdrop-filter: blur(0.18rem) saturate(1.4);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.solution-card::before {
|
||
position: absolute;
|
||
inset: 0;
|
||
content: '';
|
||
background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .48), transparent 42%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.solution-icon {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 0.92rem;
|
||
height: 0.92rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid rgba(255, 255, 255, .7);
|
||
border-radius: 50%;
|
||
color: rgba(20, 70, 130, .82);
|
||
background: rgba(255, 255, 255, .38);
|
||
}
|
||
|
||
.solution-icon :deep(svg) {
|
||
width: 0.62rem;
|
||
height: 0.62rem;
|
||
}
|
||
|
||
.solution-card h3,
|
||
.solution-card p,
|
||
.solution-card strong,
|
||
.solution-card em,
|
||
.solution-card ul {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.solution-card h3 {
|
||
margin: 0.22rem 0 0.08rem;
|
||
font-size: 0.36rem;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.solution-subtitle,
|
||
.solution-detail p,
|
||
.solution-detail em {
|
||
font-size: 0.22rem;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.solution-subtitle {
|
||
margin: 0;
|
||
color: rgba(30, 40, 60, .66);
|
||
}
|
||
|
||
.solution-detail {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-top: 0.28rem;
|
||
padding-top: 0.24rem;
|
||
border-top: 1px solid rgba(255, 255, 255, .58);
|
||
}
|
||
|
||
.solution-detail strong {
|
||
display: block;
|
||
margin-bottom: 0.04rem;
|
||
color: #0f172a;
|
||
font-size: 0.3rem;
|
||
}
|
||
|
||
.solution-detail em {
|
||
display: block;
|
||
color: #334155;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.solution-detail p {
|
||
margin: 0.1rem 0 0;
|
||
color: #475569;
|
||
}
|
||
|
||
.solution-detail ul {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 0.1rem;
|
||
margin: 0.22rem 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.solution-detail li {
|
||
min-width: 0;
|
||
min-height: 0.92rem;
|
||
box-sizing: border-box;
|
||
padding: 0.12rem 0.06rem;
|
||
border: 1px solid rgba(186, 220, 255, .72);
|
||
border-radius: 0.12rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
background: rgba(240, 249, 255, .82);
|
||
}
|
||
|
||
.solution-detail li b {
|
||
color: #2563eb;
|
||
font-size: 0.27rem;
|
||
line-height: 1.15;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.solution-detail li small {
|
||
margin-top: 0.06rem;
|
||
color: #64748b;
|
||
font-size: 0.17rem;
|
||
line-height: 1.25;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.scenario-link {
|
||
position: absolute;
|
||
top: 0.24rem;
|
||
right: 0.24rem;
|
||
z-index: 2;
|
||
padding: 0.08rem 0.14rem;
|
||
border: 1px solid rgba(255, 255, 255, .75);
|
||
border-radius: 99px;
|
||
color: #1d4ed8;
|
||
font-size: 0.18rem;
|
||
background: rgba(255, 255, 255, .62);
|
||
}
|
||
|
||
.case-card {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 405 / 620;
|
||
height: 8rem;
|
||
perspective: 12rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.case-card-inner {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
|
||
}
|
||
|
||
.case-card.is-flipped .case-card-inner {
|
||
transform: rotateY(180deg);
|
||
}
|
||
.case-card-face
|
||
{
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
border-radius: 0.16rem;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
box-shadow: 0 0.24rem 0.6rem rgba(37, 99, 235, .12);
|
||
}
|
||
|
||
.case-card-front {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.case-card img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.case-card-label {
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
padding: 0.22rem 0.28rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.case-card-label strong {
|
||
color: #111827;
|
||
font-size: 0.38rem;
|
||
line-height: 1.28;
|
||
}
|
||
|
||
.case-card-label span {
|
||
margin-top: 0.06rem;
|
||
color: #64748b;
|
||
font-size: 0.23rem;
|
||
}
|
||
|
||
.case-card-back {
|
||
transform: rotateY(180deg);
|
||
overflow-y: auto;
|
||
color: #fff;
|
||
background: linear-gradient(135deg, rgba(71, 85, 105, .96), rgba(15, 23, 42, .98));
|
||
}
|
||
|
||
.case-card-back::before {
|
||
position: absolute;
|
||
inset: 0;
|
||
content: '';
|
||
background:
|
||
radial-gradient(circle at 20% 16%, rgba(96, 165, 250, .32), transparent 32%),
|
||
radial-gradient(circle at 80% 86%, rgba(139, 92, 246, .24), transparent 34%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.case-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0.32rem 0.28rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.case-content h3 {
|
||
margin: 0 0 0.1rem;
|
||
color: #fff;
|
||
font-size: 0.6rem;
|
||
line-height: 1.18;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.case-content h4,
|
||
.case-content p {
|
||
margin: 0 0 0.12rem;
|
||
color: rgba(255, 255, 255, .9);
|
||
font-size: 0.3rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.case-content h4 {
|
||
margin-bottom: 0.14rem;
|
||
color: #e0f2fe;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.case-summary {
|
||
color: rgba(255, 255, 255, .82) !important;
|
||
font-size: 0.23rem !important;
|
||
line-height: 1.52 !important;
|
||
}
|
||
|
||
.case-cta {
|
||
box-sizing: border-box;
|
||
min-height: 2.2rem;
|
||
margin-top: 0.64rem;
|
||
padding: 0.42rem 0.48rem;
|
||
border-radius: 0.28rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.2rem;
|
||
color: #111827;
|
||
background: linear-gradient(135deg, rgba(219, 234, 254, .92), rgba(233, 213, 255, .82));
|
||
box-shadow: 0 0.24rem 0.6rem rgba(37, 99, 235, .12);
|
||
}
|
||
|
||
.case-cta h2 {
|
||
margin: 0 0 0.1rem;
|
||
color: #111827;
|
||
font-size: 0.3rem;
|
||
line-height: 1.25;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.case-cta p {
|
||
margin: 0;
|
||
color: rgba(17, 24, 39, .72);
|
||
font-size: 0.2rem;
|
||
line-height: 1.5;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.case-cta button {
|
||
flex: 0 0 auto;
|
||
padding: 0.16rem 0.2rem;
|
||
border: 0;
|
||
border-radius: 99px;
|
||
color: #fff;
|
||
font-size: 0.2rem;
|
||
font-weight: 700;
|
||
background: #111827;
|
||
}
|
||
|
||
.news-card {
|
||
position: relative;
|
||
padding: 0.42rem 0.32rem;
|
||
border: 1px solid rgba(255, 255, 255, .82);
|
||
border-radius: 0.28rem;
|
||
cursor: pointer;
|
||
background: rgba(255, 255, 255, .9);
|
||
box-shadow: 0 0.14rem 0.36rem rgba(15, 23, 42, .08);
|
||
transition: transform .35s ease, box-shadow .35s ease;
|
||
}
|
||
|
||
.news-card:active {
|
||
transform: translateY(-0.04rem);
|
||
box-shadow: 0 0.28rem 0.56rem rgba(59, 130, 246, .14);
|
||
}
|
||
|
||
.news-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.14rem;
|
||
color: #6b7280;
|
||
font-size: 0.18rem;
|
||
}
|
||
|
||
.news-meta span {
|
||
padding: 0.06rem 0.1rem;
|
||
border-radius: 99px;
|
||
color: #1d4ed8;
|
||
background: #dbeafe;
|
||
}
|
||
|
||
.news-card h3 {
|
||
margin: 0.16rem 0 0.08rem;
|
||
font-size: 0.28rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.news-card p {
|
||
margin: 0;
|
||
color: #4b5563;
|
||
font-size: 0.21rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.section-inner {
|
||
padding-right: 0.28rem;
|
||
padding-left: 0.28rem;
|
||
}
|
||
|
||
.solution-detail li small {
|
||
font-size: 0.16rem;
|
||
}
|
||
}
|
||
</style>
|