123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- <script setup lang="ts">
- const { locale } = useI18n();
- const serverData = [
- {
- title: '企业碳核算',
- langKey: 'develop.iconItemOne',
- iconName: 'carbon/icon-comp-server-01',
- },
- {
- title: '双碳路径规划',
- langKey: 'develop.iconItemTwo',
- iconName: 'carbon/icon-comp-server-02',
- },
- {
- title: '降本增效策略制定',
- langKey: 'develop.iconItemThree',
- iconName: 'carbon/icon-comp-server-03',
- },
- {
- title: '净零排放抵消',
- langKey: 'develop.iconItemFour',
- iconName: 'carbon/icon-comp-server-04',
- },
- {
- title: '碳管理能力建设',
- langKey: 'develop.iconItemFive',
- iconName: 'carbon/icon-comp-server-05',
- },
- ]
- const flowData = [
- {
- title: 'STEP1:识别核算边界和排放源',
- desc: '基于国际通用的核算指南GHG protocol、ISO 14064以及国内相关行业的核算指南,准确识别企业(包含八大行业控排企业)的核算边界和排放源',
- langTitleKey: 'develop.flowTitleOne',
- langDescKey: 'develop.flowStepOne',
- iconName: 'carbon/icon-comp-flow-01',
- },
- {
- title: 'STEP2:数据收集整理',
- desc: '通过模块化的数据收集形式确保数据的准确性、完整性和透明性,节省您宝贵的时间,提高您的双碳管理水平',
- langTitleKey: 'develop.flowTitleTwo',
- langDescKey: 'develop.flowStepTwo',
- iconName: 'carbon/icon-comp-flow-02',
- },
- {
- title: 'STEP3:计算碳排放量',
- desc: '根据相关核算方法计算所有排放范围的排放量,并智能化分析对比各类别、各维度的排放量',
- langTitleKey: 'develop.flowTitleThree',
- langDescKey: 'develop.flowStepThree',
- iconName: 'carbon/icon-comp-flow-03',
- },
- {
- title: 'STEP4:生成排放报告',
- desc: '根据计算和分析的结果,生成碳排放报告。报告包括核算边界、数据来源、计算方法、碳排放量的详细数据和分析结果等内容',
- langTitleKey: 'develop.flowTitleFour',
- langDescKey: 'develop.flowStepFour',
- iconName: 'carbon/icon-comp-flow-04',
- },
- {
- title: 'STEP5:设定减排路线图',
- desc: '利用AI+双碳大模型为您制定科学的减碳目标,并将其分解为可落实的指标,以适应不同阶段的可持续发展目标,并逐步实现整个供应链的近零排放',
- langTitleKey: 'develop.flowTitleFive',
- langDescKey: 'develop.flowStepFive',
- iconName: 'carbon/icon-comp-flow-05',
- },
- {
- title: 'STEP6:可持续发展的改善',
- desc: '通过追踪企业的可持续发展进程,并不断完善您的战略目标来保持企业的竞争力。通过减少碳排放和采用脱碳计划,助力企业的绿色转型',
- langTitleKey: 'develop.flowTitleSix',
- langDescKey: 'develop.flowStepSix',
- iconName: 'carbon/icon-comp-flow-06',
- }
- ]
- </script>
- <template>
- <BaseCard title="企业碳咨询规划" is-text lang-key="develop.subTitle">
- <ul class="carbon-desc-container text-center text-[12px]">
- <li class="mb-[6px] md:mb-[0px]">{{$t('develop.subTitleContentOne')}}</li>
- <li class="mb-[6px] md:mb-[0px]">{{$t('develop.subTitleContentTwo')}}</li>
- <li>{{$t('develop.subTitleContentThree')}}</li>
- </ul>
- </BaseCard>
- <BaseCard title="我们的服务" class="server-container" lang-key="develop.iconTitle">
- <div class="service-list grid grid-cols-2 gap-[10px] md:grid-cols-5 md:gap-[0px]" data-aos="zoom-in-down">
- <div
- v-for="(item, index) in serverData"
- :key="index"
- :class="[
- 'service-item',
- 'w-full',
- {'col-span-2': serverData.length -1 === index},
- 'md:col-span-1',
- ]">
- <BaseIcon :name="item.iconName" width="56" height="56" />
- <span class="pt-[10px] text-center">{{ $t(item.langKey)}}</span>
- </div>
- </div>
- </BaseCard>
- <BaseCard title="协同降碳流程" class="flow-continer" lang-key="develop.flowTitle">
- <div class="grid grid-cols-1 gap-[10px] md:grid-cols-2 md:gap-[20px]">
- <div class="
- flow-item flex flex-col px-[20px] py-[20px]
- sm:flex-row
- "
- data-aos="fade-up" :data-aos-delay="(index + 1) * 200"
- v-for="(item, index) in flowData"
- :key="index">
- <div class="flow-icon flex justify-center align-center">
- <nuxt-icon :name="item.iconName" filled class="text-[96px] sm:text-[86px] lg:text-[136px]"/>
- </div>
- <div class="flow-info">
- <h5 class="title font-bold">{{ $t(item.langTitleKey)}}</h5>
- <span class="desc">{{ $t(item.langDescKey)}}</span>
- </div>
- </div>
- </div>
- </BaseCard>
- </template>
- <style scoped lang="scss">
- .server-container {
- background: url('@/assets/image/carbo/bg-server.png') left top no-repeat, linear-gradient(180deg, #F7F9FF 57.64%, #F1F5F8 100%);
- .service-list {
- border-radius: 8px;
- box-shadow: 0px 0px 30px 0px #8BBCDF33;
- .service-item {
- position: relative;
- height: 148px;
- @include flex(y, center, center);
- background: #fff;
- font-size: 16px;
- line-height: 26px;
- &:last-child {
- margin: 0;
- }
- &::after {
- position: absolute;
- right: 0;
- top: 40px;
- content: '';
- width: 1px;
- height: 70px;
- display: block;
- background: #F3F3F3;
- }
- }
- }
- }
- .flow-continer {
- background: url('@/assets/image/carbo/bg-comp-left-raound.png') left 30% no-repeat,
- url('@/assets/image/carbo/bg-comp-right-raound.png') 96% 70% no-repeat
- ;
- .flow-item {
- border-radius: 8px;
- background: #fff;
- box-shadow: 0px 8px 30px 0px #C3D6E933;
- text-align: justify;
- .flow-info {
- @include flex(y, start, start);
- padding: 8px 0;
- .title {
- font-size: 20px;
- color: #000;
- }
- .desc {
- padding-top: 12px;
- font-size: 14px;
- color: #565F83;
- }
- }
- }
- }
- .en{
- .service-item{
- span{
- font-size: 12px;
- line-height: 14px;
- min-height: 38px;
- }
- }
- .flow-info{
- .title{
- font-size: 16px !important;
- text-align:left;
- }
- }
- }
- </style>
|