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

fix. [디자인 QA] GR_DETAIL_01 인디게이터 hover 효과

Browse Source
This commit is contained in:
clkim
2025-11-26 14:49:59 +09:00
parent 7e645f1072
commit 24ff4ca629
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -124,11 +124,11 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
@apply flex items-center;
}
.item-bullet {
@apply block w-3 h-3 rounded-full transition-all duration-300;
@apply block w-3 h-3 rounded-full transition-[background] duration-300 ease-in-out;
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 md:block;
@apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium transition-[color] duration-300 ease-in-out md:block;
color: var(--pagination-disabled);
}
.progress-bar {
@@ -141,9 +141,11 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
}
/* 활성화 상태 (현재 슬라이드) */
.btn-pagination:hover .item-bullet,
.is-active .item-bullet {
background-color: var(--pagination-active);
}
.btn-pagination:hover .item-title,
.is-active .item-title {
color: var(--pagination-active);
}