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

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