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

<script setup lang="ts">
const { locale } = useI18n();
const serverData = [
  {
    iconName: 'carbon/lca-server-01',
    title: '数据收集与核算',
    desc: '绘制产品生产流程图，收集相关数据',
    subDesc: '并进行全生命周期的数据核算',
    titleKey: 'develop.LCAFlowItemOne',
    descKey: 'develop.LCAFlowItemContentOne',
    subDescKey: 'develop.LCAFlowItemContentSubOne'
  },
  {
    iconName: 'carbon/lca-server-02',
    title: '产品碳足迹证书',
    desc: '为您的产品提供专属的碳足迹证书',
    subDesc: '详细涵盖产品的各项信息',
    titleKey: 'develop.LCAFlowItemTwo',
    descKey: 'develop.LCAFlowItemContentTwo',
    subDescKey: 'develop.LCAFlowItemContentSubTwo'
  },
  {
    iconName: 'carbon/lca-server-03',
    title: '产品碳标签',
    desc: '接轨国际趋势，提供绿色低碳产品',
    subDesc: '碳标签，增强产品竞争力',
    titleKey: 'develop.LCAFlowItemThree',
    descKey: 'develop.LCAFlowItemContentThree',
    subDescKey: 'develop.LCAFlowItemContentSubThree'
  },
  {
    iconName: 'carbon/lca-server-04',
    title: '产品减碳策略',
    desc: '基于全生命周期的碳排情况，为您',
    subDesc: '的产品提供科学减碳策略',
    titleKey: 'develop.LCAFlowItemFour',
    descKey: 'develop.LCAFlowItemContentFour',
    subDescKey: 'develop.LCAFlowItemContentSubFour'
  },
]

const iconData = [
  { iconName: 'carbon/icon-lca-skill-01', desc: 'GHG protocol' },
  { iconName: 'carbon/icon-lca-skill-02', desc: 'PAS 2050' },
  { iconName: 'carbon/icon-lca-skill-03', desc: 'ISO 14067' }
]

const leftData = [
  {
    title: '识别核算边界',
    imgUrl: '/images/carbon/lcal/img-lca-01.png',
		titleKey:'develop.LCALifeItemOne',
		descKey:'develop.LCALifeItemContentOne',
    content: '确定所评估产品的功能单元，如一个玻璃杯或一部手机。再选择产品生命周期的评估范围，从摇篮到大门或者从摇篮到坟墓，进而确定评估范围。'
  },
  {
    title: '上下游数据收集',
    imgUrl: '/images/carbon/lcal/img-lca-02.png',
		titleKey:'develop.LCALifeItemTwo',
		descKey:'develop.LCALifeItemContentTwo',
    content: '确定在生命周期各阶段中所涉及的输入和输出流程，包括原材料、能源、废物排放等。通过联系供应商、制造商或者查询碳排因子库来获取相关数据。'
  },
  {
    title: 'LCA碳足迹核算',
    imgUrl: '/images/carbon/lcal/img-lca-03.png',
		titleKey:'develop.LCALifeItemThree',
		descKey:'develop.LCALifeItemContentThree',
    content: '根据收集到的数据，计算在每个环节中所产生的温室气体排放量，评估不同环节对环境的影响程度，进而得出产品的碳足迹结果，并提出相应的改进措施。'
  },
]

</script>
<template>
  <BaseCard title="LCA产品碳足迹评价" lang-key="develop.LCATitle" is-text>
    <ul class="desc-container">
      <li>{{ $t('develop.LCATitleOne') }}</li>
      <li>{{ $t('develop.LCATitleTwo') }}</li>
      <li>{{ $t('develop.LCATitleThree') }}</li>
    </ul>
  </BaseCard>

  <div class="chart-container">
    <img class="w-[100%] md:w-[821px] md:h-[411px]" src="@/assets/image/carbo/img-cbam-chart.png" alt="">
  </div>

  <BaseCard title="LCA全流程服务" class="server-container" lang-key="develop.LCAFlowTitle">
    <ul class="grid grid-cols-1 gap-y-[50px] sm:grid-cols-2 md:grid-cols-4 place-content-between">
      <li v-for="item,index in serverData" :key="item.titleKey" data-aos="fade-up" :data-aos-delay="(index + 1) * 200">
        <IconPanel v-bind="item"></IconPanel>
      </li>
    </ul>
  </BaseCard>

  <BaseCard title="LCA全生命周期评价步骤" class="life-container" lang-key="develop.LCALifeTitle">
    <div class="grid grid-cols-1 md:grid-cols-3  gap-y-[10px] md:gap-[24px] ">
      <div class="life-item" v-for="item, index in leftData" :key="item.title" data-aos="fade-up" :data-aos-delay="(index + 1) * 200">
        <div class="img-wrap">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="text-wrap">
          <h5 class="title font-bold">{{ $t(item.titleKey) }}</h5>
          <p class="desc">{{ $t(item.descKey) }}</p>
        </div>
      </div>
    </div>
  </BaseCard>

  <BaseCard title="产品碳足迹核算方法" class="skill-container max-w-[1080px] mx-auto" lang-key="develop.LCAFootprintTitle">
    <div class="grid grid-cols-1 gap-y-[10px] sm:grid-cols-3 sm:gap-x-[24px] sm:gap-x-[0px] md:place-content-between">
      <div class="skill-item" v-for="item in iconData" :key="item.desc">
        <BaseIcon :name="item.iconName" width="48" height="48" />
        <span>{{ item.desc }}</span>
      </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%);
}

.desc-container {
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  color: $t-color-sub;
}

.chart-container {
  @include flex(x, center, center);
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 88px;
}

.life-container {

  .life-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 8px 30px 0px #C3D6E93D;

    .img-wrap {
      height: 258px;

      img {
        width: 100%;
        height: 100%;
        transition: opacity 1s, transform 1s;
        &:hover {
          opacity: 0.8;
          transform: scale3d(1.1, 1.1, 1);
        }
      }
    }

    .text-wrap {
      position: relative;
      height: 188px;
      padding: 18px 28px;
      margin-top: -55px;
      border-radius: 8px 8px 0px 0px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #FFFFFF 13.49%, #FFFFFF 100%);

      .title {
        font-size: 22px;
        line-height: 36px;
      }

      .desc {
        font-size: 16px;
        line-height: 28px;
        text-align: justify;
        color: #565F83;
      }
    }
  }
}

.skill-container {
  background: #F7F9FF;

  .skill-item {
    @include flex(x, center, center);
    height: 98px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #FFFFFF 13.49%, #FFFFFF 100%);
    box-shadow: 0px 8px 30px 0px #C3D6E93D;

    span {
      padding-left: 18px;
      font-size: 24px;
      font-weight: 500;
      line-height: 40px;
      color: #333333;
    }
  }
}
.en{
	.life-container{
		.text-wrap{
			height: 258px;
			.title {
				font-size: 20px;
				line-height: 32px;
			}
			.desc {
				font-size: 14px;
			}
		}
	}
}
</style>