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

fix. 썸네일 템플릿 수정

Browse Source
This commit is contained in:
clkim
2025-10-28 12:48:35 +09:00
parent 624e01472e
commit dbe751e032
3 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
layers/components/blocks/slide/Thumbnail.vue
View File

@@ -154,21 +154,23 @@ onBeforeUnmount(() => {
.thumbnail-splide {
@apply overflow-hidden flex justify-center;
}
.thumbnail-splide:deep(.splide__track) {
@apply md:w-[calc(100%-16px)];
}
.thumbnail-slide {
@apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] md:mr-[16px]
@apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px] md:bg-transparent
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
background-color: var(--pagination-disabled);
}
.thumbnail-slide:hover,
.thumbnail-slide.is-active {
background-color: var(--pagination-active);
@apply bg-[var(--pagination-active)] md:bg-transparent;
}
.thumbnail-slide::after {
border-color: var(--pagination-disabled);
@apply border-[var(--pagination-disabled)];
}
.thumbnail-slide:hover::after,
.thumbnail-slide.is-active::after {
border-color: var(--pagination-active);
@apply border-[var(--pagination-active)];
}
/* 기본 버전 스타일 */
@@ -178,7 +180,7 @@ onBeforeUnmount(() => {
@apply h-full;
}
.thumbnail-carousel.thumbnail-default .thumbnail-splide {
@apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[72px];
@apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[64px];
}
.thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
@apply left-0;
@@ -199,8 +201,11 @@ onBeforeUnmount(() => {
}
/* 미디어 버전 스타일 */
.thumbnail-carousel.thumbnail-media {
@apply flex flex-col items-center;
}
.thumbnail-carousel.thumbnail-media .thumbnail-splide {
@apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-fit md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[120px];
@apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[112px];
}
.thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
@apply !px-[20px] sm:!px-[40px] md:!px-[0];