123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- <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>
|