338 lines
9.4 KiB
Vue
338 lines
9.4 KiB
Vue
<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> |