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