118 lines
3.3 KiB
Vue
118 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import {
|
|
getComponentGroup,
|
|
ensureMinimumSlideData,
|
|
} from '#layers/utils/dataUtil'
|
|
import type { Splide as SplideType } from '@splidejs/splide'
|
|
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 slideData = computed(() => {
|
|
return ensureMinimumSlideData(props.components)
|
|
})
|
|
const imgTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
|
|
const descriptionData = ref(
|
|
getComponentGroup(slideData?.value[0], 'description')
|
|
)
|
|
const buttonListData = ref(
|
|
getComponentGroupAry(slideData?.value[0], 'buttonList')
|
|
)
|
|
|
|
const slideItemSize = {
|
|
mo: {
|
|
width: 275,
|
|
height: 154,
|
|
gap: 12,
|
|
},
|
|
pc: {
|
|
width: 602,
|
|
height: 338,
|
|
gap: 32,
|
|
},
|
|
}
|
|
|
|
const handleChange = (
|
|
_splide: SplideType,
|
|
newIndex: number,
|
|
_oldIndex: number,
|
|
_destIndex: number
|
|
) => {
|
|
imgTitleData.value = getComponentGroup(slideData.value[newIndex], 'imgTitle')
|
|
descriptionData.value = getComponentGroup(
|
|
slideData.value[newIndex],
|
|
'description'
|
|
)
|
|
buttonListData.value = getComponentGroupAry(
|
|
slideData.value[newIndex],
|
|
'buttonList'
|
|
)
|
|
}
|
|
const {locale} = useI18n()
|
|
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
|
|
const onArrowClick = (direction, targetIndex) => {
|
|
const logTraking = direction == 'prev' ? props.components.arrow.groups[0] : props.components.arrow.groups[1];
|
|
sendLog(locale.value, useAnalyticsLogDataDirect(logTraking, 1))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="pt-[80px] pb-[100px] md:pt-[120px] md:pb-[140px]">
|
|
<WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
|
|
<div class="section-content px-0 max-w-[2043px] mx-auto">
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="title-sm"
|
|
/>
|
|
<BlocksSlideCenterHighlight
|
|
v-if="slideData"
|
|
:slide-item-size="slideItemSize"
|
|
:slide-item-length="slideData?.length"
|
|
:pagination="false"
|
|
class="mt-[24px] md:mt-[48px]"
|
|
@move="handleChange"
|
|
@arrow-click="onArrowClick"
|
|
>
|
|
<SplideSlide v-for="(item, index) in slideData" :key="index">
|
|
<div class="slide-inner border-line">
|
|
<BlocksVisualContent
|
|
:resources-data="getComponentGroup(item, 'imgList')"
|
|
object-fit="cover"
|
|
:alt="getComponentGroup(item, 'imgTitle')?.display?.text"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</BlocksSlideCenterHighlight>
|
|
<WidgetsSubTitle
|
|
v-if="imgTitleData"
|
|
:resources-data="imgTitleData"
|
|
class="title-md mt-[32px] line-clamp-2 md:line-clamp-1"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="descriptionData"
|
|
:resources-data="descriptionData"
|
|
class="mt-[8px] md:mt-[16px]"
|
|
/>
|
|
<WidgetsButtonList
|
|
v-if="buttonListData"
|
|
:resources-data="buttonListData"
|
|
:page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
|
|
class="mt-[32px]"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|