105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import {
|
|
getComponentContainer,
|
|
getComponentGroup,
|
|
} 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: number
|
|
pageVerTmplNameEn: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const backgroundData = computed(() =>
|
|
getComponentGroup(props.components, 'background')
|
|
)
|
|
const mainTitleData = computed(() =>
|
|
getComponentGroup(props.components, 'mainTitle')
|
|
)
|
|
const slideData = computed(() => {
|
|
return getComponentContainer(props.components, 'group_sets', { minLength: 4 })
|
|
})
|
|
const arrowsData = computed(() =>
|
|
getComponentGroupAry(props.components, 'arrow')
|
|
)
|
|
|
|
const buttonListData = ref(
|
|
getComponentGroupAry(slideData?.value[0], 'buttonList')
|
|
)
|
|
|
|
const slideItemSize = {
|
|
mo: {
|
|
width: 295,
|
|
height: 384,
|
|
gap: 12,
|
|
scale: 1,
|
|
},
|
|
pc: {
|
|
width: 419,
|
|
height: 564,
|
|
gap: 20,
|
|
scale: 1.0979,
|
|
},
|
|
}
|
|
|
|
const handleSplideMove = (_splide: SplideType, newIndex: number) => {
|
|
buttonListData.value = getComponentGroupAry(
|
|
slideData.value[newIndex],
|
|
'buttonList'
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="section-standard">
|
|
<WidgetsBackground
|
|
v-if="backgroundData"
|
|
:resources-data="backgroundData"
|
|
dimmed
|
|
/>
|
|
<div class="content-standard px-0">
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
|
|
/>
|
|
<WidgetsSlideCenterFocus
|
|
v-if="slideData"
|
|
:slide-item-size="slideItemSize"
|
|
:slide-item-length="slideData?.length"
|
|
:arrows-data="arrowsData"
|
|
:pagination="false"
|
|
class="mt-[24px] md:mt-[48px]"
|
|
@move="handleSplideMove"
|
|
>
|
|
<SplideSlide v-for="(item, index) in slideData" :key="index">
|
|
<div class="slide-inner border-line mt-auto">
|
|
<BlocksVisualContent
|
|
:resources-data="getComponentGroup(item, 'imgList')"
|
|
object-fit="cover"
|
|
class="inner-content"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</WidgetsSlideCenterFocus>
|
|
<WidgetsButtonList
|
|
v-if="buttonListData"
|
|
:resources-data="buttonListData"
|
|
class="mt-[40px] md:mt-[56px]"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.section-standard {
|
|
@apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l before:from-transparent before:to-[rgba(0,0,0,0.7)] before:z-[5]
|
|
after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r after:from-transparent after:to-[rgba(0,0,0,0.7)];
|
|
}
|
|
</style>
|