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

Merge branch 'feature/202501107-all' into feature/20251001-gil

Browse Source
This commit is contained in:
“hyeonggkim”
2025-11-26 21:25:49 +09:00
parent ba5879fad8 e06ee97764
commit 405c42ba36
28 changed files with 192 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
layers/assets/css/components/_base-content.css
View File

@@ -18,6 +18,7 @@
.use-base table {
@apply w-full border-collapse;
}
.use-base .fr-alternate-rows tr:nth-child(even),
.use-base thead,
.use-base tfoot {
@apply bg-[#FAFAFA];
@@ -73,7 +74,11 @@
}
.use-base img {
@apply max-w-full h-auto my-4;
@apply max-w-full h-auto;
}
.use-base iframe {
@apply max-w-full h-auto aspect-video;
}
.use-base pre {

4
layers/assets/css/components/_layout.css
View File

@@ -36,9 +36,9 @@
@apply line-clamp-2 text-[16px] font-[500] tracking-[-0.48px] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:tracking-[-0.72px] md:line-clamp-1 md:text-[24px] md:leading-[34px];
}
.title-sm {
@apply text-[15px] font-[500] leading-[24px] tracking-[-0.45px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[20px] md:leading-[30px] md:tracking-[-0.6px];
@apply line-clamp-4 text-[15px] font-[500] leading-[24px] tracking-[-0.45px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:tracking-[-0.6px] md:line-clamp-3 md:text-[20px] md:leading-[30px];
}
.title-xs {
@apply text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
@apply line-clamp-1 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
}
}

4
layers/assets/css/components/_scrollbar.css
View File

@@ -2,11 +2,11 @@ body ::-webkit-scrollbar-track {
@apply bg-transparent;
}
body ::-webkit-scrollbar {
@apply w-5;
@apply w-[12px] h-[12px];
}
body ::-webkit-scrollbar-thumb {
@apply w-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-8;
@apply w-1 h-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-[4px];
}
.custom-theme-scrollbar::-webkit-scrollbar-thumb {

2
layers/assets/css/components/_splide.css
View File

@@ -23,7 +23,7 @@
}
.splide-arrow {
@apply absolute top-1/2 w-[40px] h-[40px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5]
md:w-[40px] md:h-[40px]
md:w-[48px] md:h-[48px]
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
hover:after:opacity-10;
}

4
layers/components/atoms/loading/Full.vue
View File

@@ -18,7 +18,7 @@ const { fullLoading } = storeToRefs(loadingStore)
@apply fixed inset-0 bg-black pt-[96px] flex items-center justify-center sm:pt-[112px] z-[150];
}
.spinner {
@apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];
@apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_white.png')];
}
[data-theme='light'] {
@@ -26,7 +26,7 @@ const { fullLoading } = storeToRefs(loadingStore)
@apply bg-white/90;
}
.spinner {
@apply bg-[url('/images/common/publisning_template_loader_white.png')];
@apply bg-[url('/images/common/publisning_template_loader_black.png')];
}
}
</style>

4
layers/components/atoms/loading/Local.vue
View File

@@ -28,12 +28,12 @@ const canTeleport = (localId: string) => {
@apply absolute inset-0 flex items-center justify-center z-[5];
}
.spinner {
@apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];
@apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_white.png')];
}
[data-theme='light'] {
.spinner {
@apply bg-[url('/images/common/publisning_template_loader_white.png')];
@apply bg-[url('/images/common/publisning_template_loader_black.png')];
}
}
</style>

28
layers/components/blocks/Button/Sns.vue
View File

