huangjinming/activity-cebg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ffi

Browse Source
This commit is contained in:
huangjinming 2023-04-24 16:05:25 +08:00
parent 14c97cec77
commit 635b07d7cc
1 changed files with 69 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/global/ImageTextModal.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<a-modal <a-modal
wrapClassName="web"
:visible="visible" :visible="visible"
:footer="null" :footer="null"
width="60%" width="60%"
@ -7,15 +8,14 @@
:centered="true" :centered="true"
@cancel="onCancel" @cancel="onCancel"
> >
<div class="flex"> <div class="flex modal-content">
<div> <div v-if="visible" class="hero">
<img <img
src="../../assets/img/badge/hero.png" src="../../assets/img/badge/hero.png"
alt="/hero.png" alt="/hero.png"
class="max-w-full h-auto hero-img" class="max-w-full h-auto hero-img"
/> />
</div> </div>
<div class="exclusive"> <div class="exclusive">
<div class="cancel flex justify-end" @click="onCancel"> <div class="cancel flex justify-end" @click="onCancel">
<img <img
@ -24,9 +24,11 @@
class="max-w-full h-auto" class="max-w-full h-auto"
/> />
</div> </div>
This is an exclusive badge for CEBG Genesis NFT holders. It will serve <div v-if="visible" class="pt-12 w-[450px] text-gray-100 text-content">
as an identity credential for Genesis NFT holders to participate in all This is an exclusive badge for CEBG Genesis NFT holders. It will
future activities serve as an identity credential for Genesis NFT holders to
participate in all future activities
</div>
</div> </div>
</div> </div>
</a-modal> </a-modal>
@ -46,13 +48,70 @@ const onCancel = () => {
emit("update:visible", false); emit("update:visible", false);
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hero-img { .modal-content {
height: 459px; height: 302px;
height: 420px; position: relative;
// object-fit: cover;
} }
.hero-img {
position: absolute;
left: 0;
bottom: 0;
cursor: pointer;
width: 459px;
height: 420px;
opacity: 0;
animation: slideInFromLeft 0.5s forwards;
}
.exclusive { .exclusive {
width: 621px; 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> </style>