<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/afterSales.jpg?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/jiaohu.png?url";
import planIconUrl from "../assets/images/方案.png?url";
import caseIconUrl from "../assets/images/案例.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 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";

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 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 prev() {
  activeIndex.value = (activeIndex.value - 1 + slides.length) % 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: banner1Url,
    detail:
      "以井站数据为底座，构建日/周/月报、重点井监控与异常处置闭环，支撑提质增效。",
  },
  {
    title: "集输站",
    desc: "站库管网联动监测、压降异常识别与能效优化",
    icon: "lucide:route",
    cover: banner2Url,
    detail:
      "打通站库管网关键指标，实现压降/泄漏异常识别与能耗核算，持续优化运行策略。",
  },
  {
    title: "注水注气",
    desc: "注采平衡分析、配注优化与效果评估",
    icon: "lucide:droplets",
    cover: banner3Url,
    detail:
      "构建注采指标体系与可视化分析，形成配注优化建议与效果评估闭环，支撑精细开发。",
  },
  {
    title: "设备运维",
    desc: "远程运维、预测维护与可靠性提升",
    icon: "lucide:wrench",
    cover: afterSalesUrl,
    detail:
      "告警联动工单与知识库沉淀，结合预测维护模型，降低非计划停机与运维成本。",
  },
];

const valueCaseActiveIndex = ref(-1);
function activateValueCase(index) {
  valueCaseActiveIndex.value = index;
}

const news = [
  {
    date: "2026-02-12",
    tag: "发布",
    title: "门户新版上线：油田数智化产品与方案展示",
    desc: "全新门户界面设计，优化用户体验，增强产品展示效果。",
    cover: banner1Url,
    type: "featured", // 上部大图新闻
    link: "/news/4",
  },
  {
    date: "2026-01-28",
    tag: "活动",
    title: "油田数据治理与指标体系专题沙龙报名启动",
    desc: "深入探讨油田数据治理最佳实践与指标体系建设方法。",
    cover: banner2Url,
    type: "featured", // 上部大图新闻
  },
  {
    date: "2026-01-10",
    tag: "更新",
    title: "井站接入能力升级：新增 SCADA 协议适配与边缘缓存",
    desc: "提升井站数据采集稳定性与实时性，支持更多工业协议。",
    cover: banner3Url,
    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, caseIconUrl];
const partners = Array.from({ length: 12 }).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__stats">
            <div v-for="item in highlights" :key="item.label" class="stat">
              <div class="stat__value">
                <CountUp :end="item.end" :suffix="item.suffix" />
              </div>
              <div class="stat__label muted">{{ item.label }}</div>
            </div>
          </div> -->

          <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="section capabilitiesBg"
      :style="{ backgroundImage: `url(${capabilitiesBgUrl})` }"
    >
      <div class="container">
        <Reveal as="div" class="sectionHead" :delay="0">
          <div style="display: flex; align-items: center">
            <!-- <img src="../assets/images/title1.png" alt="" /> -->
            <h2 class="h2" style="padding: 0 30px">
              数据驱动、形成油气价值闭环
            </h2>
            <!-- <img src="../assets/images/title2.png" alt="" /> -->
          </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">
              <!-- <img src="../assets/images/title1.png" alt="" /> -->
              <h2 class="h2" style="padding: 0 30px">覆盖油气生产全链路</h2>
              <!-- <img src="../assets/images/title2.png" alt="" /> -->
            </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">
            <!-- <img src="../assets/images/title1.png" alt="" /> -->
            <h2 class="h2" style="padding: 0 30px">面向场景的可复制实践</h2>
            <!-- <img src="../assets/images/title2.png" alt="" /> -->
          </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">
                    了解更多 →
                  </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 class="section">
      <div class="container">
        <Reveal as="div" class="sectionHead" :delay="0">
          <div style="display: flex; align-items: center">
            <!-- <img src="../assets/images/title1.png" alt="" /> -->
            <h2 class="h2" style="padding: 0 10px">用可量化指标呈现业务价值</h2>
            <!-- <img src="../assets/images/title2.png" alt="" /> -->
          </div>
        </Reveal>

        <div
          class="valueAcc"
          role="list"
          aria-label="业务价值横向手风琴"
          @mouseleave="activateValueCase(-1)"
        >
          <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>
                  <RouterLink class="valueAccBtn" to="/cases"
                    >了解更多</RouterLink
                  >
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        <div style="display: flex; justify-content: center; padding-top: 30px">
          <RouterLink class="btn btn-link" to="/cases"
            >查看更多案例
            <Icon icon="lucide:chevron-right" width="24" height="24"
          /></RouterLink>
        </div>
      </div>
    </section>

    <!-- 平台更新与行业观点 - 左右两栏布局 -->
    <section class="section">
      <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>
                    <p class="news-featured-desc">{{ n.desc }}</p>
                  </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"
            >
              <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>
.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: 14px;
  display: flex;
  position: relative;
  left: 40%;
  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);
}

.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;
}

.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: 18px;
  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;
  background:
    radial-gradient(
      900px circle at 100% 0%,
      rgba(37, 99, 235, 0.18),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(248, 250, 252, 0.92),
      rgba(248, 250, 252, 0.86)
    );
  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;
  /* border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.65); */
  color: var(--slate-800);
}

.valueAccTitle {
  font-size: 22px;
  font-weight: 950;
  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;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #0b63ff;
  font-weight: 850;
  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 {
  /* border: 1px solid var(--border); */
  /* border-radius: 18px; */
  background: transparent;
  padding: 10px;
  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: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
  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-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);
  /* border-bottom-color: var(--brand-700); */
  background-image: linear-gradient(
    to bottom,
    rgba(37, 99, 235, 0.8),
    rgba(37, 99, 235, 0.2)
  );
  /* background: rgba(37, 99, 235, 0.06); */
}

.solutionsTabContent {
  min-height: 420px;
  margin-top: 2px;
}

.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 {
  background: transparent;
  padding: 10px;
  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;
}

@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>
