118 lines
2.2 KiB
Vue
118 lines
2.2 KiB
Vue
<template>
|
|
<a-modal
|
|
wrapClassName="web"
|
|
:visible="visible"
|
|
:footer="null"
|
|
width="60%"
|
|
:closable="false"
|
|
:centered="true"
|
|
@cancel="onCancel"
|
|
>
|
|
<div class="flex modal-content">
|
|
<div v-if="visible" class="hero">
|
|
<img
|
|
src="../../assets/img/badge/hero.png"
|
|
alt="/hero.png"
|
|
class="max-w-full h-auto hero-img"
|
|
/>
|
|
</div>
|
|
<div class="exclusive">
|
|
<div class="cancel flex justify-end" @click="onCancel">
|
|
<img
|
|
src="../../assets/img/badge/close.png"
|
|
alt="/hero.png"
|
|
class="max-w-full h-auto"
|
|
/>
|
|
</div>
|
|
<div v-if="visible" class="pt-12 w-[450px] text-gray-100 text-content">
|
|
This is an exclusive badge for CEBG Genesis NFT holders. It will
|
|
serve as an identity credential for Genesis NFT holders to
|
|
participate in all future activities
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:visible"]);
|
|
|
|
const onCancel = () => {
|
|
emit("update:visible", false);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal-content {
|
|
height: 302px;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-img {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
width: 459px;
|
|
height: 420px;
|
|
opacity: 0;
|
|
animation: slideInFromLeft 0.5s forwards;
|
|
}
|
|
|
|
.exclusive {
|
|
width: 621px;
|
|
margin-left: 529px;
|
|
}
|
|
|
|
.text-content {
|
|
opacity: 0;
|
|
animation: slideInFromRight 0.5s forwards;
|
|
}
|
|
|
|
@keyframes slideInFromLeft {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInFromRight {
|
|
0% {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.web {
|
|
.ant-modal-body {
|
|
background-color: #21211E;
|
|
border: 1px solid #ccc;
|
|
padding: 0;
|
|
}
|
|
|
|
.ant-modal-content {
|
|
background-color: #21211E !important;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|