<template>
  <div class="compliance-portal portal-page-shell portal-landing-figma-page">
    <div class="portal-figma-scale-viewport">
      <div class="portal-figma-scale-stage" ref="figmaStage">
    <!-- 首屏：标题区 + 三大专题入口 -->
    <div id="section-landing" class="qych-snap-section qych-landing">
      <div class="banner-section">
        <div class="banner-inner page-content-wrap">
          <h1 class="banner-title">
            <span class="banner-title-accent">企业</span>
            <span class="banner-title-main">出海</span>
          </h1>
        </div>
      </div>

      <div class="services-section qych-page-inner">
        <div class="services-grid">
          <div
            v-for="item in navList"
            :key="item.index"
            :class="['service-card', { 'service-card--active': item.isActive }]"
            @click="scrollToSection(item)"
          >
            <div class="service-card-inner">
              <div class="service-card-header" :class="item.headerClass">
                <h3 class="service-card-title">{{ item.cardTitle }}</h3>
              </div>
              <p class="service-card-desc">{{ item.cardDesc }}</p>
              <div class="service-card-buttons">
                <t-button theme="primary" @click.stop="handleCardBtnClick(item)">
                  {{ item.btnText }}
                </t-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <main class="content">
      <div id="anchor-container">
        <!-- 电池法案 -->
        <div class="banner banner1 qych-snap-section" id="section0">
          <section class="module">
            <div class="module-header">
              <h2>电池法案</h2>
              <p>欧盟电池法案管控电池全生命周期，涉及回收、碳足迹等要求</p>
            </div>
            <div class="">
              <div class="content-wrapper2">
                <div class="text-section">
                  <div class="text-section-head-row">
                    <div class="text-section-title">法案解读</div>
                    <div class="text-section-title-dcfa">申请服务</div>
                  </div>
                  <div class="text-section-content">
                    <div class="content-item1">
                      <ul class="info-list">
                        <div><span class="info-label">法案核心：</span>用碳足迹、电池护照、再生料、回收、供应链尽调设硬性准入门槛，强制绿色循环。</div>
                        <div><span class="info-label">时间表：</span>阶段性实施节点与过渡安排</div>
                        <li> 2024 年 2 月 18 日 法案核心条款正式实施，旧电池指令部分废止；有害物质基础限量、电池安全与耐久性基础要求生效。 </li>
                        <li> 2024 年 8 月 18 日 便携式电池铅含量强制限量生效；储能系统安全合规要求生效；电池性能与耐久性技术文件强制要求生效</li>
                        <li> 2025 年 2 月 18 日 EV 动力电池强制碳足迹声明要求生效 </li>
                        <div class="info-section-title">核心关键词解读</div>
                        <li>EU 2023/1542：欧盟新电池法的正式法规编号，是具备直接法律效力的欧盟条例，无需成员国转化为本国法律，全欧盟统一适用，违规处罚标准由各成员国同步制定。</li>
                        <li>全生命周期监管：法案核心监管逻辑，区别于旧指令仅聚焦末端回收和有害物质管控，新规覆盖电池从原材料开采、生产制造、运输销售、使用维护，到废弃回收、材料再生的全链条全环节。</li>
                        <li>PEF（产品环境足迹）：欧盟制定的产品全生命周期环境影响核算方法，是电池碳足迹核算的唯一合规标准，明确了核算边界、方法学、数据质量要求。</li>
                      </ul>
                    </div>
                    <div class="content-item2">
                      <div class="service-section-dcfa">
                        <div class="dcfa-cards-stack">
                          <div class="apply-service-card card1">
                            <div class="card-item1">
                              <div class="card-body">
                                <h4>电池碳足迹核算系统</h4>
                                <p>生成产品碳足迹报告</p>
                              </div>
                              <img
                                class="card-deco-icon card-deco-icon--sm"
                                :src="serviceCardIcon1"
                                alt=""
                                aria-hidden="true"
                              />
                            </div>
                          </div>
                          <div class="apply-service-card card2">
                            <div class="card-item2">
                              <div class="card-body">
                                <h4>电池出口合规检测系统</h4>
                                <p>合规检测与留存</p>
                              </div>
                              <img
                                class="card-deco-icon card-deco-icon--sm card-deco-icon--flip card-deco-icon--soft"
                                :src="serviceCardIcon2"
                                alt=""
                                aria-hidden="true"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- CBAM模块 -->
        <div class="banner banner2 qych-snap-section" id="section1">
          <section class="module">
            <div class="module-header">
              <h2>CBAM（碳边境调节机制）</h2>
              <p>欧盟对进口高碳产品按隐含排放征收碳关税，2026 年起正式实施</p>
            </div>

            <div class="content-wrapper2">
              <div class="text-section qych-policy-frame">
                <div class="text-section-head-row">
                  <div class="text-section-title">政策解读</div>
                  <div class="text-section-title-dcfa">CBAM试算</div>
                </div>
                <div class="text-section-content">
                  <div class="content-item1">
                    <div class="info-list info-list--stacked">
                      <p class="info-para">
                        <span class="info-label">CBAM核心：</span>通过对标本土碳市场定价，对进口高碳产品征收碳成本差额，拉平跨境碳成本，防范碳泄漏，推动全球产业链低碳转型。
                      </p>
                      <div class="info-block">
                        <p class="info-block-head">
                          <span class="info-label">时间表：</span>阶段性实施节点与过渡安排
                        </p>
                        <ul class="info-sublist">
                          <li><span class="info-list-text">2023年5月10日 | 正式立法 | 欧盟议会与理事会正式通过 Regulation (EU) 2023/956 号 CBAM 条例</span></li>
                          <li><span class="info-list-text">2026年1月1日起 | 正式实施期（确定制度阶段） | 全面进入 “申报 + 缴费” 双强制阶段，授权申报人制度落地，进口商需购买并清缴 CBAM 证书；</span></li>
                          <li><span class="info-list-text">2028年起 | 扩围实施期 | 计划纳入 180 余种钢铝密集型下游产品，管控范围向产业链下游延伸</span></li>
                        </ul>
                      </div>
                      <div class="info-block">
                        <p class="info-block-head info-section-title">核心关键词解读</p>
                        <ul class="info-sublist">
                          <li><span class="info-list-text">碳泄漏（Carbon Leakage）: CBAM 的核心立法动因，指欧盟企业为规避本土 ETS 高昂的碳成本，将高碳生产环节转移至碳排放管控宽松、碳价更低的国家 / 地区，导致欧盟减排成果被抵消、全球碳排放总量不降反升的现象。</span></li>
                          <li><span class="info-list-text">EU ETS（欧盟碳排放交易体系）: 欧盟境内核心碳定价机制，也是 CBAM 的定价基准。CBAM 证书价格完全对标 ETS 配额的拍卖价格，确保进口产品与欧盟本土产品承担完全同等的碳成本</span></li>
                          <li><span class="info-list-text">CBAM 证书（CBAM Certificate）: 欧盟成员国主管机构发行的电子凭证，是进口商清缴碳排放成本的唯一合法载体。进口商需按年度核算的碳排放量，购买对应数量的证书并完成清缴，未清缴部分将触发高额处罚</span></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="content-item2">
                    <div class="service-section-dcfa">
                      <div class="dcfa-cards-stack">
                        <div class="apply-service-card card1">
                          <div class="card-item1 card-item--cbam-primary">
                            <div class="card-body">
                              <h4>CBAM 辅助核算系统</h4>
                              <p>助力企业快速填报碳排放数据</p>
                            </div>
                            <div class="open-page" @click="goPage('https://www.ouyeel.com/cbam/login')">
                              立即申请
                            </div>
                            <img
                              class="card-deco-icon card-deco-icon--md card-deco-icon--flip card-deco-icon--cbam-1"
                              :src="serviceCardIcon1"
                              alt=""
                              aria-hidden="true"
                            />
                          </div>
                        </div>
                        <div class="apply-service-card card2">
                          <div class="card-item2">
                            <div class="card-body">
                              <h4>CBAM 碳成本测算系统</h4>
                              <p>测算进口碳成本</p>
                            </div>
                            <img
                              class="card-deco-icon card-deco-icon--md card-deco-icon--cbam-2"
                              :src="serviceCardIcon2"
                              alt=""
                              aria-hidden="true"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!-- CBAM模块 -->
        <div class="banner banner3 qych-snap-section" id="section2">
          <section class="module">
            <div class="module-header">
              <h2>航运燃料</h2>
              <p>从化石油基向 LNG、绿甲醇、绿氨等多元低碳方向加速转型</p>
            </div>

            <div class="content-wrapper2">
              <div class="text-section">
                <div class="text-section-head-row">
                  <div class="text-section-title">低碳政策</div>
                  <div class="text-section-title-dcfa">申请服务</div>
                </div>
                <div class="text-section-content">
                  <div class="content-item1">
                    <ul class="info-list">
                      <div class="info-intro">航运燃料低碳政策已形成全球统一规则、区域强监管、各国落地细则的三层治理体系，核心通过全生命周期碳排放管控与刚性约束，推动航运业低碳燃料替代与净零排放转型。</div>
                      <div><span class="info-label">时间表：</span>阶段性实施节点与过渡安排</div>
                      <li>2023年7月, IMO 发布修订版《船舶温室气体减排战略》, 确立全球航运 2050 年前后净零排放的顶层里程碑</li>
                      <li>2025年4月, 中国十部门发布《交通运输与能源融合发展指导意见》, 明确航运绿色燃料全链条发展支持政策</li>
                      <li>2026年, 欧盟 EU ETS 取消航运业全部免费碳配额, 航运企业碳排放成本完全自担，倒逼燃料低碳转型加速</li>
                      <div class="info-section-title">核心关键词解读</div>
                      <li>NZF / 净零框架：IMO《净零框架》，全球首个航运强制减排与碳定价结合的统一规则，核心管控船用燃料全生命周期碳排放</li>
                      <li>GFI / 燃料温室气体强度：IMO 净零框架核心考核指标，核算单位船用燃料全生命周期的温室气体排放量</li>
                      <li>全生命周期碳排放（LCA）：低碳燃料合规性认证的核心方法，用于杜绝燃料「漂绿」行为</li>
                    </ul>
                  </div>
                  <div class="content-item2">
                    <div class="service-section-dcfa">
                      <div class="dcfa-cards-stack">
                        <div class="apply-service-card card1">
                          <div class="card-item1 card-item--with-action">
                            <div class="card-body">
                              <h4>海事 “一网通办”</h4>
                              <p>上海港船舶低碳合规政务官方办理入口</p>
                              <div class="open-page" @click="goPage('https://zwfw.msa.gov.cn/')">
                                立即访问
                              </div>
                            </div>
                            <img
                              class="card-deco-icon card-deco-icon--lg"
                              :src="serviceCardIcon1"
                              alt=""
                              aria-hidden="true"
                            />
                          </div>
                        </div>
                        <div class="apply-service-card card2">
                          <div class="card-item2 card-item--with-action">
                            <div class="card-body">
                              <h4>国际航运绿色能源认证平台</h4>
                              <p>航运绿色燃料全链条认证合规服务平台</p>
                              <div class="open-page" @click="goPage('https://www.lingang.gov.cn/')">
                                立即访问
                              </div>
                            </div>
                            <img
                              class="card-deco-icon card-deco-icon--lg"
                              :src="serviceCardIcon2"
                              alt=""
                              aria-hidden="true"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!-- <p class="coming-soon">敬请期待</p> -->
        </div>
      </div>
    </main>
      </div>
    </div>
  </div>
