147 lines
4.3 KiB
Vue
147 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import {
|
|
getComponentContainer,
|
|
getComponentGroup,
|
|
} from '#layers/utils/dataUtil'
|
|
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const { locale } = useI18n()
|
|
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
|
|
|
|
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 slideData = computed(() => {
|
|
return getComponentContainer(props.components, 'group_sets')
|
|
})
|
|
const buttonListData = computed(() => {
|
|
return getComponentGroupAry(props.components, 'buttonList')
|
|
})
|
|
const paginationData = computed(() => {
|
|
return getComponentGroupAry(props.components, 'pagination')
|
|
})
|
|
|
|
const onArrowClick = (direction, targetIndex) => {
|
|
const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
|
|
const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
|
|
sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative py-[80px] md:py-[120px]">
|
|
<WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
|
|
<div class="section-content px-0">
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="title-xlg mx-[20px] sm:mx-[40px]"
|
|
/>
|
|
<WidgetsSubTitle
|
|
v-if="subTitleData"
|
|
:resources-data="subTitleData"
|
|
class="title-sm mt-2 mx-[20px] sm:mx-[40px]"
|
|
/>
|
|
<template v-if="slideData">
|
|
<div v-if="slideData.length <= 2" class="img-container">
|
|
<div
|
|
v-for="(item, index) in slideData"
|
|
:key="index"
|
|
:class="[{ 'slide-2': slideData.length === 2 }]"
|
|
>
|
|
<AtomsImg
|
|
:resources-data="getComponentGroup(item, 'imgList')"
|
|
:page-ver-tmpl-seq="props.pageVerTmplSeq"
|
|
:alt="getComponentGroup(item, 'subTitle')?.display?.text"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<BlocksSlideDefault
|
|
v-else
|
|
:type="slideData.length === 3 ? 'slide' : 'loop'"
|
|
:slide-item-length="slideData?.length"
|
|
:arrows="slideData.length === 3 ? false : true"
|
|
:pagination="slideData.length === 3 ? false : true"
|
|
:pagination-data="paginationData"
|
|
:breakpoints="{
|
|
1023: {
|
|
type: 'loop',
|
|
pagination: false,
|
|
},
|
|
}"
|
|
class="mt-[32px]"
|
|
@arrow-click="onArrowClick"
|
|
>
|
|
<SplideSlide
|
|
v-for="(item, index) in slideData"
|
|
:key="index"
|
|
class="mr-4"
|
|
>
|
|
<div class="slide-inner w-[295px] sm:w-[304px]">
|
|
<AtomsImg
|
|
:resources-data="getComponentGroup(item, 'imgList')"
|
|
:page-ver-tmpl-seq="props.pageVerTmplSeq"
|
|
:alt="getComponentGroup(item, 'subTitle')?.display?.text"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</BlocksSlideDefault>
|
|
</template>
|
|
<WidgetsButtonList
|
|
v-if="buttonListData"
|
|
:resources-data="buttonListData"
|
|
:page-ver-tmpl-seq="props.pageVerTmplSeq"
|
|
class="mt-[56px] mx-[20px] sm:mx-[40px]"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="descriptionData"
|
|
:resources-data="descriptionData"
|
|
class="mt-8 mx-[20px] sm:mx-[40px]"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.img-container {
|
|
@apply flex flex-wrap justify-center gap-4 box-content mx-auto mt-[32px]
|
|
max-w-[688px] px-[20px]
|
|
md:max-w-[944px] md:px-[40px];
|
|
}
|
|
.splide {
|
|
@apply md:max-w-[1088px];
|
|
}
|
|
.splide:deep(.splide__track) {
|
|
@apply md:w-[944px] md:mx-auto;
|
|
}
|
|
.splide:deep(.splide__track) {
|
|
@apply !px-[20px] sm:!px-[40px] md:!px-[0];
|
|
}
|
|
.splide:deep(.arrow-next) {
|
|
@apply md:-right-[0];
|
|
}
|
|
.splide:deep(.arrow-prev) {
|
|
@apply md:-left-[0];
|
|
}
|
|
.slide-2 {
|
|
@apply max-w-[335px] md:max-w-[464px];
|
|
}
|
|
</style>
|