<template>
  <div class="page-box">
    <!-- 顶部菜单栏 -->
    <!-- <div class="nav-box">
      <div class="logo-box">
        <img src="@/pages/index/assets/logo-name.png">
      </div>
      <div class="menu-box">
        <div class="menu-title meun-title-active">
          <img src="@/pages/index/assets/nav-home.png" width="24px" height="24px">
          <span> &nbsp;&nbsp;首页</span>
        </div>
        <div class="menu-title">碳证中心</div>
        <div class="menu-title">服务中心</div>
        <div class="menu-title">共性能力</div>
        <div class="menu-title">企业出海</div>
        <div class="menu-title">行业专题</div>
      </div>
      <div class="option-box">
        <div class="gzt">
          <img src="@/pages/index/assets/home-gzt-icon.png" />
          <span> 工作台</span>
        </div>
        <div style="margin-left:20px; cursor: pointer;">激活</div>
        <div>|</div>
        <div style="cursor: pointer;">登录</div>
      </div>
    </div> -->

    <!-- 主页面 -->
    <div class="container">
      <!-- 顶部背景轮播 -->
      <div class="top-box">
        <t-swiper
          class="top-banner-swiper"
          animation="fade"
          :height="topBannerHeight"
          :interval="6000"
          :duration="500"
          :loop="true"
          :autoplay="true"
          theme="dark"
          :navigation="{ placement: 'inside', showSlideBtn: 'hover', type: 'bars', size: 'medium' }"
        >
          <t-swiper-item v-for="(src, idx) in topBannerImages" :key="idx">
            <div class="banner-slide" :style="{ backgroundImage: `url(${src})` }" />
          </t-swiper-item>
        </t-swiper>

        <div class="top-box-inner">
        <div class="top-title">
          <img src="@/pages/index/assets/home-top-title.png">
        </div>
        <div class="top-title-desc">
          <img src="@/pages/index/assets/top-desc-text.png" />
        </div>

        <div class="top-search-box">
          <div class="search-box">
            <input type="text" v-model="inputValue" placeholder="搜索碳资产、企业、服务" />
            <div class="search-btn">
              搜索
            </div>
          </div>
          <div class="top-search-hot">
            热门搜素：江苏电厂配额 / 林业碳汇开发 / CBAM 报告 / 零碳展会
          </div>
        </div>

        <div class="top-options-box">
          <div class="option-item-box green">
            <div class="option-item-box-title">碳数字身份证</div>
            <div class="option-btn-box ">
              <div class="btn" @click="handleNavigate(buttonLinks['办证指南'])">办证指南</div>
              <div class="btn" @click="handleIframeNavigate(buttonLinks['碳证查询'])">碳证查询</div>
            </div>
            <div class="option-btn-box">
              <div class="btn" @click="handleIframeNavigate(buttonLinks['碳证核验'])">碳证核验</div>
              <div class="btn" @click="handleNavigate(buttonLinks['跨境互通'])">跨境互通</div>
            </div>
          </div>
          <div class="option-item-box blue">
            <div class="option-item-box-title">国家可信碳链</div>
            <div class="option-btn-box">
              <div class="btn" @click="handleNavigate(buttonLinks['上链指南'])">上链指南</div>
              <div class="btn" @click="handleNavigate(buttonLinks['上链标准'])">上链标准</div>
            </div>
            <div class="option-btn-box">
              <div class="btn" @click="handleNavigate(buttonLinks['上链工具'])">上链工具</div>
              <div class="btn" @click="handleNavigate(buttonLinks['碳证中心'])">碳证中心</div>
            </div>
          </div>
          <div class="option-item-box cyan">
            <div class="option-item-box-title">绿色服务</div>
            <div class="option-btn-box">
              <div class="btn" @click="handleNavigate(buttonLinks['服务市场'])">服务市场</div>
              <div class="btn" @click="handleNavigate(buttonLinks['需求市场'])">需求市场</div>
            </div>
            <div class="option-btn-box">
              <div class="btn" @click="handleNavigate(buttonLinks['金融市场'])">金融市场</div>
              <div class="btn" @click="handleNavigate(buttonLinks['数据市场'])">数据市场</div>
            </div>
          </div>
        </div>
        </div>
        <div class="top-box-bottom-over"> </div>
      </div>

      <div class="top-to-center">

      </div>

      <!-- 中间核心驱动 -->
      <div class="center-box">
        <div class="center-box-title">
          核心驱动
        </div>

        <div class="content-box">
          <div class="item">
            <div><img src="@/pages/index/assets/home-hxdz.png" width="132px" height="132px"></div>
            <div class="name1">核心底座</div>
            <div class="name2">国家区块链上海枢纽</div>
            <div class="name3">
              依托国家区块链基础底座上海枢纽，确保每一笔碳数据拥有唯一的“链上基因”，实现国家级权威存证与不可篡改。
            </div>
          </div>
          <div class="item">
            <div><img src="@/pages/index/assets/home-sjyq.png" width="132px" height="132px"></div>
            <div class="name1">数据引擎</div>
            <div class="name2">全场景可信流通</div>
            <div class="name3">
              打破碳数据孤岛，支持从生产端到交易端的全链路数据锚定，让碳信用在多场景下实现秒级核验。
            </div>
          </div>
          <div class="item">
            <div><img src="@/pages/index/assets/home-sfjs.png" width="132px" height="132px"></div>
            <div class="name1">身份基石</div>
            <div class="name2">碳数字身份体系</div>
            <div class="name3">
              为企业构建唯一的链上“绿卡”，集成资质核验证、资产托管与信用评级，打造绿色经济的数字通行证。
            </div>
          </div>
          <div class="item">
            <div><img src="@/pages/index/assets/home-bhfn.png" width="132px" height="132px"></div>
            <div class="name1">闭环赋能</div>
            <div class="name2">精准服务企业走出去</div>
            <div class="name3">
              服务企业出海、国际互认直。击跨境合规与碳交易撮合痛点，通过智能合约实现供需精准匹配，助力企业低碳转型提速。
            </div>
          </div>
        </div>
      </div>

      <!-- 共性能力 企业出海 行业动态 -->
      <div class="gxnl-qych-hydt-box">
        <div class="gxnl-box">
          <div class="name1">共性能力</div>
          <div class="name2">五大核心能力，全面支撑企业绿色转型</div>
          <div class="item">
            <img src="@/pages/index/assets/home-thspt-icon.png" width="32px" height="32px" />
            <div class="text">碳核算平台</div>
            <img src="@/pages/index/assets/home-arrow-right.png" width="24px" height="24px" />
          </div>

          <div class="item">
            <img src="@/pages/index/assets/home-trzjg-icon.png" width="32px" height="32px" />
            <div class="text">碳认证机构</div>
            <img src="@/pages/index/assets/home-arrow-right.png" width="24px" height="24px" />
          </div>

          <div class="item">
            <img src="@/pages/index/assets/home-tjypt-icon.png" width="32px" height="32px" />
            <div class="text">碳交易平台</div>
            <img src="@/pages/index/assets/home-arrow-right.png" width="24px" height="24px" />
          </div>

          <div class="item">
            <img src="@/pages/index/assets/home-tjrfw-icon.png" width="32px" height="32px" />
            <div class="text">碳金融服务</div>
            <img src="@/pages/index/assets/home-arrow-right.png" width="24px" height="24px" />
          </div>

          <div class="item">
            <img src="@/pages/index/assets/home-tjrfw-icon.png" width="32px" height="32px" />
            <div class="text">碳技术咨询</div>
            <img src="@/pages/index/assets/home-arrow-right.png" width="24px" height="24px" />
          </div>
        </div>

        <div class="qych-box">
          <div class="name1">企业出海</div>
          <div class="name2">政策要求、合规指引、案例分享，一站式信息与系统入口</div>
          <div class="item">
            <div class="qych-box-item-title">电池法案</div>
            <div class="desc-btn-box">
              <div class="desc">欧盟电池法案管控电池全生命周期，涉及回收、碳足迹等要求。</div>
              <div class="btn">申请服务</div>
            </div>
          </div>

          <div class="item" style="margin-top:21px;">
            <div class="qych-box-item-title">CBAM</div>
            <div class="desc-btn-box">
              <div class="desc">欧盟对进口高碳产品按隐含排放征收碳关税。</div>
              <div class="btn">CBAM试算</div>
            </div>
          </div>

          <div class="item" style="margin-top:21px;">
            <div class="qych-box-item-title">航运燃料</div>
            <div class="desc-btn-box">
              <div class="desc">从化石油基向LNG、绿甲醇、绿氨等多元低碳方向加速转型。</div>
              <div class="btn">申请服务</div>
            </div>
          </div>

        </div>

        <div class="hydt-box">
          <div class="name1">行业动态</div>
          <div class="name2">实时掌握国家政策导向、地方实施动态、行业发展趋势和平台重要更新</div>
          <div class="tab">
            <div class="active">国家政策</div>
            <div>行业资讯</div>
            <div>平台公告</div>
          </div>
          <div style="width:100%">
            <div class="item">
              国家发改委发布2025年碳减排重点任务
            </div>
            <div class="item">
              国务院发布《关于加快建立健全绿色低碳循环发展经济体系的指导意见》
            </div>
            <div class="item">
              生态环境部发布《碳排放权交易管理办法（试行）》修订版
            </div>
            <div class="item">
              2025 年钢铁行业碳排放配额分配方案发布明确总量控制目标，鼓励低碳技术应用...
            </div>
          </div>
        </div>

      </div>

      <!-- 建立您的碳数字身份 -->
      <div class="bottom-box">
        <div class="content">
          <div>
            <div class="bottom-box-content-title">建立您的碳数字身份</div>
            <div class="desc">基于国家区块链网络，实现碳数据的一站式确权、核验与托管</div>
            <div class="btn">申请服务</div>
          </div>
        </div>
      </div>

      <!-- 底部信息区 -->
      <Footer style="width:100%" />

    </div>

  </div>

