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

<script setup lang="ts">
const {locale} = useI18n();
const flowList = [
	{
		title: '选择方法学',
		content: '项目业主必须选择一个适合自己项目的VCS方法学或通过VCS方法学开发流程开发适用于自己项目的新方法学。',
		langKey: 'vcs.flowTitleOne',
		contentKey: 'vcs.flowContentOne'
	},
	{
		title: '项目描述及公示',
		content: '业主需要在VCS注册处开设账户并将项目书提交VCS项目开发列表进行公示。',
		langKey: 'vcs.flowTitleTwo',
		contentKey: 'vcs.flowContentTwo'
	},
	{
		title: '审定项目书',
		content: '业主需要聘请一个VVB对其项目阐释进行审定。',
		langKey: 'vcs.flowTitleThree',
		contentKey: 'vcs.flowContentThree'
	},
	{
		title: '核证减排量',
		content: '项目业主需要监测记录减排数据，并制作监测报告。并由第三方进行核证。',
		langKey: 'vcs.flowTitleFour',
		contentKey: 'vcs.flowContentFour'
	},
	{
		title: '签发核证减排量(VCUs)',
		content: '业主提出减排量签发申请。减排量获得签发，由业主决定持有，出售或注销。',
		langKey: 'vcs.flowTitleFive',
		contentKey: 'vcs.flowContentFive'

	}
]

const descList = [
	{
		val: 'VERRA主管的核证减排标准VCS是全球最大的自愿性减排机制。VCS项目由非盈利的独立协会管理，要求项目自愿',
		langKey: 'vcs.descItemOne',
	},
	{
		val: '碳减排必须是真实、可测算、永久、独立核实和唯一。VCS是目前较为成熟的碳补偿标准，也是世界上应用最广的碳减排计量标',
		langKey: 'vcs.descItemTwo',
	},
	{
		val: '碳减排必须是真实、可测算、永久、独立核实和唯一。VCS是目前较为成熟的碳补偿标准，也是世界上应用最广的碳减排计量标',
		langKey: 'vcs.descItemThree',
	}
]
</script>
<template>

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

		<BaseCard
			title="VCS能够开发的项目"
			lang-key="vcs.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 gap-[20px]">
				<li class="project-item h-[315px]">
					<p class="item-title">{{ $t('vcs.projectItemOne') }}</p>
				</li>
				<li class="project-item h-[315px]">
					<p class="item-title">{{ $t('vcs.projectItemTwo') }}</p>
				</li>
			</ul>
		</BaseCard>

		<BaseCard
			title="VCS项目开发流程"
			lang-key="vcs.flowTitle"
			is-text
			class="flow-container max-w-[1080px] mx-auto"
			:card-wrapper-style="{
      padding: '88px 0 163px 0',
    }">
			<div class="flow-list grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-[20px]">
				<div :class="[
            'flow-item-wrapper',
            'h-[auto]',
            'sm:h-[300px]',
            i % 2 === 0 ? 'lg:pt-[50px]' : ''
          ]"
						 v-for="item, i in flowList">
					<div class="flow-item">
						<div class="flow-item-content w-full sm:w-[202px]">
							<h4 class="title">{{ $t(item.langKey) }}</h4>
							<div class="line"></div>
							<span class="desc">
                {{ $t(item.contentKey) }}
              </span>
						</div>
					</div>
				</div>
			</div>
		</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/bg-dev-01.png") center center no-repeat;
			background-size: 100% 100%;
		}

		&:nth-child(2) {
			background: url("~/assets/image/carbo/dmrv/bg-dev-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: cover;
		// }

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

		&: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 {
	padding-top: 48px;

	.flow-item-wrapper {
		position: relative;
		// height: 300px;

		.flow-item {
			position: relative;
			height: 100%;

			&::after,
			&::before {
				position: absolute;
				display: block;
				content: " ";
			}

			&::after {
				top: 10px;
				left: 0px;
				height: 152px;
				width: 2px;
				background: linear-gradient(81.92deg, #3996FF 3.18%, #389FFF 22.8%, #2A68FF 97.59%);
			}

			&::before {
				top: 10px;
				left: 0px;
				width: 1px;
				height: 100%;
				background: linear-gradient(0deg, rgba(41, 132, 253, 0) -0.02%, #1C88FE 31.26%, rgba(0, 146, 255, 0.04) 99.99%);
			}
		}

		.flow-item-content {
			// width: 202px;
			height: 172px;
			padding: 20px 0px 0 10px;
			border-right: 1px solid;
			border-top: 1px solid;
			border-radius: 2px 0px 64px 8px;
			border-image-source: linear-gradient(222.19deg, #D1DEFE 7.26%, rgba(255, 255, 255, 0) 99.08%);
			background: linear-gradient(90.65deg, #E4F0FF 2.2%, #FFFFFF 94.77%);
			box-shadow: 0px 4px 30px 0px #9EC0D81A;
			text-align: left;

			.title {
				font-size: 16px;
				font-weight: bold;
				line-height: 22px;
				color: #333;
			}

			.line {
				width: 26px;
				height: 4px;
				margin: 8px 0;
				border-radius: 4px;
				background: linear-gradient(81.92deg, #3996FF 3.18%, #389FFF 22.8%, #2A68FF 97.59%);
			}

			.desc {
				font-size: 14px;
				color: #565F83;
			}
		}

		&:nth-child(2n) {
			// padding-top: 50px;
		}
	}
}

.en {
	.project-list {
		.item-title {
			font-size: 20px;
			line-height: 22px;
		}
	}
}
@media  screen and (min-width: 932px) {
	.en{
		.flow-item-content{
			height: 242px !important;
		}
	}
}

</style>