</template>

<script>
import serviceCardIcon1 from '../../assets/qych/service-card-icon-1.png'
import serviceCardIcon2 from '../../assets/qych/service-card-icon-2.png'
import portalFigmaScaleMixin from '@/pages/index/utils/portal-figma-scale-mixin';
import fullpageScrollMixin from '@/pages/index/utils/fullpage-scroll-mixin';
import comingSoonMixin from '@/pages/index/utils/coming-soon-mixin';

export default {
  name: 'CompliancePortal',
  mixins: [portalFigmaScaleMixin, fullpageScrollMixin, comingSoonMixin],
  components: {},
  data() {
    return {
      serviceCardIcon1,
      serviceCardIcon2,
      sectionIds: ['section-landing', 'section0', 'section1', 'section2'],
      navList: [
        {
          cardTitle: '欧盟电池法规',
          cardDesc: '碳足迹、电池护照、再生料与回收等全链条合规服务入口。',
          btnText: '进入专题',
          headerClass: 'blue-header',
          sectionId: 'section0',
          index: 0,
          isActive: true,
        },
        {
          cardTitle: 'CBAM(碳边境调节机制)',
          cardDesc: '进口高碳产品碳关税申报与成本测算，2026 年起正式实施。',
          btnText: '进入专题',
          headerClass: 'green-header',
          sectionId: 'section1',
          index: 1,
          isActive: false,
          externalLink: 'https://www.ouyeel.com/cbam/login',
        },
        {
          cardTitle: '航运燃料',
          cardDesc: 'LNG、绿甲醇、绿氨等多元低碳燃料转型政策与系统入口。',
          btnText: '进入专题',
          headerClass: 'purple-header',
          sectionId: 'section2',
          index: 2,
          isActive: false,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollToSectionFromQuery();
    });
  },
  watch: {
    // 修复：组件已挂载时（如从首页企业出海多次点击跳到不同 section），
    // query 变化不会触发 mounted，需要在这里显式处理滚动
    '$route.query.section': {
      handler() {
        this.scrollToSectionFromQuery();
      },
    },
  },
  methods: {
    goPage(url) {
      if (url) {
        window.open(url);
      } else {
        this.showComingSoon()
      }
    },
    handleCardBtnClick(item) {
      if (item.externalLink) {
        window.open(item.externalLink, '_blank');
        return;
      }
      this.scrollToSection(item);
    },
    /** 首页深链：/qych?section=section0|section1|section2 */
    scrollToSectionFromQuery() {
      const section = this.$route && this.$route.query && this.$route.query.section;
      if (!section) return;
      const sectionIndex = this.sectionIds.indexOf(section);
      if (sectionIndex < 0) return;
      window.setTimeout(() => {
        this.scrollRootToSection(sectionIndex, false);
      }, 120);
    },
    setNavActive(idx) {
      this.navList = this.navList.map((item, index) => ({
        ...item,
        isActive: index === idx,
      }));
    },
    getScrollRoot() {
      return this.scrollRoot || document.querySelector('.content-wrap');
    },
    /** 相对 .content-wrap 的区块顶部 scrollTop */
    getSectionScrollTop(sectionEl, scrollRoot) {
      if (!sectionEl || !scrollRoot) return 0;
      const rootRect = scrollRoot.getBoundingClientRect();
      const rect = sectionEl.getBoundingClientRect();
      return scrollRoot.scrollTop + (rect.top - rootRect.top);
    },
    getCurrentSectionIndex(scrollRoot) {
      const scrollTop = scrollRoot.scrollTop;
      const anchor = scrollTop + scrollRoot.clientHeight * 0.28;
      let currentIndex = 0;
      for (let i = 0; i < this.sectionIds.length; i++) {
        const el = document.getElementById(this.sectionIds[i]);
        if (!el) continue;
        const top = this.getSectionScrollTop(el, scrollRoot);
        if (anchor >= top - 4) {
          currentIndex = i;
        }
      }
      return currentIndex;
    },
    scrollRootToSection(sectionIndex, smooth = true) {
      this.fullPageScrollTo(sectionIndex);
      this.syncNavBySectionIndex(sectionIndex);
    },
    /** 导航点跳到指定 section：使用 fullpageScrollMixin 提供的 fullPageScrollTo */
    scrollToSection(item) {
      const sectionIndex = this.sectionIds.indexOf(item.sectionId);
      if (sectionIndex < 0) return;
      this.setNavActive(item.index);
      this.fullPageScrollTo(sectionIndex);
    },
    syncNavBySectionIndex(sectionIndex) {
      if (sectionIndex >= 1 && sectionIndex <= 3) {
        this.setNavActive(sectionIndex - 1);
      }
    },
    onFullPageSectionChange(newIndex /*, fromIndex, sectionEl */) {
      this.syncNavBySectionIndex(newIndex);
    },
  },
};
</script>

<style scoped lang="less">
@import '../../styles/home-figma-variables.less';
@import '../../styles/portal-landing-cards.less';

/* 基础样式重置 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  background-color: #f5f7fa;
}
#anchor-container {
  .banner {
    scroll-margin-top: 0;
  }
}

/* 全屏分页：高度对齐 main.vue 的 .content-wrap（非首页 = 100vh - 顶栏） */
@qych-viewport-h: var(--portal-scroll-height, calc(100vh - var(--page-offset-top, 64px)));

.qych-snap-section {
  min-height: @qych-viewport-h;
  box-sizing: border-box;
}

/* 首屏布局见 page-layout.less（.qych-landing） */

/* Figma 1440 画布：内容区宽 1300，左右各 70px 居中 */
.qych-page-inner {
  width: 100%;
  max-width: @qych-landing-content-width;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 主容器 */
.compliance-portal {
  background-color: #f6f7fa;
  .portal-figma-scale-page();
}

/* 首屏 Banner：Figma 150581:2709 — 1440×350，背景图 1440×371 */
.qych-landing .banner-section {
  position: relative;
  z-index: 1;
  height: @qych-landing-banner-height;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #f6f7fa;
  background-image: url(../../assets/qych/banner.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

/* 与行业专题一致：page-content-wrap 对齐导航「可」；勿被本页 * { margin/padding:0 } 冲掉 */
.qych-landing .banner-inner.page-content-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--page-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter-x);
  padding-right: var(--page-gutter-x);
  height: 100%;
  box-sizing: border-box;
}

.qych-landing .banner-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  margin: 0;
  padding: @qych-landing-title-padding-y 0;
  font-family: @home-font-family;
  font-size: @qych-landing-title-size;
  font-weight: @home-font-weight-semibold;
  line-height: @qych-landing-title-line-height;
  letter-spacing: @qych-landing-title-letter-spacing;
  white-space: nowrap;
}

.qych-landing .banner-title-accent {
  display: inline-block;
  flex-shrink: 0;
  padding-bottom: @qych-landing-title-underline-pb;
  color: @qych-landing-title-accent;
  border-bottom: @qych-landing-title-border;
  vertical-align: baseline;
}

.qych-landing .banner-title-main {
  display: inline-block;
  flex-shrink: 0;
  color: @qych-landing-title-sub;
  vertical-align: baseline;
}

/* 导航标签优化 */
.nav-tabs {
  display: flex;
  gap: 15px; /* 标签间距 */
  flex-wrap: wrap; /* 自适应换行 */
}

.tab {
  padding: 8px 20px;
  font-size: 14px;
  color: #2e7d32;
  cursor: pointer;
  background: #def3df;
  border-radius: 2px;
  transition: all 0.3s;
}

/* 主体内容区（保持原有逻辑） */
.content {
}

/* 专题入口：卡片区样式；首屏布局与 padding 见 page-layout.less */
.qych-landing .services-section {
  box-sizing: border-box;

  .services-grid {
    display: grid;
    width: 100%;
    gap: @qych-landing-cards-gap;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .portal-landing-card-shell();

  .service-card {
    width: 100%;
    cursor: pointer;
    border-radius: @qych-landing-card-radius;
    overflow: hidden;
    background: @home-color-white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;

    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 32px rgba(0, 154, 41, 0.15);
    }
  }

  .service-card--active {
    box-shadow: 0 12px 32px rgba(0, 154, 41, 0.15);
  }

  .service-card-header {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-align: center;
  }

  .service-card-title {
    margin: 0;
    font-size: @qych-landing-card-title-size;
    font-weight: @home-font-weight-semibold;
    line-height: 1.35;
    color: @home-color-black;
    text-align: center;
    word-break: keep-all;
  }

  .service-card-desc {
    font-size: @qych-landing-card-desc-size;
    font-weight: @home-font-weight-regular;
    line-height: 1.8;
    color: @qych-landing-card-desc-color;
    text-align: center;
  }

  .service-card-buttons {
    /deep/ .t-button {
      width: 100%;
      height: @qych-landing-card-btn-h;
      padding: @qych-landing-card-btn-py @qych-landing-card-btn-px;
      font-size: @qych-landing-card-btn-font;
      border-radius: @qych-landing-card-btn-radius;
    }

    /deep/ .t-button--theme-primary {
      background: @qych-landing-card-btn-bg-default;
      border-color: @qych-landing-card-btn-bg-default;
    }
  }

  .service-card-inner:has(.blue-header) /deep/ .t-button--theme-primary {
    background: @qych-landing-card-btn-bg-steel;
    border-color: @qych-landing-card-btn-bg-steel;
  }

  .blue-header {
    border-bottom-color: @qych-landing-card-border-blue;
  }

  .green-header {
    border-bottom-color: @qych-landing-card-border-green;
  }

  .purple-header {
    border-bottom-color: @qych-landing-card-border-purple;
  }
}
#anchor-container .banner.qych-snap-section {
  --qych-topic-py: @qych-policy-module-py;
  --qych-section-bg: #f5f5f5;
  display: flex;
  flex-direction: column;
  min-height: @qych-viewport-h;
  height: auto;
  box-sizing: border-box;
  padding-top: var(--qych-topic-py);
  padding-bottom: var(--qych-topic-py);

  .module {
    width: 100%;
    max-width: @qych-policy-content-width;
    margin: auto;
    padding: 0 var(--page-gutter-x, 25px);
    overflow: visible;
    box-sizing: border-box;
    flex: 0 0 auto;
  }

  .content-wrapper2 {
    padding-bottom: 0;
  }

  .text-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: @qych-policy-card-inner-gap;
    box-sizing: border-box;
    padding-bottom: 24px;
    overflow: hidden;
    background: @home-color-white;
    border: none;
    border-radius: @qych-policy-card-radius;
    box-shadow: none;
  }

  .text-section-head-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) @qych-policy-sidebar-width;
    column-gap: @qych-policy-content-gap;
    align-items: start;
    padding: 0 @qych-policy-content-px;
    box-sizing: border-box;
    border-top-left-radius: @qych-policy-card-radius;
    border-top-right-radius: @qych-policy-card-radius;
    overflow: hidden;
  }

  .text-section-title {
    height: auto;
    padding: @qych-policy-section-title-py @qych-policy-section-title-px @qych-policy-section-title-pb;
    font-family: @home-font-family;
    font-size: @qych-policy-section-title-size;
    font-weight: @qych-policy-section-title-weight;
    line-height: normal;
    letter-spacing: 0;
    color: @qych-policy-label-color;
    background: transparent;
  }

  .text-section-head-row .text-section-title-dcfa {
    align-self: start;
    padding: @qych-policy-section-title-py 0 @qych-policy-section-title-pb;
    margin: 0;
    line-height: normal;
    background: transparent;
  }

  .text-section-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: @qych-policy-content-gap;
    padding: 0 @qych-policy-content-px;
    min-height: 0;
    background: transparent;
  }

  .content-item1,
  .content-item2 {
    overflow: hidden;
    min-height: 0;
  }

  .content-item1 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    max-height: 328px;
    padding: @qych-policy-panel-padding;
    overflow-x: hidden;
    overflow-y: auto;
    background: @qych-policy-panel-bg;
    border-radius: @qych-policy-card-radius;
    box-sizing: border-box;
  }

  .content-item2 {
    display: flex;
    flex: 0 0 @qych-policy-sidebar-width;
    flex-direction: column;
    align-self: flex-start;
    width: @qych-policy-sidebar-width;
    min-width: @qych-policy-sidebar-width;
    height: auto;
  }

  .service-section-dcfa {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    height: auto;
    align-self: flex-start;
    width: 100%;
    padding-left: @qych-policy-panel-padding;
    background: @home-color-white;
    border-left: 1px solid @qych-policy-panel-bg;
    box-sizing: border-box;
  }

  .text-section-title-dcfa {
    height: auto;
    padding: 0;
    font-family: @home-font-family;
    font-size: @qych-policy-sidebar-title-size;
    font-weight: @qych-policy-section-title-weight;
    line-height: normal;
    letter-spacing: 0;
    color: @qych-policy-label-color;
  }

  .dcfa-cards-stack {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    width: 100%;
    padding-left: 0;
  }

  .card1,
  .card2 {
    padding: 0;
  }

  .apply-service-card {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: auto;
    min-height: 0;

    h4 {
      margin: 0 0 6px;
      font-family: @home-font-family;
      font-size: @qych-policy-card-title-size;
      font-weight: @qych-policy-label-weight;
      line-height: normal;
      color: @qych-policy-card-title-color;
    }

    p {
      margin: 0;
      font-family: @home-font-family;
      font-size: @qych-policy-card-desc-size;
      font-weight: @qych-policy-subtitle-weight;
      line-height: normal;
      color: @qych-policy-card-desc-color;
    }
  }

  .card-item1,
  .card-item2 {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    min-height: 160px;
    height: auto;
    padding: 20px @qych-policy-card-padding-x 16px;
    border-radius: @qych-policy-card-radius-inner;
    overflow: hidden;
    cursor: default;
    box-sizing: border-box;
  }

  .card-item--with-action {
    padding-top: 20px;
  }

  .card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    max-width: calc(100% - 56px);
  }

  .card-deco-icon {
    position: absolute;
    right: @qych-policy-card-icon-right;
    bottom: 20px;
    width: @qych-policy-card-icon-sm;
    max-height: @qych-policy-card-icon-sm-max-h;
    height: auto;
    object-fit: contain;
    opacity: @qych-policy-card-icon-opacity;
    pointer-events: none;
    user-select: none;
  }

  .card-deco-icon--md {
    width: @qych-policy-card-icon-md;
    max-height: @qych-policy-card-icon-md-max-h;
    bottom: 18px;
  }

  .card-deco-icon--lg {
    width: @qych-policy-card-icon-lg;
    max-height: @qych-policy-card-icon-lg-max-h;
    bottom: 16px;
  }

  .card-deco-icon--flip {
    transform: scaleY(-1) rotate(180deg);
  }

  .card-deco-icon--soft {
    opacity: @qych-policy-card-icon-opacity-soft;
  }

  .module-header {
    gap: @qych-policy-header-gap;
    margin-bottom: 0;
  }

  .module-header h2 {
    margin-bottom: 0;
    font-family: @home-font-family;
    font-size: @qych-policy-title-size;
    font-weight: @qych-policy-title-weight;
    line-height: normal;
    color: @qych-policy-title-color;
  }

  .module-header p {
    width: 100%;
    font-family: @home-font-family;
    font-size: @qych-policy-subtitle-size;
    font-weight: @qych-policy-subtitle-weight;
    line-height: normal;
    letter-spacing: 0;
    color: @qych-policy-subtitle-color;
    text-align: center;
  }

  .module {
    display: flex;
    flex-direction: column;
    gap: @qych-policy-block-gap;
  }
}

