diff --git a/src/assets/img/marketplace/Arrows.png b/src/assets/img/marketplace/Arrows.png
new file mode 100644
index 0000000..5610e7b
Binary files /dev/null and b/src/assets/img/marketplace/Arrows.png differ
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 0000000..10835e8
Binary files /dev/null and b/src/assets/img/marketplace/Links web icon.png differ
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;
+              }
+            }
           }
         }
       }