103 lines
2.9 KiB
Vue
103 lines
2.9 KiB
Vue
<template>
|
|
<card-component class="modal-card">
|
|
<div class="body">
|
|
<div class="header">
|
|
<img alt="logo" class="logo" src="/assets/img/vampir.png" />
|
|
</div>
|
|
<div class="subheader toast-header">
|
|
{{ props.header }}<br />
|
|
{{ props.subheader }}
|
|
</div>
|
|
<div class="amount-number">
|
|
<div class="token-amount number-mobile">{{ props.value }}</div>
|
|
<div class="token-name">$BLOOD</div>
|
|
</div>
|
|
<div class="info toast-body">
|
|
{{ props.info }}
|
|
</div>
|
|
</div>
|
|
<div class="btn btn-immortal" @click="closeToast">Okay</div>
|
|
</card-component>
|
|
</template>
|
|
<script setup>
|
|
import { getCurrentInstance } from "vue";
|
|
|
|
import CardComponent from "@/components/CardComponent.vue";
|
|
import { useToast } from "vue-toastification";
|
|
|
|
const props = defineProps({
|
|
value: String,
|
|
header: String,
|
|
subheader: String,
|
|
info: String,
|
|
});
|
|
|
|
// element.classList.add("toast-open");
|
|
const toast = useToast();
|
|
|
|
const instance = getCurrentInstance();
|
|
instance.parent.parent.vnode.el.classList.add("toast-open");
|
|
const id = instance.attrs["toast-id"];
|
|
function closeToast() {
|
|
instance.parent.parent.vnode.el.classList.remove("toast-open");
|
|
toast.dismiss(id);
|
|
}
|
|
console.log("instance", instance.attrs["toast-id"]);
|
|
</script>
|
|
<style lang="sass">
|
|
.Vue-Toastification__container
|
|
&.toast-open
|
|
background-color: rgb(15, 15, 15, 0.7)
|
|
height: 100vh
|
|
width: 100vw
|
|
position: fixed
|
|
left: 0
|
|
bottom: 0
|
|
z-index: 10
|
|
@media (min-width: 992px)
|
|
background-color: unset
|
|
&.top-center
|
|
@media (min-width: 600px)
|
|
left: unset
|
|
margin-left: unset
|
|
.Vue-Toastification__toast
|
|
max-width: unset
|
|
min-width: unset
|
|
max-height: unset
|
|
min-height: unset
|
|
font-family: unset
|
|
margin-bottom: unset
|
|
box-shadow: unset
|
|
padding: unset
|
|
&.modal-overlay
|
|
background-color: unset
|
|
.modal-card
|
|
width: 342px
|
|
text-align: center
|
|
position: absolute
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
border: 2px solid var(--dark-purple, #4B0082)
|
|
background: var(--midnight-black, #0F0F0F)
|
|
z-index: 100
|
|
gap: 16px
|
|
@media (min-width: 992px)
|
|
top: 142px
|
|
right: 24px
|
|
left: unset
|
|
transform: unset
|
|
.body
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
.amount-number
|
|
display: flex
|
|
justify-content: center
|
|
align-items: end
|
|
gap: 8px
|
|
img
|
|
width: 74px
|
|
height: 74px
|
|
</style>
|