81 lines
2.2 KiB
Vue
81 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { getComponentGroup } from '#layers/utils/dataUtil'
|
|
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const backgroundData = computed(() =>
|
|
getComponentGroup(props.components, 'background')
|
|
)
|
|
const mainTitleData = computed(() =>
|
|
getComponentGroup(props.components, 'mainTitle')
|
|
)
|
|
const subTitleData = computed(() =>
|
|
getComponentGroup(props.components, 'subTitle')
|
|
)
|
|
const descriptionData = computed(() =>
|
|
getComponentGroup(props.components, 'description')
|
|
)
|
|
const imgListData = computed(() => {
|
|
return getComponentGroupAry(props.components, 'imgList')
|
|
})
|
|
const buttonListData = computed(() => {
|
|
return getComponentGroupAry(props.components, 'buttonList')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative py-[80px] md:py-[120px]">
|
|
<WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
|
|
<div class="content-standard">
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="title-xlg max-w-[944px]"
|
|
/>
|
|
<WidgetsSubTitle
|
|
v-if="subTitleData"
|
|
:resources-data="subTitleData"
|
|
class="title-sm max-w-[944px] mt-2"
|
|
/>
|
|
<div v-if="imgListData" class="img-container">
|
|
<div v-for="(item, index) in imgListData" :key="index" class="img-item">
|
|
<AtomsImg
|
|
v-if="getResourceSrc(item)"
|
|
:src="getResourceSrc(item)"
|
|
:alt="item?.display?.text"
|
|
class="w-full object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<WidgetsButtonList
|
|
v-if="buttonListData"
|
|
:resources-data="buttonListData"
|
|
:page-ver-tmpl-seq="props.pageVerTmplSeq"
|
|
class="mt-[56px]"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="descriptionData"
|
|
:resources-data="descriptionData"
|
|
class="max-w-[944px] mt-8"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.img-container {
|
|
@apply flex flex-col items-center justify-center gap-4 box-content mx-auto mt-[32px]
|
|
w-[440px]
|
|
md:w-[944px];
|
|
}
|
|
.img-item {
|
|
@apply w-full;
|
|
}
|
|
</style>
|