<template>
  <div class="body-main">
    <div class="gxnlpt-main">
      <div class="anchor-demo anchor-container-demo">
        <t-anchor container="#anchor-container" @click="handleClick" class="gxnlpt-tab">
          <div class="gxnlpt-tab-box" v-for="(item, index) in GXNLPTtabList" :key="index">
            <t-anchor-item :href="item.href" :title="item.title"></t-anchor-item>
            <img class="icon-img" :src="getIconUrl(item.icon)" alt="" />
            <!-- <a :href="item.href" target="_self" class="">{{item.title}}</a> -->
          </div>
        </t-anchor>
        <div id="anchor-container">
          <div :id="item.id" v-for="(item, index) in GXNLPTtabList" :key="index">
            <div class="anchor-container-title">{{ item.title }}</div>
            <div class="anchor-container-box">
              <div class="anchor-container-box-card" v-for="(v, i) in item.cardList" :key="i">
                <div class="anchor-container-box-img">
                  <img :src="getIconUrl1(v.img, item.mrimg)" alt="" />
                  <img v-if="v.icon" :src="getIconUrl(v.icon)" alt="" class="anchor-container-box-img-img" />

                  <div v-else class="anchor-container-box-img-text">
                    {{ v.title }}
                  </div>
                </div>
                <div class="anchor-container-box-text">
                  <div class="anchor-container-box-text1">
                    {{ v.title }}
                  </div>
                  <div class="anchor-container-box-text2">
                    {{ v.context }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-box"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      GXNLPTtabList: [
        {
          href: '#content-1',
          id: 'content-1',
          title: '碳核算平台',
          icon: 'thspt.svg',
          mrimg: 'thsmrbg.png',
          cardList: [
            {
              img: '',
              title: '碳足迹计算器',
              context: '提供企业碳足迹核算、产品碳足迹计算、供应链碳管理等功能',
            },
            {
              img: '',
              title: '企业碳管理平台',
              context: '全链条碳足迹追踪，支持多级供应商碳数据管理和分析',
            },
            {
              img: '',
              title: '供应链碳追踪',
              context: '提供企业碳足迹核算、产品碳足迹计算、供应链碳管理等功能',
            },
          ],
        },
        {
          href: '#content-2',
          id: 'content-2',
          title: '碳认证机构',
          icon: 'trzjg.svg',
          mrimg: 'thsmrbg.png',
          cardList: [
            {
              img: 'zgzlbg.png',
              title: '中国质量认证中心',
              context: '国家级认证机构，提供碳管理体系认证、碳中和认证等服务',
              icon: 'zgzlicon.png',
            },
            {
              img: 'hcjcbj.png',
              title: '华测检测认证集团',
              context: '综合性检测认证机构，提供碳核查、碳足迹认证、绿色产品认证',
              icon: 'hcjcicon.png',
            },
            {
              img: 'sgsbg.png',
              title: 'SGS通标标准技术服务',
              context: '国际知名认证机构，提供碳核查、碳中和认证、可持续发展认证',
              icon: 'sgsicon.png',
            },
          ],
        },
        {
          href: '#content-3',
          id: 'content-3',
          title: '碳交易平台',
          icon: 'tjypt.svg',
          mrimg: 'thsmrbg.png',
          cardList: [
            {
              img: 'shhjbg.png',
              title: '上海环境能源交易所',
              context: '全国碳市场交易平台，提供碳配额交易、CCER交易等服务',
              icon: 'shhjicon.png',
            },
            {
              img: 'bjlvbg.png',
              title: '北京绿色交易所',
              context: '综合性环境权益交易平台，提供碳交易、排污权交易、用能权交易',
              icon: 'bjlvicon.png',
            },
            {
              img: 'gztpfbg.png',
              title: '广州碳排放权交易所',
              context: '广东省碳交易平台，提供碳配额交易、碳金融产品等服务',
              icon: 'gztpficon.png',
            },
          ],
        },
        {
          href: '#content-4',
          id: 'content-4',
          title: '碳金融服务',
          icon: 'tjrfw.svg',
          mrimg: 'tjrfwbg.png',
          cardList: [
            {
              img: '',
              title: '碳金融创新平台',
              context: '提供碳质押融资、碳保险、碳基金等创新金融产品和服务',
            },
            {
              img: '',
              title: '绿色银行服务',
              context: '提供碳质押融资、碳保险、碳基金等创新金融产品和服务',
            },
            {
              img: '',
              title: '碳资产管理',
              context: '专业碳资产管理服务、提供碳资产托管、投资咨询、风险控制',
            },
          ],
        },
        {
          href: '#content-5',
          id: 'content-5',
          title: '碳技术咨询',
          icon: 'tjszx.svg',
          mrimg: 'tjszxbg.png',
          cardList: [
            {
              img: '',
              title: '碳技术研究院',
              context: '专业碳技术研究机构，提供碳捕集、碳利用、碳封存技术咨询',
            },
            {
              img: '',
              title: '碳技术研究院',
              context: '专业碳技术研究机构，提供碳捕集、碳利用、碳封存技术咨询',
            },
            {
              img: '',
              title: '碳技术研究院',
              context: '专业碳技术研究机构，提供碳捕集、碳利用、碳封存技术咨询',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleClick({ e, href, title }) {
      e.preventDefault();
      console.log('click', href, title);
    },
    getIconUrl(iconName) {
      // 使用require动态加载图片
      return require(`../../assets/icon/${iconName}`);
    },
    getIconUrl1(iconName, iconName1) {
      // 使用require动态加载图片
      if (iconName) {
        return require(`../../assets/icon/${iconName}`);
      } else {
        return require(`../../assets/icon/${iconName1}`);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.body-main {
  padding-top: 60px;
  background-image: linear-gradient(180deg, #f2fdf0, #e6f7fd);
}
.anchor-container-demo {
  //   display: flex;
}
#anchor-container {
  flex-grow: 1;
  height: 770px;
  overflow: auto;
}
#anchor-container::-webkit-scrollbar {
  display: none;
}
.gxnlpt-main {
  max-width: 1448px;
  margin: auto;
  .gxnlpt-tab {
    display: flex;
    width: 100%;
    margin-bottom: 70px;
    background-color: transparent;
    justify-content: space-between;
    .gxnlpt-tab-box {
      position: relative;
      width: 228px;
      height: 56px;
      font-size: 16px;
      line-height: 56px;
      color: #666;
      text-align: center;
      background-color: #fff;
      border-radius: 8px;
    }
  }
}
/deep/ .t-anchor__item {
  width: 228px;
  height: 56px;
  a {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #666;
    text-align: center;
  }
}
/deep/ .t-anchor__line {
  display: none;
}
/deep/ .t-anchor__item-link {
  line-height: 56px;
}
/deep/ .t-is-active {
  // background: #B1B1B1;
  background-image: linear-gradient(90deg, #92d495 0%, #2e7d32 100%);
  border-radius: 8px;
  a {
    color: #fff !important;
  }
}
/deep/.t-is-active + img {
  /* 选中紧跟在.t-is-active后面的img元素 */
  filter: brightness(0) invert(1);
}
.icon-img {
  position: absolute;
  top: 50%;
  left: 52px;
  margin-top: 2px;

  transform: translateY(-50%);
}
.anchor-container-title {
  margin-bottom: 32px;
  font-size: 40px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: 0;
  color: #1a1b24;
  text-align: center;
}
.anchor-container-box {
  display: flex;
  margin-bottom: 70px;
  justify-content: space-between;
  .anchor-container-box-card {
    width: 464px;
    height: 232px;
  }
  .anchor-container-box-img {
    position: relative;
  }
  .anchor-container-box-img-text {
    position: absolute;
    top: 50%;
    width: 100%;
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: 0;
    color: #fff;
    text-align: center;
    transform: translateY(-50%);
  }
  .anchor-container-box-text {
    width: 100%;
    height: 132px;
    padding: 24px;
    background-color: #fff;
    // border-radius: 8px;
    border-radius: 0 0 8px 8px;
    transform: translateY(-2px);
    .anchor-container-box-text1 {
      margin-bottom: 16px;
      font-size: 18px;
      font-weight: 600;
      line-height: 26px;
      letter-spacing: 0;
      color: #000;
    }
    .anchor-container-box-text2 {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0;
      color: #666;
    }
  }
}
.bottom-box {
  height: 380px;
}
.anchor-container-box-img-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>