fix. 디자인 가이드 수정

This commit is contained in:
clkim
2025-10-20 17:24:02 +09:00
parent baf3a47f78
commit 9144a6ffd7
6 changed files with 14 additions and 13 deletions

View File

@@ -16,10 +16,10 @@
/* Title Utility Classes */
.title-lg {
@apply line-clamp-3 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[50px] md:leading-[70px];
@apply line-clamp-4 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[50px] md:leading-[70px];
}
.title-md {
@apply line-clamp-2 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[42px] md:leading-[56px];
@apply line-clamp-4 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[42px] md:leading-[56px];
}
.title-sm {
@apply line-clamp-2 text-[16px] font-[500] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[24px] md:leading-[34px];
@@ -29,6 +29,6 @@
/* Description Utility Classes */
.description-lg {
@apply line-clamp-3 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[20px] md:leading-[30px];
@apply line-clamp-4 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[20px] md:leading-[30px];
}
}

View File

@@ -144,7 +144,7 @@ onBeforeUnmount(() => {
@apply h-full;
}
.thumbnail-carousel.thumbnail-default .thumbnail-splide {
@apply absolute bottom-[32px] left-1/2 -translate-x-1/2 md:bottom-[48px] 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-[72px];
}
.thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
@apply left-0;

View File

@@ -6,6 +6,7 @@ import GrGallery02 from '#layers/templates/GrGallery02/index.vue'
import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
import GrDetail01 from '#layers/templates/GrDetail01/index.vue'
import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
import GrDetail03 from '#layers/templates/GrDetail03/index.vue'
const templateRegistry = {
GR_VISUAL_01: { component: GrVisual01 },
@@ -17,7 +18,7 @@ const templateRegistry = {
// GR_BOARD_01: { component: GrBoard01 },
GR_DETAIL_01: { component: GrDetail01 },
GR_DETAIL_02: { component: GrDetail02 },
// GR_DETAIL_03: { component: GrDetail03 },
GR_DETAIL_03: { component: GrDetail03 },
// GR_CONTENTS_01: { component: GrContents01 },
} as const

View File

@@ -63,7 +63,7 @@ onMounted(() => {
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-sm mt-0.5 md:mt-1"
class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
@@ -91,7 +91,7 @@ onMounted(() => {
>
<span class="item-bullet"></span>
<span class="item-title">
{{ getComponentGroup(item, 'naviTitle')?.display?.text || '' }}
{{ getComponentGroup(item, 'pagenaviTitle')?.display?.text || '' }}
</span>
</button>
<div v-if="index !== slideData.length - 1" class="progress-bar">

View File

@@ -31,7 +31,7 @@ const slideData = computed(() => {
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-sm mt-0.5 md:mt-1"
class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"

View File

@@ -23,7 +23,7 @@ const mainTitleData = computed(() =>
const slideData = computed(() => {
return ensureMinimumSlideData(props.components)
})
const subTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
const imgTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
const descriptionData = ref(
getComponentGroup(slideData?.value[0], 'description')
)
@@ -50,7 +50,7 @@ const handleChange = (
_oldIndex: number,
_destIndex: number
) => {
subTitleData.value = getComponentGroup(slideData.value[newIndex], 'imgTitle')
imgTitleData.value = getComponentGroup(slideData.value[newIndex], 'imgTitle')
descriptionData.value = getComponentGroup(
slideData.value[newIndex],
'description'
@@ -90,9 +90,9 @@ const handleChange = (
</SplideSlide>
</BlocksSlideCenterHighlight>
<WidgetsSubTitle
v-if="subTitleData"
:resources-data="subTitleData"
class="title-md mt-[32px]"
v-if="imgTitleData"
:resources-data="imgTitleData"
class="title-md mt-[32px] line-clamp-2 md:line-clamp-1"
/>
<WidgetsDescription
v-if="descriptionData"