#section0 .text-section,
#section2 .text-section {
  min-height: @qych-policy-card-height;
  height: @qych-policy-card-height;
}

#section0 .text-section-content,
#section2 .text-section-content {
  flex: 1 1 auto;
  min-height: 0;
}

#section0 .text-section,
#section1 .text-section.qych-policy-frame,
#section2 .text-section {
  gap: @qych-policy-card-inner-gap;
}

#section0 .text-section-head-row .text-section-title,
#section1 .text-section-head-row .text-section-title,
#section2 .text-section-head-row .text-section-title {
  padding-top: 16px;
  padding-bottom: 16px;
}

#section0 .text-section-head-row {
  background: @qych-policy-header-gradient-battery;
}

#section0 .text-section-head-row .text-section-title-dcfa {
  padding-top: 16px;
  padding-bottom: 16px;
}

#section0 .apply-service-card .card-item1 {
  background-image: @qych-policy-card-gradient-battery-1;
}

#section0 .apply-service-card .card-item2 {
  background-image: @qych-policy-card-gradient-battery-2;
}

// CBAM 套用电池法案版式框尺寸（490px + 24px + 标题 16px，不修改电池法案 DOM）
#section1 .text-section.qych-policy-frame,
.banner2 .text-section.qych-policy-frame {
  min-height: @qych-policy-card-height;
  height: @qych-policy-card-height;
  gap: @qych-policy-card-inner-gap;
}

