gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. slideThumbnail 컴포넌트 수정

Browse Source
This commit is contained in:
clkim
2025-10-20 19:30:30 +09:00
parent 9144a6ffd7
commit 1002561f3d
5 changed files with 151 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
layers/templates/GrDetail01/index.vue
View File

@@ -1,6 +1,5 @@
<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 {
@@ -16,6 +15,9 @@ const currentSlide = ref<number | null>(null)
const slideData = computed(() => {
return getComponentContainer(props.components, 'group_sets', { maxLength: 5 })
})
const paginationData = computed(() => {
return getComponentGroupAry(props.components, 'pagination')
})
const goToSlide = (index: number) => {
const splide = splideRef.value?.splide
@@ -73,7 +75,11 @@ onMounted(() => {
</div>
</SplideSlide>
</BlocksSlideFade>
<div v-if="slideData && slideData.length > 1" class="splide-pagination">
<div
v-if="slideData && slideData.length > 1"
class="splide-pagination"
:style="getPaginationClass(paginationData)"
>
<div
v-for="(item, index) in slideData"
:key="index"
@@ -113,25 +119,28 @@ onMounted(() => {
@apply flex items-center;
}
.item-bullet {
@apply block w-3 h-3 rounded-full bg-white/30 transition-all duration-300;
@apply block w-3 h-3 rounded-full transition-all duration-300;
background-color: var(--pagination-disabled);
}
.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;
@apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium md:block;
color: var(--pagination-disabled);
}
.progress-bar {
@apply relative w-[68px] h-0.5 bg-white/30 overflow-hidden md:w-[184px];
@apply relative w-[68px] h-0.5 overflow-hidden md:w-[184px];
background-color: var(--pagination-disabled);
}
.progress-fill {
@apply absolute inset-y-0 left-0 bg-white;
width: 0;
@apply absolute inset-y-0 left-0 w-[0];
background-color: var(--pagination-active);
}
/* 활성화 상태 (현재 슬라이드) */
.is-active .item-bullet {
@apply bg-white;
background-color: var(--pagination-active);
}
.is-active .item-title {
@apply text-white;
color: var(--pagination-active);
}
.is-active .progress-fill {
animation: progressFill 5000ms linear forwards;
@@ -139,7 +148,7 @@ onMounted(() => {
/* 완료 상태 (지나간 슬라이드) */
.is-completed .item-bullet {
@apply bg-white;
background-color: var(--pagination-active);
}
.is-completed .progress-fill {
width: 100%;