|
@@ -77,12 +77,20 @@
|
|
|
<div class="loading" v-if="showLoading">
|
|
|
<img src="../../static/img/icon-add-loading.svg" alt="" />
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="succ" v-if="showSuccess">
|
|
|
+ <img class="icon" src="../../static/img/icon-notice-succ.svg" alt="" />
|
|
|
+ <div class="notic">Your NFTs are Created</div>
|
|
|
+ <button class="btn">Done</button>
|
|
|
+ </div>
|
|
|
+ <div class="succ-bg" v-if="showSuccess"></div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { ref } from 'vue';
|
|
|
|
|
|
const showLoading = ref(false);
|
|
|
+const showSuccess = ref(false)
|
|
|
</script>
|
|
|
|
|
|
|
|
@@ -379,4 +387,49 @@ const showLoading = ref(false);
|
|
|
transform: rotate(360deg);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.succ {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 500px;
|
|
|
+ height: 400px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ .icon {
|
|
|
+ display: block;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ margin: 78px auto 27px auto;
|
|
|
+ }
|
|
|
+ .notic {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: block;
|
|
|
+ border: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 440px;
|
|
|
+ height: 50px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 70px auto 0;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: #1D9BF0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.succ-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, .8);
|
|
|
+}
|
|
|
</style>
|