|
|
@@ -0,0 +1,2878 @@
|
|
|
+<script setup>
|
|
|
+import banner1Url from "../assets/images/banner.jpg?url";
|
|
|
+import news1 from "../assets/images/news1.jpg?url";
|
|
|
+import news3 from "../assets/images/news3.png?url";
|
|
|
+import news4 from "../assets/images/news4.png?url";
|
|
|
+import banner2Url from "../assets/images/banner2.jpg?url";
|
|
|
+import banner3Url from "../assets/images/banner3.jpg?url";
|
|
|
+import solutionsBgUrl from "../assets/images/bg.jpg?url";
|
|
|
+import capabilitiesBgUrl from "../assets/images/bg2.jpg?url";
|
|
|
+import sectionDataUrl from "../assets/illustrations/section-data.svg?url";
|
|
|
+import heroIndustrialUrl from "../assets/illustrations/hero-industrial.svg?url";
|
|
|
+import afterSalesUrl from "../assets/images/h8.png?url";
|
|
|
+import indexImg4BacksUrl from "../assets/images/index_img4_backs.png?url";
|
|
|
+import indexBack2Url from "../assets/images/index_back2.png?url";
|
|
|
+import jiaohuIconUrl from "../assets/images/h1.png?url";
|
|
|
+import h3 from "../assets/images/h3.png?url";
|
|
|
+import h4 from "../assets/images/h4.png?url";
|
|
|
+import h5 from "../assets/images/h5.png?url";
|
|
|
+import h6 from "../assets/images/h6.png?url";
|
|
|
+import h7 from "../assets/images/h7.png?url";
|
|
|
+import h8 from "../assets/images/h8.png?url";
|
|
|
+import h9 from "../assets/images/h9.png?url";
|
|
|
+import value1 from "../assets/images/value1.png?url";
|
|
|
+import value2 from "../assets/images/value2.png?url";
|
|
|
+import value3 from "../assets/images/value3.jpg?url";
|
|
|
+import value4 from "../assets/images/value4.png?url";
|
|
|
+import value5 from "../assets/images/value5.jpg?url";
|
|
|
+import jishu from "../assets/images/jishu.jpg?url";
|
|
|
+import planIconUrl from "../assets/images/h2.png?url";
|
|
|
+import p1 from "../assets/images/p1.png?url";
|
|
|
+import p2 from "../assets/images/p2.png?url";
|
|
|
+// import p4 from "../assets/images/p4.png?url";
|
|
|
+import p3 from "../assets/images/p3.png?url";
|
|
|
+import sence2 from "../assets/images/sence2.jpg?url";
|
|
|
+import sence3 from "../assets/images/sence3.png?url";
|
|
|
+import sence from "../assets/images/sence.png?url";
|
|
|
+import sence4 from "../assets/images/sence4.png?url";
|
|
|
+import sence6 from "../assets/images/sence6.jpeg?url";
|
|
|
+import b1 from "../assets/images/b1.png";
|
|
|
+import b2 from "../assets/images/b2.png";
|
|
|
+import b3 from "../assets/images/b3.png";
|
|
|
+import b4 from "../assets/images/b4.png";
|
|
|
+import b5 from "../assets/images/b5.png";
|
|
|
+import CountUp from "../components/motion/CountUp.vue";
|
|
|
+import Reveal from "../components/motion/Reveal.vue";
|
|
|
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
|
|
+import { Icon } from "@iconify/vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+
|
|
|
+import xin1 from "../assets/images/xin1.png";
|
|
|
+import xin2 from "../assets/images/xin2.png";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
+const slides = [
|
|
|
+ {
|
|
|
+ bg: banner1Url,
|
|
|
+ kicker: "油田数智化 · 端边云协同 · 生产经营一体化",
|
|
|
+ headline1: "油气领域专属工业互联网平台",
|
|
|
+ headline2Before: "",
|
|
|
+ headline2Emphasis: "",
|
|
|
+ headline2After: "",
|
|
|
+ desc: "以边云协同、AI驱动智能决策，是打通油气领域全链条的数据中枢，实现设备互联、数据贯通与业务协同，助力油气生产更高效、更安全、更绿色",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bg: banner2Url,
|
|
|
+ kicker: "油田数据治理 · 主数据/指标 · 统一口径",
|
|
|
+ headline1: "油气专属设备智能管理平台",
|
|
|
+ headline2Before: "",
|
|
|
+ headline2Emphasis: "",
|
|
|
+ headline2After: "",
|
|
|
+ desc: "基于油气领域工业互联网平台，打造数采、设备、维保、巡检、预测性维护与一体的设备管理系统，实现全生命周期数字化管控。以数据驱动智运维，提升设备可靠性与运行效率，为油气生产安全、稳定运行提供坚实支撑",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ bg: banner3Url,
|
|
|
+ kicker: "场景方案 · 快速复制 · 价值闭环",
|
|
|
+ headline1: "AI钻井优化，提升钻井效率，缩短钻井周期",
|
|
|
+ headline2Before: "",
|
|
|
+ headline2Emphasis: "",
|
|
|
+ headline2After: "",
|
|
|
+ desc: "基于数采、大模型技术，打造智能钻井优化方案，实时提供钻井参数优化与场指导，助力钻速提升30%以上。以AI驱动智能钻井、降本增效、安全可控，为油气勘探开发注入数智动能 ",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const heroBottomTiles = [
|
|
|
+ {
|
|
|
+ icon: "lucide:package-check",
|
|
|
+ title: "解决方案",
|
|
|
+ desc: "一站式解决方案",
|
|
|
+ url: b1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "lucide:layers",
|
|
|
+ title: "客户案例",
|
|
|
+ desc: "覆盖行业广泛",
|
|
|
+ url: b2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "lucide:beaker",
|
|
|
+ title: "数据驱动",
|
|
|
+ desc: "数据资产驱动价值闭环",
|
|
|
+ url: b3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "lucide:shield-check",
|
|
|
+ title: "量化指标",
|
|
|
+ desc: "数据指标可视化，清晰易懂",
|
|
|
+ url: b4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "lucide:compass",
|
|
|
+ title: "设备运维",
|
|
|
+ desc: "设备全生命周期管理",
|
|
|
+ url: b5,
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const activeIndex = ref(0);
|
|
|
+const paused = ref(false);
|
|
|
+const autoplayMs = 6500;
|
|
|
+let timer = null;
|
|
|
+
|
|
|
+const activeSlide = computed(() => slides[activeIndex.value]);
|
|
|
+const bgStyle = computed(() => ({
|
|
|
+ backgroundImage: `url(${activeSlide.value.bg})`,
|
|
|
+}));
|
|
|
+
|
|
|
+function prefersReducedMotion() {
|
|
|
+ return (
|
|
|
+ typeof window !== "undefined" &&
|
|
|
+ window.matchMedia &&
|
|
|
+ window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+function next() {
|
|
|
+ activeIndex.value = (activeIndex.value + 1) % slides.length;
|
|
|
+}
|
|
|
+
|
|
|
+function goTo(index) {
|
|
|
+ activeIndex.value = index;
|
|
|
+}
|
|
|
+
|
|
|
+function start() {
|
|
|
+ if (prefersReducedMotion()) return;
|
|
|
+ stop();
|
|
|
+ timer = setInterval(() => {
|
|
|
+ if (!paused.value) next();
|
|
|
+ }, autoplayMs);
|
|
|
+}
|
|
|
+
|
|
|
+function stop() {
|
|
|
+ if (!timer) return;
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = null;
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(start);
|
|
|
+onBeforeUnmount(stop);
|
|
|
+
|
|
|
+const capabilityPlatforms = [
|
|
|
+ {
|
|
|
+ title: "连接现场设备",
|
|
|
+ desc: "打通井场、站控与 SCADA 数据链路，构建稳定可扩展的采集与边缘体系。",
|
|
|
+ art: heroIndustrialUrl,
|
|
|
+ variant: "connect",
|
|
|
+ modules: [
|
|
|
+ { title: "多协议采集", icon: "lucide:radio-tower" },
|
|
|
+ { title: "SCADA 接入", icon: "lucide:plug-zap" },
|
|
|
+ { title: "边缘计算", icon: "lucide:cpu" },
|
|
|
+ { title: "离线缓存", icon: "lucide:hard-drive-download" },
|
|
|
+ { title: "资产台账", icon: "lucide:barcode" },
|
|
|
+ { title: "运行监控", icon: "lucide:activity" },
|
|
|
+ { title: "告警联动", icon: "lucide:bell-ring" },
|
|
|
+ { title: "远程运维", icon: "lucide:wrench" },
|
|
|
+ { title: "时序存储", icon: "lucide:clock-3" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "数据资产治理",
|
|
|
+ desc: "统一资产与指标口径，完善血缘与质量体系，让数据资产可管、可用、可运营。",
|
|
|
+ art: sectionDataUrl,
|
|
|
+ variant: "connect",
|
|
|
+ modules: [
|
|
|
+ { title: "资产目录", icon: "lucide:library" },
|
|
|
+ { title: "主数据管理", icon: "lucide:id-card" },
|
|
|
+ { title: "血缘追踪", icon: "lucide:git-fork" },
|
|
|
+ { title: "质量校验", icon: "lucide:badge-check" },
|
|
|
+ { title: "指标中心", icon: "lucide:gauge" },
|
|
|
+ { title: "标签体系", icon: "lucide:tags" },
|
|
|
+ { title: "权限审计", icon: "lucide:shield-check" },
|
|
|
+ { title: "数据脱敏", icon: "lucide:eye-off" },
|
|
|
+ { title: "数据服务 API", icon: "lucide:braces" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "生产运营决策",
|
|
|
+ desc: "面向生产运行与经营管理，快速构建大屏、报表、预警与处置闭环应用。",
|
|
|
+ art: heroIndustrialUrl,
|
|
|
+ variant: "connect",
|
|
|
+ modules: [
|
|
|
+ { title: "生产指挥大屏", icon: "lucide:layout-dashboard" },
|
|
|
+ { title: "报表中心", icon: "lucide:file-bar-chart" },
|
|
|
+ { title: "异常预警", icon: "lucide:siren" },
|
|
|
+ { title: "工单闭环", icon: "lucide:clipboard-check" },
|
|
|
+ { title: "能耗管理", icon: "lucide:zap" },
|
|
|
+ {
|
|
|
+ title: "注采分析",
|
|
|
+ icon: "lucide:droplets",
|
|
|
+ badge: "新",
|
|
|
+ badgeTone: "new",
|
|
|
+ },
|
|
|
+ { title: "集输监测", icon: "lucide:route" },
|
|
|
+ {
|
|
|
+ title: "预测维护",
|
|
|
+ icon: "lucide:heart-pulse",
|
|
|
+ badge: "热",
|
|
|
+ badgeTone: "hot",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "智能问答",
|
|
|
+ icon: "lucide:messages-square",
|
|
|
+ badge: "新",
|
|
|
+ badgeTone: "new",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const products = [
|
|
|
+ {
|
|
|
+ title: "油田数智底座（PaaS）",
|
|
|
+ desc: "面向油田场景的数字底座：模型、流程、权限、消息与开放接口。",
|
|
|
+ tags: ["组件化", "开放 API", "多租户"],
|
|
|
+ cover: p1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "井站物联与边缘网关",
|
|
|
+ desc: "统一接入、监控、告警与远程运维，沉淀井站资产与运行状态。",
|
|
|
+ tags: ["协议适配", "边缘采集", "运行监控"],
|
|
|
+ cover: banner2Url,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "数据资产与指标中心",
|
|
|
+ desc: "从采集到治理再到分析：资产目录、血缘、质量与指标口径管理。",
|
|
|
+ tags: ["主数据", "质量校验", "指标中心"],
|
|
|
+ cover: p2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "智能分析与预测维护",
|
|
|
+ desc: "结合油田机理与算法能力，落地工况识别、故障预警与能效优化。",
|
|
|
+ tags: ["工况识别", "预测维护", "能效优化"],
|
|
|
+ cover: p3,
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const solutions = [
|
|
|
+ {
|
|
|
+ title: "设备管理",
|
|
|
+ desc: "井场数据汇聚、施工过程可视化与风险预警。",
|
|
|
+ cover: sence,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "智能钻修井",
|
|
|
+ desc: "生产运行监控、工况分析与产量波动诊断。",
|
|
|
+ cover: sence2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "智慧注气",
|
|
|
+ desc: "站库管网联动监测、泄漏/压降异常识别。",
|
|
|
+ cover: sence3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "智慧压裂",
|
|
|
+ desc: "注采平衡分析、配注优化与效益评估。",
|
|
|
+ cover: sence4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "智慧管网",
|
|
|
+ desc: "能耗在线核算、节能评估与合规披露闭环。",
|
|
|
+ cover: news1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "场站管理",
|
|
|
+ desc: "告警闭环、工单联动与知识沉淀，提升设备可靠性。",
|
|
|
+ cover: sence6,
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const solutionsTabIndex = ref(0);
|
|
|
+
|
|
|
+const cases = [
|
|
|
+ {
|
|
|
+ title: "采油厂",
|
|
|
+ desc: "生产运行监控、工况分析与异常处置闭环",
|
|
|
+ icon: "lucide:factory",
|
|
|
+ cover: value1,
|
|
|
+ bg: value1,
|
|
|
+ detail:
|
|
|
+ "以井站数据为底座，构建日/周/月报、重点井监控与异常处置闭环，支撑提质增效。",
|
|
|
+ metrics: [
|
|
|
+ { label: "接入井站", end: 200, suffix: "+" },
|
|
|
+
|
|
|
+ { label: "处置效率提升", end: 35, suffix: "%" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "集输站",
|
|
|
+ desc: "站库管网联动监测、压降异常识别与能效优化",
|
|
|
+ icon: "lucide:route",
|
|
|
+ cover: value2,
|
|
|
+ bg: jishu,
|
|
|
+ detail:
|
|
|
+ "打通站库管网关键指标，实现压降/泄漏异常识别与能耗核算，持续优化运行策略。",
|
|
|
+ metrics: [
|
|
|
+ { label: "监测站点", end: 150, suffix: "+" },
|
|
|
+
|
|
|
+ { label: "能耗降低", end: 18, suffix: "%" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "注水注气",
|
|
|
+ desc: "注采平衡分析、配注优化与效果评估",
|
|
|
+ icon: "lucide:droplets",
|
|
|
+ cover: value3,
|
|
|
+ bg: value3,
|
|
|
+ detail:
|
|
|
+ "构建注采指标体系与可视化分析，形成配注优化建议与效果评估闭环，支撑精细开发。",
|
|
|
+ metrics: [
|
|
|
+ { label: "注水井数", end: 320, suffix: "+" },
|
|
|
+
|
|
|
+ { label: "采收率提升", end: 12, suffix: "%" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "设备运维",
|
|
|
+ desc: "远程运维、预测维护与可靠性提升",
|
|
|
+ icon: "lucide:wrench",
|
|
|
+ cover: value4,
|
|
|
+ bg: value4,
|
|
|
+ detail:
|
|
|
+ "告警联动工单与知识库沉淀，结合预测维护模型，降低非计划停机与运维成本。",
|
|
|
+ metrics: [
|
|
|
+ { label: "接入设备", end: 1200, suffix: "+" },
|
|
|
+
|
|
|
+ { label: "运维成本降低", end: 30, suffix: "%" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "QHSE",
|
|
|
+ desc: "质量、健康、安全与环境管理体系",
|
|
|
+ icon: "ci:shield-check",
|
|
|
+ cover: value5,
|
|
|
+ bg: value5,
|
|
|
+ detail:
|
|
|
+ "全面的 QHSE 管理体系，确保产品质量、职业健康、生产安全与环境保护的协调发展。",
|
|
|
+ metrics: [
|
|
|
+ { label: "接入劳动者", end: 8000, suffix: "+" },
|
|
|
+
|
|
|
+ { label: "安全风险降低", end: 35, suffix: "%" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const valueCaseActiveIndex = ref(0);
|
|
|
+function activateValueCase(index) {
|
|
|
+ valueCaseActiveIndex.value = index;
|
|
|
+}
|
|
|
+
|
|
|
+const news = [
|
|
|
+ {
|
|
|
+ date: "2026-03-12",
|
|
|
+ tag: "发布",
|
|
|
+ title: "强强联合 数智赋能｜科瑞石油技术与帆软软件正式签署战略合作协议",
|
|
|
+ desc: "",
|
|
|
+ cover: xin1,
|
|
|
+ type: "featured", // 上部大图新闻
|
|
|
+ link: "/news/4",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2026-03-16",
|
|
|
+ tag: "活动",
|
|
|
+ title: "科瑞石油技术邀您相聚EGYPES2026埃及石油展",
|
|
|
+ desc: "",
|
|
|
+ cover: xin2,
|
|
|
+ type: "featured", // 上部大图新闻
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2026-01-06",
|
|
|
+ tag: "更新",
|
|
|
+ title: "夯实数字新基座：科瑞石油技术DeepOil平台获市级工业互联网平台认证",
|
|
|
+ desc: "DeepOil平台的核心价值，在于为复杂的工业现场构建了统一、稳定、安全的数据桥梁。",
|
|
|
+ cover: xin3,
|
|
|
+ type: "list", // 下部列表新闻
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2025-12-20",
|
|
|
+ tag: "案例",
|
|
|
+ title: "",
|
|
|
+ desc: "连油突破区域壁垒，喜迎开门红。",
|
|
|
+ cover: afterSalesUrl,
|
|
|
+ type: "list", // 下部列表新闻
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const marketActivities = [
|
|
|
+ {
|
|
|
+ title: "AI设备管理系统实现在线状态智能分析，隐患早发现",
|
|
|
+ desc: "2025中国5G+工业互联网大会在武汉开幕，DeepOil精彩亮相。",
|
|
|
+ cover: news1,
|
|
|
+ link: "/news/1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "石化行业设备完整性管理数字化：破解运维痛点的核心方案",
|
|
|
+ desc: "推动工业智能化发展，助力企业创新转型。",
|
|
|
+ cover: news3,
|
|
|
+ link: "/news/2",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "制造业新趋势：从“事后维修” 到“预测性维护”，只差一套系统",
|
|
|
+ desc: "打造“人工智能+工业互联网”赋能制造业转型发展新范式",
|
|
|
+ cover: news4,
|
|
|
+ link: "/news/3",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const partnerSources = [
|
|
|
+ jiaohuIconUrl,
|
|
|
+ planIconUrl,
|
|
|
+
|
|
|
+ h3,
|
|
|
+ h4,
|
|
|
+ h5,
|
|
|
+ h6,
|
|
|
+ h7,
|
|
|
+ h8,
|
|
|
+ h9,
|
|
|
+ // h10,
|
|
|
+ // h11,
|
|
|
+ // h12,
|
|
|
+];
|
|
|
+const partners = Array.from({ length: 10 }).map((_, idx) => ({
|
|
|
+ id: idx + 1,
|
|
|
+ src: partnerSources[idx % partnerSources.length],
|
|
|
+ alt: `伙伴标识 ${idx + 1}`,
|
|
|
+}));
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <section
|
|
|
+ class="hero"
|
|
|
+ @mouseenter="paused = true"
|
|
|
+ @mouseleave="paused = false"
|
|
|
+ >
|
|
|
+ <Transition name="heroBg" mode="out-in">
|
|
|
+ <div
|
|
|
+ :key="activeIndex"
|
|
|
+ class="hero__bg"
|
|
|
+ :style="bgStyle"
|
|
|
+ aria-hidden="true"
|
|
|
+ ></div>
|
|
|
+ </Transition>
|
|
|
+ <div class="hero__veil" aria-hidden="true"></div>
|
|
|
+ <div class="container hero__inner">
|
|
|
+ <div class="hero__content">
|
|
|
+ <Transition name="heroText" mode="out-in">
|
|
|
+ <div :key="activeIndex" class="hero__copy">
|
|
|
+ <div class="section-kicker">{{ activeSlide.kicker }}</div>
|
|
|
+ <h3 class="hero__title">
|
|
|
+ {{ activeSlide.headline1 }}<br />
|
|
|
+ {{ activeSlide.headline2Before
|
|
|
+ }}<span class="hero__em">{{
|
|
|
+ activeSlide.headline2Emphasis
|
|
|
+ }}</span
|
|
|
+ >{{ activeSlide.headline2After }}
|
|
|
+ </h3>
|
|
|
+ <p class="hero__desc muted">{{ activeSlide.desc }}</p>
|
|
|
+ <div class="hero__cta">
|
|
|
+ <RouterLink class="btn btn-primary" to="/contact"
|
|
|
+ >申请演示</RouterLink
|
|
|
+ >
|
|
|
+ <!-- <RouterLink class="btn btn-ghost" to="/solutions"
|
|
|
+ >查看解决方案</RouterLink
|
|
|
+ > -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+
|
|
|
+ <div class="hero__controls" aria-label="首页轮播控制">
|
|
|
+ <div class="dots" role="tablist" aria-label="轮播指示器">
|
|
|
+ <button
|
|
|
+ v-for="(s, idx) in slides"
|
|
|
+ :key="s.bg"
|
|
|
+ class="dotBtn"
|
|
|
+ type="button"
|
|
|
+ role="tab"
|
|
|
+ :aria-selected="activeIndex === idx ? 'true' : 'false'"
|
|
|
+ :aria-label="`切换到第 ${idx + 1} 张`"
|
|
|
+ :data-active="activeIndex === idx ? 'true' : 'false'"
|
|
|
+ @click="goTo(idx)"
|
|
|
+ ></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="heroStrip" aria-label="轮播图底部信息板块">
|
|
|
+ <div class="heroStrip__inner">
|
|
|
+ <div class="heroStripGrid" role="list">
|
|
|
+ <div
|
|
|
+ v-for="tile in heroBottomTiles"
|
|
|
+ :key="tile.title"
|
|
|
+ class="heroStripCard"
|
|
|
+ style="align-items: center"
|
|
|
+ role="listitem"
|
|
|
+ :data-tone="tile.tone || 'default'"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="heroStripIcon"
|
|
|
+ aria-hidden="true"
|
|
|
+ style="padding-top: 20px"
|
|
|
+ >
|
|
|
+ <img :src="tile.url" alt="" style="width: 50px; height: 50px" />
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column">
|
|
|
+ <div class="heroStripTitle">{{ tile.title }}</div>
|
|
|
+ <div v-if="tile.desc" class="heroStripDesc">
|
|
|
+ {{ tile.desc }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section capabilitiesBg">
|
|
|
+ <div class="container">
|
|
|
+ <Reveal as="div" class="sectionHead" :delay="0">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <h2 class="h2" style="padding: 0 30px">
|
|
|
+ 数据驱动、形成油气价值闭环
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+
|
|
|
+ <div class="capPlatformGrid" aria-label="油田数智化能力九宫格">
|
|
|
+ <Reveal
|
|
|
+ v-for="(p, idx) in capabilityPlatforms"
|
|
|
+ :key="p.title"
|
|
|
+ as="div"
|
|
|
+ class="capPlatformCard card hover-lift"
|
|
|
+ :data-variant="p.variant"
|
|
|
+ :delay="80 + idx * 80"
|
|
|
+ >
|
|
|
+ <div class="capPlatformHead">
|
|
|
+ <div class="capPlatformCopy">
|
|
|
+ <div class="capPlatformTitle">{{ p.title }}</div>
|
|
|
+ <div class="capPlatformDesc">{{ p.desc }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="capModuleGrid" role="list">
|
|
|
+ <div
|
|
|
+ v-for="m in p.modules"
|
|
|
+ :key="`${p.title}-${m.title}`"
|
|
|
+ class="capModuleTile"
|
|
|
+ role="listitem"
|
|
|
+ >
|
|
|
+ <div class="capModuleIcon" aria-hidden="true">
|
|
|
+ <Icon :icon="m.icon" width="26" height="26" />
|
|
|
+ </div>
|
|
|
+ <div class="capModuleName">{{ m.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section section--soft">
|
|
|
+ <div class="container">
|
|
|
+ <Reveal as="div" class="sectionHead" :delay="0">
|
|
|
+ <div>
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <h2 class="h2" style="padding: 0 30px">覆盖油气生产全链路</h2>
|
|
|
+ </div>
|
|
|
+ <div class="muted" style="text-align: center; padding-top: 20px">
|
|
|
+ 从井场到站控，从数据到应用，按需组合，快速交付。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+
|
|
|
+ <div class="grid grid-4">
|
|
|
+ <Reveal
|
|
|
+ v-for="(p, idx) in products"
|
|
|
+ :key="p.title"
|
|
|
+ as="div"
|
|
|
+ class="card card-pad productCard hover-lift"
|
|
|
+ :delay="80 + idx * 70"
|
|
|
+ >
|
|
|
+ <div class="productImageWrapper">
|
|
|
+ <img :src="p.cover" :alt="p.title" class="productImage" />
|
|
|
+ </div>
|
|
|
+ <div class="productContent">
|
|
|
+ <div class="productTitle">{{ p.title }}</div>
|
|
|
+ <div class="muted productDesc">{{ p.desc }}</div>
|
|
|
+ <div class="productTags">
|
|
|
+ <span v-for="t in p.tags" :key="t" class="pill">{{ t }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section" style="padding-left: 0; padding-right: 0">
|
|
|
+ <div>
|
|
|
+ <Reveal as="div" class="sectionHead" :delay="0">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <h2 class="h2" style="padding: 0 30px">面向场景的可复制实践</h2>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+
|
|
|
+ <div class="solutionsTabContainer">
|
|
|
+ <div class="solutionsTabs">
|
|
|
+ <button
|
|
|
+ v-for="(s, idx) in solutions"
|
|
|
+ :key="s.title"
|
|
|
+ class="solutionsTabBtn"
|
|
|
+ :class="{ active: solutionsTabIndex === idx }"
|
|
|
+ @click="solutionsTabIndex = idx"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="s.title === '设备管理'"
|
|
|
+ src="../assets//images/s1.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 50px; height: 50px"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="s.title === '智能钻修井'"
|
|
|
+ src="../assets//images/s2.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 50px; height: 50px"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img
|
|
|
+ v-if="s.title === '智慧注气'"
|
|
|
+ src="../assets//images/s3.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 50px; height: 50px"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img
|
|
|
+ v-if="s.title === '智慧压裂'"
|
|
|
+ src="../assets//images/s4.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 50px; height: 50px"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img
|
|
|
+ v-if="s.title === '智慧管网'"
|
|
|
+ src="../assets//images/s5.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 50px; height: 50px"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img
|
|
|
+ v-if="s.title === '场站管理'"
|
|
|
+ src="../assets//images/s6.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 50px; height: 50px"
|
|
|
+ />
|
|
|
+ {{ s.title }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="solutionsTabContent">
|
|
|
+ <div class="solutionsTabInner">
|
|
|
+ <Transition name="slide-up" mode="out-in">
|
|
|
+ <div :key="solutionsTabIndex" class="solutionsTabText">
|
|
|
+ <div class="solutionsTabTitle">
|
|
|
+ {{ solutions[solutionsTabIndex].title }}
|
|
|
+ </div>
|
|
|
+ <div class="solutionsTabDesc">
|
|
|
+ {{ solutions[solutionsTabIndex].desc }}
|
|
|
+ </div>
|
|
|
+ <RouterLink class="solutionsTabLink" to="/solutions">
|
|
|
+ 了解更多<Icon
|
|
|
+ icon="lucide:chevron-right"
|
|
|
+ width="20"
|
|
|
+ height="20"
|
|
|
+ />
|
|
|
+ </RouterLink>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ <Transition name="slide-up" mode="out-in">
|
|
|
+ <div :key="solutionsTabIndex" class="solutionsTabImage">
|
|
|
+ <img
|
|
|
+ :src="solutions[solutionsTabIndex].cover"
|
|
|
+ :alt="solutions[solutionsTabIndex].title"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section style="background-color: transparent; margin-top: 30px">
|
|
|
+ <div>
|
|
|
+ <Reveal as="div" class="sectionHead" :delay="0">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <h2 class="h2" style="padding: 0 10px">用可量化指标呈现业务价值</h2>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+ <div style="display: flex; justify-content: center; margin-top: 20px">
|
|
|
+ <RouterLink class="btn btn-link" to="/cases"
|
|
|
+ >查看更多案例
|
|
|
+ <Icon icon="lucide:chevron-right" width="24" height="24"
|
|
|
+ /></RouterLink>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="valueAcc"
|
|
|
+ style="padding: 0 100px; height: 700px; margin-top: 20px"
|
|
|
+ role="list"
|
|
|
+ aria-label="业务价值横向手风琴"
|
|
|
+ >
|
|
|
+ <Transition name="fade" mode="out-in">
|
|
|
+ <div
|
|
|
+ v-if="valueCaseActiveIndex >= 0"
|
|
|
+ :key="valueCaseActiveIndex"
|
|
|
+ class="valueAccBg"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${cases[valueCaseActiveIndex].bg})`,
|
|
|
+ }"
|
|
|
+ aria-hidden="true"
|
|
|
+ ></div>
|
|
|
+ </Transition>
|
|
|
+
|
|
|
+ <Reveal
|
|
|
+ v-for="(c, idx) in cases"
|
|
|
+ :key="c.title"
|
|
|
+ as="div"
|
|
|
+ style="border: none"
|
|
|
+ class="valueAccItem hover-lift"
|
|
|
+ role="listitem"
|
|
|
+ tabindex="0"
|
|
|
+ :data-active="valueCaseActiveIndex === idx ? 'true' : 'false'"
|
|
|
+ :aria-label="`价值案例：${c.title}`"
|
|
|
+ :delay="60 + idx * 70"
|
|
|
+ @mouseenter="activateValueCase(idx)"
|
|
|
+ @focusin="activateValueCase(idx)"
|
|
|
+ @click="activateValueCase(idx)"
|
|
|
+ @keydown.enter.prevent="activateValueCase(idx)"
|
|
|
+ @keydown.space.prevent="activateValueCase(idx)"
|
|
|
+ >
|
|
|
+ <div class="valueAccInner">
|
|
|
+ <div
|
|
|
+ class="valueAccCollapsed"
|
|
|
+ :aria-hidden="valueCaseActiveIndex === idx ? 'true' : 'false'"
|
|
|
+ :style="{ '--value-collapsed-bg': `url(${indexBack2Url})` }"
|
|
|
+ >
|
|
|
+ <div class="valueAccIcon" aria-hidden="true">
|
|
|
+ <Icon :icon="c.icon" width="28" height="28" />
|
|
|
+ </div>
|
|
|
+ <div class="valueAccTitle">{{ c.title }}</div>
|
|
|
+ <div class="valueAccLine" aria-hidden="true"></div>
|
|
|
+ <div class="muted valueAccDesc">{{ c.desc }}</div>
|
|
|
+ <div class="valueAccPlus" aria-hidden="true">
|
|
|
+ <Icon icon="ri:add-fill" width="24" height="24" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="valueAccExpanded"
|
|
|
+ :aria-hidden="valueCaseActiveIndex === idx ? 'false' : 'true'"
|
|
|
+ >
|
|
|
+ <div class="valueAccCover">
|
|
|
+ <img
|
|
|
+ :src="c.cover"
|
|
|
+ :alt="`${c.title} 场景图`"
|
|
|
+ loading="lazy"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="valueAccBottom"
|
|
|
+ :style="{ '--value-bottom-bg': `url(${indexImg4BacksUrl})` }"
|
|
|
+ >
|
|
|
+ <!-- <div class="valueAccBottomTitle">{{ c.title }}</div> -->
|
|
|
+ <div class="valueAccBottomText">{{ c.detail }}</div>
|
|
|
+ <div class="valueAccMetricsExpanded">
|
|
|
+ <div
|
|
|
+ v-for="(m, midx) in c.metrics"
|
|
|
+ :key="m.label + '-' + valueCaseActiveIndex"
|
|
|
+ class="valueAccMetricExpanded"
|
|
|
+ >
|
|
|
+ <div class="valueAccMetricValueExpanded">
|
|
|
+ <CountUp
|
|
|
+ :end="m.end"
|
|
|
+ :suffix="m.suffix"
|
|
|
+ v-if="valueCaseActiveIndex === idx"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="valueAccMetricLabelExpanded">
|
|
|
+ {{ m.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <RouterLink class="valueAccBtn" to="/cases"
|
|
|
+ >了解更多</RouterLink
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 平台更新与行业观点 - 左右两栏布局 -->
|
|
|
+ <section style="margin-top: 20px">
|
|
|
+ <div class="container">
|
|
|
+ <Reveal as="div" class="sectionHead" :delay="0">
|
|
|
+ <div>
|
|
|
+ <h2 class="h2">新闻资讯与市场活动</h2>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+
|
|
|
+ <!-- 左右两栏布局 -->
|
|
|
+ <div class="news-market-grid">
|
|
|
+ <!-- 左侧：新闻资讯 -->
|
|
|
+ <div class="news-column">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <h3>新闻资讯</h3>
|
|
|
+ <RouterLink
|
|
|
+ class="btn btn-link"
|
|
|
+ style="font-size: 14px; color: #595959"
|
|
|
+ to="/news"
|
|
|
+ >查看更多
|
|
|
+ <Icon icon="lucide:chevron-right" width="20" height="20"
|
|
|
+ /></RouterLink>
|
|
|
+ </div>
|
|
|
+ <div class="news-featured">
|
|
|
+ <!-- 上部：2个带缩略图的新闻（图片全屏+文字覆盖） -->
|
|
|
+ <Reveal
|
|
|
+ v-for="(n, idx) in news.filter(
|
|
|
+ (item) => item.type === 'featured',
|
|
|
+ )"
|
|
|
+ :key="n.title"
|
|
|
+ as="div"
|
|
|
+ class="news-featured-item"
|
|
|
+ :delay="80 + idx * 60"
|
|
|
+ >
|
|
|
+ <RouterLink class="news-featured-link" :to="n.link">
|
|
|
+ <div class="news-featured-image-wrapper">
|
|
|
+ <img
|
|
|
+ :src="n.cover"
|
|
|
+ :alt="n.title"
|
|
|
+ class="news-featured-image"
|
|
|
+ loading="lazy"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="news-featured-overlay">
|
|
|
+ <div class="news-featured-meta">
|
|
|
+ <!-- <span class="news-featured-tag">{{ n.tag }}</span> -->
|
|
|
+ <span class="news-featured-date">{{ n.date }}</span>
|
|
|
+ </div>
|
|
|
+ <h3 class="news-featured-title">{{ n.title }}</h3>
|
|
|
+ </div>
|
|
|
+ </RouterLink>
|
|
|
+ </Reveal>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 下部：列表形式的新闻 -->
|
|
|
+ <div class="news-list">
|
|
|
+ <Reveal
|
|
|
+ v-for="(n, idx) in news.filter((item) => item.type === 'list')"
|
|
|
+ :key="n.title"
|
|
|
+ as="div"
|
|
|
+ class="news-list-item"
|
|
|
+ :delay="140 + idx * 60"
|
|
|
+ >
|
|
|
+ <RouterLink class="news-list-link" to="/news">
|
|
|
+ <div class="news-list-content">
|
|
|
+ <div class="news-meta">
|
|
|
+ <!-- <span class="pill">{{ n.tag }}</span> -->
|
|
|
+ <span class="muted news-date">{{ n.date }}</span>
|
|
|
+ </div>
|
|
|
+ <p class="news-title">{{ n.title }}</p>
|
|
|
+ <p
|
|
|
+ class="news-desc muted"
|
|
|
+ style="padding-top: 10px; font-size: 12px"
|
|
|
+ >
|
|
|
+ {{ n.desc }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </RouterLink>
|
|
|
+ </Reveal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧：市场活动 -->
|
|
|
+ <div class="market-column">
|
|
|
+ <div style="display: flex; justify-content: space-between">
|
|
|
+ <h3>行业知识</h3>
|
|
|
+ <RouterLink
|
|
|
+ class="btn btn-link"
|
|
|
+ to="/news"
|
|
|
+ style="font-size: 14px; color: #595959"
|
|
|
+ >查看更多
|
|
|
+ <Icon icon="lucide:chevron-right" width="20" height="20"
|
|
|
+ /></RouterLink>
|
|
|
+ </div>
|
|
|
+ <Reveal
|
|
|
+ v-for="(activity, idx) in marketActivities"
|
|
|
+ :key="activity.title"
|
|
|
+ as="div"
|
|
|
+ class="market-activity"
|
|
|
+ :delay="80 + idx * 60"
|
|
|
+ style="border-radius: 0"
|
|
|
+ >
|
|
|
+ <RouterLink class="market-activity-link" :to="activity.link">
|
|
|
+ <div class="market-activity-image-wrapper">
|
|
|
+ <img
|
|
|
+ :src="activity.cover"
|
|
|
+ :alt="activity.title"
|
|
|
+ class="market-activity-image"
|
|
|
+ loading="lazy"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="market-activity-overlay">
|
|
|
+ <h3 class="market-activity-title">{{ activity.title }}</h3>
|
|
|
+ <p class="market-activity-desc">{{ activity.desc }}</p>
|
|
|
+ </div>
|
|
|
+ </RouterLink>
|
|
|
+ </Reveal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section
|
|
|
+ class="section section--soft partners-section"
|
|
|
+ style="overflow: hidden"
|
|
|
+ >
|
|
|
+ <div class="container">
|
|
|
+ <Reveal as="div" class="sectionHead" :delay="0">
|
|
|
+ <div>
|
|
|
+ <h2 class="h2">合作共建开放生态</h2>
|
|
|
+ </div>
|
|
|
+ </Reveal>
|
|
|
+
|
|
|
+ <div class="partnerGridWrapper">
|
|
|
+ <svg class="partners-bg-svg" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <g class="circle-group circle-group-1">
|
|
|
+ <circle
|
|
|
+ class="dashed-circle"
|
|
|
+ cx="50%"
|
|
|
+ cy="50%"
|
|
|
+ r="250"
|
|
|
+ fill="none"
|
|
|
+ stroke="#abc3f5"
|
|
|
+ />
|
|
|
+ </g>
|
|
|
+
|
|
|
+ <g class="circle-group circle-group-2">
|
|
|
+ <circle
|
|
|
+ class="dashed-circle"
|
|
|
+ cx="50%"
|
|
|
+ cy="50%"
|
|
|
+ r="380"
|
|
|
+ fill="none"
|
|
|
+ stroke="#abc3f5"
|
|
|
+ />
|
|
|
+ </g>
|
|
|
+
|
|
|
+ <g class="circle-group circle-group-3">
|
|
|
+ <circle
|
|
|
+ class="dashed-circle"
|
|
|
+ cx="50%"
|
|
|
+ cy="50%"
|
|
|
+ r="580"
|
|
|
+ fill="none"
|
|
|
+ stroke="#abc3f5"
|
|
|
+ />
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ <div class="partnerGrid">
|
|
|
+ <Reveal
|
|
|
+ v-for="(p, idx) in partners"
|
|
|
+ :key="p.id"
|
|
|
+ as="div"
|
|
|
+ class="partner"
|
|
|
+ :delay="80 + idx * 40"
|
|
|
+ >
|
|
|
+ <img :src="p.src" :alt="p.alt" loading="lazy" />
|
|
|
+ </Reveal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.valueAccMetrics {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 12px;
|
|
|
+ padding: 14px 16px;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccMetric {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccMetricValue {
|
|
|
+ /* font-weight: 850; */
|
|
|
+ font-size: 18px;
|
|
|
+ color: #1f45b7;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccMetricLabel {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.3;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccMetricsExpanded {
|
|
|
+ /* margin-top: 10px; */
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 16px;
|
|
|
+ padding: 18px;
|
|
|
+
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(255, 255, 255, 0.3),
|
|
|
+ rgba(255, 255, 255, 0)
|
|
|
+ );
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccMetricExpanded {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccMetricValueExpanded {
|
|
|
+ font-size: 20px;
|
|
|
+ /* color: #ffffff; */
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+ line-height: 1;
|
|
|
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccMetricLabelExpanded {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: rgba(255, 255, 255, 0.95);
|
|
|
+ line-height: 1.3;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAcc {
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ gap: 0px;
|
|
|
+ height: 600px;
|
|
|
+ align-items: stretch;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBg {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center 100px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 0;
|
|
|
+ transition: opacity ease;
|
|
|
+ height: 700px;
|
|
|
+ /* filter: blur(8px); */
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBg::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: linear-gradient(
|
|
|
+ to bottom,
|
|
|
+ rgba(248, 250, 252, 0) 0%,
|
|
|
+ rgba(248, 250, 252, 0) 40%,
|
|
|
+ rgba(248, 250, 252, 0.5) 65%,
|
|
|
+ rgba(248, 250, 252, 0.6) 80%,
|
|
|
+ rgba(248, 250, 252, 1) 90%,
|
|
|
+ rgba(248, 250, 252, 1) 95%,
|
|
|
+ #fff 100%
|
|
|
+ );
|
|
|
+ pointer-events: none;
|
|
|
+ /* backdrop-filter: blur(20px); */
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccItem {
|
|
|
+ background: blue;
|
|
|
+ flex: 1 1 0%;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 550px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ transition:
|
|
|
+ flex 20ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
|
+ transform 0ms ease;
|
|
|
+ min-width: 180px;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter-active,
|
|
|
+.fade-leave-active {
|
|
|
+ transition: opacity 100ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter-from,
|
|
|
+.fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+.hero {
|
|
|
+ position: relative;
|
|
|
+ padding: 54px 0 28px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 50vh;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__bg {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ filter: saturate(0.98) contrast(1.02);
|
|
|
+ transform: scale(1.02);
|
|
|
+}
|
|
|
+
|
|
|
+.hero__veil {
|
|
|
+ display: none; /* 完全隐藏遮罩层 */
|
|
|
+}
|
|
|
+
|
|
|
+.hero__inner {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1.2fr 0.8fr;
|
|
|
+ gap: 22px;
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__copy {
|
|
|
+ padding: 16px 14px;
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ backdrop-filter: none;
|
|
|
+ /* color: white; */
|
|
|
+ /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
|
|
|
+}
|
|
|
+
|
|
|
+.hero__title {
|
|
|
+ margin-top: 14px;
|
|
|
+ font-size: 35px;
|
|
|
+ line-height: 1.12;
|
|
|
+ letter-spacing: -0.03em;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__em {
|
|
|
+ background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__desc {
|
|
|
+ margin-top: 12px;
|
|
|
+ max-width: 52ch;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__cta {
|
|
|
+ margin-top: 18px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__stats {
|
|
|
+ margin-top: 22px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 12px;
|
|
|
+ padding: 14px 12px;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
|
|
|
+ background: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+}
|
|
|
+
|
|
|
+.stat {
|
|
|
+ padding: 8px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat__value {
|
|
|
+ font-weight: 850;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #1f45b7;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+.stat__label {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__panel {
|
|
|
+ align-self: stretch;
|
|
|
+ background:
|
|
|
+ radial-gradient(
|
|
|
+ 700px 220px at 40% 0%,
|
|
|
+ rgba(37, 99, 235, 0.12),
|
|
|
+ transparent 60%
|
|
|
+ ),
|
|
|
+ #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__panelPad {
|
|
|
+ padding: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__panelTitle {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-weight: 850;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__controls {
|
|
|
+ /* margin-top: 50px; */
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ left: 35%;
|
|
|
+ top: 30px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.ctrlBtn {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 14px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
|
|
|
+ background: rgba(0, 0, 0, 0.2); /* 半透明黑色背景 */
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 900;
|
|
|
+ color: white; /* 白色文字 */
|
|
|
+ transition: 160ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.ctrlBtn:hover {
|
|
|
+ color: var(--brand-300); /* 浅蓝色悬停效果 */
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.dots {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-radius: 999px;
|
|
|
+}
|
|
|
+
|
|
|
+.dotBtn {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 999px;
|
|
|
+ border: 0;
|
|
|
+ background: #8391a5; /* 半透明白色 */
|
|
|
+ cursor: pointer;
|
|
|
+ transition: 160ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.dotBtn[data-active="true"] {
|
|
|
+ width: 28px;
|
|
|
+ background: #004baa; /* 品牌色激活状态 */
|
|
|
+}
|
|
|
+
|
|
|
+.dotBtn:focus-visible {
|
|
|
+ outline: none;
|
|
|
+ box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
|
|
|
+}
|
|
|
+
|
|
|
+.heroBg-enter-active,
|
|
|
+.heroBg-leave-active {
|
|
|
+ transition: opacity 520ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.heroBg-enter-from,
|
|
|
+.heroBg-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.heroText-enter-active,
|
|
|
+.heroText-leave-active {
|
|
|
+ transition:
|
|
|
+ opacity 420ms ease,
|
|
|
+ transform 420ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.heroText-enter-from,
|
|
|
+.heroText-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate3d(0, 10px, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.heroStrip {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ border: none;
|
|
|
+ padding: 0 0 26px;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStrip__inner {
|
|
|
+ padding-top: 0;
|
|
|
+ padding-left: 150px;
|
|
|
+ padding-right: 150px;
|
|
|
+ background-image: url("../assets/images/bgblue.jpg");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ filter: blur(0.1);
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripGrid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripCard {
|
|
|
+ position: relative;
|
|
|
+ /* padding: 18px 16px 16px; */
|
|
|
+ min-height: 128px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-align: left;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripCard::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background:
|
|
|
+ radial-gradient(
|
|
|
+ 260px 120px at 50% 0%,
|
|
|
+ rgba(37, 99, 235, 0.08),
|
|
|
+ transparent 60%
|
|
|
+ ),
|
|
|
+ radial-gradient(
|
|
|
+ 220px 140px at 85% 70%,
|
|
|
+ rgba(56, 189, 248, 0.06),
|
|
|
+ transparent 65%
|
|
|
+ );
|
|
|
+ opacity: 0.9;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripIcon {
|
|
|
+ /* width: 54px;
|
|
|
+ height: 54px; */
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ transform: translateY(-10px);
|
|
|
+ margin-bottom: -2px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripTitle {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ margin-top: 6px;
|
|
|
+
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 1.35;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripCard[data-tone="accent"] .heroStripTitle {
|
|
|
+ color: rgba(255, 255, 255, 0.96);
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripDesc {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.45;
|
|
|
+ color: rgba(255, 255, 255, 0.88);
|
|
|
+ opacity: 0.98;
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripCard:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ filter: saturate(1.02);
|
|
|
+}
|
|
|
+
|
|
|
+.heroStripCard[data-tone="accent"]:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ filter: brightness(1.03) saturate(1.06);
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 960px) {
|
|
|
+ .heroStrip {
|
|
|
+ margin-top: -18px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heroStripGrid {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 10px;
|
|
|
+ border: 0;
|
|
|
+ overflow: visible;
|
|
|
+ border-radius: 0;
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: none;
|
|
|
+ backdrop-filter: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heroStripCard {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heroStripCard:not(:first-child) {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heroStripIcon {
|
|
|
+ transform: translateY(-8px);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 520px) {
|
|
|
+ .heroStripGrid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heroStrip {
|
|
|
+ margin-top: -14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.kickerIcon {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__panelList {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__panelItem {
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: var(--radius-md);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: rgba(15, 23, 42, 0.01);
|
|
|
+}
|
|
|
+
|
|
|
+.hero__panelKey {
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.hero__panelBtns {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.sectionHead {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 18px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.capGrid {
|
|
|
+ margin-top: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformGrid {
|
|
|
+ margin-top: 6px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 16px;
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformCard {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 18px;
|
|
|
+
|
|
|
+ background:
|
|
|
+ linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgb(var(--cap-accent, 37 99 235) / 0.08),
|
|
|
+ rgba(255, 255, 255, 0.92) 46%,
|
|
|
+ #ffffff
|
|
|
+ ),
|
|
|
+ radial-gradient(
|
|
|
+ 900px circle at 85% 0%,
|
|
|
+ rgb(var(--cap-accent, 37 99 235) / 0.16)
|
|
|
+ );
|
|
|
+ box-shadow:
|
|
|
+ 0 8px 16px rgba(2, 6, 23, 0.4),
|
|
|
+ 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformCard::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: -20px;
|
|
|
+
|
|
|
+ filter: blur(28px);
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 240ms ease;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformCard:hover::before {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformCard[data-variant="connect"] {
|
|
|
+ --cap-accent: 37 99 235;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformCard[data-variant="govern"] {
|
|
|
+ --cap-accent: 16 185 129;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformCard[data-variant="app"] {
|
|
|
+ --cap-accent: 245 158 11;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformHead {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12px;
|
|
|
+ padding-bottom: 14px;
|
|
|
+ border-bottom: 1px dashed rgba(15, 23, 42, 0.14);
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformCopy {
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformTitle {
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: -0.03em;
|
|
|
+ font-size: 22px;
|
|
|
+ /* color: rgb(var(--cap-accent, 37 99 235) / 1); */
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformDesc {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.55;
|
|
|
+ max-width: 40ch;
|
|
|
+}
|
|
|
+
|
|
|
+.capPlatformArt {
|
|
|
+ width: 140px;
|
|
|
+ height: auto;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ opacity: 0.92;
|
|
|
+ filter: drop-shadow(0 14px 22px rgba(2, 6, 23, 0.12)) saturate(1.05);
|
|
|
+ transform: translateY(-2px);
|
|
|
+ pointer-events: none;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleGrid {
|
|
|
+ margin-top: 14px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleTile {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 12px 10px 10px;
|
|
|
+ /* border: 1px solid rgba(15, 23, 42, 0.06); */
|
|
|
+ background: transparent;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ text-align: center;
|
|
|
+ min-height: 106px;
|
|
|
+ transition:
|
|
|
+ transform 180ms ease,
|
|
|
+ box-shadow 180ms ease,
|
|
|
+ border-color 180ms ease;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleTile:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ border-color: rgb(var(--cap-accent, 37 99 235) / 0.18);
|
|
|
+ box-shadow: 0 16px 30px rgba(2, 6, 23, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleIcon {
|
|
|
+ width: 46px;
|
|
|
+ height: 46px;
|
|
|
+ border-radius: 16px;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ border: 1px solid rgb(var(--cap-accent, 37 99 235) / 0.16);
|
|
|
+ background: radial-gradient(
|
|
|
+ circle at 30% 30%,
|
|
|
+ rgb(var(--cap-accent, 37 99 235) / 0.22),
|
|
|
+ rgb(var(--cap-accent, 37 99 235) / 0.06)
|
|
|
+ );
|
|
|
+ color: rgb(var(--cap-accent, 37 99 235) / 1);
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleName {
|
|
|
+ /* font-weight: 850; */
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.25;
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleBadge {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 850;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 999px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleBadge[data-tone="hot"] {
|
|
|
+ color: #ef4444;
|
|
|
+ background: rgba(239, 68, 68, 0.12);
|
|
|
+ border-color: rgba(239, 68, 68, 0.18);
|
|
|
+}
|
|
|
+
|
|
|
+.capModuleBadge[data-tone="new"] {
|
|
|
+ color: #f97316;
|
|
|
+ background: rgba(249, 115, 22, 0.12);
|
|
|
+ border-color: rgba(249, 115, 22, 0.18);
|
|
|
+}
|
|
|
+
|
|
|
+.capLayout {
|
|
|
+ margin-top: 18px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 0.9fr 1.1fr;
|
|
|
+ gap: 18px;
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.capArt {
|
|
|
+ border-radius: var(--radius-lg);
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.capArt img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.capCard {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.capIcon {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ /* border-radius: 14px; */
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: rgba(37, 99, 235, 0.1);
|
|
|
+ border: 1px solid rgba(37, 99, 235, 0.16);
|
|
|
+}
|
|
|
+
|
|
|
+.capIcon[data-icon="edge"] {
|
|
|
+ background: radial-gradient(
|
|
|
+ circle at 30% 30%,
|
|
|
+ rgba(37, 99, 235, 0.2),
|
|
|
+ rgba(37, 99, 235, 0.08)
|
|
|
+ );
|
|
|
+}
|
|
|
+.capIcon[data-icon="data"] {
|
|
|
+ background: radial-gradient(
|
|
|
+ circle at 30% 30%,
|
|
|
+ rgba(56, 189, 248, 0.2),
|
|
|
+ rgba(56, 189, 248, 0.06)
|
|
|
+ );
|
|
|
+}
|
|
|
+.capIcon[data-icon="app"] {
|
|
|
+ background: radial-gradient(
|
|
|
+ circle at 30% 30%,
|
|
|
+ rgba(16, 185, 129, 0.16),
|
|
|
+ rgba(16, 185, 129, 0.06)
|
|
|
+ );
|
|
|
+}
|
|
|
+.capIcon[data-icon="security"] {
|
|
|
+ background: radial-gradient(
|
|
|
+ circle at 30% 30%,
|
|
|
+ rgba(245, 158, 11, 0.16),
|
|
|
+ rgba(245, 158, 11, 0.06)
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+.capTitle {
|
|
|
+ font-weight: 800;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.productTitle {
|
|
|
+ /* font-weight: 850; */
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ /* color: #04439a; */
|
|
|
+}
|
|
|
+
|
|
|
+.productDesc {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.productTags {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionCard {
|
|
|
+ display: grid;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.news-list-item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+ border-bottom: #ccc 1px solid;
|
|
|
+ padding-bottom: 18px;
|
|
|
+}
|
|
|
+.hoverWrap {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionTitle {
|
|
|
+ font-weight: 850;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionMore {
|
|
|
+ color: var(--brand-700);
|
|
|
+ font-weight: 650;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsBg {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsBg::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ opacity: 1;
|
|
|
+ filter: saturate(0.95);
|
|
|
+}
|
|
|
+
|
|
|
+/* “连接井站 + 治理 + 应用”模块背景图 */
|
|
|
+.capabilitiesBg {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.capabilitiesBg::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgba(248, 250, 252, 0.5),
|
|
|
+ rgba(248, 250, 252, 0.7)
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+.capabilitiesBg > .container {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* .solutionsBg::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: linear-gradient(
|
|
|
+ 180deg,
|
|
|
+ rgba(248, 250, 252, 0.4),
|
|
|
+ rgba(248, 250, 252, 0.6)
|
|
|
+ );
|
|
|
+} */
|
|
|
+
|
|
|
+.solutionsBg > .container {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAcc {
|
|
|
+ margin-top: 8px;
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ height: 580px;
|
|
|
+ align-items: stretch;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccItem {
|
|
|
+ flex: 1 1 0%;
|
|
|
+ /* border-radius: var(--radius-lg); */
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid rgba(15, 23, 42, 0.1);
|
|
|
+ background:
|
|
|
+ radial-gradient(
|
|
|
+ 1200px circle at 0% 0%,
|
|
|
+ rgba(37, 99, 235, 0.12),
|
|
|
+ transparent 55%
|
|
|
+ ),
|
|
|
+ rgba(248, 250, 252, 0.95);
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ transition:
|
|
|
+ flex 520ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
|
+ transform 180ms ease;
|
|
|
+ min-width: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccItem:focus-visible {
|
|
|
+ outline: 3px solid rgba(37, 99, 235, 0.35);
|
|
|
+ outline-offset: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccItem[data-active="true"] {
|
|
|
+ flex: 3.2 1 0%;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccInner {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccCollapsed,
|
|
|
+.valueAccExpanded {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ transition:
|
|
|
+ opacity 220ms ease,
|
|
|
+ transform 320ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccCollapsed {
|
|
|
+ padding: 52px 30px 66px;
|
|
|
+ display: grid;
|
|
|
+ align-content: start;
|
|
|
+ gap: 18px;
|
|
|
+ background-image: var(--value-collapsed-bg);
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccCollapsed::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccCollapsed > * {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccIcon {
|
|
|
+ width: 54px;
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 18px;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+
|
|
|
+ color: var(--slate-800);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccTitle {
|
|
|
+ font-size: 22px;
|
|
|
+ letter-spacing: -0.03em;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccLine {
|
|
|
+ width: 32px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccDesc {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.7;
|
|
|
+ max-width: 18ch;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccPlus {
|
|
|
+ position: absolute;
|
|
|
+ left: 18px;
|
|
|
+ bottom: 18px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ /* border-radius: 14px; */
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ background: var(--brand-700);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 26px;
|
|
|
+ line-height: 1;
|
|
|
+ box-shadow: 0 14px 26px rgba(2, 6, 23, 0.16);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccExpanded {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.985);
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 280px 1fr;
|
|
|
+ background: #ffffff;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccCover {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccCover img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+ transform: scale(1.03);
|
|
|
+ filter: saturate(1.05) contrast(1.02);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBottom {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 30px;
|
|
|
+ color: #ffffff;
|
|
|
+ background-image: var(--value-bottom-bg);
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ display: grid;
|
|
|
+ gap: 14px;
|
|
|
+ align-content: start;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBottom::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: linear-gradient(
|
|
|
+ 135deg,
|
|
|
+ rgba(2, 72, 185, 0.86),
|
|
|
+ rgba(0, 125, 255, 0.72)
|
|
|
+ );
|
|
|
+ opacity: 0.78;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBottom > * {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBottomTitle {
|
|
|
+ font-size: 26px;
|
|
|
+ /* font-weight: 950; */
|
|
|
+ letter-spacing: -0.03em;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBottomText {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.75;
|
|
|
+ max-width: 56ch;
|
|
|
+ opacity: 0.98;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBtn {
|
|
|
+ margin-top: 8px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 128px;
|
|
|
+ height: 44px;
|
|
|
+
|
|
|
+ background: rgba(255, 255, 255, 0.92);
|
|
|
+ color: #0b63ff;
|
|
|
+
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.32);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccBtn:hover {
|
|
|
+ background: #ffffff;
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccItem[data-active="true"] .valueAccCollapsed {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(10px);
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.valueAccItem[data-active="true"] .valueAccExpanded {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.newsCard {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.newsRow {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 240px 1fr 40px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 14px 18px;
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
+ transition: 160ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.newsRow:first-child {
|
|
|
+ border-top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.newsRow:hover {
|
|
|
+ background: rgba(15, 23, 42, 0.02);
|
|
|
+}
|
|
|
+
|
|
|
+.newsMeta {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.newsDate {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.newsArrow {
|
|
|
+ text-align: right;
|
|
|
+ color: var(--slate-500);
|
|
|
+}
|
|
|
+
|
|
|
+.partnerGrid {
|
|
|
+ margin-top: 16px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
|
+ gap: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.partner {
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 30px 50px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.partner img {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ height: 56px;
|
|
|
+ object-fit: contain;
|
|
|
+ filter: saturate(0.96);
|
|
|
+ opacity: 0.94;
|
|
|
+}
|
|
|
+
|
|
|
+.partner:hover img {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1.5);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.cta__card {
|
|
|
+ background: var(--cta-bg);
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.cta__pad {
|
|
|
+ padding: 26px;
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.cta__title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 900;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+}
|
|
|
+
|
|
|
+.cta__btns {
|
|
|
+ margin-top: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 960px) {
|
|
|
+ .hero__inner {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero__title {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero__stats {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+
|
|
|
+ .newsRow {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .newsArrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capLayout {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capPlatformGrid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valueAcc {
|
|
|
+ flex-direction: column;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valueAccItem {
|
|
|
+ min-width: 0;
|
|
|
+ min-height: 220px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valueAccItem[data-active="true"] {
|
|
|
+ flex: 1 1 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valueAccExpanded {
|
|
|
+ grid-template-rows: 220px 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .partnerGrid {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 520px) {
|
|
|
+ .hero__panelBtns {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero__controls {
|
|
|
+ margin-top: 14px;
|
|
|
+ /* display: flex;
|
|
|
+ position: fixed;
|
|
|
+ left: 10%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
+ width: 100%; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .capPlatformArt {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capModuleGrid {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+
|
|
|
+ .valueAccCollapsed {
|
|
|
+ padding: 38px 22px 62px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valueAccTitle {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .valueAccBottom {
|
|
|
+ padding: 22px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (prefers-reduced-motion: reduce) {
|
|
|
+ .capPlatformCard::before,
|
|
|
+ .capModuleTile,
|
|
|
+ .valueAccItem,
|
|
|
+ .valueAccCollapsed,
|
|
|
+ .valueAccExpanded,
|
|
|
+ .valueAccBtn {
|
|
|
+ transition: none !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 生态伙伴背景图样式 - 能源风格 */
|
|
|
+.partnersBg {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.partnersBg::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: url("../assets/images/bg-index-3.jpg");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ /* opacity: 0.35;
|
|
|
+ filter: saturate(0.85); */
|
|
|
+}
|
|
|
+
|
|
|
+.partnersBg::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.partnersBg > .container {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 平台更新与行业观点模块样式 */
|
|
|
+.news-market-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 3fr 3fr;
|
|
|
+ gap: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.news-column {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-item {
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
|
|
|
+ position: relative;
|
|
|
+ height: 160px;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-link {
|
|
|
+ display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ color: inherit;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-image-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* 新增：文字覆盖层 */
|
|
|
+.news-featured-overlay {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 20px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ color: white;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.3;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+ opacity: 0.9;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-meta {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-tag {
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ color: var(--slate-800);
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.news-featured-date {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.market-column {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 24px;
|
|
|
+ /* 确保与左侧高度对齐 */
|
|
|
+ min-height: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+.market-activity {
|
|
|
+ /* border-radius: 5px; */
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ position: relative;
|
|
|
+ height: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.market-activity-link {
|
|
|
+ display: block;
|
|
|
+ text-decoration: none;
|
|
|
+ color: inherit;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.market-activity-image-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.market-activity-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.market-activity-overlay {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 16px;
|
|
|
+ background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
|
|
|
+ /* background: rgba(0, 0, 0, 0.5); */
|
|
|
+ color: white;
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.market-activity-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.market-activity-desc {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.4;
|
|
|
+ opacity: 0.9;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.sectionHead-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 960px) {
|
|
|
+ .news-market-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-column {
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-featured {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .market-column {
|
|
|
+ gap: 16px;
|
|
|
+ min-height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .news-featured-image-wrapper {
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .market-activity-image-wrapper {
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.productCard {
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.productImageWrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.productImage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.productCard:hover .productImage {
|
|
|
+ transform: scale(1.1);
|
|
|
+}
|
|
|
+
|
|
|
+.productContent {
|
|
|
+ padding: 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.productCard:hover .productContent {
|
|
|
+ background-color: #024198;
|
|
|
+}
|
|
|
+
|
|
|
+.productCard:hover .productTitle,
|
|
|
+.productCard:hover .productDesc,
|
|
|
+.productCard:hover .pill {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.productTitle {
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 1.4;
|
|
|
+ transition: color 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.productDesc {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ transition: color 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.productTags {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.pill {
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: rgba(37, 99, 235, 0.1);
|
|
|
+ color: var(--brand-700);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.productCard:hover .pill {
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabContainer {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 30px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ padding-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabs {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabBtn {
|
|
|
+ padding: 12px 24px;
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ border-bottom: none;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--slate-600);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.25s ease;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: -2px;
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ border-top-right-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabBtn:hover {
|
|
|
+ color: var(--brand-700);
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabBtn.active {
|
|
|
+ color: var(--brand-700);
|
|
|
+
|
|
|
+ background-image: linear-gradient(
|
|
|
+ to bottom,
|
|
|
+ rgba(37, 99, 235, 1),
|
|
|
+ rgba(37, 99, 235, 0.3)
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabContent {
|
|
|
+ min-height: 420px;
|
|
|
+ margin-top: 2px;
|
|
|
+ box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabInner {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 40px;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f7f7fa;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabText {
|
|
|
+ padding: 20px;
|
|
|
+ padding-left: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabTitle {
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: -0.02em;
|
|
|
+ color: #014198;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabDesc {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabLink {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ color: var(--brand-700);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-decoration: none;
|
|
|
+ transition: gap 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabLink:hover {
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabImage {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.solutionsTabImage img {
|
|
|
+ width: 100%;
|
|
|
+ height: 420px;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.slide-up-enter-active,
|
|
|
+.slide-up-leave-active {
|
|
|
+ transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.slide-up-enter-from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(30px);
|
|
|
+}
|
|
|
+
|
|
|
+.slide-up-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-20px);
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 960px) {
|
|
|
+ .solutionsTabInner {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabTitle {
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabImage img {
|
|
|
+ height: 240px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabs {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabBtn {
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ padding: 14px 20px;
|
|
|
+ border-bottom: 2px solid rgba(15, 23, 42, 0.08);
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabBtn.active {
|
|
|
+ border-bottom-color: var(--brand-700);
|
|
|
+ background: rgba(37, 99, 235, 0.08);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 520px) {
|
|
|
+ .solutionsTabContainer {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabTitle {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabDesc {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solutionsTabImage img {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.partners-section {
|
|
|
+ position: relative;
|
|
|
+ height: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+.partnerGridWrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.partners-bg-svg {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 500px;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 0;
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+
|
|
|
+.dashed-circle {
|
|
|
+ fill-opacity: 0.5;
|
|
|
+ stroke-width: 1;
|
|
|
+ stroke-dasharray: 3 3;
|
|
|
+ stroke-linecap: round;
|
|
|
+ /* animation: dashRotate 60s linear infinite; */
|
|
|
+}
|
|
|
+
|
|
|
+.circle-group {
|
|
|
+ transform-origin: center;
|
|
|
+ animation: rotateCircle 120s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.circle-group-1 {
|
|
|
+ animation-duration: 120s;
|
|
|
+}
|
|
|
+
|
|
|
+.circle-group-2 {
|
|
|
+ animation: rotateCircleReverse 180s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.circle-group-3 {
|
|
|
+ animation-duration: 240s;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes dashRotate {
|
|
|
+ from {
|
|
|
+ stroke-dashoffset: 0;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ stroke-dashoffset: -1130;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotateCircle {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotateCircleReverse {
|
|
|
+ from {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.partnerGrid {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
|
+ gap: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.partner img {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ height: 56px;
|
|
|
+ object-fit: contain;
|
|
|
+ filter: saturate(0.96);
|
|
|
+ opacity: 0.94;
|
|
|
+}
|
|
|
+
|
|
|
+.partner:hover img {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1.5);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 960px) {
|
|
|
+ .partners-bg-svg {
|
|
|
+ min-height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dashed-circle {
|
|
|
+ stroke-dasharray: 10 10;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 520px) {
|
|
|
+ .partnerGrid {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
