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