#section1 .text-section.qych-policy-frame .text-section-content,
.banner2 .text-section.qych-policy-frame .text-section-content {
  flex: 1 1 auto;
  align-items: flex-start;
  min-height: 0;
}

#section1 .text-section.qych-policy-frame .apply-service-card h4 {
  margin: 0;
}

#section1 .text-section-head-row,
.banner2 .text-section-head-row {
  background: @qych-policy-header-gradient-cbam;
}

#section1 .text-section-head-row .text-section-title-dcfa,
.banner2 .text-section-head-row .text-section-title-dcfa {
  padding-top: @qych-policy-section-title-py;
  padding-bottom: @qych-policy-section-title-py;
}

#section1 .apply-service-card .card-item1,
.banner2 .apply-service-card .card-item1 {
  background-image: @qych-policy-card-gradient-cbam-1;
}

#section1 .apply-service-card .card-item2,
.banner2 .apply-service-card .card-item2 {
  background-image: @qych-policy-card-gradient-cbam-2;
}

#section2 .text-section {
  min-height: @qych-policy-card-height;
  height: @qych-policy-card-height;
}

#section2 .text-section-content {
  flex: 1 1 auto;
  min-height: 0;
}

#section2 .text-section-content {
  align-items: flex-start;
}

#section2 .text-section-head-row,
.banner3 .text-section-head-row {
  background: @qych-policy-header-gradient-shipping;
}

