69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const { isShowCheckLauncher, isShowDownloadLauncher, downloadLauncher } =
|
|
useCheckGameStart()
|
|
</script>
|
|
|
|
<template>
|
|
<AtomsModalLayer
|
|
v-model:is-open="isShowCheckLauncher"
|
|
:is-show-dimmed="true"
|
|
:is-outside-close="false"
|
|
:modal-name="'launcher'"
|
|
area-class="max-w-[480px] pt-[56px] px-[24px] pb-[24px] rounded-[8px]"
|
|
close-class="absolute top-[16px] right-[24px]"
|
|
>
|
|
<span class="ico-loading"></span>
|
|
<!-- [TODO] i18n 적용 -->
|
|
<!-- <p class="text-check">{{ tm('Common_Message_Check_Client').txt }}</p> -->
|
|
<p class="text-check">pc 클라이언트 실행 중...</p>
|
|
<Transition name="fade">
|
|
<div v-if="isShowDownloadLauncher" class="client-area">
|
|
<!-- <p
|
|
v-dompurify-html="tm('Common_Message_Download_Client').txt"
|
|
class="text-info"
|
|
></p>
|
|
<button type="button" class="btn-download" @click="downloadLauncher">
|
|
{{ tm('Common_Message_Install').txt }}
|
|
</button>
|
|
<p
|
|
v-dompurify-html="tm('Common_Message_Download_Close').txt"
|
|
class="text-tip"
|
|
></p> -->
|
|
<p class="text-info">
|
|
PC 클라이언트가 실행되지 않나요?
|
|
<br />
|
|
다운로드 전이라면 다운로드 후 진행해주세요
|
|
</p>
|
|
<AtomsButtonVariant class="max-w-[300px]" @click="downloadLauncher">
|
|
다운로드
|
|
</AtomsButtonVariant>
|
|
<p
|
|
v-dompurify-html="
|
|
'*PC 클라이언트가 정상 실행되었다면 팝업을 닫아 주세요.'
|
|
"
|
|
class="text-tip"
|
|
></p>
|
|
</div>
|
|
</Transition>
|
|
</AtomsModalLayer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ico-loading {
|
|
@apply block mx-auto mb-4 w-[80px] h-[80px] bg-[url('/images/common/stove_loading_light.png')] bg-contain bg-center bg-no-repeat;
|
|
}
|
|
.text-check {
|
|
@apply mb-6 text-center text-[20px] font-bold leading-[30px] tracking-[-0.6px] text-[#333333];
|
|
}
|
|
|
|
.client-area {
|
|
@apply pt-4 border-t border-[rgba(0,0,0,0.08)] text-center;
|
|
}
|
|
.text-info {
|
|
@apply mb-3 text-[14px] font-medium leading-[24px] tracking-[-0.42px] text-[#333333];
|
|
}
|
|
.text-tip {
|
|
@apply mt-4 text-[14px] leading-[20px] tracking-[-0.42px] text-[#999999];
|
|
}
|
|
</style>
|