1493 lines
39 KiB
Vue
1493 lines
39 KiB
Vue
<template>
|
||
<div class="home-main-page">
|
||
<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>
|
||
<!-- 首页头部 -->
|
||
<section class="home-hero">
|
||
<div class="home-hero__inner animate-in">
|
||
<div class="hero-title-row">
|
||
<h1>{{ $t('home.heroTitle') }}</h1>
|
||
</div>
|
||
<h2 v-if="$t('home.heroSubtitle')">{{ $t('home.heroSubtitle') }}</h2>
|
||
<p>{{ $t('home.heroSlogan') }}</p>
|
||
<div class="hero-actions">
|
||
<button type="button" class="use-btn" @click="goSolution">{{ $t('home.solutionsBtn') }}</button>
|
||
<div class="outline-btn" @click="contactSales">{{ $t('home.contactSalesBtn') }}</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- AI+解决方案 -->
|
||
<section id="ai-solutions-section" class="ai-solution-section" @mouseenter="stopSolutionCarousel" @mouseleave="startSolutionCarousel">
|
||
<div class="ai-solution-inner">
|
||
<h2 class="section-title">{{ $t('home.aiSolutionsTitle') }}</h2>
|
||
<div class="solution-carousel" :class="{ 'is-rotating': isSolutionRotating }">
|
||
<button type="button" class="carousel-arrow carousel-arrow--prev" @click="prevSolution">
|
||
<i class="el-icon-arrow-left"></i>
|
||
</button>
|
||
<div class="carousel-stage">
|
||
<div
|
||
v-for="item in visibleSolutionCards"
|
||
:key="item.card.title"
|
||
class="solution-card"
|
||
:class="`solution-card--slot-${item.slot}`"
|
||
:style="{ background: item.card.bg, boxShadow: item.card.shadow }"
|
||
@mouseenter="stopSolutionCarousel"
|
||
@mouseleave="startSolutionCarousel"
|
||
@click="setSolutionIndex(item.index)"
|
||
>
|
||
<div class="solution-card__front">
|
||
<div class="solution-card__icon" v-html="item.card.icon"></div>
|
||
<h3>{{ item.card.title }}</h3>
|
||
<span></span>
|
||
<p>{{ item.card.subtitle }}</p>
|
||
</div>
|
||
<div class="solution-card__detail">
|
||
<strong>{{ item.card.detailTitle }}</strong>
|
||
<em>{{ item.card.detailSubTitle }}</em>
|
||
<p>{{ item.card.detailDesc }}</p>
|
||
<ul>
|
||
<li v-for="metric in item.card.metrics" :key="metric.label">
|
||
<b>{{ metric.value }}</b>
|
||
<small>{{ metric.label }}</small>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="carousel-arrow carousel-arrow--next" @click="nextSolution">
|
||
<i class="el-icon-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="carousel-dots">
|
||
<button
|
||
v-for="(item, index) in localizedSolutionCards"
|
||
:key="item.title"
|
||
type="button"
|
||
:class="{ active: index === currentSolutionIndex }"
|
||
@click="setSolutionIndex(index)"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 成功案例 -->
|
||
<section id="cases-section" class="case-section">
|
||
<div class="case-inner">
|
||
<div class="case-head">
|
||
<h2 class="section-title">{{ $t('home.successCasesTitle') }}</h2>
|
||
<button type="button" class="case-more" @click="goCases">
|
||
{{ $t('home.moreCases') }}
|
||
<i class="el-icon-right"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="case-grid">
|
||
<article
|
||
v-for="item in localizedCaseCards"
|
||
:key="item.title"
|
||
class="case-card"
|
||
>
|
||
<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-card__content">
|
||
<h3>{{ item.title }}</h3>
|
||
<h4>{{ item.name }}</h4>
|
||
<p>{{ item.desc }}</p>
|
||
<p class="case-card__summary">{{ item.summary }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="case-cta" :style="{ backgroundImage: `url(${caseCtaBg})` }">
|
||
<div>
|
||
<h2>{{ $t('home.ctaTitle') }}</h2>
|
||
<p>{{ $t('home.ctaDesc') }}</p>
|
||
</div>
|
||
<button type="button" @click="contactSales">{{ $t('home.contactUsArrow') }}</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 企业动态 -->
|
||
<section id="news" class="news-section">
|
||
<div class="news-glow news-glow--left"></div>
|
||
<div class="news-glow news-glow--right"></div>
|
||
<div class="news-glow news-glow--center"></div>
|
||
|
||
<div class="news-inner">
|
||
<div class="news-head">
|
||
<h2 class="section-title">{{ $t('home.companyNewsTitle') }}</h2>
|
||
<button type="button" class="case-more">{{ $t('home.viewMore') }}</button>
|
||
</div>
|
||
|
||
<div class="news-list">
|
||
<article
|
||
v-for="(item, index) in localizedNewsList"
|
||
:key="item.title"
|
||
class="news-card"
|
||
:class="{ 'news-card-active': index === activeNewsIndex }"
|
||
@mouseenter="activeNewsIndex = index"
|
||
@mouseleave="activeNewsIndex = 0"
|
||
@click="goNews"
|
||
>
|
||
<div class="news-card-glow"></div>
|
||
<div class="news-card-border"></div>
|
||
<div class="news-card__content">
|
||
<div class="news-card__meta">
|
||
<span :class="item.tagClass">{{ item.tag }}</span>
|
||
<time>{{ item.date }}</time>
|
||
</div>
|
||
<h2>{{ item.title }}</h2>
|
||
<p>{{ item.desc }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Talk></Talk>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Talk from '@/views/homePage/dialog/talk/index.vue'
|
||
|
||
export default {
|
||
name: 'HomeMainPage',
|
||
components: {
|
||
Talk
|
||
},
|
||
data() {
|
||
return {
|
||
solutionTimer: null,
|
||
solutionAnimationTimer: null,
|
||
isSolutionRotating: false,
|
||
currentSolutionIndex: 0,
|
||
activeNewsIndex: 0,
|
||
caseCtaBg: require('./img/case/case-hero-bg.jpg'),
|
||
caseCards: [
|
||
{
|
||
name: '中国中铁 · 慧投标智能体',
|
||
title: '智慧工程',
|
||
desc: 'AI驱动投标全流程，从标书解读到报价编制，中标率提升显著',
|
||
summary: '项目概况:为中国中铁打造慧投标智能体+慧途大模型，建立联合创新中心与AI应用创新平台。覆盖投标全流程——标书智能解读、资审自动匹配、报价辅助决策、标书智能编制，实现投标工作从人海战术到AI赋能的跨越式升级。',
|
||
image: require('./img/case/china-railway-bidding-case.jpg')
|
||
},
|
||
{
|
||
name: '南宁林业局',
|
||
title: '智慧采伐',
|
||
desc: '从采伐审批到科学监管——空间智能融合，让数据真正服务林区治理。',
|
||
summary: '项目概况:为南宁林业局打造林业空间采伐智审系统，融合GIS空间分析、卫星遥感、无人机与传感器多源数据，实现空间与属性数据的一体化智能审核。采伐范围自动核验合规性，审查报告一键生成，审批周期从数天压缩至分钟级，人机协同让每一步决策都有据可依。',
|
||
image: require('./img/case/nanning-forestry-case.jpg')
|
||
},
|
||
{
|
||
name: '北港大数据',
|
||
title: 'AI赋能，数智升级',
|
||
desc: '从投标到决策，从合同到管理——全链路AI智能体，让业务快人一步',
|
||
summary: '项目概况:为北港大数据打造覆盖招投标、投研分析、合同审查的全链路AI智能体解决方案。以投标智能体引擎实现标书秒级生成、中标率显著提升；以投策智能体引擎将数周研报压缩至分钟级，支撑精准投资决策；以合同智能审查将审查效率提升60%以上，风险漏检率降至3%以下。三款产品无缝衔接，真正打通企业从业务承接到风险管控的数字化闭环',
|
||
image: require('./img/case/beigang-big-data-case.jpg')
|
||
}
|
||
],
|
||
newsList: [
|
||
{
|
||
tag: '企业动态',
|
||
tagClass: 'news-tag--blue',
|
||
date: '2026.6.15',
|
||
title: '开元云随贸促会走访东盟',
|
||
desc: '开元云科技随贸促会广西分会经贸代表团密集出访越南、老挝，深度参与区域 AI 产业合作与数字经济交流。'
|
||
},
|
||
{
|
||
tag: '企业动态',
|
||
tagClass: 'news-tag--green',
|
||
date: '2026.05.17',
|
||
title: '开元云荣登福布斯中国人工智能商业落地示范企业',
|
||
desc: '凭借 AI 智能体工厂的工业级交付能力与央国企标杆案例，开元云入选福布斯中国人工智能商业落地示范企业。'
|
||
}
|
||
],
|
||
solutionCards: [
|
||
{
|
||
title: '群智协作',
|
||
subtitle: '多智能体协同',
|
||
detailTitle: '慧投标智能体',
|
||
detailSubTitle: '基于 Agent+RAG+LangGraph 多节点编排，实现招投标全流程 AI 化',
|
||
detailDesc: '从标书解读、资质匹配到内容生成，多智能体协同提升投标作业效率。',
|
||
metrics: [
|
||
{ value: '10倍+', label: '效率提升' },
|
||
{ value: '80%', label: '废标率降低' },
|
||
{ value: '35%', label: '中标率提升' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(208, 236, 249, 0.72) 0%, rgba(168, 216, 244, 0.64) 44%, rgba(124, 196, 238, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(80, 150, 220, 0.2), 0 4px 16px rgba(80, 150, 220, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="18" r="6"/><circle cx="10" cy="34" r="5"/><circle cx="38" cy="34" r="5"/><line x1="20" y1="23" x2="13" y2="30"/><line x1="28" y1="23" x2="35" y2="30"/><circle cx="36" cy="14" r="3.5"/><circle cx="12" cy="14" r="3.5"/></svg>'
|
||
},
|
||
{
|
||
title: '一问即达',
|
||
subtitle: '智能问答知识库',
|
||
detailTitle: '智能问答知识库',
|
||
detailSubTitle: '燃机 AI 诊断助手',
|
||
detailDesc: '融合专家知识库，支持中英文自然语言多轮对话，自动生成诊断建议。',
|
||
metrics: [
|
||
{ value: '<3s', label: '诊断响应' },
|
||
{ value: '90%', label: '知识覆盖' },
|
||
{ value: '5倍', label: '决策效率提升' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(224, 208, 242, 0.72) 0%, rgba(200, 176, 230, 0.64) 44%, rgba(170, 142, 216, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(130, 80, 180, 0.18), 0 4px 16px rgba(130, 80, 180, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="8" width="36" height="28" rx="4"/><path d="M6 16h36"/><circle cx="24" cy="28" r="3"/><path d="M18 28h1"/><path d="M29 28h1"/><path d="M18 42h12"/></svg>'
|
||
},
|
||
{
|
||
title: '空间觉醒',
|
||
subtitle: 'GIS智能分析',
|
||
detailTitle: '林业采伐空间智审',
|
||
detailSubTitle: 'AI+GIS 深度融合，智能识别禁伐区、历史采伐点',
|
||
detailDesc: '输出合规性报告，辅助采伐审批与空间治理。',
|
||
metrics: [
|
||
{ value: '分钟级', label: '审批周期' },
|
||
{ value: '90%', label: '违规识别提升' },
|
||
{ value: '70%', label: '节省人力' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(200, 238, 218, 0.72) 0%, rgba(152, 216, 184, 0.64) 44%, rgba(104, 194, 150, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(60, 150, 100, 0.18), 0 4px 16px rgba(60, 150, 100, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="24" r="18"/><ellipse cx="24" cy="24" rx="10" ry="18"/><line x1="6" y1="24" x2="42" y2="24"/><path d="M8 16h32"/><path d="M8 32h32"/><path d="M24 6v36"/></svg>'
|
||
},
|
||
{
|
||
title: '全程守护',
|
||
subtitle: '设备智能监控',
|
||
detailTitle: '三维可视化监盘系统',
|
||
detailSubTitle: '自动告警高亮定位，降低运维人员技能门槛',
|
||
detailDesc: '一机一策三维可视化，实时监控设备关键点位。',
|
||
metrics: [
|
||
{ value: '1000+', label: '监控点位' },
|
||
{ value: '<1s', label: '告警响应' },
|
||
{ value: '40%', label: '成本降低' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(251, 230, 200, 0.72) 0%, rgba(245, 205, 160, 0.64) 44%, rgba(238, 180, 120, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(190, 130, 50, 0.18), 0 4px 16px rgba(190, 130, 50, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="10" width="32" height="22" rx="3"/><path d="M18 36h12"/><line x1="24" y1="32" x2="24" y2="36"/><path d="M16 20l4 4 6-8"/><circle cx="38" cy="12" r="4"/></svg>'
|
||
},
|
||
{
|
||
title: '先见一步',
|
||
subtitle: '智能预测引擎',
|
||
detailTitle: '燃机智慧监盘',
|
||
detailSubTitle: 'AI 预测引擎+TDengine 时序数据库',
|
||
detailDesc: '从被动响应到主动预警，保障设备稳定运行。',
|
||
metrics: [
|
||
{ value: '95%+', label: '预警准确率' },
|
||
{ value: '60%', label: '停机时间减少' },
|
||
{ value: '72h', label: '提前预警' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(214, 240, 224, 0.72) 0%, rgba(168, 222, 190, 0.64) 44%, rgba(122, 204, 158, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(60, 150, 100, 0.18), 0 4px 16px rgba(60, 150, 100, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 38l10-12 8 6 10-16 8 10"/><polyline points="36,22 42,26 38,32"/><line x1="6" y1="40" x2="42" y2="40"/><path d="M6 8v32"/></svg>'
|
||
},
|
||
{
|
||
title: '触文即懂',
|
||
subtitle: '智能文档解析',
|
||
detailTitle: '招标文件智能解析',
|
||
detailSubTitle: 'AI 自动读取招标文件，结构化提取关键信息',
|
||
detailDesc: '精准识别资质要求、评分标准和关键条款，辅助人工快速审查。',
|
||
metrics: [
|
||
{ value: '98%+', label: '解析准确率' },
|
||
{ value: '85%', label: '核查时间减少' },
|
||
{ value: '0漏', label: '关键信息' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(200, 214, 242, 0.72) 0%, rgba(158, 180, 230, 0.64) 44%, rgba(116, 146, 216, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(60, 80, 160, 0.18), 0 4px 16px rgba(60, 80, 160, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6h16l10 10v26a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z"/><polyline points="28,6 28,16 38,16"/><line x1="14" y1="24" x2="34" y2="24"/><line x1="14" y1="31" x2="30" y2="31"/></svg>'
|
||
},
|
||
{
|
||
title: '洞察入微',
|
||
subtitle: '机器视觉检测',
|
||
detailTitle: '零碳铝板缺陷检测',
|
||
detailSubTitle: 'YOLO 目标检测+TensorRT 边缘推理',
|
||
detailDesc: '毫秒级实时质检，替代人工目检，提升产线检测稳定性。',
|
||
metrics: [
|
||
{ value: 'ms级', label: '检测速度' },
|
||
{ value: '95%+', label: '漏检率降低' },
|
||
{ value: '25%', label: '产能提升' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(192, 222, 239, 0.72) 0%, rgba(136, 194, 224, 0.64) 44%, rgba(80, 166, 208, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(40, 110, 170, 0.18), 0 4px 16px rgba(40, 110, 170, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><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"/><line x1="24" y1="6" x2="24" y2="10"/><line x1="24" y1="38" x2="24" y2="42"/></svg>'
|
||
},
|
||
{
|
||
title: '端侧即算',
|
||
subtitle: '边缘AI推理',
|
||
detailTitle: '边缘实时质检',
|
||
detailSubTitle: 'TensorRT 优化模型，边缘端毫秒级推理',
|
||
detailDesc: '无需上传云端，保障数据安全并适配 7x24 小时连续运行。',
|
||
metrics: [
|
||
{ value: '<50ms', label: '推理延迟' },
|
||
{ value: '本地', label: '数据不出厂' },
|
||
{ value: '7x24', label: '持续运行' }
|
||
],
|
||
bg: 'linear-gradient(145deg, rgba(216, 204, 240, 0.72) 0%, rgba(184, 164, 226, 0.64) 44%, rgba(150, 124, 212, 0.58) 100%)',
|
||
shadow: '0 18px 54px rgba(90, 60, 160, 0.18), 0 4px 16px rgba(90, 60, 160, 0.08)',
|
||
icon: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="10" y="10" width="28" height="28" rx="4"/><rect x="16" y="16" width="16" height="16" rx="2"/><line x1="18" y1="6" x2="18" y2="10"/><line x1="24" y1="6" x2="24" y2="10"/><line x1="30" y1="6" x2="30" y2="10"/><line x1="18" y1="38" x2="18" y2="42"/><line x1="24" y1="38" x2="24" y2="42"/><line x1="30" y1="38" x2="30" y2="42"/></svg>'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
showTalkVisible() {
|
||
return this.$store.state.product.showTalk
|
||
},
|
||
localizedSolutionCards() {
|
||
const keyMap = {
|
||
'群智协作': 'collaboration',
|
||
'空间觉醒': 'spatial',
|
||
'先见一步': 'predictive',
|
||
'洞察入微': 'vision',
|
||
'一问即达': 'qa',
|
||
'全程守护': 'protection',
|
||
'触文即懂': 'document',
|
||
'端侧即算': 'edge'
|
||
}
|
||
return this.solutionCards.map((card) => {
|
||
const key = keyMap[card.title]
|
||
if (!key) return card
|
||
return {
|
||
...card,
|
||
title: this.$t(`home.solutionCards.${key}.title`),
|
||
subtitle: this.$t(`home.solutionCards.${key}.subtitle`)
|
||
}
|
||
})
|
||
},
|
||
localizedCaseCards() {
|
||
const keys = ['railway', 'forestry', 'beigang']
|
||
return this.caseCards.map((card, index) => {
|
||
const key = keys[index]
|
||
if (!key) return card
|
||
return {
|
||
...card,
|
||
name: this.$t(`home.cases.${key}.name`),
|
||
title: this.$t(`home.cases.${key}.title`),
|
||
desc: this.$t(`home.cases.${key}.desc`)
|
||
}
|
||
})
|
||
},
|
||
localizedNewsList() {
|
||
const keys = ['first', 'second']
|
||
return this.newsList.map((item, index) => {
|
||
const key = keys[index]
|
||
if (!key) return item
|
||
return {
|
||
...item,
|
||
tag: this.$t('home.news.tag'),
|
||
title: this.$t(`home.news.${key}Title`),
|
||
desc: this.$t(`home.news.${key}Desc`)
|
||
}
|
||
})
|
||
},
|
||
visibleSolutionCards() {
|
||
const slots = [-3, -2, -1, 0, 1, 2, 3]
|
||
const len = this.localizedSolutionCards.length
|
||
return slots.map((slot) => {
|
||
const index = (this.currentSolutionIndex + slot + len) % len
|
||
return {
|
||
slot,
|
||
index,
|
||
card: this.localizedSolutionCards[index]
|
||
}
|
||
})
|
||
}
|
||
},
|
||
watch: {
|
||
showTalkVisible(value) {
|
||
if (value) {
|
||
this.stopSolutionCarousel()
|
||
} else {
|
||
this.startSolutionCarousel()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.startSolutionCarousel()
|
||
},
|
||
beforeDestroy() {
|
||
this.stopSolutionCarousel()
|
||
if (this.solutionAnimationTimer) {
|
||
window.clearTimeout(this.solutionAnimationTimer)
|
||
this.solutionAnimationTimer = null
|
||
}
|
||
},
|
||
methods: {
|
||
navigateTo(path) {
|
||
if (this.$route.path === path) return
|
||
this.$router.push(path).catch((error) => {
|
||
if (!error || error.name !== 'NavigationDuplicated') {
|
||
throw error
|
||
}
|
||
})
|
||
},
|
||
goSolution() {
|
||
const target = this.$el && this.$el.querySelector('#ai-solutions-section')
|
||
if (!target) return
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
})
|
||
},
|
||
contactSales() {
|
||
this.$store.commit('setShowTalk', true)
|
||
},
|
||
goCases() {
|
||
this.navigateTo('/homePage/agentStore')
|
||
},
|
||
goNews() {
|
||
this.navigateTo('/homePage/new')
|
||
},
|
||
|
||
|
||
nextSolution() {
|
||
this.switchSolution(1)
|
||
},
|
||
prevSolution() {
|
||
this.switchSolution(-1)
|
||
},
|
||
setSolutionIndex(index) {
|
||
if (index === this.currentSolutionIndex) return
|
||
this.switchSolution(index - this.currentSolutionIndex)
|
||
this.restartSolutionCarousel()
|
||
},
|
||
switchSolution(step) {
|
||
if (this.solutionAnimationTimer) {
|
||
window.clearTimeout(this.solutionAnimationTimer)
|
||
}
|
||
this.isSolutionRotating = false
|
||
this.$nextTick(() => {
|
||
this.isSolutionRotating = true
|
||
this.solutionAnimationTimer = window.setTimeout(() => {
|
||
this.isSolutionRotating = false
|
||
this.solutionAnimationTimer = null
|
||
}, 720)
|
||
})
|
||
this.currentSolutionIndex = (this.currentSolutionIndex + step + this.solutionCards.length) % this.solutionCards.length
|
||
},
|
||
startSolutionCarousel() {
|
||
if (this.solutionTimer) return
|
||
this.solutionTimer = window.setInterval(this.prevSolution, 2200)
|
||
},
|
||
stopSolutionCarousel() {
|
||
if (!this.solutionTimer) return
|
||
window.clearInterval(this.solutionTimer)
|
||
this.solutionTimer = null
|
||
},
|
||
restartSolutionCarousel() {
|
||
this.stopSolutionCarousel()
|
||
this.startSolutionCarousel()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.home-main-page {
|
||
min-height: 100vh;
|
||
background-color: #f0f7ff !important;
|
||
background-image: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%) !important;
|
||
color: #111827;
|
||
overflow-x: hidden;
|
||
overflow-y: visible;
|
||
position: relative;
|
||
}
|
||
|
||
.home-main-page > :not(.bg-orb) {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.bg-orb {
|
||
position: fixed;
|
||
border-radius: 50%;
|
||
filter: blur(80px);
|
||
opacity: 0.3;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bg-orb--1 {
|
||
width: 400px;
|
||
height: 400px;
|
||
background: #3b82f6;
|
||
top: -100px;
|
||
left: -100px;
|
||
}
|
||
|
||
.bg-orb--2 {
|
||
width: 500px;
|
||
height: 500px;
|
||
background: #3b82f6;
|
||
bottom: -150px;
|
||
right: -150px;
|
||
}
|
||
|
||
.bg-orb--3 {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: #ec4899;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.bg-orb--4 {
|
||
width: 350px;
|
||
height: 350px;
|
||
background: #f59e0b;
|
||
bottom: 30%;
|
||
right: 20%;
|
||
}
|
||
|
||
body.dark-theme .home-main-page {
|
||
background: #0f172a !important;
|
||
}
|
||
|
||
body.dark-theme .bg-orb {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.home-hero {
|
||
position: relative;
|
||
min-height: 760px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120px 24px 96px;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
}
|
||
|
||
.home-hero__inner {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 1180px;
|
||
margin-top: 90px;
|
||
text-align: center;
|
||
|
||
h1 {
|
||
margin: 0;
|
||
color: #111827;
|
||
font-size: 72px;
|
||
line-height: 1.18;
|
||
font-weight: 800;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
h2 {
|
||
margin: 20px 0 0;
|
||
font-size: 72px;
|
||
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #6366f1 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
p {
|
||
margin: 28px auto 0;
|
||
// max-width: 760px;
|
||
color: #4b5563;
|
||
font-size: 18px;
|
||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||
font-weight: 700;
|
||
line-height: 1.7;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
}
|
||
|
||
.hero-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
margin-top: 36px;
|
||
}
|
||
|
||
.use-btn,
|
||
.outline-btn {
|
||
min-width: 128px;
|
||
height: 48px;
|
||
padding: 0 32px;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.use-btn {
|
||
border: 0;
|
||
color: #fff;
|
||
background: #000;
|
||
box-shadow: 0 12px 28px rgba(37, 90, 255, 0.22);
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 16px 34px rgba(37, 90, 255, 0.3);
|
||
}
|
||
}
|
||
|
||
.outline-btn {
|
||
// border: 1px solid rgba(37, 90, 255, 0.24);
|
||
color: #000;
|
||
// background: rgba(255, 255, 255, 0.72);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
|
||
&:hover {
|
||
background: #fff;
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
.ai-solution-section {
|
||
position: relative;
|
||
padding: 60px 24px 110px;
|
||
scroll-margin-top: 90px;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
}
|
||
|
||
.ai-solution-inner {
|
||
position: relative;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 0 0 32px;
|
||
color: #111827;
|
||
font-size: 32px;
|
||
line-height: 1.3;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.solution-carousel {
|
||
position: relative;
|
||
overflow: visible;
|
||
}
|
||
|
||
.carousel-stage {
|
||
position: relative;
|
||
min-height: 430px;
|
||
perspective: 1200px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.solution-carousel.is-rotating {
|
||
.solution-card {
|
||
transition-duration: 1.05s;
|
||
}
|
||
}
|
||
|
||
.solution-card {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
width: 31%;
|
||
min-height: 330px;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 28px 20px;
|
||
cursor: pointer;
|
||
color: rgba(30, 40, 60, 0.88);
|
||
border: 1px solid rgba(255, 255, 255, 0.46);
|
||
backdrop-filter: blur(18px) saturate(1.4);
|
||
-webkit-backdrop-filter: blur(18px) saturate(1.4);
|
||
transform: translateX(-50%);
|
||
transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.05s ease, filter 1.05s ease;
|
||
box-sizing: border-box;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.48), transparent 42%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
h3 {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin: 24px 0 8px;
|
||
font-size: 24px;
|
||
line-height: 1.3;
|
||
font-weight: 800;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
span {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 28px;
|
||
height: 2px;
|
||
margin-bottom: 12px;
|
||
border-radius: 1px;
|
||
background: rgba(30, 40, 60, 0.2);
|
||
}
|
||
|
||
p {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin: 0;
|
||
color: rgba(30, 40, 60, 0.6);
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
&:hover {
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
&:hover .solution-card__front {
|
||
opacity: 0;
|
||
transform: translateY(-12px) scale(0.94);
|
||
}
|
||
|
||
&:hover .solution-card__detail {
|
||
background-color: #fff;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
}
|
||
}
|
||
|
||
.solution-card__front {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.28s ease;
|
||
}
|
||
|
||
.solution-card__icon {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 90px;
|
||
height: 90px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(20, 70, 130, 0.82);
|
||
background: rgba(255, 255, 255, 0.35);
|
||
border: 1px solid rgba(255, 255, 255, 0.55);
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||
backdrop-filter: blur(6px);
|
||
|
||
::v-deep svg {
|
||
width: 64px;
|
||
height: 64px;
|
||
}
|
||
}
|
||
|
||
.solution-card__detail {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 2;
|
||
padding: 26px 24px 24px;
|
||
border-radius: inherit;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
color: #1f2937;
|
||
text-align: left;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transform: translateY(16px);
|
||
transition: all 0.25s ease;
|
||
|
||
strong {
|
||
margin-bottom: 8px;
|
||
color: #0f172a;
|
||
font-size: 22px;
|
||
line-height: 1.25;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
em {
|
||
margin-bottom: 12px;
|
||
color: #334155;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
color: #475569;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
ul {
|
||
margin: 18px 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
li {
|
||
min-height: 72px;
|
||
padding: 10px 6px 9px;
|
||
border: 1px solid rgba(186, 220, 255, 0.72);
|
||
border-radius: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(240, 249, 255, 0.82);
|
||
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.06);
|
||
text-align: center;
|
||
|
||
b {
|
||
display: block;
|
||
color: #2563eb;
|
||
font-size: 26px;
|
||
line-height: 1.1;
|
||
font-weight: 800;
|
||
letter-spacing: -0.01em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
small {
|
||
display: block;
|
||
margin-top: 7px;
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
line-height: 1.25;
|
||
font-weight: 700;
|
||
}
|
||
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.solution-card--slot-0 {
|
||
z-index: 7;
|
||
opacity: 1;
|
||
transform: translateX(-50%) scale(1) rotateY(0);
|
||
}
|
||
|
||
.solution-card--slot--1 {
|
||
z-index: 6;
|
||
opacity: 0.72;
|
||
filter: blur(0.6px);
|
||
transform: translateX(-100%) translateY(28px) scale(0.82) rotateY(9deg);
|
||
}
|
||
|
||
.solution-card--slot-1 {
|
||
z-index: 6;
|
||
opacity: 0.72;
|
||
filter: blur(0.6px);
|
||
transform: translateX(0%) translateY(28px) scale(0.82) rotateY(-9deg);
|
||
}
|
||
|
||
.solution-card--slot--2 {
|
||
z-index: 5;
|
||
opacity: 0.38;
|
||
filter: blur(2px);
|
||
transform: translateX(-145%) translateY(54px) scale(0.66) rotateY(16deg);
|
||
}
|
||
|
||
.solution-card--slot-2 {
|
||
z-index: 5;
|
||
opacity: 0.38;
|
||
filter: blur(2px);
|
||
transform: translateX(45%) translateY(54px) scale(0.66) rotateY(-16deg);
|
||
}
|
||
|
||
.solution-card--slot--3 {
|
||
z-index: 4;
|
||
opacity: 0.16;
|
||
filter: blur(4px);
|
||
transform: translateX(-188%) translateY(76px) scale(0.54) rotateY(22deg);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.solution-card--slot-3 {
|
||
z-index: 4;
|
||
opacity: 0.16;
|
||
filter: blur(4px);
|
||
transform: translateX(88%) translateY(76px) scale(0.54) rotateY(-22deg);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.carousel-arrow {
|
||
position: absolute;
|
||
top: 44%;
|
||
z-index: 8;
|
||
width: 44px;
|
||
height: 44px;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #333;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
background: #fff;
|
||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
|
||
}
|
||
}
|
||
|
||
.carousel-arrow--prev {
|
||
left: -20px;
|
||
}
|
||
|
||
.carousel-arrow--next {
|
||
right: -20px;
|
||
}
|
||
|
||
.carousel-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
|
||
button {
|
||
width: 10px;
|
||
height: 10px;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 999px;
|
||
background: rgba(17, 24, 39, 0.16);
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
|
||
&.active {
|
||
width: 28px;
|
||
background: #5b8def;
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-section {
|
||
position: relative;
|
||
padding: 96px 24px 112px;
|
||
background: transparent;
|
||
}
|
||
|
||
.case-inner {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.case-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.case-more {
|
||
border: 0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: #2563eb;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
transition: color 0.2s ease, transform 0.2s ease;
|
||
|
||
&:hover {
|
||
color: #1d4ed8;
|
||
transform: translateX(4px);
|
||
}
|
||
}
|
||
|
||
.case-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 32px;
|
||
}
|
||
|
||
.case-card {
|
||
min-height: 520px;
|
||
border-radius: 24px;
|
||
perspective: 1400px;
|
||
}
|
||
|
||
.case-card__inner {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: inherit;
|
||
border-radius: inherit;
|
||
transform-style: preserve-3d;
|
||
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
.case-card:hover .case-card__inner {
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
.case-card__face {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
overflow: hidden;
|
||
backface-visibility: hidden;
|
||
-webkit-backface-visibility: hidden;
|
||
box-shadow: 0 24px 60px rgba(37, 99, 235, 0.12);
|
||
}
|
||
|
||
.case-card__front {
|
||
background: #eef7ff;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
}
|
||
|
||
.case-card:hover .case-card__front img {
|
||
transform: scale(1.06);
|
||
}
|
||
|
||
.case-card__back {
|
||
transform: rotateY(180deg);
|
||
display: flex;
|
||
color: #fff;
|
||
background: linear-gradient(135deg, rgba(71, 85, 105, 0.96), rgba(15, 23, 42, 0.98));
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(circle at 20% 16%, rgba(96, 165, 250, 0.32), transparent 32%),
|
||
radial-gradient(circle at 80% 86%, rgba(139, 92, 246, 0.24), transparent 34%);
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
.case-card__content {
|
||
position: relative;
|
||
z-index: 1;
|
||
min-height: 100%;
|
||
padding: 34px 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
h3 {
|
||
margin: 0 0 12px;
|
||
font-size: 32px;
|
||
line-height: 1.18;
|
||
font-weight: 800;
|
||
}
|
||
|
||
h4 {
|
||
margin: 0 0 18px;
|
||
color: #e0f2fe;
|
||
font-size: 21px;
|
||
line-height: 1.35;
|
||
font-weight: 700;
|
||
}
|
||
|
||
p {
|
||
margin: 0 0 16px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-size: 16px;
|
||
line-height: 1.75;
|
||
}
|
||
}
|
||
|
||
.case-card__summary {
|
||
opacity: 0.82;
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
.case-cta {
|
||
min-height: 168px;
|
||
margin-top: 64px;
|
||
padding: 42px 48px;
|
||
border-radius: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
overflow: hidden;
|
||
background-size: cover;
|
||
background-position: center;
|
||
box-shadow: 0 24px 60px rgba(37, 99, 235, 0.12);
|
||
|
||
h2 {
|
||
margin: 0 0 10px;
|
||
color: #111827;
|
||
font-size: 34px;
|
||
line-height: 1.25;
|
||
font-weight: 800;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
color: rgba(17, 24, 39, 0.72);
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
button {
|
||
flex-shrink: 0;
|
||
height: 44px;
|
||
padding: 0 28px;
|
||
border: 0;
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
background: #111827;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
transition: transform 0.2s ease, background 0.2s ease;
|
||
|
||
&:hover {
|
||
background: #1f2937;
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.news-section {
|
||
position: relative;
|
||
padding: 96px 24px 112px;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
}
|
||
|
||
.news-glow {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(64px);
|
||
opacity: 0.42;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.news-glow--left {
|
||
top: 48px;
|
||
left: 48px;
|
||
width: 288px;
|
||
height: 288px;
|
||
background: linear-gradient(135deg, #dbeafe, #e9d5ff);
|
||
}
|
||
|
||
.news-glow--right {
|
||
right: 80px;
|
||
bottom: 80px;
|
||
width: 320px;
|
||
height: 320px;
|
||
background: linear-gradient(135deg, #e9d5ff, #dbeafe);
|
||
}
|
||
|
||
.news-glow--center {
|
||
top: 48%;
|
||
left: 50%;
|
||
width: 380px;
|
||
height: 380px;
|
||
background: #d8b4fe;
|
||
opacity: 0.25;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.news-inner {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.news-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.news-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
.news-card {
|
||
position: relative;
|
||
min-height: 164px;
|
||
padding: 42px 48px;
|
||
border-radius: 28px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
|
||
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
||
|
||
&:hover,
|
||
&.news-card-active {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 28px 56px rgba(59, 130, 246, 0.14);
|
||
|
||
.news-card-glow,
|
||
.news-card-border {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.news-card-glow {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
opacity: 0;
|
||
background: radial-gradient(circle at 48% 50%, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 32%, rgba(236, 72, 153, 0.08) 60%, transparent 100%);
|
||
filter: blur(8px);
|
||
transition: opacity 0.45s ease;
|
||
animation: newsGlowPulse 12s ease-in-out infinite;
|
||
}
|
||
|
||
.news-card-border {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
padding: 3px;
|
||
border-radius: inherit;
|
||
opacity: 0;
|
||
background: linear-gradient(90deg, transparent 0%, rgba(139, 92, 246, 0.62) 24%, rgba(59, 130, 246, 0.62) 50%, rgba(236, 72, 153, 0.58) 76%, transparent 100%);
|
||
background-size: 220% 100%;
|
||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||
mask-composite: exclude;
|
||
pointer-events: none;
|
||
transition: opacity 0.45s ease;
|
||
animation: newsBorderFlow 4s linear infinite;
|
||
}
|
||
|
||
.news-card__content {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.news-card__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
|
||
span {
|
||
padding: 5px 12px;
|
||
border-radius: 999px;
|
||
font-size: 13px;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
}
|
||
|
||
time {
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.news-tag--blue {
|
||
color: #1d4ed8;
|
||
background: #dbeafe;
|
||
}
|
||
|
||
.news-tag--green {
|
||
color: #047857;
|
||
background: #d1fae5;
|
||
}
|
||
|
||
.news-card h2 {
|
||
margin: 0 0 10px;
|
||
color: #111827;
|
||
font-size: 25px;
|
||
line-height: 1.35;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.news-card p {
|
||
margin: 0;
|
||
color: #4b5563;
|
||
font-size: 16px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
@keyframes newsGlowPulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
filter: blur(8px);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.12);
|
||
filter: blur(16px);
|
||
}
|
||
}
|
||
|
||
@keyframes newsBorderFlow {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
|
||
100% {
|
||
background-position: 220% 50%;
|
||
}
|
||
}
|
||
|
||
@keyframes carouselRingSpin {
|
||
0% {
|
||
transform: rotateZ(0deg) scale(0.985);
|
||
}
|
||
|
||
45% {
|
||
transform: rotateZ(2.5deg) scale(1.015);
|
||
}
|
||
|
||
100% {
|
||
transform: rotateZ(0deg) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes centerCardSpin {
|
||
0% {
|
||
transform: translateX(-50%) scale(0.92) rotateY(-18deg) rotateZ(-4deg);
|
||
}
|
||
|
||
55% {
|
||
transform: translateX(-50%) scale(1.04) rotateY(10deg) rotateZ(3deg);
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(-50%) scale(1) rotateY(0deg) rotateZ(0deg);
|
||
}
|
||
}
|
||
|
||
@keyframes iconRoundSpin {
|
||
0% {
|
||
transform: rotate(0deg) scale(0.9);
|
||
}
|
||
|
||
70% {
|
||
transform: rotate(360deg) scale(1.08);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(360deg) scale(1);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.ai-solution-section {
|
||
padding: 40px 16px 72px;
|
||
}
|
||
|
||
.carousel-stage {
|
||
height: 360px;
|
||
}
|
||
|
||
.solution-card {
|
||
width: 72%;
|
||
height: 330px;
|
||
}
|
||
|
||
.solution-card--slot--2,
|
||
.solution-card--slot-2 {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.carousel-arrow--prev {
|
||
left: 0;
|
||
}
|
||
|
||
.carousel-arrow--next {
|
||
right: 0;
|
||
}
|
||
|
||
.case-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.case-card {
|
||
min-height: 460px;
|
||
}
|
||
|
||
.case-cta {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.news-head {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.news-card {
|
||
padding: 30px 24px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
@keyframes heroFadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
</style>
|