From 4d48b3df397a02b8449a3d640dcfd5e6eb67d00b Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Fri, 28 Jun 2024 14:56:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9NFT=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/marketplace/Arrows.png         | Bin 0 -> 1005 bytes
 src/assets/img/marketplace/Links web icon.png | Bin 0 -> 776 bytes
 src/components/assets/card.vue                |   5 -
 src/components/cart/index.vue                 | 112 ++++++++++++----
 src/components/common/card.vue                |  24 +++-
 src/components/common/hangingCard.vue         |  38 ++++--
 src/components/common/imgCard.vue             |  15 +--
 src/components/common/tradingCard.vue         | 123 +++++++++++++-----
 src/configs/priceCalculate.js                 |  26 +++-
 src/views/DetailView.vue                      |  34 +++--
 10 files changed, 285 insertions(+), 92 deletions(-)
 create mode 100644 src/assets/img/marketplace/Arrows.png
 create mode 100644 src/assets/img/marketplace/Links web icon.png

diff --git a/src/assets/img/marketplace/Arrows.png b/src/assets/img/marketplace/Arrows.png
new file mode 100644
index 0000000000000000000000000000000000000000..5610e7beb7fe55291c1d34648afbea3b2b5a2485
GIT binary patch
literal 1005
zcmV<J0}}j+P)<h;3K|Lk000e1NJLTq001HY000mO1^@s6bM>uc00001b5ch_0Itp)
z=>Px&r%6OXR7gv$l}~I`RTRd*@7{TBLE73eqK&vQp^0wYxpHAlh>HRS5)0zO#76wD
zVPA|Z5)&l^3NZ$ZfUyB<r|q=W1&N9V<AN9?)1e|tQ);9@W&XXHcRzDyhITq>r)k0@
zZ}H`xH|O`xch0%QJ^mejP93qBds#q;$PB(RjK2wLwKQBUV6Eqex9c(Ebe7V?01`Cj
z^I{CYyf(l)jsA-Vx2VnL;P#$FW<S9A7HlX)i1tk&+gH`iF_d}}$a&rQ3|c!n5bhjc
zZpRMUr;2EOBtXGypXk^&bx9fqv{^y{#IzAk$eAw-C0uzk$-;6#?C*{a5V%$d&GDcG
zEtGr1$jlU*@L92d`&x{9oibPFb2z;|hSpesw<1JS*4a}C(2mHxBPzwnp6*RBduUs}
zD^SxQpvM;z@;?YENS``qh8|dl>pKS+)dKP8*61d{3yyrzl)^YnkO1*VMI#QQgor7T
zd&=5sSit4GTGowFoOFgSz4{gZ>3?3E8R_dfkh?u{6T$_8$4Vuf+dG0=sP+&0w?<ij
z=SBATM6?=nz*OF`XPwXiqj3@GyyGsf{kaFpRW+=}Af$8R?ze|Hy8;LR&r)v52*P!M
zg9J|9&f(&|31)b-JGvwCd;f)s&|!^|0MZK;vO!Wns#1Y44jW4ftkJ=!gp`(6#9Q-3
zjWsnO)#3<wfPcd9gdB#JfK*EFk^m<cLFyC7l7J>1ZN*BvEJ&R-E6<CBd6MZe2*@95
z6R!nCHkKrL$)Qn?G+Y8j2s3pc<z^gRw5F^ZSW}5##+v$Ot?dy{<^A!`4M5+>>5QM6
z48-%!a94FIk`OM}=rI7Pg(<3lrA6*uhzH76Hkg{FJtEG7_*vpfD~z@`<6mEq9Kauq
z_=2lW34kfDLyNd|ZX9IVI`)*cG;V-2%Q}q5T;M?`8&6He8o%I3{x0Z@jm*jE7EJdI
zF!X2a?{?o3`YkG%K1;O1>SIw?UD51!LR-+Jk04!XqIo|L+;5~qATMQs4}uWwL7)#E
zlrl}`K<@x=SI4)0YDy4hMU5DkBQ05^_e?OeWT740u1y<qDEyVg4Ll9=Xd5<WiYU(2
z=#mi5Brw<cBy3?L9%_yu@3oKbjN?I@LE+jsZuNn#y5bXnx&S%=a}vG-+$Y(*{psCt
z&Mmv**Lta~7Vj&9k_G{6GQ>rY$3-M(&SKVsuJryrzkQE9tBq#8dk=t>Ghc*7{JPRb
bR}1w&iZNg9B=`qU00000NkvXXu0mjfoT=6g

literal 0
HcmV?d00001

diff --git a/src/assets/img/marketplace/Links web icon.png b/src/assets/img/marketplace/Links web icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..10835e8514917e0e0ae1ded58c07a4dd546ed2d2
GIT binary patch
literal 776
zcmV+j1NZ!iP)<h;3K|Lk000e1NJLTq000#L000yS1^@s6VoP>200001b5ch_0Itp)
z=>Px%!bwCyR5(wqm0yTdbri=x-{0NYS;n;qAIdF>9x5SAuqarFPzXcG-TNRx5Ya!0
zkVK8Bh`=HUT`DOoC&i+duzgSrdWwo3>aBv%AcE{AFobH`)t%Xy^R3_PpG3BH1n<ka
zKhC|M^F8ODbFRQTFv_ZmxHBAAlP?op3rG}_r`#?+V}=<9I!8e3=lw_lo(7tj3iwAI
z9`U+PVmCNHXlGEDJ8Qefo(QEe&hd$A>;w<18;@3)KLs}-ZUGWzN(ak0F1Q=?ImCAk
zoQjkpf&>JqkeLkl^vnd`*RN!7FsSBe?E<UAby8;!N*gc*;x9GI&J^euTU!;JUPx>1
zW}=CTI`K8M#>dr}_wT{!nv%7~dx4w($@B}`H;A-a2g}Yh*0+UKZabkf7eg02XW+__
z_FX9zV>WBRA1cy*7rbO*^SsiNtx);Y3H`bhGy{i5xdZua;707D71GO-EvBpeJ_-yk
zK>I@FV@p6Ax4YtN8CLSX477cu;`By-uW_%381OOV+j@p}6_(s%{F>k@q5bY~=!uVY
zHfQ(VX0L4a`y=5sJwwMfdRe{34&#TB51(^7wClM3m@n6xn_R6{*<{D+o}pc(_pwTS
zteC0r)An&qUReLe7T3;;<xVtvhW_6N%qj;eY_-^8^ZsRl?j7;+y5dDi4}r%nxuq6U
zd|<r?Q$3zf(j(w~YK+Dt;#4m!^<O3UV566vukkGQqn8yrUE?|1b4tsYf;icVqNj;k
zOl@wrD{Ao!*5lS}O`Cc4BWdKxWBP5WF<s2x?a}^t8rY6_UGJ9hyUkf!53~z@zEtQy
zA8s~TQ7B$P+92zNtn@9={XkavgHT@7#Vq{dm2G6@m76!TEUZu)c?h@_>zin^OYfAv
zz94qnJcy`zcB5ag{}+BNb3y(+JHt^nM)75G@oK%Ful@!($$N<>dUhuO0000<MNUMn
GLSTYvwRP?Q

literal 0
HcmV?d00001

diff --git a/src/components/assets/card.vue b/src/components/assets/card.vue
index b15a42a..a61f492 100644
--- a/src/components/assets/card.vue
+++ b/src/components/assets/card.vue
@@ -5,7 +5,6 @@
         <ImgCard :nftData="nftData" />
         <!-- <LazyLoadImg :src="nftData.image" :src-placeholder="placeholderImg" alt="图片"/> -->
       </div>
-      <div>{{ nftData.token_id }}</div>
       <div class="card-name">
         <div>Cotnesford park</div>
         <div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)">
@@ -224,10 +223,6 @@ onMounted(() => {
           }
         }
       }
-      img {
-        width: 100%;
-        height: 100%;
-      }
     }
     .card-name {
       display: flex;
diff --git a/src/components/cart/index.vue b/src/components/cart/index.vue
index 0c2e1df..f71e4cf 100644
--- a/src/components/cart/index.vue
+++ b/src/components/cart/index.vue
@@ -11,7 +11,7 @@
         <li class="cart-item" v-for="(item, index) in cartList" :key="index">
           <div class="cart-item-left">
             <div class="cart-item-left-img">
-              <img :src="item.nft.image" alt="">
+              <ImgCard :nftData="item.nft" />
             </div>
             <div class="cart-item-left-name">{{ item.nft.name }}</div>
           </div>
@@ -31,28 +31,33 @@
       <div v-else class="cart-not">
         <p>You have no items in your cart</p>
       </div>
-      <!-- <div class="cart-price">
+    </div>
+    <div class="cart-total-price">
+      <div class="top">
         <div class="left">Total Price</div>
+        <div class="right">{{ completePrice(cartList) }} <img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
+      </div>
+      <div class="bottom">
+        <div class="left"></div>
         <div class="right">
-          <div>0.08 <img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
           <div>≈ {{ 200 }}$</div>
         </div>
-      </div> -->
-      <div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn" @click="buyAll">Buy All</div>
-      <div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
+      </div>
     </div>
-    
+    <div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn" @click="buyAll">Buy All</div>
+    <div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
   </div>
 </template>
 
 <script setup>
 import { ref, defineEmits, onMounted, watch } from "vue"
+import ImgCard from "@/components/common/imgCard.vue"
+import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
+import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 import { useRouter } from "vue-router";
 import { useMarketplaceStore } from "@/store/marketplace"
-import {priceCalculated} from "@/configs/priceCalculate.js"
-import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
+import {priceCalculated, completePrice} from "@/configs/priceCalculate.js"
 import {createModal} from "@/utils/model.util";
-import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 const marketplaceList = useMarketplaceStore()
 import {
   apiDelCartList,
@@ -174,6 +179,7 @@ onMounted(()=> {
   width: 570px;
   // height: 100%;
   color: #BB7FFF;
+  border-radius: 30px;
   .cart-header {
     display: flex;
     align-items: center;
@@ -203,8 +209,11 @@ onMounted(()=> {
     }
   }
   .cart-content {
-    padding: 0 30px;
+    padding: 0 15px;
     .cart-not {
+      height: 183px;
+      line-height: 183px;
+      margin-top: 20px;
       text-align: center;
       margin-bottom: 30px;
       font-size: 24px;
@@ -214,12 +223,38 @@ onMounted(()=> {
       .cart-item {
         display: flex;
         justify-content: space-between;
-        margin: 15px auto;
+        width: 532px;
+        padding: 15px;
+        border-radius: 16px;
+        margin: 0 auto;
+        margin-top: 5px;
+        box-sizing: border-box;
         .cart-item-left {
           display: flex;
           .cart-item-left-img {
             width: 110px;
             height: 165px;
+            :deep(.card-img-common) {
+              .img-top {
+                width: 35px;
+                height: 12px;
+                top: 10px;
+                left: 10px;
+                font-size: 8px;
+              }
+              .img-btm {
+                bottom: 8px;
+                left: 12px;
+                >div {
+                  width: 35px;
+                  height: 12px;
+                  font-size: 8px;
+                }
+                div:nth-child(2) {
+                  margin-left: 3px;
+                }
+              }
+            }
           }
           .cart-item-left-name {
             font-family: 'Poppins';
@@ -271,21 +306,54 @@ onMounted(()=> {
             }
           }
         }
+        &:hover {
+          background: #27232d;
+        }
       }
     }
-    .cart-btn {
-      width: 100%;
-      height: 60px;
-      line-height: 60px;
+  }
+  .cart-total-price {
+    width: 494px;
+    margin: 0 auto;
+    margin-top: 63px;
+    >div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 35px;
       font-family: 'Poppins';
       font-weight: bold;
-      font-size: 30px;
-      background: #6336D7;
-      color: #fff;
-      text-align: center;
-      border-radius: 18px;
-      cursor: pointer;
+      color: #BB7FFF;
     }
+    .left {
+      font-size: 42px;
+    }
+    .right {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      img {
+        width: 27px;
+        height: 27px;
+        margin-left: 8px;
+      }
+    }
+  }
+  .cart-btn {
+    width: 494px;
+    height: 60px;
+    line-height: 60px;
+    margin: 0 auto;
+    margin-top: 10px;
+    margin-bottom: 40px;
+    font-family: 'Poppins';
+    font-weight: bold;
+    font-size: 30px;
+    background: #6336D7;
+    color: #fff;
+    text-align: center;
+    border-radius: 18px;
+    cursor: pointer;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/common/card.vue b/src/components/common/card.vue
index 8755c21..deb3a7e 100644
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@@ -2,7 +2,7 @@
   <div class="cards">
     <div class="card-top" v-if="nftData" @click="toDetail">
       <div class="card-img">
-        <LazyLoadImg :src="nftData.nft.image" :src-placeholder="placeholderImg" alt="图片" />
+        <ImgCard :nftData="nftData.nft" />
       </div>
       <div class="card-name">
         <div>Cotnesford park</div>
@@ -36,6 +36,7 @@
 <script setup>
 import { ref, toRaw, onMounted, getCurrentInstance, defineEmits } from "vue"
 import BuyDialog from "@/components/Dialogs/buyDialog.vue"
+import ImgCard from "@/components/common/imgCard.vue"
 import {priceCalculated} from "@/configs/priceCalculate.js"
 import {walletStore} from "@/store/wallet";
 import { BlockChain } from "@/components/chain/BlockChain"
@@ -134,9 +135,24 @@ onMounted(() => {
       width: 240px;
       height: 360px;
       margin: 0 auto;
-      img {
-        width: 100%;
-        height: 100%;
+      :deep(.card-img-common) {
+        .img-top {
+          width: 100px;
+          height: 30px;
+          top: 20px;
+          left: 20px;
+        }
+        .img-btm {
+          bottom: 12px;
+          left: 20px;
+          >div {
+            width: 80px;
+            height: 30px;
+          }
+          div:nth-child(2) {
+            margin-left: 8px;
+          }
+        }
       }
     }
     .card-name {
diff --git a/src/components/common/hangingCard.vue b/src/components/common/hangingCard.vue
index 336fac2..e9fc093 100644
--- a/src/components/common/hangingCard.vue
+++ b/src/components/common/hangingCard.vue
@@ -5,7 +5,7 @@
         <template  #default="{ text: nft }">
           <div class="nft">
             <div class="nft-img">
-              <img :src="nft.image" alt="">
+              <ImgCard :nftData="nft" />
             </div>
             <div class="nft-name">{{ nft.name }}</div>
           </div>
@@ -14,21 +14,21 @@
       <a-table-column title="Price" data-index="event">
         <template  #default="{ text: event }">
           <div class="price">
-            {{ event.data.buy[0].amount }}
+            {{ priceCalculated(event.data.buy[0].amount) }}
           </div>
       </template>
       </a-table-column>
       <a-table-column title="Create time" data-index="event">
         <template  #default="{ text: event }">
           <div>
-            {{ event.data.created_at }}
+            {{ showTime(event.data.created_at) }}
           </div>
       </template>
       </a-table-column>
       <a-table-column title="Expiry date" data-index="event">
         <template  #default="{ text: event }">
           <div>
-            {{ event.data.end_at }}
+            {{ showTime(event.data.end_at) }}
           </div>
       </template>
       </a-table-column>
@@ -46,6 +46,8 @@
 
 <script setup>
 import { ref } from "vue"
+import ImgCard from "@/components/common/imgCard.vue"
+import { priceCalculated, showTime } from "@/configs/priceCalculate"
 import { BlockChain } from "@/components/chain/BlockChain"
 
 const props = defineProps({
@@ -98,6 +100,10 @@ div {
                     vertical-align: middle;
                     >div {
                       text-align: center;
+                      font-family: 'Poppins';
+                      font-weight: 600;
+                      font-size: 20px;
+                      color: #F3F0FF;
                     }
                     .nft {
                       display: flex;
@@ -106,10 +112,26 @@ div {
                       .nft-img {
                         width: 213px;
                         height: 100%;
-                        // display: none;
-                        img {
-                          width: 100%;
-                          height: 100%;
+                        .card-img-common {
+                          .img-top {
+                            width: 60px;
+                            height: 20px;
+                            top: 10px;
+                            left: 10px;
+                            font-size: 14px;
+                          }
+                          .img-btm {
+                            bottom: 15px;
+                            left: 20px;
+                            >div {
+                              width: 58px;
+                              height: 20px;
+                              font-size: 12px;
+                            }
+                            div:nth-child(2) {
+                              margin-left: 8px;
+                            }
+                          }
                         }
                       }
                       .nft-name {
diff --git a/src/components/common/imgCard.vue b/src/components/common/imgCard.vue
index 42e4088..ee21715 100644
--- a/src/components/common/imgCard.vue
+++ b/src/components/common/imgCard.vue
@@ -28,6 +28,10 @@ const props = defineProps({
 <style lang="scss" scoped>
 .card-img-common {
   position: relative;
+  img {
+    width: 100%;
+    height: 100%;
+  }
   .img-top {
     position: absolute;
     display: flex;
@@ -39,7 +43,6 @@ const props = defineProps({
   }
   .img-btm {
     position: absolute;
-    // bottom: 5%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -52,23 +55,13 @@ const props = defineProps({
       box-sizing: border-box;
     }
     div:nth-child(1) {
-      // width: 66px;
-      // height: 24px;
-      // line-height: 25px;
-      // margin-right: 6px;
-      // margin-left: 30px;
       background: url('@/assets/img/marketplace/icon_wealth.png') no-repeat;
       background-size: 100% 100%;
-      // padding-left: 30px;
       box-sizing: border-box;
     }
     div:nth-child(2) {
-      // width: 66px;
-      // height: 24px;
-      // line-height: 25px;
       background: url('@/assets/img/marketplace/icon_luck .png') no-repeat;
       background-size: 100% 100%;
-      // padding-left: 40px;
       box-sizing: border-box;
     }
   }
diff --git a/src/components/common/tradingCard.vue b/src/components/common/tradingCard.vue
index dce598a..07d463a 100644
--- a/src/components/common/tradingCard.vue
+++ b/src/components/common/tradingCard.vue
@@ -5,7 +5,7 @@
         <template  #default="{ text: nft }">
           <div class="nft">
             <div class="nft-img">
-              <img :src="nft.image" alt="">
+              <ImgCard :nftData="nft" />
             </div>
             <div class="nft-name">{{ nft.name }}</div>
           </div>
@@ -22,9 +22,15 @@
         <template  #default="{ text: event }">
           <div class="price">
             <div class="nft-price">{{ event.data.details.asset[0].amount }}</div>
-            <div class="nft-img">
-              <img src="@/assets/img/marketplace/ETHicon.png" alt="">
-            </div>
+            <p>$ &nbsp; 400</p>
+          </div>
+        </template>
+      </a-table-column>
+      <a-table-column  title="" data-index="event">
+        <template  #default="{ text: event }">
+          <div class="price-icon">
+            <span>{{event}}</span>
+            <img src="@/assets/img/marketplace/ETHicon.png" alt="">
           </div>
         </template>
       </a-table-column>
@@ -38,28 +44,41 @@
       <a-table-column title="Sender" data-index="event" :width="400">
         <template  #default="{ text: event }">
           <div class="sender">
-            <div class="nft-sender">{{ event.data.details.from }}</div>
+            <div class="nft-sender">{{ sliceAddress(event.data.details.from) }}</div>
+          </div>
+        </template>
+      </a-table-column>
+      <a-table-column  title="" data-index="event">
+        <template  #default="{ text: event }">
+          <div class="from-to-icon">
+            <span>{{event}}</span>
+            <img src="@/assets/img/marketplace/Arrows.png" alt="">
           </div>
         </template>
       </a-table-column>
       <a-table-column title="recipient" data-index="event" :width="400">
         <template  #default="{ text: event }">
           <div class="recipient">
-            <div class="nft-recipient">{{ event.data.details.to }}</div>
+            <div class="nft-recipient">{{ sliceAddress(event.data.details.to) }}</div>
           </div>
         </template>
       </a-table-column>
       <a-table-column title="Date" data-index="event" :width="400">
         <template  #default="{ text: event }">
           <div class="date">
-            <div class="nft-date">{{ event.data.indexed_at }}</div>
+            <div class="nft-date">{{ showTime(event.data.indexed_at) }}</div>
           </div>
         </template>
       </a-table-column>
       <a-table-column title="Contract" data-index="nft" :width="400">
         <template  #default="{ text: nft }">
           <div class="contract">
-            <div class="nft-contract">{{ nft.meta_url }}</div>
+            <div class="nft-contract">
+              <a :href="nft.meta_url" target="_back">
+                <span>Etherscan</span>
+                <img src="@/assets/img/marketplace/Links web icon.png" alt="">
+              </a>
+            </div>
           </div>
         </template>
       </a-table-column>
@@ -69,6 +88,8 @@
 
 <script setup>
 import { ref } from "vue"
+import ImgCard from "@/components/common/imgCard.vue"
+import { sliceAddress, showTime } from "@/configs/priceCalculate"
 
 const props = defineProps({
   nftData: {
@@ -99,6 +120,7 @@ div {
                     color: #B3B5DA;
                     background: #16141b;
                     border-color: #34354e;
+                    text-align: center;
                     &::before {
                       display: none;
                     }
@@ -111,6 +133,7 @@ div {
                   td {
                     border-color: #34354e;
                     background: #16141b !important;
+                    overflow: visible !important;
                     vertical-align: middle;
                     >div {
                       text-align: center;
@@ -126,9 +149,26 @@ div {
                       .nft-img {
                         width: 213px;
                         height: 100%;
-                        img {
-                          width: 100%;
-                          height: 100%;
+                        .card-img-common {
+                          .img-top {
+                            width: 60px;
+                            height: 20px;
+                            top: 10px;
+                            left: 10px;
+                            font-size: 14px;
+                          }
+                          .img-btm {
+                            bottom: 15px;
+                            left: 20px;
+                            >div {
+                              width: 58px;
+                              height: 20px;
+                              font-size: 12px;
+                            }
+                            div:nth-child(2) {
+                              margin-left: 8px;
+                            }
+                          }
                         }
                       }
                       .nft-name {
@@ -138,36 +178,57 @@ div {
                       }
                     }
                     .status {
-                      font-family: 'Poppins';
-                      font-weight: 600;
-                      font-size: 20px;
                       color: #FFC35B;
                     }
                     .price {
-                      display: flex;
-                      align-items: center;
-                      justify-content: center;
-                      width: 140px;
+                      min-width: 80px;
+                      color: #BB7FFF;
                       .nft-price {
                         font-family: 'Anton';
                         font-weight: 400;
                         font-size: 42px;
-                        color: #BB7FFF;
                       }
-                      .nft-img {
-                        width: 43px;
-                        // height: 43px;
-                        margin-left: 20px;
-                        img {
-                          width: 100%;
-                          height: 100%;
-                        }
+                      p {
+                        font-size: 24px;
                       }
                     }
-                    .quantity {
-                      width: 60px;
-                      .nft-quantity {
-
+                    .price-icon {
+                      width: 43px;
+                      span {
+                        display: none;
+                      }
+                      img {
+                        width: 43px;
+                        height: 43px;
+                      }
+                    }
+                    .from-to-icon {
+                      width: 34px;
+                      span {
+                        display: none;
+                      }
+                      img {
+                        width: 34px;
+                        height: 16px;
+                      }
+                    }
+                    .nft-date {
+                      width: 120px;
+                    }
+                    .nft-contract {
+                      a {
+                        display: flex;
+                        align-items: end;
+                        color: #9950FD;
+                        font-size: 15px;
+                        span {
+                          border-bottom: 2px solid #9950FD;
+                        }
+                        img {
+                          width: 21px;
+                          height: 20px;
+                          margin-left: 16px;
+                        }
                       }
                     }
                   }
diff --git a/src/configs/priceCalculate.js b/src/configs/priceCalculate.js
index 0159e1e..3483f14 100644
--- a/src/configs/priceCalculate.js
+++ b/src/configs/priceCalculate.js
@@ -3,9 +3,27 @@ import { ethers } from "ethers"
 
 // 计算价格精度
 export const priceCalculated = (price) => {
-  return ethers.utils.formatUnits(price, 18)
+  let str = Number(ethers.utils.formatUnits(price, 18)).toFixed(5)
+  return str
 }
 
+// 计算购买总价格
+export const completePrice = (cartList) => {
+  let str = cartList[0].event.data.buy[0].amount
+  console.log(str)
+  return 0.001
+}
+
+// 处理地址
+export const sliceAddress = (address) => {
+  if (!address) return "-";
+  if (address.length >= 10) {
+    return `${address.substring(0, 6)}......${address.slice(-4)}`;
+  }
+  return address;
+}
+
+// 处理时间
 export const timeFormat = (value) => {
   return moment(value).format('YYYY/MM/DD HH:mm')
 }
@@ -20,4 +38,10 @@ export const feePrice = (price) => {
 
 export const totalPrice = (price) => {
   return Number(Number(price) + Number(price) * 0.02 + Number(price) * 0.0005)
+}
+
+// 处理时间回显
+export const showTime = (time) => {
+  let str = time.split('.')
+  return str[0]
 }
\ No newline at end of file
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 58b34c7..545e0d3 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -5,7 +5,8 @@
       <div class="content">
         <div class="top-left">
           <div class="top-left-img">
-            <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" />
+            <!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
+            <ImgCard :nftData="detailData.nft" />
           </div>
         </div>
         <div class="top-right">
@@ -93,7 +94,7 @@
         <div class="btm-left">
           <h2>Property</h2>
           <div class="btm-detail">
-            <li v-for="(item, val, index) in detailData.detail" :key="index">
+            <li v-for="(item, val, index) in nftAbilities" :key="index">
               <div v-show="val == 'quality'">
                 <h5>Tier</h5>
                 <p>{{ item }}</p>
@@ -142,6 +143,7 @@
 <script setup>
 import { ref, toRaw, onMounted } from "vue"
 import { useRouter } from "vue-router";
+import ImgCard from "@/components/common/imgCard.vue"
 import StarTimer from "@/components/common/starTimer.vue"
 import SellDialog from "@/components/Dialogs/sellDialog.vue"
 import { nftDetail, apiGetPrice } from "@/utils/marketplace"
@@ -244,11 +246,6 @@ const sliceAddress = (address) => {
   return address;
 }
 
-// 处理货币
-const priceWei = (price) => {
-  return priceCalculated(price)
-}
-
 // 获取地板价
 const getFloorPrice = async () => {
   const data = {
@@ -323,9 +320,26 @@ onMounted(() => {
         width: 453px;
         .top-left-img {
           height: 678px;
-          img {
-            width: 100%;
-            height: 100%;
+          :deep(.card-img-common) {
+            .img-top {
+              width: 120px;
+              height: 35px;
+              top: 20px;
+              left: 20px;
+              font-size: 18px;
+            }
+            .img-btm {
+              bottom: 35px;
+              left: 65px;
+              >div {
+                width: 120px;
+                height: 43px;
+                font-size: 18px;
+              }
+              div:nth-child(2) {
+                margin-left: 15px;
+              }
+            }
           }
         }
       }