Files
web-temp/layers/templates/GrVisual01/index.vue
2025-09-23 20:37:33 +09:00

57 lines
1.5 KiB
Vue

<script setup lang="ts">
import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
interface Props {
components: Record<string, any>
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="relative h-[640px] md:h-[1000px]">
<WidgetsBackground
v-if="backgroundData"
:resources-data="backgroundData"
:gradient="true"
/>
<div
class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
>
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="w-[355px] md:w-[944px]"
/>
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="w-[355px] md:w-[944px]"
/>
<WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
<WidgetsButtonList
v-if="buttonListData.length > 0"
:groups-data="buttonListData"
class="mt-[28px] md:mt-[52px]"
/>
</div>
</section>
</template>