</template>

<script>
import Footer from '@/pages/index/components/footer/index.vue';
export default {
  data() {
    return {
      inputValue: '',
      topBannerHeight: 820,
      topBannerImages: [
        require('@/pages/index/assets/home-top-bg1.jpg'),
        require('@/pages/index/assets/home-top-bg2.jpg'),
        require('@/pages/index/assets/home-top-bg3.jpg'),
      ],
      inputValue: "",
      // 按钮跳转配置
      buttonLinks: {
        // 碳数字身份证
        '办证指南': 'https://www.kdocs.cn/l/cr5aavNI1Brn',
        '碳证查询': 'https://ctn-web-pre.lingshu.net/trustedCarbonQuery/list?type=carbon-query',
        '碳证核验': 'https://ctn-web-pre.lingshu.net/carbon-verify',
        '跨境互通': '',
        // 国家可信碳链
        '上链指南': '',
        '上链标准': '',
        '上链工具': '',
        '碳证中心': '',
        // 绿色服务
        '服务市场': '/tfwsc',
        '需求市场': '/txqsc',
        '金融市场': '/tjrsc',
        '数据市场': '/tsjsc',
      },
    };
  },
  components: {
    Footer,
  },
  mounted() {
    this.syncBannerHeight();
    window.addEventListener('resize', this.syncBannerHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.syncBannerHeight);
  },
  methods: {
    syncBannerHeight() {
      const w = window.innerWidth;
      if (w < 768) {
        this.topBannerHeight = Math.round(640 + (w / 768) * 120);
      } else {
        this.topBannerHeight = 820;
      }
    },
    // 封装跳转方法 - 外部链接新窗口，内部链接当前窗口
    handleNavigate(link) {
      if (!link) return;
      if (link.startsWith('http://') || link.startsWith('https://')) {
        window.open(link, '_blank');
      } else {
        this.$router.push(link);
      }
    },
    // iframe页面跳转 - 通过parent事件触发main.vue的iframe显示
    handleIframeNavigate(url) {
      console.log('url', url);
      if (!url) return;
      if (url.startsWith('http://') || url.startsWith('https://')) {
        this.$emit('gotoIfreamPage', url);
      } else {
        this.$router.push(url);
      }
    },
    // 快捷搜索
    handleSearch() {
      if (this.inputValue) {
        console.log('搜索:', this.inputValue);
        // TODO: 实现搜索功能
      }
    },
    // 处理热门搜索点击
    handleHotSearch(keyword) {
      this.inputValue = keyword;
      this.handleSearch();
    },
  },
};
</script>