#section2 .text-section-head-row .text-section-title-dcfa,
.banner3 .text-section-head-row .text-section-title-dcfa {
  padding-top: @qych-policy-section-title-py;
  padding-bottom: @qych-policy-section-title-py;
}

#section2 .apply-service-card .card-item1,
.banner3 .apply-service-card .card-item1 {
  background-image: @qych-policy-card-gradient-shipping-1;
}

#section2 .apply-service-card .card-item2,
.banner3 .apply-service-card .card-item2 {
  background-image: @qych-policy-card-gradient-shipping-2;
}

#section2 .apply-service-card .card-item1,
#section2 .apply-service-card .card-item2 {
  padding-top: 20px;
}

.banner1.qych-snap-section {
  --qych-section-bg: #f7faf8;
}

.banner2.qych-snap-section {
  --qych-section-bg: #f5f5f5;
}

.banner3.qych-snap-section {
  --qych-section-bg: #f0faf2;
}

.banner1 {
  --qych-section-bg: #f7faf8;
  background: url(../../assets/qych/banner3.png);
  background-size: cover;
  background-position: center top;
}
.banner2 {
  --qych-section-bg: #f5f5f5;
  background: #f5f5f5;
}
.banner3 {
  --qych-section-bg: #f0faf2;
  background: url(../../assets/qych/banner1.png);
  background-size: cover;
}

