fix. Launcher 버튼 수정
This commit is contained in:
@@ -42,7 +42,6 @@ const PLATFORM_ICON_MAP: Record<Platform, string> = {
|
|||||||
pc: 'AtomsIconsLogoWindow',
|
pc: 'AtomsIconsLogoWindow',
|
||||||
stove: 'AtomsIconsLogoStove',
|
stove: 'AtomsIconsLogoStove',
|
||||||
} as const
|
} as const
|
||||||
|
|
||||||
const DUP_IMAGE_MAP: Record<Platform, string> = {
|
const DUP_IMAGE_MAP: Record<Platform, string> = {
|
||||||
google_play: '/images/common/btn_launcher/btn_logo-google.svg',
|
google_play: '/images/common/btn_launcher/btn_logo-google.svg',
|
||||||
app_store: '/images/common/btn_launcher/btn_logo-app.svg',
|
app_store: '/images/common/btn_launcher/btn_logo-app.svg',
|
||||||
@@ -56,7 +55,17 @@ const componentTag = computed(() => {
|
|||||||
}
|
}
|
||||||
return 'button'
|
return 'button'
|
||||||
})
|
})
|
||||||
const isSingle = computed(() => props.type === 'single')
|
const shouldShowPlatformIcon = computed(
|
||||||
|
() =>
|
||||||
|
(props.type === 'default' && props.variant !== 'custom') ||
|
||||||
|
props.type === 'single'
|
||||||
|
)
|
||||||
|
const shouldShowDownloadIcon = computed(
|
||||||
|
() =>
|
||||||
|
props.platform === 'pc' &&
|
||||||
|
props.type === 'default' &&
|
||||||
|
props.variant !== 'custom'
|
||||||
|
)
|
||||||
const supportedPlatforms = computed(
|
const supportedPlatforms = computed(
|
||||||
() =>
|
() =>
|
||||||
getSupportedPlatforms(
|
getSupportedPlatforms(
|
||||||
@@ -151,7 +160,7 @@ const handleClick = () => {
|
|||||||
:class="[
|
:class="[
|
||||||
'btn-base',
|
'btn-base',
|
||||||
props.type,
|
props.type,
|
||||||
{ 'no-text': isSingle && !$slots.default },
|
{ 'no-text': props.type === 'single' && !$slots.default },
|
||||||
]"
|
]"
|
||||||
:data-variant="props.variant"
|
:data-variant="props.variant"
|
||||||
:data-platform="props.platform"
|
:data-platform="props.platform"
|
||||||
@@ -160,11 +169,9 @@ const handleClick = () => {
|
|||||||
@click="handleClick"
|
@click="handleClick"
|
||||||
>
|
>
|
||||||
<span class="btn-content">
|
<span class="btn-content">
|
||||||
<component
|
<span v-if="shouldShowPlatformIcon" class="icon-platform">
|
||||||
:is="platformIcon"
|
<component :is="platformIcon" />
|
||||||
v-if="props.type !== 'duplication'"
|
</span>
|
||||||
class="icon-platform"
|
|
||||||
/>
|
|
||||||
<span class="text" :style="textStyle">
|
<span class="text" :style="textStyle">
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
@@ -173,10 +180,7 @@ const handleClick = () => {
|
|||||||
v-if="props.iconComponent"
|
v-if="props.iconComponent"
|
||||||
v-bind="props.iconProps"
|
v-bind="props.iconProps"
|
||||||
/>
|
/>
|
||||||
<span
|
<span v-if="shouldShowDownloadIcon" class="icon-download">
|
||||||
v-if="props.platform === 'pc' && props.type === 'default'"
|
|
||||||
class="icon-download"
|
|
||||||
>
|
|
||||||
<AtomsIconsDownloadLine />
|
<AtomsIconsDownloadLine />
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@@ -191,7 +195,10 @@ const handleClick = () => {
|
|||||||
@apply relative flex items-center w-full z-[1];
|
@apply relative flex items-center w-full z-[1];
|
||||||
}
|
}
|
||||||
.icon-platform {
|
.icon-platform {
|
||||||
@apply w-5 h-5 flex-shrink-0;
|
@apply w-5 h-5 mr-2 flex-shrink-0;
|
||||||
|
}
|
||||||
|
.icon-download {
|
||||||
|
@apply ml-auto pl-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-base[data-variant='filled'] {
|
.btn-base[data-variant='filled'] {
|
||||||
@@ -223,12 +230,6 @@ const handleClick = () => {
|
|||||||
@apply line-clamp-2 text-[14px]
|
@apply line-clamp-2 text-[14px]
|
||||||
md:text-[16px];
|
md:text-[16px];
|
||||||
}
|
}
|
||||||
.btn-base.default .icon-platform + .text {
|
|
||||||
@apply pl-2;
|
|
||||||
}
|
|
||||||
.btn-base.default .icon-download {
|
|
||||||
@apply ml-auto pl-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-base.default[data-variant='outlined'] .icon-download {
|
.btn-base.default[data-variant='outlined'] .icon-download {
|
||||||
@apply border-black/10;
|
@apply border-black/10;
|
||||||
|
|||||||
@@ -378,6 +378,7 @@ onMounted(() => {
|
|||||||
<template v-if="start1depthData">
|
<template v-if="start1depthData">
|
||||||
<BlocksButtonLauncher
|
<BlocksButtonLauncher
|
||||||
platform="pc"
|
platform="pc"
|
||||||
|
variant="custom"
|
||||||
:background-color="
|
:background-color="
|
||||||
getColorCodeFromData(start1depthData?.btn_info, 'btn')
|
getColorCodeFromData(start1depthData?.btn_info, 'btn')
|
||||||
"
|
"
|
||||||
@@ -579,12 +580,9 @@ onMounted(() => {
|
|||||||
.btn-start:hover .nav-2depth {
|
.btn-start:hover .nav-2depth {
|
||||||
@apply md:block;
|
@apply md:block;
|
||||||
}
|
}
|
||||||
.btn-start:deep(.btn-base[data-variant='filled']) {
|
.btn-start:deep(.btn-base.default[data-variant='custom']) {
|
||||||
@apply w-full h-[48px] px-10 font-[700] text-[16px];
|
@apply w-full h-[48px] px-10 font-[700] text-[16px];
|
||||||
}
|
}
|
||||||
.btn-start:deep(.btn-base[data-variant='filled']) svg {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-start .nav-2depth {
|
.btn-start .nav-2depth {
|
||||||
@apply left-[unset] right-[-40px];
|
@apply left-[unset] right-[-40px];
|
||||||
@@ -599,9 +597,6 @@ onMounted(() => {
|
|||||||
.btn-start .nav-2depth:deep(.btn-base) .text {
|
.btn-start .nav-2depth:deep(.btn-base) .text {
|
||||||
@apply pl-1.5 text-[15px] text-theme-foreground-reversal;
|
@apply pl-1.5 text-[15px] text-theme-foreground-reversal;
|
||||||
}
|
}
|
||||||
.btn-start:deep(.nav-2depth .icon-download) {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='light'] {
|
[data-theme='light'] {
|
||||||
.btn-start .nav-2depth:deep(.btn-base) .icon-platform {
|
.btn-start .nav-2depth:deep(.btn-base) .icon-platform {
|
||||||
|
|||||||
Reference in New Issue
Block a user