slibra-official-web/components/carbon/CcerLayout.vue

<script setup lang="ts">
const {locale} = useI18n();
const flowList = [
	{
		value: '项目评估',
		iconName: 'carbon/dmvr/icon-flow-01',
		langKey: 'ccer.flowEvaluation'
	},
	{
		value: '项目设计',
		iconName: 'carbon/dmvr/icon-flow-02',
		langKey: 'ccer.flowDesign'
	},
	{
		value: '项目公示',
		iconName: 'carbon/dmvr/icon-flow-03',
		langKey: 'ccer.flowPublicity'
	},
	{
		value: '项目审定与登记',
		iconName: 'carbon/dmvr/icon-flow-04',
		langKey: 'ccer.flowApp'
	},
	{
		value: '减排量核算',
		iconName: 'carbon/dmvr/icon-flow-05',
		langKey: 'ccer.flowAccount'
	},
	{
		value: '减排量公示',
		iconName: 'carbon/dmvr/icon-flow-06',
		langKey: 'ccer.flowEmi'
	},
	{
		value: '减排量核查与登记',
		iconName: 'carbon/dmvr/icon-flow-07',
		langKey: 'ccer.flowreg'
	},
	{
		value: '项目交易',
		iconName: 'carbon/dmvr/icon-flow-08',
		langKey: 'ccer.flowtran'
	},
]
const descList = [
	{
		val: 'CCER是国家核证自愿减排量，是对温室气体减排效果进行量化核证，并在国家温室气体自愿减排交易',
		langKey: 'ccer.descItemOne',
	},
	{
		val: '注册登记系统中登记的温室气体减排量。CCER可与碳配额等量互换，全国与地方试点的控排企业可购买CCER用于履约',
		langKey: 'ccer.descItemTwo',
	},
	{
		val: '满足国家对其控排要求，还可用于企业、大型活动碳中和',
		langKey: 'ccer.descItemThree',
	}
]
</script>
<template>

	<BaseDevLayout
		subTitle="对于碳资产项目开发，红杉天枰为您提供从开发-签发-交易的一站式全流程服务"
		subTitleLangKey="ccer.serviceTitle"
		card-title="中国核证自愿减排量（CCER）"
		cardTitleLangKey="ccer.descTitle"
		:desc-list="descList"
	>

		<BaseCard
			title="CCER能够开发的项目"
			lang-key="ccer.projectTitle"
			is-text
			class="introduce-container max-w-[1080px] mx-auto"
			:card-wrapper-style="{
      padding: '88px 0'
    }">
			<ul class="project-list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[20px]">
				<li class="project-item h-[315px]">
					<p class="item-title">{{ $t('ccer.projectItemOne') }}</p>
				</li>
				<li class="project-item h-[315px]">
					<p class="item-title">{{ $t('ccer.projectItemTwo') }}</p>
				</li>
				<li class="project-item h-[315px]">
					<p class="item-title">{{ $t('ccer.projectItemThree') }}</p>
				</li>
				<li class="project-item h-[315px]">
					<p class="item-title">{{ $t('ccer.projectItemFour') }}</p>
				</li>
			</ul>
		</BaseCard>

		<BaseCard title="CCER项目开发流程" lang-key="ccer.flowTitle" is-text class="flow-container" :card-wrapper-style="{
      padding: '88px 0 163px 0'
    }">
			<ul class="flow-list grid grid-cols-2 md:grid-cols-8">
				<li class="flow-item" v-for="(item, index) in flowList" :key="item.value">
					<div class="introduce">
						<BaseIcon class="icon" :name="item.iconName" width="56" height="56"/>
						<span class="text fz14">{{ $t(item.langKey) }}</span>
					</div>
					<p class="arrow" v-show="index !== flowList.length - 1"></p>
				</li>
			</ul>
		</BaseCard>
	</BaseDevLayout>

</template>

<style scoped lang="scss">
.project-list {
	padding-top: 30px;

	.project-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		border-radius: 8px;
		overflow: hidden;
		-webkit-transition: background-size 1s linear;
		transition: background-size 1s linear;

		.item-title {
			display: flex;
			align-items: center;
			height: 100px;
			padding-left: 40px;
			line-height: 34px;
			font-size: 24px;
			color: #fff;
			backdrop-filter: blur(10px);
		}

		&:nth-child(1) {
			background: url("~/assets/image/carbo/dmrv/img-project-01.png") center center no-repeat;
			background-size: 100% 100%;
		}

		&:nth-child(2) {
			background: url("~/assets/image/carbo/dmrv/img-project-02.png") center center no-repeat;
			background-size: 100% 100%;
		}

		&:nth-child(3) {
			background: url("~/assets/image/carbo/dmrv/img-project-03.png") center center no-repeat;
			background-size: 100% 100%;
		}

		&:nth-child(4) {
			background: url("~/assets/image/carbo/dmrv/img-project-04.png") center center no-repeat;
			background-size: 100% 100%;
		}

		&:hover {
			opacity: 0.9;
			background-size: 110% 110%;
		}
	}
}

.flow-container {
	background: #f7fafd url("~/assets/image/carbo/dmrv/bg-flow.png") center bottom no-repeat;
	background-size: 100% 240px;
}

.flow-list {
	justify-items: center;
	width: 100%;
	padding: 82px 0;
	margin-top: 30px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0px 0px 30px 0px #8BBCDF33;

	.flow-item {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;

		.introduce {
			@include flex(y, center, center);
		}

		.text {
			padding-top: 10px;
			font-size: 16px;
			line-height: 22px;
			word-break: keep-all;
			white-space: nowrap;
			color: #333;
		}

		.arrow {
			position: absolute;
			top: 20px;
			right: 0;
			width: 10px;
			height: 20px;
			background: url("@/assets/image/carbo/dmrv/icon-ccer-arrow.png") no-repeat;
		}
	}
}

.en {
	.project-list {
		.item-title {
			font-size: 16px;
			line-height: 20px;
		}
	}

	.flow-list {
		align-items: flex-start;

		.flow-item {
			.introduce {
				.text {
					text-align: center;
					white-space: normal;
					word-break: normal;
				}
				.fz14 {
					font-size: 14px;
				}
			}
		}
	}

}

@media screen and (max-width: 768px) {
	.en {
		.project-item {
			.item-title {
				font-size: 20px;
				line-height: 22px;
			}
		}
	}
	.flow-container {
		.flow-list {
			gap: 20px;

			.flow-item {

				&:nth-child(3n) {
					p.arrow {
						display: block;
					}
				}

				&:nth-child(2n) {
					p.arrow {
						display: none;
					}
				}
			}
		}
	}

}
</style>