From 8104042a4c7e37eb1e6070a66671205ed05ecc9e Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Wed, 3 Jul 2024 17:28:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AF=A6=E6=83=85=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/assets/assetsHeader.vue |   1 +
 src/components/common/card.vue         |   2 +-
 src/views/DetailView.vue               | 297 +++++++++++++------------
 3 files changed, 154 insertions(+), 146 deletions(-)

diff --git a/src/components/assets/assetsHeader.vue b/src/components/assets/assetsHeader.vue
index d603a24..a3ed09f 100644
--- a/src/components/assets/assetsHeader.vue
+++ b/src/components/assets/assetsHeader.vue
@@ -47,6 +47,7 @@ const imageUrl = computed(() => {
       height: 173.8px;
       margin-right: 25px;
       border-radius: 16px;
+      overflow: hidden;
       img {
         width: 100%;
         height: 100%;
diff --git a/src/components/common/card.vue b/src/components/common/card.vue
index d21f4ae..6c3f020 100644
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@@ -254,7 +254,7 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 5px;
+    padding-bottom: 8px;
     >div {
       height: 57px;
       line-height: 57px;
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 9756e9a..037a544 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -1,152 +1,154 @@
 <template>
   <div class="detail">
-    <div class="detail-bg"></div>
-    <div v-if="detailData" class="detail-content">
-      <div class="content">
-        <div class="top-left">
-          <div class="top-left-img">
-            <!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
-            <ImgCard :nftData="detailData.nft" />
-            <!-- <img src="" alt=""> -->
-          </div>
-        </div>
-        <div class="top-right">
-          <h2>{{ detailData.nft.name }}</h2>
-          <div class="top-right-owner">
-            <div>Owner:</div>
-            <div class="address">{{ detailData.nft.owner_address }}</div>
-          </div>
-          <div class="top-right-price" v-if="detailData.event">
-            <li>
-              <div>Price</div>
-              <div class="time">
-                <img src="@/assets/img/marketplace/time.png" alt="图片">
-                <div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.event.data.end_at" /></div>
-              </div>
-            </li>
-            <li>
-              <div class="price">
-                <span class="bold">{{ price }}&nbsp;</span>
-                <img :src="icon" alt="ICON">
-                <span>( $ {{ usd }} )</span>
-              </div>
-            </li>
-          </div>
-          <div class="top-right-btns">
-            <!-- 
-            1、添加购物车
-            2、移除购物车
-            3、购买
-            4、
-            -->
-            <div v-if="(myAddress != detailData.nft.owner_address) && detailData.event">
-              <div class="buy" @click="localWalletStore.token == '' ? cardLogin() : buyNow()">Buy Now</div>
-              <div class="add" v-if="detailData.in_shopcart == 0" @click="localWalletStore.token == '' ? cardLogin() : addCart()">
-                <span>Add to cart </span>
-                <img src="@/assets/img/marketplace/Add_shopping_cart.png" alt="">
-              </div>
-              <div class="remove" v-if="detailData.in_shopcart == 1" @click="localWalletStore.token == '' ? cardLogin() : clearCart()">
-                <span>Remove from cart</span>
-                <img src="@/assets/img/marketplace/Move_out.png" alt="">
-              </div>
-            </div>
-            <!--
-            1、上架
-            2、下架
-            3、使用
-            -->
-            <div v-else>
-              <div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0">List</div>
-              <div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Cancel listing</div>
-              <div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 1">Convert</div>
-              <div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 0">Redeem</div>
+    <div class="bg-content">
+      <div class="detail-bg"></div>
+      <div v-if="detailData" class="detail-content">
+        <div class="content">
+          <div class="top-left">
+            <div class="top-left-img">
+              <!-- <LazyLoadImg :src="detailData.nft.image" :src-placeholder="placeholderImg" alt="" /> -->
+              <ImgCard :nftData="detailData.nft" />
+              <!-- <img src="" alt=""> -->
             </div>
           </div>
-          <div class="info">
-            <h2>Info</h2>
-            <li>
-              <div>Contract address</div>
-              <div class="contract-address">
-                <div>{{ detailData.nft.contract_address}}</div>
-                <span><a :href="contractBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
-              </div>
-            </li>
-            <li>
-              <div>Token ID</div>
-              <div>{{ detailData.nft.token_id }}</div>
-            </li>
-            <li>
-              <div>Blockchain</div>
-              <div>lmmutascan</div>
-            </li>
-            <li>
-              <div>Metadata</div>
-              <div><a :href="detailData.nft.meta_url" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
-            </li>
-            <li>
-              <div>Royalties</div>
-              <div>2%</div>
-            </li>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div v-if="detailData.nft.type == 1" class="btm-left">
-          <h2>Property</h2>
-          <div class="btm-detail">
-            <li v-for="(item, val, index) in nftAbilities" :key="index">
-              <div v-show="val == 'quality'">
-                <h5>Tier</h5>
-                <p>{{ item }}</p>
-              </div>
-              <div v-show="val == 'max_mining_days'">
-                <h5>Active Days</h5>
-                <p>{{ item }}</p>
-              </div>
-              <div v-show="val == 'wealth'">
-                <h5>Wealth Value</h5>
-                <p>{{ parseInt(item) }}</p>
-              </div>
-              <div v-show="val == 'lucky'">
-                <h5>Luck Value</h5>
-                <p>{{ parseInt(item) }}</p>
-              </div>
-              <div v-show="val == 'hp'">
-                <h5>HP</h5>
-                <p>{{ parseInt(item) }}</p>
-              </div>
-              <div v-show="val == 'atk'">
-                <h5>Attack</h5>
-                <p>{{ parseInt(item) }}</p>
-              </div>
-              <div v-show="val == 'def'">
-                <h5>Defense</h5>
-                <p>{{ Number(item).toFixed(2) }}%</p>
-              </div>
-              <div v-show="val == 'block'">
-                <h5>Block Rate</h5>
-                <p>{{ Number(item).toFixed(2) }}%</p>
-              </div>
-              <div v-show="val == 'crit'">
-                <h5>Crit Rate</h5>
-                <p>{{ Number(item).toFixed(2) }}%</p>
-              </div>
-            </li>
-          </div>
-        </div>
-        <div v-else class="btm-left">
-          <h2>Property</h2>
-          <div class="gold-content">
-            <div class="left">
-              <h4>Gold coins</h4>
-              <p>1000</p>
+          <div class="top-right">
+            <h2>{{ detailData.nft.name }}</h2>
+            <div class="top-right-owner">
+              <div>Owner:</div>
+              <div class="address">{{ detailData.nft.owner_address }}</div>
             </div>
-            <div class="right">
-              <div class="right-img">
-                <img src="@/assets/img/marketplace/Icon_!.png" alt="">
+            <div class="top-right-price" v-if="detailData.event">
+              <li>
+                <div>Price</div>
+                <div class="time">
+                  <img src="@/assets/img/marketplace/time.png" alt="图片">
+                  <div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.event.data.end_at" /></div>
+                </div>
+              </li>
+              <li>
+                <div class="price">
+                  <span class="bold">{{ price }}&nbsp;</span>
+                  <img :src="icon" alt="ICON">
+                  <span>( $ {{ usd }} )</span>
+                </div>
+              </li>
+            </div>
+            <div class="top-right-btns">
+              <!-- 
+              1、添加购物车
+              2、移除购物车
+              3、购买
+              4、
+              -->
+              <div v-if="(myAddress != detailData.nft.owner_address) && detailData.event">
+                <div class="buy" @click="localWalletStore.token == '' ? cardLogin() : buyNow()">Buy Now</div>
+                <div class="add" v-if="detailData.in_shopcart == 0" @click="localWalletStore.token == '' ? cardLogin() : addCart()">
+                  <span>Add to cart </span>
+                  <img src="@/assets/img/marketplace/Add_shopping_cart.png" alt="">
+                </div>
+                <div class="remove" v-if="detailData.in_shopcart == 1" @click="localWalletStore.token == '' ? cardLogin() : clearCart()">
+                  <span>Remove from cart</span>
+                  <img src="@/assets/img/marketplace/Move_out.png" alt="">
+                </div>
               </div>
-              <div class="right-tips">
-                It can be enabled on your home page and you will receive 100,000 gold coins in counter Fire.
+              <!--
+              1、上架
+              2、下架
+              3、使用
+              -->
+              <div v-else>
+                <div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0">List</div>
+                <div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Cancel listing</div>
+                <div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 1">Convert</div>
+                <div class="redeem" @click="lockToGame" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 0">Redeem</div>
+              </div>
+            </div>
+            <div class="info">
+              <h2>Info</h2>
+              <li>
+                <div>Contract address</div>
+                <div class="contract-address">
+                  <div>{{ detailData.nft.contract_address}}</div>
+                  <span><a :href="contractBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
+                </div>
+              </li>
+              <li>
+                <div>Token ID</div>
+                <div>{{ detailData.nft.token_id }}</div>
+              </li>
+              <li>
+                <div>Blockchain</div>
+                <div>lmmutascan</div>
+              </li>
+              <li>
+                <div>Metadata</div>
+                <div><a :href="detailData.nft.meta_url" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
+              </li>
+              <li>
+                <div>Royalties</div>
+                <div>2%</div>
+              </li>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <div v-if="detailData.nft.type == 1" class="btm-left">
+            <h2>Property</h2>
+            <div class="btm-detail">
+              <li v-for="(item, val, index) in nftAbilities" :key="index">
+                <div v-show="val == 'quality'">
+                  <h5>Tier</h5>
+                  <p>{{ item }}</p>
+                </div>
+                <div v-show="val == 'max_mining_days'">
+                  <h5>Active Days</h5>
+                  <p>{{ item }}</p>
+                </div>
+                <div v-show="val == 'wealth'">
+                  <h5>Wealth Value</h5>
+                  <p>{{ parseInt(item) }}</p>
+                </div>
+                <div v-show="val == 'lucky'">
+                  <h5>Luck Value</h5>
+                  <p>{{ parseInt(item) }}</p>
+                </div>
+                <div v-show="val == 'hp'">
+                  <h5>HP</h5>
+                  <p>{{ parseInt(item) }}</p>
+                </div>
+                <div v-show="val == 'atk'">
+                  <h5>Attack</h5>
+                  <p>{{ parseInt(item) }}</p>
+                </div>
+                <div v-show="val == 'def'">
+                  <h5>Defense</h5>
+                  <p>{{ Number(item).toFixed(2) }}%</p>
+                </div>
+                <div v-show="val == 'block'">
+                  <h5>Block Rate</h5>
+                  <p>{{ Number(item).toFixed(2) }}%</p>
+                </div>
+                <div v-show="val == 'crit'">
+                  <h5>Crit Rate</h5>
+                  <p>{{ Number(item).toFixed(2) }}%</p>
+                </div>
+              </li>
+            </div>
+          </div>
+          <div v-else class="btm-left">
+            <h2>Property</h2>
+            <div class="gold-content">
+              <div class="left">
+                <h4>Gold coins</h4>
+                <p>1000</p>
+              </div>
+              <div class="right">
+                <div class="right-img">
+                  <img src="@/assets/img/marketplace/Icon_!.png" alt="">
+                </div>
+                <div class="right-tips">
+                  It can be enabled on your home page and you will receive 100,000 gold coins in counter Fire.
+                </div>
               </div>
             </div>
           </div>
@@ -407,8 +409,13 @@ onMounted(() => {
 .detail {
   width: 100%;
   box-sizing: border-box;
-  background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
-  background-size: 100% 100%;
+  background: #000;
+  .bg-content {
+    width: 100%;
+    height: 100%;
+    background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
+    background-size: 100% 100%;
+  }
   .detail-bg {
     width: 100%;
     height: 84px;