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