.open-page {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: @qych-policy-btn-height;
  padding: 8px 15px;
  margin: 10px 0 0;
  font-family: @home-font-family;
  font-size: @qych-policy-btn-size;
  font-weight: @qych-policy-subtitle-weight;
  line-height: normal;
  color: @home-color-white;
  white-space: nowrap;
  background: @home-gradient-export-btn;
  border-radius: @qych-policy-btn-radius;
  cursor: pointer;
}

#anchor-container .banner.qych-snap-section .module-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 内容布局 */
.content-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}
.content-wrapper-dtzc {
  gap: 0;
}
#anchor-container .banner.qych-snap-section .info-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}

#anchor-container .banner.qych-snap-section .info-list > div {
  margin: 0;
  font-family: @home-font-family;
  font-size: @qych-policy-body-size;
  font-weight: @qych-policy-subtitle-weight;
  line-height: @qych-policy-body-line;
  color: @qych-policy-label-color;
}

#anchor-container .banner.qych-snap-section .info-list .info-label,
#anchor-container .banner.qych-snap-section .info-list .info-intro,
#anchor-container .banner.qych-snap-section .info-list .info-section-title {
  font-weight: @qych-policy-label-weight;
}

#anchor-container .banner.qych-snap-section .info-list > div + div,
#anchor-container .banner.qych-snap-section .info-list > li + div {
  margin-top: @qych-policy-panel-gap;
}

