135 lines
3.8 KiB
Vue
135 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import { globalDateFormat } from '@seed-next/date'
|
|
import {
|
|
getComponentGroup,
|
|
getComponentGroupAry,
|
|
getComponentContainer,
|
|
} from '#layers/utils/dataUtil'
|
|
|
|
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
|
|
import type { OperateGroupItem } from '#layers/types/api/operateResources'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: number
|
|
pageVerTmplNameEn: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const pageDataStore = usePageDataStore()
|
|
const { getOperateResources } = useOperateResources()
|
|
const { locale } = useI18n()
|
|
|
|
const { pageData } = storeToRefs(pageDataStore)
|
|
|
|
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, 'videoPlayImg')
|
|
)
|
|
// [TODO] api 수정 후 사용
|
|
// const videoPlayData = computed(() =>
|
|
// getComponentGroup(props.components, 'videoPlayImg')
|
|
// )
|
|
const arrowsData = computed(() =>
|
|
getComponentGroupAry(props.components, 'arrow')
|
|
)
|
|
|
|
const { data: slideData } = await useAsyncData(
|
|
`gr-visual-02-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
|
|
async () => {
|
|
if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
|
|
return []
|
|
}
|
|
|
|
const operateGroupList = await getOperateResources({
|
|
pageSeq: pageData.value.page_seq,
|
|
pageVer: pageData.value.page_ver,
|
|
pageVerTmplSeq: props.pageVerTmplSeq,
|
|
langCode: locale.value,
|
|
})
|
|
|
|
const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
|
|
isGroup: true,
|
|
minLength: 4,
|
|
}) as OperateGroupItem[]
|
|
|
|
return bannerList
|
|
},
|
|
{
|
|
default: () => [],
|
|
server: false,
|
|
}
|
|
)
|
|
|
|
const slideItemSize = {
|
|
mo: {
|
|
width: 276,
|
|
height: 174,
|
|
gap: 12,
|
|
},
|
|
pc: {
|
|
width: 455,
|
|
height: 287,
|
|
gap: 32,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative pt-[140px] pb-[80px] md:pt-[200px] md:pb-[120px]">
|
|
<WidgetsBackground
|
|
v-if="backgroundData"
|
|
:resources-data="backgroundData"
|
|
gradient="h-[440px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_40%)] md:h-[720px] md:bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_50%)]"
|
|
/>
|
|
<div class="content-standard px-0 gap-5">
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="w-full max-w-[355px] mx-[20px] sm:mx-[40px] md:max-w-[944px]"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="descriptionData"
|
|
:resources-data="descriptionData"
|
|
class="w-full max-w-[355px] mx-[20px] sm:mx-[40px] md:max-w-[944px]"
|
|
/>
|
|
<WidgetsVideoPlay
|
|
v-if="videoPlayData"
|
|
variant="videoPlayImg"
|
|
:resources-data="videoPlayData"
|
|
/>
|
|
<WidgetsSlideCenterHighlight
|
|
v-if="slideData && slideData.length > 0"
|
|
v-motion-stagger
|
|
:slide-item-size="slideItemSize"
|
|
:slide-item-length="slideData.length"
|
|
:arrows-data="arrowsData"
|
|
:pagination="false"
|
|
class="mt-[36px] md:mt-[60px]"
|
|
>
|
|
<SplideSlide v-for="(item, index) in slideData" :key="index">
|
|
<BlocksCardNews
|
|
:title="item.title"
|
|
:description="globalDateFormat(item.display_start_dt, locale)"
|
|
:img-path="formatPathHost(item.img_path)"
|
|
:url="item.url"
|
|
:link-target="item.link_target"
|
|
:analytics-sarea="`${pageVerTmplNameEn}_bannerList`"
|
|
class="slide-inner"
|
|
/>
|
|
</SplideSlide>
|
|
</WidgetsSlideCenterHighlight>
|
|
</div>
|
|
</section>
|
|
</template>
|