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

fix. [디자인 QA] GR_GALLERY_02 배경 적용

Browse Source
This commit is contained in:
clkim
2025-11-26 14:45:27 +09:00
parent 72009d43ca
commit 7e645f1072
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
layers/components/blocks/slide/CenterFocus.vue
View File

@@ -125,25 +125,34 @@ const handleMove = (
width: var(--banner-width-mo); width: var(--banner-width-mo);
height: var(--banner-height-mo-active); height: var(--banner-height-mo-active);
margin-right: var(--banner-gap-mo); margin-right: var(--banner-gap-mo);
opacity: 0.5; transition: transform 0.6s ease-out;
} opacity: 0.3;
.center-focus:deep(.splide__slide) .slide-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
opacity: 0.5;
transition: all 0.6s ease-out;
} }
.center-focus:deep(.splide__slide.is-active) { .center-focus:deep(.splide__slide.is-active) {
width: var(--banner-width-mo-container); width: var(--banner-width-mo-container);
}
.center-focus:deep(.splide__slide.is-active),
.center-focus:deep(.splide__slide.is-next),
.center-focus:deep(.splide__slide.is-prev) {
opacity: 1; opacity: 1;
} }
.center-focus:deep(.splide__slide) .slide-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
background-color: #191919;
transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active) .slide-inner { .center-focus:deep(.splide__slide.is-active) .slide-inner {
width: var(--banner-width-mo-active); width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active); height: var(--banner-height-mo-active);
opacity: 1;
} }
.center-focus:deep(.splide__slide.is-next),
.center-focus:deep(.splide__slide.is-prev) { .center-focus:deep(.splide__slide) .slide-inner .inner-content {
opacity: 0.5;
transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active) .slide-inner .inner-content {
opacity: 1; opacity: 1;
} }

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

@@ -85,6 +85,7 @@ const onArrowClick = (direction, targetIndex) => {
<BlocksVisualContent <BlocksVisualContent
:resources-data="getComponentGroup(item, 'imgList')" :resources-data="getComponentGroup(item, 'imgList')"
object-fit="cover" object-fit="cover"
class="inner-content"
/> />
</div> </div>
</SplideSlide> </SplideSlide>
@@ -104,7 +105,4 @@ const onArrowClick = (direction, targetIndex) => {
@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 before:from-transparent before:to-[rgba(0,0,0,0.7)] before:z-[5] @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 before:from-transparent before: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 after:from-transparent after: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 after:from-transparent after:to-[rgba(0,0,0,0.7)];
} }
.slide-inner {
@apply bg-black;
}
</style> </style>