114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
isRedirectModal: Boolean,
|
|
});
|
|
|
|
const modalColor = ref<string>("white");
|
|
const modalHeight = ref<string>("250px");
|
|
const pFontSize = ref<string>("16px");
|
|
|
|
if (props.isRedirectModal) {
|
|
modalColor.value = "rgba(251, 191, 36, 1)";
|
|
modalHeight.value = "150px";
|
|
pFontSize.value = "20px";
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
|
|
v-if="!isRedirectModal"
|
|
>
|
|
<div class="modal px-5 text-center">
|
|
<p
|
|
class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
|
|
>
|
|
<strong>ATENÇÃO!</strong>
|
|
A transação só será processada após inserir o código de autenticação.
|
|
Caso contrário não conseguiremos comprovar o seu depósito e não será
|
|
possível transferir os tokens para sua carteira.
|
|
</p>
|
|
<button
|
|
@click="$emit('close-modal')"
|
|
class="border-2 border-solid border-amber-400 mt-2"
|
|
>
|
|
Entendi
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
|
|
v-if="isRedirectModal"
|
|
>
|
|
<div class="modal px-5 text-center">
|
|
<p
|
|
class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
|
|
>
|
|
Retomar a última compra?
|
|
</p>
|
|
<div class="flex justify-around items-center px-2">
|
|
<button
|
|
@click="$emit('close-modal')"
|
|
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
|
>
|
|
Não
|
|
</button>
|
|
<button
|
|
@click="$emit('go-to-lock')"
|
|
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
|
>
|
|
Sim
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-overlay {
|
|
display: flex !important;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal {
|
|
background-color: v-bind(modalColor);
|
|
height: v-bind(modalHeight);
|
|
width: 300px;
|
|
border-radius: 10px;
|
|
}
|
|
.close {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-img {
|
|
width: 25px;
|
|
}
|
|
|
|
.check {
|
|
width: 150px;
|
|
}
|
|
|
|
h6 {
|
|
font-weight: 500;
|
|
font-size: 28px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
p {
|
|
font-size: v-bind(pFontSize);
|
|
}
|
|
|
|
button {
|
|
width: 100px;
|
|
height: 40px;
|
|
color: black;
|
|
font-size: 14px;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|