style

src/pages/nft/add.vue

@@ -74,12 +74,18 @@
         <div class="font">Feedback</div>
     </div>
 
-    <div class="loading">
+    <div class="loading" v-if="showLoading">
         <img src="../../static/img/icon-add-loading.svg" alt="" />
     </div>
-
 </template>
 
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const showLoading = ref(false);
+</script>
+
+
 <style lang="less" scoped>
 .center {
     overflow-y: auto;

src/pages/nft/list.vue

@@ -31,6 +31,27 @@
             </div>
         </div>
     </div>
+
+    <!-- publish -->
+    <div class="publish" v-if="publishDialog">
+        <div class="msg">Irrevocable after publish</div>
+        <div class="buttons">
+            <button>Cancel</button>
+            <button class="confirm">Continue</button>
+        </div>
+    </div>
+    <div class="bg" v-if="publishDialog"></div>
+
+    <!-- delete -->
+    <div class="publish delete" v-if="deleteDialog">
+        <div class="msg">Once deleted, it cannot be restored</div>
+        <div class="buttons">
+            <button>Cancel</button>
+            <button class="confirm">Continue</button>
+        </div>
+    </div>
+    <div class="bg" v-if="deleteDialog"></div>
+
 </template>
 
 <script lang="ts" setup>
@@ -42,6 +63,9 @@ const userInfo: any = ref({});
 
 const router = useRouter()
 
+const publishDialog = ref(false)
+const deleteDialog = ref(false)
+
 const logout = () => {
     removeStorage(storageKey.userInfo)
     router.push({ name: 'home' })
@@ -167,4 +191,55 @@ onMounted(() => {
         }
     }
 }
+
+.publish {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    padding: 16px;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    border-radius: 20px;
+    background-color: #FFFFFF;
+    .msg {
+        padding: 36px 0;
+        font-size: 16px;
+        font-weight: 500;
+        text-align: center;
+    }
+    .buttons {
+        display: flex;
+        justify-content: space-between;
+        button {
+            cursor: pointer;
+            width: 145px;
+            height: 45px;
+            font-size: 16px;
+            font-weight: 500;
+            border-radius: 24px;
+            border: 1px solid #D6D6D6;
+            &.confirm {
+                color: #FFFFFF;
+                background: #1D9BF0;
+                border: 1px solid #1D9BF0;
+            }
+        }
+    }
+    &.delete {
+        .confirm {
+            background: #FF0000!important;
+            border: 1px solid #FF0000!important;
+        }
+    }
+}
+
+.bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .8);
+}
 </style>