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

4
layers/assets/css/base/_reset.css
View File

@@ -19,8 +19,8 @@
/* 라이트 테마 색상 */ /* 라이트 테마 색상 */
[data-theme='light'] { [data-theme='light'] {
body { .main {
@apply bg-white; @apply bg-theme-foreground;
} }
} }
} }

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

@@ -154,21 +154,23 @@ onBeforeUnmount(() => {
.thumbnail-splide { .thumbnail-splide {
@apply overflow-hidden flex justify-center; @apply overflow-hidden flex justify-center;
} }
.thumbnail-splide:deep(.splide__track) {
@apply md:w-[calc(100%-16px)];
}
.thumbnail-slide { .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]; 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:hover,
.thumbnail-slide.is-active { .thumbnail-slide.is-active {
background-color: var(--pagination-active); @apply bg-[var(--pagination-active)] md:bg-transparent;
} }
.thumbnail-slide::after { .thumbnail-slide::after {
border-color: var(--pagination-disabled); @apply border-[var(--pagination-disabled)];
} }
.thumbnail-slide:hover::after, .thumbnail-slide:hover::after,
.thumbnail-slide.is-active::after { .thumbnail-slide.is-active::after {
border-color: var(--pagination-active); @apply border-[var(--pagination-active)];
} }
/* 기본 버전 스타일 */ /* 기본 버전 스타일 */
@@ -178,7 +180,7 @@ onBeforeUnmount(() => {
@apply h-full; @apply h-full;
} }
.thumbnail-carousel.thumbnail-default .thumbnail-splide { .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) { .thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
@apply left-0; @apply left-0;
@@ -199,8 +201,11 @@ onBeforeUnmount(() => {
} }
/* 미디어 버전 스타일 */ /* 미디어 버전 스타일 */
.thumbnail-carousel.thumbnail-media {
@apply flex flex-col items-center;
}
.thumbnail-carousel.thumbnail-media .thumbnail-splide { .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) { .thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
@apply !px-[20px] sm:!px-[40px] md:!px-[0]; @apply !px-[20px] sm:!px-[40px] md:!px-[0];

5
layers/templates/GrGallery02/index.vue
View File

@@ -99,7 +99,10 @@ const onArrowClick = (direction, targetIndex) => {
<style scoped> <style scoped>
.section-container { .section-container {
@apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l from-transparent to-[rgba(0,0,0,0.7)] @apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l from-transparent to-[rgba(0,0,0,0.7)] before:z-[5]
after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r from-transparent to-[rgba(0,0,0,0.7)]; after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r from-transparent to-[rgba(0,0,0,0.7)];
} }
.slide-inner {
@apply bg-black;
}
</style> </style>