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

feat. GR_GALLERY_02 템플릿 제작

Browse Source
This commit is contained in:
clkim
2025-09-29 11:48:27 +09:00
parent 7d38b72d24
commit 5f140aced1
10 changed files with 528 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
layers/components/blocks/slide/CenterHighlight.vue
View File

@@ -50,28 +50,35 @@ const style = computed(() => {
if (!props.slideItemSize) return {}
const { mo, pc } = props.slideItemSize
const scaleFactor = 1.1429
const moScale = mo?.scale || 1.1429
const pcScale = pc?.scale || 1.1429
return {
// 모바일 기본값
const moSize = {
'--banner-width-mo': `${mo.width}px`,
'--banner-height-mo': `${mo.height}px`,
'--banner-gap-mo': `${mo.gap}px`,
// 모바일 확대값
'--banner-width-mo-active': `${mo.width * scaleFactor}px`,
'--banner-height-mo-active': `${mo.height * scaleFactor}px`,
'--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,
'--banner-width-mo-active': `${mo.width * moScale}px`,
'--banner-height-mo-active': `${mo.height * moScale}px`,
'--banner-width-mo-container': `${mo.width * moScale + mo.gap}px`,
}
// PC 기본값
const pcSize = {
'--banner-width-pc': `${pc.width}px`,
'--banner-height-pc': `${pc.height}px`,
'--banner-gap-pc': `${pc.gap}px`,
// PC 확대값
'--banner-width-pc-active': `${pc.width * scaleFactor}px`,
'--banner-height-pc-active': `${pc.height * scaleFactor}px`,
'--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
// PC arrow값
'--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
'--banner-width-pc-active': `${pc.width * pcScale}px`,
'--banner-height-pc-active': `${pc.height * pcScale}px`,
'--banner-width-pc-container': props.arrows
? `${pc.width * pcScale + pc.gap * 4}px`
: `${pc.width * pcScale}px`,
'--banner-arrow-pc': `${(pc.width * pcScale) / 2 + (pc.gap * 3) / 2}px`,
}
return {
...moSize,
...pcSize,
}
})
@@ -125,7 +132,6 @@ const handleMoved = (
.center-highlight:deep(.splide__slide) .slide-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.center-highlight:deep(.splide__slide.is-active) {
width: var(--banner-width-mo-container);
@@ -133,6 +139,7 @@ const handleMoved = (
.center-highlight:deep(.splide__slide.is-active) .slide-inner {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* PC 스타일 */