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-11-06 13:57:50 +09:00
parent 6b1b9885a0
commit f839a7be41
16 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layers/components/blocks/slide/Default.vue
View File

@@ -49,7 +49,6 @@ const options = computed((): ResponsiveOptions => {
updateOnMove: true,
autoplay: props.autoplay,
drag: props.drag,
trimSpace: false,
arrows: props.arrows,
pagination: props.pagination,
destroy: props.destroy,

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

@@ -172,12 +172,12 @@ onBeforeUnmount(() => {
@apply md:w-[calc(100%-16px)];
}
.thumbnail-slide {
@apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px] md:bg-transparent
@apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px]
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
}
.thumbnail-slide:hover,
.thumbnail-slide.is-active {
@apply bg-[var(--pagination-active)] md:bg-transparent;
@apply bg-[var(--pagination-active)];
}
.thumbnail-slide::after {
@apply border-[var(--pagination-disabled)];
@@ -208,10 +208,10 @@ onBeforeUnmount(() => {
}
.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img,
.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active img {
@apply md:grayscale-0 md:opacity-100;
@apply md:grayscale-0;
}
.thumbnail-carousel.thumbnail-default .thumbnail-slide img {
@apply hidden md:block md:grayscale md:opacity-60;
@apply hidden md:block md:grayscale;
}
/* 미디어 버전 스타일 */
@@ -219,13 +219,15 @@ onBeforeUnmount(() => {
@apply flex flex-col items-center;
}
.thumbnail-carousel.thumbnail-media .thumbnail-splide {
@apply max-w-[calc(100%+40px)] mt-[20px] mx-[-20px] sm:max-w-[calc(100%+80px)] sm:mx-[-40px] md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[112px];
@apply max-w-[calc(100%+40px)] mt-[20px] mx-[-20px]
sm:max-w-[calc(100%+80px)] sm:mx-[-40px]
md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[64px];
}
.thumbnail-carousel.thumbnail-media:deep(.arrow-prev) {
@apply left-[48px];
@apply left-[0];
}
.thumbnail-carousel.thumbnail-media:deep(.arrow-next) {
@apply right-[48px];
@apply right-[0];
}
.thumbnail-carousel.thumbnail-media .thumbnail-slide {
@apply aspect-[16/9] w-[92px] md:w-[128px];