<style  scoped>
.page-box {
  background: #f5f5f7;
}

.nav-box {
  position: fixed;
  top: 0px;
  width: 100%;
  background: #009a29;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  place-items: center;

  color: #fff;

  z-index: 9999;
}
.logo-box {
  text-align: center;
}

.option-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  height: 64px;
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  leading-trim: NONE;
  letter-spacing: 0%;
}

.option-box .gzt {
  padding: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
}

.menu-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  height: 64px;
  font-size: 16px;
  gap: 10px;
}

.menu-title {
  width: 96px;
  height: 64px;
  text-align: center;
  line-height: 24px;

  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.meun-title-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 100%);
  border-bottom: 2px solid #ffffff;
}

.top-box {
  width: 100%;
  position: relative;
  min-height: 820px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.top-banner-swiper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.banner-slide {
  width: 100%;
  height: 100%;
  min-height: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.top-box-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 指示条默认在底部，会被 .top-box-bottom-over 渐变盖住，上移避开 300px 渐变区 */
.top-box ::v-deep .t-swiper__navigation {
  bottom: 340px;
}

.container {
  margin-top: 64px;
  width: 100%;
  /* max-width: 1920px; */
  margin: 0 auto; /* 左右居中 */
  min-height: 100vh;
}

.top-title {
  margin-top: 128px;
  text-align: center;
  width: 100%;
  height: 58px;
}

.top-title-desc {
  width: 100%;
  font-size: 24px;
  font-weight: bold;
  color: #222222;
  -webkit-text-stroke: 0.3px #fff;
  text-stroke: 0.3px #fff;
  text-align: center;
  margin-top: 40px;
}

.top-title-desc img {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.top-search-box {
  margin-top: 40px;
  z-index: 999;
  width: 100%;
  padding: 0px 6%;
}

.search-box {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid #ffffff;
  backdrop-filter: blur(8px);

  box-shadow: 0px 8px 12px 0px #00000014;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  padding: 8px;
}

.search-btn {
  background: linear-gradient(180deg, #00b42a 0%, #009a29 100%);
  width: 92px;
  height: 40px;
  border-radius: 6px;
  text-align: center;
  color: #ffffff;
  line-height: 40px;

  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  leading-trim: NONE;
  letter-spacing: 0%;
  text-align: center;

  cursor: pointer;
}

.search-box input {
  width: calc(100% - 100px);
  max-width: 500px;
  border: none;
  background: transparent;
  outline: none;
}

.search-box input::placeholder {
  color: #666666;
  font-size: 16px;
  opacity: 1;
  font-style: normal;
}

.top-search-hot {
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  color: #ffffff;
  padding-left: 10px;
  margin-top: 10px;
  text-align: center;
}

.top-box-bottom-over {
  height: 300px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250) 100%);
}

.top-to-center {
  height: 60px;
  background: rgba(245, 247, 250, 1);
}

.top-options-box {
  /* position: absolute;
  bottom: -60px; */
  margin-top: 100px;
  z-index: 999;

  /* display: flex; */
  /* justify-content: space-between; */
  width: 100%;
  padding: 0% 20%;
  gap: 3%;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.option-item-box {
  width: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ffffff;
  padding-bottom: 20px;

  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease;
}

.option-item-box:hover {
  transform: scale(1.1);
}

.option-btn-box {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  gap: 10px;
  padding: 6px 10px;
}

.option-item-box-title {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  height: 39px;
  font-family: PingFang SC;
  font-weight: 600;
  font-style: Semibold;
  font-size: 28px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  color: #222222;
}

.option-btn-box .btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  color: #333333;
}

.option-item-box.green .btn {
  background: linear-gradient(180deg, #7be188 0%, #aff0b5 100%);
}
.option-item-box.blue .btn {
  background: linear-gradient(0deg, #c3e7fe 0%, #9fd4fd 100%);
}
.option-item-box.cyan .btn {
  background: linear-gradient(180deg, #89e9e0 0%, #b7f4ec 100%);
}

.center-box {
  width: 100%;
  background: #fff;
  padding: 60px 20%;
}
.center-box .content-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  gap: 20px;
  width: 100%;
}

.center-box-title {
  margin-left: 10px;
  text-align: left;
  margin-bottom: 20px;
  width: fit-content;
  border-bottom: 6px solid rgba(176, 220, 255);
  height: 32px;

  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 32px;
  leading-trim: NONE;
  line-height: 28px;
  letter-spacing: 0%;

  color: #222222;
}

.center-box .item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  transition: transform 0.3s ease;
  width: 100%;
}

.center-box .item:hover {
  transform: scale(1.05);
}

.center-box .item .name1 {
  width: 100%;
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  leading-trim: NONE;
  letter-spacing: 0%;
  line-height: 40px;

  color: #333333;
}
.center-box .item .name2 {
  width: 100%;

  font-family: PingFang SC;
  font-weight: 600;
  font-style: Semibold;
  font-size: 28px;
  leading-trim: NONE;
  line-height: 48px;
  letter-spacing: 0%;
}

.center-box .item .name3 {
  width: 100%;
  margin-top: 10px;

  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  leading-trim: NONE;
  line-height: 28px;
  letter-spacing: 0%;

  color: #666666;
}

.gxnl-qych-hydt-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;

  width: 100%;
  background: #f5f7fa;
  padding: 3% 20%;
}

.gxnl-qych-hydt-box > div {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;

  background: #fff;

  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.3);

  border-radius: 12px;

  height: 553px;
  min-height: 200px;
  padding: 15px;
  width: 100%;

  transition: transform 0.3s ease;

  overflow: auto;

}

.gxnl-qych-hydt-box > div::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.gxnl-qych-hydt-box > div:hover {
  transform: scale(1.05);
}

.gxnl-qych-hydt-box .gxnl-box {
  background-image: url(~@/pages/index/assets/home-gxnl.png);
  background-repeat: no-repeat !important; /* 不重复 */
  background-size: 100% auto;
}
.gxnl-qych-hydt-box .qych-box {
  background-image: url(~@/pages/index/assets/home-qych.png);
  background-repeat: no-repeat !important; /* 不重复 */
  background-size: 100% auto;
}
.gxnl-qych-hydt-box .hydt-box {
  background-image: url(~@/pages/index/assets/home-hydt.png);
  background-repeat: no-repeat !important; /* 不重复 */
  background-size: 100% auto;
}

.gxnl-qych-hydt-box .name1 {
  font-family: PingFang SC;
  font-weight: 600;
  font-style: Semibold;
  font-size: 28px;
  leading-trim: NONE;
  letter-spacing: 0%;
  line-height: 60px;
  color: #222222;
}

.gxnl-qych-hydt-box .name2 {
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  leading-trim: NONE;
  line-height: 24px;
  letter-spacing: 0%;
  color: #666666;
  margin-bottom: 28px;
  height: 50px;
}

.gxnl-box .item {
  display: grid;
  grid-template-columns: 64px 1fr 32px;
  align-items: center;
  background: linear-gradient(90deg, #7be188 0%, #e8ffea 100%);
  width: 100%;
  height: 64px;
  padding: 20px;
  border-radius: 8px;
  margin-top: 16px;
  cursor: pointer;
}

.gxnl-box .item .text {
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  leading-trim: NONE;
  line-height: 26px;
  letter-spacing: 0%;
  padding-left: 20px;
}

.qych-box .item {
  height: 114px;
  width: 100%;
  background: #e9f5fe;
  border-radius: 8px;

  padding: 10px;
}

.qych-box .item .desc-btn-box {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.qych-box-item-title {
  line-height: 40px;
  color: #333333;
  font-family: PingFang SC;
  font-weight: 600;
  font-style: Semibold;
  font-size: 20px;
  leading-trim: NONE;
  letter-spacing: 0%;
  padding: 0px;
}

.qych-box .item .desc-btn-box .desc {
  width: 80%;
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 22px;
  letter-spacing: 0%;
  color: #333333;
}

.qych-box .item .desc-btn-box .btn {
  background: #2196f3;
  height: 38px;
  width: 94px;
  border-radius: 4px;
  text-align: center;
  line-height: 38px;
  color: #fff;
  cursor: pointer;
}

.hydt-box .tab {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.hydt-box .tab > div {
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  leading-trim: NONE;
  letter-spacing: 0%;
  color: #333333;
  cursor: pointer;
}
.hydt-box .tab .active {
  border-bottom: 6px solid #00cee8;
  height: 24px;
  line-height: 20px;
  font-weight: 600;
}

.hydt-box .item {
  font-family: PingFang SC;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 22px;
  letter-spacing: 0%;

  width: 100%;
  padding: 16px;
  background: #e6f7f9;
  border-left: 4px solid #00acc1;
  border-radius: 8px;

  margin-top: 12px;

  color: #333333;
}

.bottom-box {
  width: 100%;
  height: 539px;

  background-image: url(~@/pages/index/assets/home-szsf-bg.png);

  background-repeat: no-repeat; /* 不重复 */
  background-size: cover; /* 不拉伸，保持原图尺寸 */
  background-position: left; /* 永远显示中间部分 */

  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-box .content {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 400px;
  width: 64%;

  border-radius: 12px;
  border: 2px solid #ffffff;
  background: linear-gradient(
    95.7deg,
    rgba(255, 255, 255, 0) 1.44%,
    rgba(255, 255, 255, 0) 6.39%,
    rgba(255, 255, 255, 0.3) 41.25%,
    rgba(255, 255, 255, 0.5) 91.66%
  );
  /* backdrop-filter: blur(12px); */
  box-shadow: 0px 4px 20px 0px rgba(255, 255, 255, 0.08);
}
.bottom-box .content > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.bottom-box-content-title {
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Semibold;
  font-size: 40px;
  leading-trim: NONE;
  letter-spacing: 0%;
  line-height: 80px;
  color: #222222;
  padding: 0px;
}

.bottom-box .content .desc {
  font-family: PingFang SC;
  font-weight: 500;
  font-style: Medium;
  font-size: 22px;
  leading-trim: NONE;
  line-height: 40px;
  letter-spacing: 0%;
  color: #222222;
}

.bottom-box .content .btn {
  background: #009a29cc;
  border-radius: 8px;
  width: 360px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  background: rgba(0, 154, 41, 0.8);

  border: 1px solid #ffffff;
  backdrop-filter: blur(8px);

  font-family: PingFang SC;
  font-weight: 400;
  font-style: Semibold;
  font-size: 18px;
  leading-trim: NONE;
  letter-spacing: 0%;
  color: #ffffff;

  margin-top: 20px;

  cursor: pointer;

  transition: transform 0.3s ease;
}

.bottom-box .content .btn:hover {
  transform: scale(1.05);
}

@media (max-width: 767px) {
  /* 容器调整 */
  .container {
    margin-top: 0;
  }

  /* 顶部区域 */
  .top-box {
    min-height: auto;
    padding-bottom: 20px;
  }

  .top-title {
    margin-top: 60px;
  }

  .top-title img {
    height: auto;
    max-width: 80%;
  }

  .top-title-desc {
    padding: 0 20px;
    margin-top: 20px;
    font-size: 16px;
  }

  .top-search-box {
    padding: 0 16px;
    margin-top: 20px;
  }

  .search-box {
    flex-direction: column;
    padding: 12px;
    gap: 10px;
  }

  .search-box input {
    width: 100%;
    max-width: none;
    padding: 10px;
    text-align: center;
  }

  .search-btn {
    width: 100%;
    height: 44px;
  }

  .top-search-hot {
    padding: 10px 16px;
    font-size: 12px;
  }

  /* 选项卡片区域 */
  .top-options-box {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    margin-top: 40px;
    gap: 16px;
  }

  .option-item-box {
    padding: 16px;
  }

  .option-item-box-title {
    margin-top: 12px;
    font-size: 20px;
  }

  .option-btn-box {
    padding: 8px 6px;
    gap: 8px;
  }

  .option-btn-box .btn {
    height: 40px;
    font-size: 14px;
    line-height: 40px;
  }

  /* 核心驱动区域 */
  .center-box {
    padding: 30px 16px;
  }

  .center-box-title {
    font-size: 24px;
  }

  .center-box .content-box {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .center-box .item .name1 {
    font-size: 16px;
  }

  .center-box .item .name2 {
    font-size: 20px;
  }

  .center-box .item .name3 {
    font-size: 14px;
  }

  /* 三栏区域 */
  .gxnl-qych-hydt-box {
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    gap: 16px;
  }

  .gxnl-qych-hydt-box > div {
    height: auto;
    min-height: 300px;
    background-size: cover !important;
  }

  .gxnl-qych-hydt-box .name1 {
    font-size: 22px;
    line-height: 40px;
  }

  .gxnl-qych-hydt-box .name2 {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
  }

  .gxnl-box .item {
    height: 50px;
    padding: 12px;
    grid-template-columns: 48px 1fr 24px;
  }

  .gxnl-box .item .text {
    padding-left: 12px;
    font-size: 14px;
  }

  /* 底部区域 */
  .bottom-box {
    height: auto;
    min-height: 300px;
    padding: 40px 16px;
  }

  .bottom-box .content {
    width: 100%;
    height: auto;
    padding: 24px;
  }

  .bottom-box-content-title {
    font-size: 24px;
    line-height: 40px;
  }

  .bottom-box .content .desc {
    font-size: 14px;
    line-height: 24px;
  }

  .bottom-box .content .btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    line-height: 48px;
  }
}

/* 平板适配 */
@media (min-width: 768px) and (max-width: 1024px) {
  .top-options-box {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 5%;
  }

  .gxnl-qych-hydt-box {
    padding: 3% 5%;
    gap: 20px;
  }

  .gxnl-qych-hydt-box > div {
    height: 450px;
  }
}
</style>