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

<script setup lang="ts">
import { ref } from 'vue';
import { NGrid, NGi } from 'naive-ui';
const { locale } = useI18n();
const serverData = [
  {
    iconName: 'carbon/icon-egs-01',
    title: 'ESG策略',
    desc: '全面评估企业在环境、社会和公司治理三方面<br />的表现，助力企业实现长期可持续的财务回报',
    // subDesc: '并进行全生命周期的数据核算',
    titleKey: 'develop.ESGConsultItemOne',
    descKey: 'develop.ESGConsultItemDescOne',
    subDescKey: 'develop.ESGConsultItemSubOne'
  },
  {
    iconName: 'carbon/icon-egs-02',
    title: 'ESG披露',
    desc: '增加企业ESG披露的透明度，帮助投资者、利益<br />相关方更好地评估企业的长期价值和风险',
    // subDesc: '并进行全生命周期的数据核算',
    titleKey: 'develop.ESGConsultItemTwo',
    descKey: 'develop.ESGConsultItemDescTwo',
    subDescKey: 'develop.ESGConsultItemSubTwo'
  },
  {
    iconName: 'carbon/icon-egs-03',
    title: 'ESG气候风险',
    desc: '协助企业评估绿色转型风险和气候风险，并将<br />其纳入可持续发展规划目标',
    // subDesc: '并进行全生命周期的数据核算',
    titleKey: 'develop.ESGConsultItemThree',
    descKey: 'develop.ESGConsultItemDescThree',
    subDescKey: 'develop.ESGConsultItemSubThree'
  }
]


</script>

<template>
  <BaseCard title="ESG解决方案" lang-key="develop.ESGTitle" is-text>
    <ul class="desc-container">
      <li>{{ $t('develop.ESGItemOne') }}</li>
      <li>{{ $t('develop.ESGItemTwo') }}</li>
      <li>{{ $t('develop.ESGItemThree') }}</li>
    </ul>
  </BaseCard>

  <BaseCard title="ESG咨询服务" class="server-container" lang-key="develop.ESGItemTitle">
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-[40px] sm:gap-[0px]">
      <div v-for="item, index in serverData" :key="item.titleKey" data-aos="fade-up" :data-aos-delay="(index + 1) * 200">
        <IconPanel v-bind="item"></IconPanel>
      </div>
    </div>
  </BaseCard>


  <BaseCard title="企业披露ESG报告信息的好处" class="egs-container" lang-key="develop.ESGInfosTitle" is-text>
    <div class="desc-wrap">
      <p>{{ $t('develop.ESGInfosSubTitleOne') }}</p>
      <p>{{ $t('develop.ESGInfosSubTitleTwo') }}</p>
    </div>
    <div class="frame-wrap flex flex-col align-center sm:flex-row">
      <div class="w-[240px] h-[240px] mb-[20px] block sm:hidden">
        <img src="@/assets/image/carbo/bg-esg-frame.png" alt="">
      </div>
      <ul class="text-list left w-full sm:w-[343px]"  :class="{'sm:w-[420px]':locale === 'en'}">
        <li class="text-item purple mb-[10px] sm:mb-[38px]" >
          <span>{{$t('develop.ESGInfosContentOne1')}}</span>
          <span>{{$t('develop.ESGInfosContentOne2')}}</span>
        </li>
        <li class="text-item green mb-[10px] sm:mb-[38px]">
          <span>{{$t('develop.ESGInfosContentTwo1')}}</span>
          <span>{{$t('develop.ESGInfosContentTwo2')}}</span>
        </li>
        <li class="text-item purple mb-[10px] sm:mb-[38px]">
          <span>{{$t('develop.ESGInfosContentThree1')}}</span>
          <span>{{$t('develop.ESGInfosContentThree2')}}</span>
        </li>
      </ul>
      <div class="frame-img hidden sm:block">
        <img src="@/assets/image/carbo/bg-esg-frame.png" alt="">
      </div>
      <ul class="text-list right pt-[40px] sm:pt-[0px]  w-full sm:w-[343px]"  :class="{'sm:w-[420px]':locale === 'en'}">
        <li class="text-item green mb-[10px] sm:mb-[38px]">
          <span>
            <i>{{$t('develop.ESGInfosContentFour1')}}</i>
          </span>
          <span>{{$t('develop.ESGInfosContentFour2')}}</span>
        </li>
        <li class="text-item purple mb-[10px] sm:mb-[38px]">
          <span>{{$t('develop.ESGInfosContentFive1')}}</span>
          <span>{{$t('develop.ESGInfosContentFive2')}}</span>
        </li>
        <li class="text-item green mb-[10px] sm:mb-[38px]">
          <span>{{$t('develop.ESGInfosContentSix1')}}</span>
          <span>{{$t('develop.ESGInfosContentSix2')}}</span>
        </li>
      </ul>
    </div>
  </BaseCard>
</template>

<style scoped lang="scss">
.desc-container {
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  color: $t-color-sub;
}

.server-container {
  background: url('@/assets/image/carbo/bg-server.png') left top no-repeat,
    url('@/assets/image/carbo/bg-esg-group-top.png') right bottom no-repeat,
    linear-gradient(180deg, #F7F9FF 57.64%, #F1F5F8 100%);
}

.egs-container {
  background: url('@/assets/image/carbo/bg-esg-group-bottom.png') right top no-repeat;

  .desc-wrap {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    text-align: center;
    color: #666;
  }

  .frame-wrap {
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;

    .text-list {
      .text-item {
        position: relative;
        @include flex(y, start, center);
        height: 64px;
        border-radius: 32px;

        &:last-child {
          margin-bottom: 0;
        }

        &::after {
          content: ' ';
          position: absolute;
          top: -3px;
          display: block;
          width: 22px;
          height: 22px;
          border-radius: 50%;
        }
      }

      span {
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 22.4px;
        color: #565E66;
      }
    }

    .left {
      .text-item {
        padding-left: 34px;
      }
      .purple {
        background: linear-gradient(90deg, #E7EBFC 6.41%, rgba(231, 235, 252, 0) 100%);
      }

      .green {
        background: linear-gradient(90deg, #E7FCF3 6.41%, rgba(231, 251, 252, 0) 100%);
      }

      .text-item::after {
        left: 0px;
      }
    }

    .right {
      .text-item {
        padding-right: 34px;
        span {
          width: 100%;
          text-align: right
        }
      }
      .purple {
        background: linear-gradient(270deg, #E7EBFC 6.41%, rgba(231, 235, 252, 0) 100%);
      }

      .green {
        background: linear-gradient(270deg, #E7FCF3 6.41%, rgba(231, 251, 252, 0) 100%);
      }

      .text-item::after {
        right: 0;
      }
    }

    .purple::after {
      background: linear-gradient(130.43deg, rgba(42, 103, 248, 0.5) 24.64%, rgba(42, 103, 248, 0.15) 81.82%);
    }

    .green::after {
      background: linear-gradient(130.43deg, rgba(63, 237, 153, 0.5) 24.64%, rgba(42, 248, 211, 0.15) 81.82%);
    }

    .frame-img {
      width: 388px;
      height: 388px;
    }
  }

  .frame-wrap-iphone {
    flex-flow: column;
    align-items: center;
    justify-content: center;
    .frame-img {
      width: 70%;
      height: auto;
      padding-bottom: 20px;
    }
    .text-list {
      width: 100%;
      .text-item {
        margin-bottom: 10px;
      }
    }
  }
}

.en{
	.frame-wrap{
		.text-list{
			.text-item{
				height: auto;
				min-height:64px;
			}
		}
	}

}
</style>