#anchor-container .banner.qych-snap-section .info-list > div + li {
  margin-top: 10px;
}

#anchor-container .banner.qych-snap-section .info-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-family: @home-font-family;
  font-size: @qych-policy-body-size;
  font-weight: @qych-policy-subtitle-weight;
  line-height: @qych-policy-body-line;
  color: @qych-policy-body-color;
  text-align: left;
}

#anchor-container .banner.qych-snap-section .info-list li + li {
  margin-top: 4px;
}

#anchor-container .banner.qych-snap-section .info-list li::before,
#anchor-container .banner.qych-snap-section .info-sublist li::before {
  position: static;
  flex-shrink: 0;
  width: auto;
  font-size: @qych-policy-body-size;
  font-weight: @qych-policy-label-weight;
  line-height: normal;
  color: @qych-policy-bullet-color;
  content: '·';
}

#anchor-container .banner.qych-snap-section .info-list--stacked {
  display: flex;
  flex-direction: column;
  gap: @qych-policy-panel-gap;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#anchor-container .banner.qych-snap-section .info-list--stacked .info-para,
#anchor-container .banner.qych-snap-section .info-list--stacked .info-block-head {
  margin: 0;
  font-family: @home-font-family;
  font-size: @qych-policy-body-size;
  font-weight: @qych-policy-subtitle-weight;
  line-height: normal;
  letter-spacing: 0;
  color: @qych-policy-label-color;
}

