show card

src/view/components/nft-card.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="show" :style="{ zoom: zoom }">
+        <div class="card" :class="item.modelName">
+            <div class="logo">
+                <img v-if="item.logoImagePath" :src="item.logoImagePath" alt="" />
+            </div>
+            <div class="member">{{ item.projectName === '' ? 'xxxx' : item.projectName }}</div>
+            <div class="number">{{ item.nftItemId === '' ? '0000' : item.nftItemId }}</div>
+        </div>
+        <img class="bg" :src="item.modelImagePath" />
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, defineProps, ref } from 'vue'
+
+const zoom = ref(1);
+
+const props = defineProps({
+    item: {
+        type: Object,
+        default: {},
+    },
+    width: {
+        type: Number,
+        default: 400
+    }
+})
+
+onBeforeMount(() => {
+    if (props.width) {
+        zoom.value = props.width / 400
+    }
+})
+</script>
+
+<style lang='scss' scoped>
+.show {
+    position: relative;
+    overflow: hidden;
+    width: 400px;
+    height: 400px;
+    .card {
+        position: absolute;
+        left: 53px;
+        top: 103px;
+        width: 294px;
+        height: 186px;
+        .logo {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            background-color: #fff;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                object-fit: cover;
+            }
+        }
+        .member {
+            position: absolute;
+            top: 11px;
+            left: 11px;
+            font-size: 12px;
+            font-weight: 800;
+            line-height: 13px;
+        }
+        .number {
+            position: absolute;
+            top: 11px;
+            right: 10px;
+            font-size: 12px;
+            font-weight: 800;
+            line-height: 13px;
+            letter-spacing: 1px;
+        }
+        &.s1 {
+            .member, .number {
+                color: #ffffff;
+            }
+        }
+        &.s2 {
+            .member, .number {
+                color: #4AC3E1;
+            }
+        }
+        &.s3 {
+            .member, .number {
+                color: #606C94;
+            }
+        }
+        &.s4 {
+            .member, .number {
+                color: #504215;
+            }
+        }
+    }
+    .bg {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/view/iframe/buy-nft/buy/open-box.vue

@@ -2,9 +2,19 @@
     <!-- gif -->
     <div class="box_content">
         <img :src="require('@/assets/gif/box.gif')" class="box" v-show="state.box.show" />
-        <div class="nft" v-for="item in state.nft.data" v-show="item.show">
+        <div
+            class="nft"
+            :key="index"
+            v-for="(item, index) in state.nft.data"
+            v-show="item.show">
             <div class="detail">
-                <img :src="item.imagePath" alt="" />
+                <img
+                    v-if="item.imagePath"
+                    :src="item.imagePath" />
+                <nft-card
+                    v-else
+                    :item="item">
+                </nft-card>
             </div>
             <p>{{ item.nftItemName }}</p>
         </div>
@@ -12,6 +22,7 @@
 </template>
 <script setup>
 import { reactive, onMounted, inject } from 'vue'
+import nftCard from "@/view/components/nft-card.vue"
 import router from "@/router/buy-nft.js";
 let pay_info = inject('pay_info');
 let state = reactive({

src/view/popup/tabbar-page/nft/detail.vue

@@ -14,7 +14,13 @@
                     class="img"
                     :src="NFTInfo.imagePath"
                     @click="clickNFTImg"
+                    v-if="NFTInfo.imagePath"
                 />
+                <nft-card
+                    :item="NFTInfo"
+                    :width="343"
+                    v-else>
+                </nft-card>
             </div>
             <div class="desc item" v-if="nftMetaData.description">
                 <div class="title">Description</div>
@@ -106,7 +112,7 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import router from "@/router/popup.js";
-
+import nftCard from "@/view/components/nft-card.vue"
 import {getNFTDetail} from "@/http/nft.js";
 
 let timer = ref(null);

src/view/popup/tabbar-page/nft/index.vue

@@ -2,7 +2,8 @@
   <div class="nft-page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
     <div class="content" ref="pageListDom">
       <div class="item" v-for="(item, index) in listData" :key="index" @click="clickNFT(item)">
-        <img :src="item.imagePath" class="img">
+        <img :src="item.imagePath" class="img" v-if="item.imagePath" />
+        <nft-card :item="item" :width="103" v-else></nft-card>
         <div class="name">{{ item.nftItemName }}</div>
       </div>
     </div>
@@ -20,6 +21,7 @@ import router from "@/router/popup.js";
 
 import { nftListMine } from "@/http/nft.js";
 
+import nftCard from "@/view/components/nft-card.vue"
 import joinGroupFinishDialog from "@/view/components/join-group-finish-dialog.vue";
 
 let listData = ref([]);

src/view/popup/tabbar-page/nft/transfer.vue

@@ -26,7 +26,7 @@
             <div class="footer">
                 <div class="left">
                     <div class="txt">Network fee</div>
-                    <zoom fontSize="15" width="160" v-if="feeCurrencyInfo?.currencyCode"><span class="money">{{feeAmountValue || 0}} {{ feeCurrencyInfo?.tokenSymbol }}</span></zoom>
+                    <zoom fontSize="15" width="170" v-if="feeCurrencyInfo?.currencyCode"><span class="money">{{feeAmountValue || 0}} {{ feeCurrencyInfo?.tokenSymbol }}</span></zoom>
                     <div class="tips" v-if="showTips">Insufficient balance</div>
                 </div>
                 <div class="right">