@@ -43,17 +43,20 @@ const handleCopy = async () => {
<template>
<div v-if="Object.keys(snsList).length > 0" class="sns-container">
<AtomsButtonCircle
class="btn-sns"
sr-only="sns"
:style="{ backgroundColor: snsBackgroundColor }"
@click="handleMouseEnter"
>
<AtomsIconsShareLine class="icon-share" />
</AtomsButtonCircle>
<transition name="fade">
<AtomsButtonCircle
v-show="!showSnsList"
class="btn-sns"
sr-only="sns"
:style="{ backgroundColor: snsBackgroundColor }"
@click="handleMouseEnter"
>
<AtomsIconsShareLine class="icon-share" />
</AtomsButtonCircle>
</transition>
<transition name="fade">
<div
v-if="showSnsList"
v-show="showSnsList"
class="sns-list"
:style="{ backgroundColor: snsBackgroundColor }"
>
@@ -96,13 +99,16 @@ const handleCopy = async () => {
</template>
<style scoped>
.sns-container {
@apply relative h-[40px] md:h-[48px];
}
.btn-sns:hover .icon-share {
@apply fill-white;
}
.sns-list {
@apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full
h-[40px] md:h-[48px] pl-4 pr-3
@apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full h-full pl-4 pr-3
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full;
}
.sns-item {

2
layers/components/blocks/DatePicker.vue
View File

@@ -626,7 +626,7 @@ body .date-picker-menu-wrap .dp__calendar_item {
padding: 2px 4px !important;
}
body .date-picker-menu-wrap .dp__cell_inner {
padding: 8px !important;
padding: 0px !important;
border-radius: 100% !important;
outline: none !important;
border: none !important;

2
layers/components/blocks/modal/Content.vue
View File

@@ -151,6 +151,6 @@ watch(
}
.content-tex {
@apply overflow-y-auto mb-4 px-6 sm:mb-6 sm:px-8;
@apply overflow-y-scroll mb-4 pl-6 pr-3 sm:mb-6 sm:pl-8 sm:pr-5;
}
</style>

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

@@ -125,25 +125,34 @@ const handleMove = (
width: var(--banner-width-mo);
height: var(--banner-height-mo-active);
margin-right: var(--banner-gap-mo);
opacity: 0.5;
}
.center-focus:deep(.splide__slide) .slide-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
opacity: 0.5;
transition: transform 0.6s ease-out;
opacity: 0.3;
}
.center-focus:deep(.splide__slide.is-active) {
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;
}
.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 {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
opacity: 1;
transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 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;
}

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

@@ -131,6 +131,7 @@ const handleMove = (
.center-highlight:deep(.splide__slide) .slide-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
transition: all 0.6s ease-out;
}
.center-highlight:deep(.splide__slide.is-active) {
width: var(--banner-width-mo-container);
@@ -138,7 +139,6 @@ const handleMove = (
.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 스타일 */

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

@@ -173,8 +173,6 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.thumbnail-carousel {
}
.thumbnail-carousel:deep(img) {
@apply w-full h-full object-cover;
}

2
layers/components/layouts/EventNavigation.vue
View File

@@ -96,7 +96,7 @@ onMounted(async () => {
md:p-8 md:pt-6 md:pr-4;
}
.navigation-list {
@apply flex flex-col gap-4 h-full overflow-y-auto rounded-[20px] p-4 bg-[rgba(25,25,25,0.5)] shadow-[0_2px_4px_0_rgba(0,0,0,0.06)] backdrop-blur-[25px] transition-opacity duration-300 ease-in-out;
@apply flex flex-col gap-4 h-full overflow-y-scroll rounded-[20px] p-4 pr-1 bg-[rgba(25,25,25,0.5)] shadow-[0_2px_4px_0_rgba(0,0,0,0.06)] backdrop-blur-[25px] transition-opacity duration-300 ease-in-out;
}
.item-thumbnail {
@apply overflow-hidden relative w-[148px] h-[75px] rounded-[10px]

2
layers/components/layouts/Main.vue
View File

@@ -119,7 +119,7 @@ onMounted(() => {
@apply relative pt-[48px] md:pt-[64px];
}
.utile-wrap {
@apply fixed flex flex-col z-[100]
@apply fixed flex flex-col items-end z-[100]
bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
}
.utile-wrap.is-stop {

2
layers/components/widgets/modal/Preregist.vue
View File

@@ -308,7 +308,7 @@ defineExpose({
<!-- Marketing Detail Content -->
<div
v-if="isExpandedMarketing"
class="mt-4 max-h-[160px] overflow-y-auto rounded-lg bg-white/[0.04] px-4 py-3 custom-theme-scrollbar"
class="mt-4 max-h-[160px] overflow-y-scroll rounded-lg bg-white/[0.04] pl-4 pr-1 py-3 custom-theme-scrollbar"
>
<p
v-dompurify-html="tmWithGameName('Preregist_Agree_News_Info')"

6
layers/templates/FxCoupon01/index.vue
View File

@@ -521,10 +521,6 @@ onMounted(async () => {
@click="handleCouponUse"
>
<span>{{ tm('Coupon_Registration') }}</span>
<AtomsIconsCouponFill
:size="breakpoints.isMobile ? 16 : 20"
color="#FFFFFF"
/>
</AtomsButton>
</div>
@@ -804,7 +800,7 @@ onMounted(async () => {
<style scoped>
/* Button Style */
.btn-period {
@apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] before:content-none after:content-none
@apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] font-[700] before:content-none after:content-none
transition-all duration-300 ease-in-out
hover:z-[4] hover:!bg-[#FFFFFF] hover:border-[#404040] hover:!text-[#1F1F1F];
}

148
layers/templates/FxDownload01/index.vue
View File

@@ -137,14 +137,17 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<WidgetsFixSubTitle :title="tm('Download_Section_Platform_Title')" />
<div
class="relative flex flex-col-reverse sm:flex-row-reverse items-stretch justify-center gap-[20px] w-full md:flex-row"
class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[20px] w-full md:grid md:grid-cols-12 md:grid-rows-1"
>
<div
v-if="gameData?.platform_type !== '2'"
class="relative flex flex-1 flex-col items-start justify-start h-[270px] py-[20px] rounded-[12px] bg-white sm:h-auto md:flex-[2] md:pt-[24px] md:pb-0 lg:pt-[32px]"
class="relative flex flex-1 flex-col items-start justify-start h-[270px] py-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:pt-[24px] md:pb-0 lg:pt-[32px]"
:class="
gameData?.platform_type === '1' ? 'md:col-span-12' : 'md:col-span-8'
"
>
<div
class="relative flex flex-col items-start justify-start w-full max-w-[800px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
class="relative flex flex-col items-start justify-start w-full max-w-[880px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
>
<span
v-if="!breakpoints.isMobile"
@@ -164,7 +167,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
</span>
<h4
class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
>
<span>{{ tm('Download_Box_PC_Title') }}</span>
@@ -208,7 +211,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<div
v-if="breakpoints.isMobile"
class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-[48px] border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-[48px] sm:mt-auto border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
>
<span>{{ tm('Download_Button_PC_Mobile') }}</span>
</div>
@@ -245,13 +248,16 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<div
v-if="gameData?.platform_type !== '1'"
class="relative flex flex-1 flex-col items-start justify-start h-[270px] p-[20px] rounded-[12px] bg-white sm:h-auto md:py-[24px] md:px-[28px] lg:pt-[32px] lg:pb-[40px] lg:px-[40px]"
class="relative flex flex-1 flex-col items-start justify-start h-[270px] p-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
:class="
gameData?.platform_type === '2' ? 'md:col-span-12' : 'md:col-span-4'
"
>
<div
class="relative flex flex-col items-start justify-start w-full max-w-[800px] mx-auto"
class="relative flex flex-col items-start justify-start w-full h-full max-w-[880px] mx-auto"
>
<h4
class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
>
<span>{{ tm('Download_Box_MOBILE_Title') }}</span>
</h4>
@@ -299,27 +305,44 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<section ref="specPCRef" class="section-static">
<WidgetsFixSubTitle :title="tm('Download_Section_PC_Title')" />
<table>
<thead>
<tr>
<th class="w-[80px] md:w-[172px]">
{{ tm('Download_Table_Item') }}
</th>
<th>{{ tm('Download_Table_Min_Spec') }}</th>
<th>{{ tm('Download_Table_Rec_Spec') }}</th>
</tr>
</thead>
<tbody>
<template v-for="tr in pcSpecList" :key="tr.id">
<div
class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
>
<table>
<thead>
<tr>
<th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
<template v-for="td in tr.itemData" :key="td.display.text">
<td>{{ td.display.text }}</td>
</template>
<th class="w-[80px] md:w-[172px] !border-l-[0]">
{{ tm('Download_Table_Item') }}
</th>
<th>{{ tm('Download_Table_Min_Spec') }}</th>
<th>{{ tm('Download_Table_Rec_Spec') }}</th>
</tr>
</template>
</tbody>
</table>
</thead>
<tbody>
<template v-for="(tr, trIdx) in pcSpecList" :key="tr.id">
<tr>
<th
:class="[
'w-[80px] md:w-[172px] !border-l-[0]',
trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : '',
]"
>
{{ tr.itemText }}
</th>
<template v-for="td in tr.itemData" :key="td.display.text">
<td
:class="
trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : ''
"
>
{{ td.display.text }}
</td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
<div
v-if="!breakpoints.isMobile"
@@ -420,33 +443,50 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
<section ref="specMobileRef" class="section-static">
<WidgetsFixSubTitle :title="tm('Download_Section_MOBILE_Title')" />
<table>
<thead>
<tr>
<th rowspan="2" class="w-[80px] md:w-[172px]">
{{ tm('Download_Table_Item') }}
</th>
<th colspan="2">{{ tm('Download_Table_Min_Spec') }}</th>
<th colspan="2">{{ tm('Download_Table_Rec_Spec') }}</th>
</tr>
<tr>
<th>{{ tm('Download_Table_Device') }}</th>
<th>{{ tm('Download_Table_Os') }}</th>
<th>{{ tm('Download_Table_Device') }}</th>
<th>{{ tm('Download_Table_Os') }}</th>
</tr>
</thead>
<tbody>
<template v-for="tr in mobileSpecList" :key="tr.id">
<div
class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
>
<table>
<thead>
<tr>
<th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
<template v-for="td in tr.itemData" :key="td.display.text">
<td>{{ td.display.text }}</td>
</template>
<th rowspan="2" class="w-[80px] md:w-[172px] !border-l-[0]">
{{ tm('Download_Table_Item') }}
</th>
<th colspan="2">{{ tm('Download_Table_Min_Spec') }}</th>
<th colspan="2">{{ tm('Download_Table_Rec_Spec') }}</th>
</tr>
</template>
</tbody>
</table>
<tr>
<th>{{ tm('Download_Table_Device') }}</th>
<th>{{ tm('Download_Table_Os') }}</th>
<th>{{ tm('Download_Table_Device') }}</th>
<th>{{ tm('Download_Table_Os') }}</th>
</tr>
</thead>
<tbody>
<template v-for="(tr, trIdx) in mobileSpecList" :key="tr.id">
<tr>
<th
:class="[
'w-[80px] md:w-[172px] !border-l-[0]',
trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : '',
]"
>
{{ tr.itemText }}
</th>
<template v-for="td in tr.itemData" :key="td.display.text">
<td
:class="
trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : ''
"
>
{{ td.display.text }}
</td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
</section>
</div>
</template>
@@ -457,11 +497,11 @@ table {
@apply w-full h-auto border-collapse border-spacing-0 table-fixed;
}
table th {
@apply py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FAFAFA] text-[#1F1F1F] text-[14px] font-bold leading-[24px] tracking-[-0.42px]
@apply py-[8px] px-[12px] border-l border-b border-solid border-[#D9D9D9] bg-[#FAFAFA] text-center text-[#1F1F1F] text-[14px] font-bold leading-[24px] tracking-[-0.42px]
md:py-[11px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
}
table td {
@apply h-[64px] py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FFFFFF] text-[#666666] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]
@apply h-[64px] py-[8px] px-[12px] border-l border-b border-[#D9D9D9] bg-[#FFFFFF] text-center text-[#666666] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]
md:h-[80px] md:py-[14px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
}

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

@@ -371,7 +371,10 @@ const handlePreregistClick = () => {
</template>
<style scoped>
/* destroy되었을 때 (슬라이드 비활성화) 중앙 정렬 */
.content-standard {
@apply max-w-[1024px] mx-auto;
}
.splide:not(.is-active):deep(.splide__list) {
@apply flex justify-center gap-3 md:gap-4;
}

6
layers/templates/FxSecure01/index.vue
View File

@@ -171,15 +171,15 @@ onMounted(() => {
</div>
<!-- Secure Cards -->
<div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-3 md:gap-5 mb-6">
<div class="grid grid-cols-1 md:grid-cols-3 w-full gap-3 md:gap-5 mb-6">
<div
v-for="card in secureCards"
:key="card.id"
class="flex-1 min-h-[308px] md:min-h-[384px] p-[10px] md:p-4 bg-[#FFFFFF] rounded-2xl flex flex-col gap-3 transition-all duration-300 ease-in-out"
class="flex-1 min-h-[308px] md:min-h-[384px] p-[10px] md:p-3 lg:p-4 bg-[#FFFFFF] rounded-2xl flex flex-col gap-3 transition-all duration-300 ease-in-out"
>
<!-- Card Content -->
<div
class="flex-1 p-[10px] md:p-8 flex flex-col gap-[8px] md:gap-3 text-left"
class="flex-1 p-[10px] md:p-3 lg:p-4 flex flex-col gap-[8px] md:gap-3 text-left"
>
<!-- Badge -->
<div class="inline-flex">

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

@@ -121,7 +121,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md"
class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
/>
<ClientOnly>
<BlocksSlideDefault
@@ -156,7 +156,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="mt-[32px] md:mt-[48px]"
class="max-w-[944px] mt-[32px] mx-[20px] sm:mx-[40px] md:mt-[48px]"
/>
</div>
</section>

6
layers/templates/GrContents01/index.vue
View File

@@ -36,12 +36,12 @@ const buttonListData = computed(() => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-xlg"
class="title-xlg max-w-[944px]"
/>
<WidgetsSubTitle
v-if="subTitleData"
:resources-data="subTitleData"
class="title-sm mt-2"
class="title-sm max-w-[944px] mt-2"
/>
<div v-if="imgListData" class="img-container">
<div v-for="(item, index) in imgListData" :key="index" class="img-item">
@@ -62,7 +62,7 @@ const buttonListData = computed(() => {
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="mt-8"
class="max-w-[944px] mt-8"
/>
</div>
</section>

14
layers/templates/GrDetail01/index.vue
View File

@@ -62,17 +62,17 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-lg"
class="title-lg max-w-[944px]"
/>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
class="title-md max-w-[944px] mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="mt-4 md:mt-6"
class="max-w-[944px] mt-4 md:mt-6"
/>
</div>
</SplideSlide>
@@ -124,15 +124,15 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
@apply flex items-center;
}
.item-bullet {
@apply block w-3 h-3 rounded-full transition-all duration-300;
@apply block w-3 h-3 rounded-full transition-[background] duration-300 ease-in-out;
background-color: var(--pagination-disabled);
}
.item-title {
@apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium md:block;
@apply hidden absolute -bottom-[46px] left-1/2 max-w-[184px] line-clamp-1 text-ellipsis whitespace-nowrap text-sm font-medium -translate-x-1/2 transition-[color] duration-300 ease-in-out md:block;
color: var(--pagination-disabled);
}
.progress-bar {
@apply relative w-[68px] h-0.5 overflow-hidden md:w-[184px];
@apply relative w-[68px] h-[1px] overflow-hidden md:w-[184px];
background-color: var(--pagination-disabled);
}
.progress-fill {
@@ -141,9 +141,11 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
}
/* 활성화 상태 (현재 슬라이드) */
.btn-pagination:hover .item-bullet,
.is-active .item-bullet {
background-color: var(--pagination-active);
}
.btn-pagination:hover .item-title,
.is-active .item-title {
color: var(--pagination-active);
}

6
layers/templates/GrDetail02/index.vue
View File

@@ -36,17 +36,17 @@ const paginationData = computed(() => {
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-lg"
class="title-lg max-w-[944px]"
/>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
class="title-md max-w-[944px] mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="mt-4 md:mt-6"
class="max-w-[944px] mt-4 md:mt-6"
/>
</div>
</SplideSlide>

10
layers/templates/GrDetail03/index.vue
View File

@@ -59,28 +59,28 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
:resources-data="getComponentGroup(item, 'foreground')"
/>
<div
class="content-standard max-w-[1024px] mx-auto items-start pt-[48px] md:pt-0"
class="content-standard max-w-[335px] mx-auto items-start pt-[48px] md:max-w-[1024px] md:pt-0"
>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'category')"
:resources-data="getComponentGroup(item, 'category')"
class="title-xs mb-2 line-clamp-1 text-left md:mb-5"
class="title-xs max-w-[540px] mb-2 line-clamp-1 text-left md:mb-5"
/>
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-lg line-clamp-1 text-left"
class="title-lg max-w-[540px] line-clamp-1 text-left"
/>
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
tag="p"
class="title-md mt-1 line-clamp-1 text-left"
class="title-md max-w-[540px] mt-1 line-clamp-1 text-left"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="mt-2 text-left md:mt-5"
class="max-w-[540px] mt-2 text-left md:mt-5"
/>
<AtomsVideo
v-if="hasComponentGroup(item, 'video')"

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

@@ -125,7 +125,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md"
class="title-md max-w-[944px]"
/>
<BlocksSlideThumbnail
ref="slideThumbnailRef"
@@ -170,7 +170,7 @@ const onArrowClick = (direction, targetIndex) => {
<style scoped>
.thumbnail-carousel {
@apply w-full max-w-[688px] md:max-w-[944px];
@apply w-full max-w-[944px];
}
.thumbnail-carousel:deep(.main-splide) {
@apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];

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

@@ -69,7 +69,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md mx-[20px] sm:mx-[40px]"
class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
/>
<BlocksSlideCenterFocus
v-if="slideData"
@@ -85,6 +85,7 @@ const onArrowClick = (direction, targetIndex) => {
<BlocksVisualContent
:resources-data="getComponentGroup(item, 'imgList')"
object-fit="cover"
class="inner-content"
/>
</div>
</SplideSlide>
@@ -101,10 +102,7 @@ const onArrowClick = (direction, targetIndex) => {
<style scoped>
.section-standard {
@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)];
}
.slide-inner {
@apply bg-black;
@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)];
}
</style>

6
layers/templates/GrGallery03/index.vue
View File

@@ -78,7 +78,7 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-md mx-[20px] sm:mx-[40px]"
class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
/>
<BlocksSlideCenterHighlight
v-if="slideData"
@@ -101,12 +101,12 @@ const onArrowClick = (direction, targetIndex) => {
<WidgetsSubTitle
v-if="imgTitleData"
:resources-data="imgTitleData"
class="title-lg mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
class="title-lg max-w-[944px] mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
/>
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
class="max-w-[944px] mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
/>
<WidgetsButtonList
v-if="buttonListData"

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

@@ -51,16 +51,17 @@ const onArrowClick = direction => {
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
class="title-md"
class="title-md max-w-[944px]"
/>
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
:resources-data="getComponentGroup(item, 'mainTitle')"
class="title-xlg"
class="title-xlg max-w-[944px]"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="max-w-[944px]"
/>
<WidgetsButtonList
v-if="hasComponentGroup(item, 'buttonList')"