#anchor-container .banner.qych-snap-section .info-list--stacked .info-block {
  display: flex;
  flex-direction: column;
  gap: @qych-policy-block-head-gap;
}

#anchor-container .banner.qych-snap-section .info-list--stacked .info-block-head.info-section-title {
  font-weight: @qych-policy-label-weight;
}

#anchor-container .banner.qych-snap-section .info-sublist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#anchor-container .banner.qych-snap-section .info-sublist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-family: @home-font-family;
  font-size: @qych-policy-body-size;
  font-weight: @qych-policy-subtitle-weight;
  line-height: normal;
  letter-spacing: 0;
  color: @qych-policy-body-color;
}

#anchor-container .banner.qych-snap-section .info-list-text {
  flex: 1 1 auto;
  min-width: 0;
}

#section1 .card-item--cbam-primary,
.banner2 .card-item--cbam-primary {
  gap: @qych-policy-card-gap;
}

#section1 .card-item--cbam-primary .card-body,
.banner2 .card-item--cbam-primary .card-body {
  gap: 6px;
  max-width: calc(100% - 72px);
}

#section1 .card-item--cbam-primary .open-page,
.banner2 .card-item--cbam-primary .open-page {
  position: relative;
  z-index: 1;
  margin: 0;
}

#section1 .card-deco-icon--cbam-1,
.banner2 .card-deco-icon--cbam-1 {
  top: @qych-policy-card-icon-top-cbam-1;
  right: @qych-policy-card-icon-right;
  bottom: auto;
}

#section1 .card-deco-icon--cbam-2,
.banner2 .card-deco-icon--cbam-2 {
  top: @qych-policy-card-icon-top-cbam-2;
  right: @qych-policy-card-icon-right;
  bottom: auto;
}

#section2 .card-item1 .card-body,
#section2 .card-item2 .card-body,
.banner3 .card-item1 .card-body,
.banner3 .card-item2 .card-body {
  gap: 16px;
  max-width: calc(100% - 96px);
}

#section2 .card-item1 .open-page,
#section2 .card-item2 .open-page,
.banner3 .card-item1 .open-page,
.banner3 .card-item2 .open-page {
  margin-top: 0;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

/* 底部区域 */
.footer {
  padding: 40px 0 20px;
  text-align: center;
}

.coming-soon {
  font-size: 28px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0;
  color: #2e7d32;
  text-align: center;
}

@media (max-width: 1200px) {
  .qych-snap-section.qych-landing {
    min-height: auto;
  }

  .qych-landing .services-section {
    --portal-service-card-min-height: auto;
    .portal-landing-card-shell-reset();
  }

  #anchor-container .banner.qych-snap-section .text-section-head-row {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  #anchor-container .banner.qych-snap-section .content-item2 {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
  }
}

@media (max-width: 1024px) {
  #section0 .text-section,
  #section1 .text-section.qych-policy-frame,
  #section2 .text-section {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #anchor-container .banner.qych-snap-section .text-section {
    overflow: visible;
  }

  #anchor-container .banner.qych-snap-section .text-section-head-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  #anchor-container .banner.qych-snap-section .text-section-content {
    flex-direction: column;
    align-items: stretch;
    flex: none;
    min-height: 0;
  }

  #anchor-container .banner.qych-snap-section .content-item1 {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 200px;
    max-height: 360px;
  }

  #anchor-container .banner.qych-snap-section .content-item2 {
    display: flex;
    flex: none;
    width: 100%;
    min-width: 0;
  }

  #anchor-container .banner.qych-snap-section .service-section-dcfa {
    width: 100%;
    padding-left: 0;
    border-left: none;
    background: transparent;
  }

  #anchor-container .banner.qych-snap-section .card-item1,
  #anchor-container .banner.qych-snap-section .card-item2 {
    min-height: 120px;
  }
}

@media (max-width: 900px) {
  .qych-landing .banner-section {
    height: 280px;
  }

  .qych-landing .banner-title {
    font-size: 36px;
    line-height: 1.3;
  }

  .qych-landing .banner-title-accent {
    padding-bottom: 12px;
    border-bottom-width: 3px;
  }

  .qych-landing .services-section {
    .portal-landing-card-shell-reset();
  }

  .qych-landing .services-section .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .qych-landing .banner-inner.page-content-wrap {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .qych-landing .services-section .service-card-inner {
    padding: 20px;
  }

  .qych-landing .services-section .service-card-title {
    font-size: 18px;
  }

  .qych-landing .services-section .service-card-desc {
    font-size: 14px;
  }
}
</style>
