157 lines
4.0 KiB
Vue
157 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import { hasComponentGroup, getComponentGroup } from '#layers/utils/dataUtil'
|
|
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const splideRef = ref<SplideSlide | null>(null)
|
|
const currentSlide = ref<number | null>(null)
|
|
|
|
const slideData = computed(() => {
|
|
return getComponentContainer(props.components, 'group_sets', { maxLength: 5 })
|
|
})
|
|
|
|
const goToSlide = (index: number) => {
|
|
const splide = splideRef.value?.splide
|
|
if (splide) {
|
|
splide.go(index)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
const splide = splideRef.value?.splide
|
|
if (splide) {
|
|
currentSlide.value = splide.index
|
|
|
|
splide.on('move', (newIndex: number) => {
|
|
currentSlide.value = newIndex
|
|
})
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="section-container relative">
|
|
<BlocksSlideFade
|
|
v-if="slideData"
|
|
ref="splideRef"
|
|
:autoplay="true"
|
|
:interval="5000"
|
|
:arrows="false"
|
|
:pagination="false"
|
|
class="h-full"
|
|
>
|
|
<SplideSlide v-for="(item, index) in slideData" :key="index">
|
|
<WidgetsBackground
|
|
v-if="hasComponentGroup(item, 'background')"
|
|
:resources-data="getComponentGroup(item, 'background')"
|
|
/>
|
|
<div class="section-content">
|
|
<WidgetsMainTitle
|
|
v-if="hasComponentGroup(item, 'mainTitle')"
|
|
:resources-data="getComponentGroup(item, 'mainTitle')"
|
|
class="title-md"
|
|
/>
|
|
<WidgetsSubTitle
|
|
v-if="hasComponentGroup(item, 'subTitle')"
|
|
:resources-data="getComponentGroup(item, 'subTitle')"
|
|
class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="hasComponentGroup(item, 'description')"
|
|
:resources-data="getComponentGroup(item, 'description')"
|
|
class="description-lg mt-4 md:mt-6"
|
|
/>
|
|
</div>
|
|
</SplideSlide>
|
|
</BlocksSlideFade>
|
|
<div v-if="slideData && slideData.length > 1" class="splide-pagination">
|
|
<div
|
|
v-for="(item, index) in slideData"
|
|
:key="index"
|
|
:class="[
|
|
'pagination-item',
|
|
{
|
|
'is-active': currentSlide === index,
|
|
'is-completed': index < currentSlide,
|
|
},
|
|
]"
|
|
>
|
|
<button
|
|
:class="['btn-pagination', { 'is-active': currentSlide === index }]"
|
|
@click="goToSlide(index)"
|
|
>
|
|
<span class="item-bullet"></span>
|
|
<span class="item-title">
|
|
{{ getComponentGroup(item, 'pagenaviTitle')?.display?.text || '' }}
|
|
</span>
|
|
</button>
|
|
<div v-if="index !== slideData.length - 1" class="progress-bar">
|
|
<span class="progress-fill"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.splide-pagination {
|
|
@apply flex items-center absolute bottom-10 left-1/2 -translate-x-1/2 z-10 md:bottom-[96px];
|
|
}
|
|
.btn-pagination {
|
|
@apply relative;
|
|
}
|
|
.pagination-item {
|
|
@apply flex items-center;
|
|
}
|
|
.item-bullet {
|
|
@apply block w-3 h-3 rounded-full bg-white/30 transition-all duration-300;
|
|
}
|
|
.item-title {
|
|
@apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium text-white/30 md:block;
|
|
}
|
|
.progress-bar {
|
|
@apply relative w-[68px] h-0.5 bg-white/30 overflow-hidden md:w-[184px];
|
|
}
|
|
.progress-fill {
|
|
@apply absolute inset-y-0 left-0 bg-white;
|
|
width: 0;
|
|
}
|
|
|
|
/* 활성화 상태 (현재 슬라이드) */
|
|
.is-active .item-bullet {
|
|
@apply bg-white;
|
|
}
|
|
.is-active .item-title {
|
|
@apply text-white;
|
|
}
|
|
.is-active .progress-fill {
|
|
animation: progressFill 5000ms linear forwards;
|
|
}
|
|
|
|
/* 완료 상태 (지나간 슬라이드) */
|
|
.is-completed .item-bullet {
|
|
@apply bg-white;
|
|
}
|
|
.is-completed .progress-fill {
|
|
width: 100%;
|
|
}
|
|
|
|
@keyframes progressFill {
|
|
from {
|
|
width: 0%;
|
|
}
|
|
to {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|