slibra-official-web/components/BaseDevLayout.vue

<script setup lang="ts">

defineProps<{
  subTitle: string,
  descList: {val: string,  langKey: string}[],
  cardTitle: string,
  subTitleLangKey: string,
  cardTitleLangKey: string
}>()

const serverTopData = [
  {
    iconName: 'carbon/dmvr/icon-service-01',
    content: '负责完成项目设计文件<br class="hidden sm:block" />(PDD)的编写',
    langKey: 'ccer.serviceItemOne'
  },
  {
    iconName: 'carbon/dmvr/icon-service-02',
    content: '协助项目业主完成项目<br class="hidden sm:block" />公示和审定',
    langKey: 'ccer.serviceItemTwo'
  },
  {
    iconName: 'carbon/dmvr/icon-service-03',
    content: '协助项目业主完成<br class="hidden sm:block" />项目登记',
    langKey: 'ccer.serviceItemThree'
  },
  {
    iconName: 'carbon/dmvr/icon-service-04',
    content: '负责完成减排量的核算<br class="hidden sm:block" />并出具减排量核算报告',
    langKey: 'ccer.serviceItemFour'
  },
]

const serverBottomData = [
  {
    iconName: 'carbon/dmvr/icon-service-05',
    content: '协助项目业主完成减排量<br class="hidden sm:block" />公示和核查',
    langKey: 'ccer.serviceItemFive'
  },
  {
    iconName: 'carbon/dmvr/icon-service-06',
    content: '协助项目业主完成<br class="hidden sm:block" />减排量登记',
    langKey: 'ccer.serviceItemSix'
  },
  {
    iconName: 'carbon/dmvr/icon-service-07',
    content: '将签发项目上线至伏羲碳惠平台<br class="hidden sm:block"/>帮助项目业主顺利完成交易',
    langKey: 'ccer.serviceItemSeven'
  }
]

</script>

<template>
  <BaseCard title="我们的服务" :subTitle="subTitle" isText :lang-key="subTitleLangKey" sub-lang-key="ccer.serviceSubTitle" class="server-container" :card-wrapper-style="{
    padding: '88px 0 70px 0'
  }">
    <ul class="service-list grid grid-cols-1 gap-[20px] sm:grid-cols-2 md:grid-cols-4 ">
      <li
        class="service-item pt-[36px]"
        v-for="item, index in serverTopData"
        :key="index"
      >
        <div class="content">
          <BaseIcon class="icon" :name="item.iconName" width="74" height="74" />
          <span v-html="$t(item.langKey)"></span>
        </div>
      </li>
    </ul>
    <ul class="service-list grid grid-cols-1 gap-[20px] sm:grid-cols-3 md:mt-[36px]">
      <li class="service-item pt-[36px] sm:pt-[56px]" v-for="(item, index) in serverBottomData" :key="index">
        <div class="content">
          <BaseIcon class="icon" :name="item.iconName" width="74" height="74" />
          <span v-html="$t(item.langKey)"></span>
        </div>
      </li>
    </ul>
  </BaseCard>

  <BaseCard :title="cardTitle" :lang-key="cardTitleLangKey" is-text class="introduce-container" :card-wrapper-style="{
    padding: '103px 0'
  }">
    <ul class="desc-container text-center">
      <li v-for="item,index in descList" :key="index">{{ $t(item.langKey) }}</li>
    </ul>
  </BaseCard>

  <slot />
</template>

<style scoped lang="scss">
.service-list {
  text-align: center;
  line-height: 22px;
  color: #161616;

  .service-item {
    position: relative;
    // padding-top: 36px;

    .content {
      display: flex;
      justify-content: center;
      position: relative;
      min-height: 114px;
      height: 100%;
      border-radius: 8px;
      background: #F8FAFF;
    }

    .icon {
      position: absolute;
      top: -0;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    span {
      padding-top: 53px;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.introduce-container {
  background: url('@/assets/image/carbo/bg-server.png') left top no-repeat,
    url('@/assets/image/carbo/dmrv/bg-ccer-bubble.png') right 100% no-repeat,
    linear-gradient(180deg, #F7F9FF 57.64%, #F1F5F8 100%);
  line-height: 26px;
  color: #565E66;
}
</style>