66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
|
|
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const backgroundData = computed(() =>
|
|
getComponentGroup(props.components, 'background')
|
|
)
|
|
const mainTitleData = computed(() =>
|
|
getComponentGroup(props.components, 'mainTitle')
|
|
)
|
|
const descriptionData = computed(() =>
|
|
getComponentGroup(props.components, 'description')
|
|
)
|
|
const videoPlayData = computed(() =>
|
|
getComponentGroup(props.components, 'videoPlay')
|
|
)
|
|
const buttonListData = computed(() =>
|
|
getComponentGroupAry(props.components, 'buttonList')
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<section class="section-container">
|
|
<WidgetsBackground
|
|
v-if="backgroundData"
|
|
:resources-data="backgroundData"
|
|
gradient="h-[342px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_90%)] md:h-[720px]"
|
|
/>
|
|
<div class="section-content gap-4 md:gap-5">
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="w-full max-w-[355px] md:max-w-[944px]"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="descriptionData"
|
|
:resources-data="descriptionData"
|
|
class="w-full max-w-[355px] md:max-w-[944px]"
|
|
/>
|
|
<client-only>
|
|
<WidgetsVideoPlay
|
|
v-if="videoPlayData"
|
|
:resources-data="videoPlayData"
|
|
:page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
|
|
/>
|
|
</client-only>
|
|
<client-only>
|
|
<WidgetsButtonList
|
|
v-if="buttonListData.length > 0"
|
|
:resources-data="buttonListData"
|
|
:page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
|
|
button-type="market"
|
|
class="mt-[22px] md:mt-[52px]"
|
|
/>
|
|
</client-only>
|
|
</div>
|
|
</section>
|
|
</template>
|