diff --git a/src/components/assets/assetsHeader.vue b/src/components/assets/assetsHeader.vue
index 5db310c..f23a039 100644
--- a/src/components/assets/assetsHeader.vue
+++ b/src/components/assets/assetsHeader.vue
@@ -2280,7 +2280,7 @@ onMounted(() => {
           }
         }
         .conform-btn {
-          width: 427px;
+          width: 327px;
           height: 81px;
           display: flex;
           align-items: center;
@@ -2297,8 +2297,8 @@ onMounted(() => {
           cursor: pointer;
           span {
             display: inline-block;
-            width: 100px;
-            text-align: right;
+            // width: 100px;
+            // text-align: right;
           }
           img {
             width: 54px;
diff --git a/src/components/common/card.vue b/src/components/common/card.vue
index d382d06..2c550b4 100644
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@@ -7,6 +7,7 @@
       <div class="card-name">
         <div>
           <span v-if="nftData.nft.type == 1">GENESIS HERO</span>
+          <span v-if="nftData.nft.type == 12">Legacy Heroes</span>
           <span v-if="nftData.nft.type == 11">GOLD CARD</span>
         </div>
         <div>{{nftData.nft.name}}</div>
@@ -262,6 +263,9 @@ onMounted(() => {
       justify-content: space-between;
       align-items: center;
       margin: 20px 0;
+      font-family: "Poppins";
+      font-weight: 600;
+      font-size: 20px;
     }
     .card-price {
       display: flex;
diff --git a/src/configs/item.json b/src/configs/item.json
index 32e4f93..e82d3cd 100644
--- a/src/configs/item.json
+++ b/src/configs/item.json
@@ -1,29 +1,29 @@
 {
-  "1": {
+  "2": {
     "id": 1,
     "name": "Tier1",
     "type": 31,
     "sub_type": 1
   },
-  "2": {
+  "3": {
     "id": 2,
     "name": "Tier2",
     "type": 31,
     "sub_type": 1
   },
-  "3": {
+  "4": {
     "id": 3,
     "name": "Tier3",
     "type": 31,
     "sub_type": 1
   },
-  "4": {
+  "5": {
     "id": 4,
     "name": "Tier4",
     "type": 31,
     "sub_type": 1
   },
-  "5": {
+  "6": {
     "id": 5,
     "name": "Tier5",
     "type": 31,
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 0849e1d..d83322f 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -9,19 +9,118 @@
               <ImgCard v-if="detailData.nft.token_id" :nftData="detailData.nft" />
               <ImgCardTow v-else class="mint-hero" :nftData="detailData.nft" />
             </div>
+            <div v-if="detailData.nft.type == 1 || detailData.nft.type == 12" class="btm-left">
+              <h2>Property</h2>
+              <div class="btm-detail">
+                <li>
+                  <div>
+                    <h5>Tier</h5>
+                    <p>{{ nftAbilities['quality'] }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Active Days</h5>
+                    <p>{{ nftAbilities['max_mining_days'] }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Wealth Value</h5>
+                    <p>{{ parseInt(nftAbilities['wealth']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Luck Value</h5>
+                    <p>{{ parseInt(nftAbilities['lucky']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>HP</h5>
+                    <p>{{ parseInt(nftAbilities['hp']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Attack</h5>
+                    <p>{{ parseInt(nftAbilities['atk']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Defense</h5>
+                    <p>{{ Number(nftAbilities['def']).toFixed(2) }}%</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Block Rate</h5>
+                    <p>{{ Number(nftAbilities['block']).toFixed(2) }}%</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Crit Rate</h5>
+                    <p>{{ Number(nftAbilities['crit']).toFixed(2) }}%</p>
+                  </div>
+                </li>
+                <li v-if="nftAbilities['chip_slots']">
+                  <div>
+                    <h5>Chip Slots</h5>
+                    <p>{{ nftAbilities['chip_slots'] }}</p>
+                  </div>
+                </li>
+                <li v-if="nftAbilities['combat_ability_l']">
+                  <div>
+                    <h5 class="min-size">Combat Ability I</h5>
+                    <p>{{ nftAbilities['combat_ability_l'] }}</p>
+                  </div>
+                </li>
+                <li v-if="nftAbilities['combat_ability_2']">
+                  <div>
+                    <h5 class="min-size">Combat Ability II</h5>
+                    <p>{{ nftAbilities['combat_ability_2'] }}</p>
+                  </div>
+                </li>
+              </div>
+            </div>
+            <div
+              v-else-if="detailData.nft.item_id == 10017 || detailData.nft.item_id == 10018"
+              class="btm-left"
+            >
+              <h2>Property</h2>
+              <div class="gold-content">
+                <div class="left">
+                  <h4>Gold Amount</h4>
+                  <p>{{ detailData.nft.detail.gold_coins }}</p>
+                </div>
+                <div class="right">
+                  <div class="right-img">
+                    <img src="@/assets/img/marketplace/Icon_!.png" alt />
+                  </div>
+                  <div
+                    class="right-tips"
+                  >A Gold Card is equivalent to 100,000 Gold. Once redeemed, 100,000 Gold will be credited to your Counter Fire game account.</div>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="top-right">
             <h2 v-if="detailData.nft.type == 13">Founder's Tag</h2>
             <h2 v-else>{{ detailData.nft.name }}</h2>
             <div class="top-right-owner">
               <div>Owner:</div>
-              <div class="address">{{ detailData.nft.owner_address ? detailData.nft.owner_address : myAddress }}</div>
+              <div
+                class="address"
+              >{{ detailData.nft.owner_address ? detailData.nft.owner_address : myAddress }}</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="img">
+                  <img src="@/assets/img/marketplace/time.png" alt="img" />
                   <!-- <div>Time remaining: &nbsp;<StarTimer :endAt="detailData.event.data.end_at" /></div> -->
                   <div>(UTC)End Time: &nbsp;{{detailData.event.data.end_at}}</div>
                 </div>
@@ -29,28 +128,40 @@
               <li>
                 <div class="price">
                   <span class="bold">{{ price }}&nbsp;</span>
-                  <img :src="icon" alt="ICON">
+                  <img :src="icon" alt="ICON" />
                   <span>( $ {{ usd }} )</span>
                 </div>
               </li>
             </div>
-            <div class="back-time" v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
+            <div
+              class="back-time"
+              v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()"
+            >
               <div>
-                <img src="@/assets/img/marketplace/time.png" alt="">
-                <span>Time remaining :  &nbsp;
+                <img src="@/assets/img/marketplace/time.png" alt />
+                <span>
+                  Time remaining : &nbsp;
                   {{ timeStaking(detailData.nft.last_lock_time)[0] }}d:
                   {{ timeStaking(detailData.nft.last_lock_time)[1] }}h:
                   {{ timeStaking(detailData.nft.last_lock_time)[2] }}m
                 </span>
               </div>
               <div>
-                <span class="expected" v-if="detailData.nft.type == 1 || detailData.nft.type == 12">+{{contribution(detailData.nft.detail.quality, detailData.nft.type)}}/d</span>
-                <span class="expected" v-if="detailData.nft.type == 13">+{{contribution(detailData.nft.quality, detailData.nft.type)}}/d</span>
-                <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+                <span
+                  class="expected"
+                  v-if="detailData.nft.type == 1 || detailData.nft.type == 12"
+                >+{{contribution(detailData.nft.detail.quality, detailData.nft.type)}}/d</span>
+                <span
+                  class="expected"
+                  v-if="detailData.nft.type == 13"
+                >+{{contribution(detailData.nft.quality, detailData.nft.type)}}/d</span>
+                <img src="@/assets/img/marketplace/totalContribution.png" alt />
               </div>
             </div>
             <div class="top-right-btns">
-              <div v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
+              <div
+                v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()"
+              >
                 <div class="cancel" v-if="detailData.nft?.status == 1">
                   <span>Loading</span>
                 </div>
@@ -58,7 +169,9 @@
                   <span @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Withdraw</span>
                 </div>
               </div>
-              <div v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()">
+              <div
+                v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()"
+              >
                 <div class="mint" @click="mintHero">Mint</div>
               </div>
               <!-- 
@@ -67,16 +180,28 @@
               3、购买
               4、
               -->
-              
+
               <div v-if="myAddress != detailData.nft.owner_address">
-                <div v-if="detailData.event != null" class="buy" @click="localWalletStore.token == '' ? cardLogin() : buyNow()">Buy Now</div>
-                <div class="add" v-if="detailData.event != null && 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
+                  v-if="detailData.event != null"
+                  class="buy"
+                  @click="localWalletStore.token == '' ? cardLogin() : buyNow()"
+                >Buy Now</div>
+                <div
+                  class="add"
+                  v-if="detailData.event != null && 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()">
+                <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="">
+                  <img src="@/assets/img/marketplace/Move_out.png" alt />
                 </div>
               </div>
               <!--
@@ -85,22 +210,34 @@
               3、使用
               -->
               <div v-if="myAddress == detailData.nft.owner_address && detailData.nft?.status != 1">
-                <div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0 && detailData.nft.type != 13">List</div>
+                <div
+                  class="sell"
+                  @click="beginSell"
+                  v-if="detailData.nft.on_sale == 0 && detailData.nft.type != 13"
+                >List</div>
                 <div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Delist</div>
-                <div class="redeem" v-if="detailData.nft.on_sale == 0 && (detailData.nft.type == 1 || detailData.nft.type == 12)" @click="lockToGame('convert')">
+                <div
+                  class="redeem"
+                  v-if="detailData.nft.on_sale == 0 && (detailData.nft.type == 1 || detailData.nft.type == 12)"
+                  @click="lockToGame('convert')"
+                >
                   <span>Stake</span>
                 </div>
                 <div class="redeem" v-else-if="detailData.nft.type == 13">
                   <span v-if="detailData.nft?.status == 1" @click="lockToGame('founder')">Loading</span>
                   <span v-else @click="lockToGame('founder')">Stake</span>
                 </div>
-                <div class="redeem" @click="lockToGame('redeem')" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 11">Redeem</div>
+                <div
+                  class="redeem"
+                  @click="lockToGame('redeem')"
+                  v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 11"
+                >Redeem</div>
               </div>
               <!-- <div v-else-if="detailData.nft?.status == 1">
                 <div class="cancel">
                   <span>Loading</span>
                 </div>
-              </div> -->
+              </div>-->
             </div>
             <div class="info">
               <h2>Info</h2>
@@ -108,14 +245,27 @@
                 <div>Contract address</div>
                 <div class="contract-address">
                   <div>{{ detailData.nft.contract_address}}</div>
-                  <span v-if="detailData.nft.type != 13"><a :href="contractBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
-                  <span v-else><a :href="founderBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
+                  <span v-if="detailData.nft.type != 13">
+                    <a
+                      :href="contractBlankUrl"
+                      target="_blank"
+                    >{{ sliceAddress(detailData.nft.contract_address) }}</a>
+                  </span>
+                  <span v-else>
+                    <a
+                      :href="founderBlankUrl"
+                      target="_blank"
+                    >{{ sliceAddress(detailData.nft.contract_address) }}</a>
+                  </span>
                 </div>
               </li>
               <li>
                 <div>Token ID</div>
                 <div>
-                  <a :href="contractTokenUrl" target="_blank">{{ detailData.nft.token_id ? detailData.nft.token_id : '-' }}</a>
+                  <a
+                    :href="contractTokenUrl"
+                    target="_blank"
+                  >{{ detailData.nft.token_id ? detailData.nft.token_id : '-' }}</a>
                 </div>
               </li>
               <li>
@@ -124,8 +274,18 @@
               </li>
               <li>
                 <div>Metadata</div>
-                <div v-if="detailData.nft.type != 13"><a :href="detailData.nft.meta_url" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
-                <div v-else><a :href="founderBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
+                <div v-if="detailData.nft.type != 13">
+                  <a
+                    :href="detailData.nft.meta_url"
+                    target="_blank"
+                  >{{ sliceAddress(detailData.nft.meta_url) }}</a>
+                </div>
+                <div v-else>
+                  <a
+                    :href="founderBlankUrl"
+                    target="_blank"
+                  >{{ sliceAddress(detailData.nft.meta_url) }}</a>
+                </div>
               </li>
               <li>
                 <div>Royalties</div>
@@ -140,188 +300,101 @@
             </div>
           </div>
         </div>
-        <div class="content">
-          <div v-if="detailData.nft.type == 1 || detailData.nft.type == 12" class="btm-left">
-            <h2>Property</h2>
-            <div class="btm-detail">
-              <li>
-                <div>
-                  <h5>Tier</h5>
-                  <p>{{ nftAbilities['quality'] }}</p>
-                </div>
-              </li>
-              <li>
-                <div>
-                  <h5>Active Days</h5>
-                  <p>{{ nftAbilities['max_mining_days'] }}</p>
-                </div>
-              </li>
-              <li>
-                <div>
-                  <h5>Wealth Value</h5>
-                  <p>{{ parseInt(nftAbilities['wealth']) }}</p>
-                </div>
-              </li>
-              <li>
-                <div >
-                  <h5>Luck Value</h5>
-                  <p>{{ parseInt(nftAbilities['lucky']) }}</p>
-                </div>
-              </li>
-              <li>
-                <div>
-                  <h5>HP</h5>
-                  <p>{{ parseInt(nftAbilities['hp']) }}</p>
-                </div>
-              </li>
-              <li>
-                <div>
-                  <h5>Attack</h5>
-                  <p>{{ parseInt(nftAbilities['atk']) }}</p>
-                </div>
-              </li>
-              <li>
-                <div>
-                  <h5>Defense</h5>
-                  <p>{{ Number(nftAbilities['def']).toFixed(2) }}%</p>
-                </div>
-              </li>
-              <li>
-                <div>
-                  <h5>Block Rate</h5>
-                  <p>{{ Number(nftAbilities['block']).toFixed(2) }}%</p>
-                </div>
-              </li>
-              <li>
-                <div>
-                  <h5>Crit Rate</h5>
-                  <p>{{ Number(nftAbilities['crit']).toFixed(2) }}%</p>
-                </div>
-              </li>
-              <li v-if="nftAbilities['chip_slots']">
-                <div>
-                  <h5>Chip Slots</h5>
-                  <p>{{ nftAbilities['chip_slots'] }}</p>
-                </div>
-              </li>
-              <li v-if="nftAbilities['combat_ability_l']">
-                <div>
-                  <h5 class="min-size">Combat Ability I</h5>
-                  <p>{{ nftAbilities['combat_ability_l'] }}</p>
-                </div>
-              </li>
-              <li v-if="nftAbilities['combat_ability_2']">
-                <div>
-                  <h5 class="min-size">Combat Ability II</h5>
-                  <p>{{ nftAbilities['combat_ability_2'] }}</p>
-                </div>
-              </li>
-            </div>
-          </div>
-          <div v-else-if="detailData.nft.item_id == 10017 || detailData.nft.item_id == 10018" class="btm-left">
-            <h2>Property</h2>
-            <div class="gold-content">
-              <div class="left">
-                <h4>Gold Amount</h4>
-                <p>{{ detailData.nft.detail.gold_coins }}</p>
-              </div>
-              <div class="right">
-                <div class="right-img">
-                  <img src="@/assets/img/marketplace/Icon_!.png" alt="">
-                </div>
-                <div class="right-tips">
-                  A Gold Card is equivalent to 100,000 Gold. Once redeemed, 100,000 Gold will be credited to your Counter Fire game account.
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <Footer />
-    <BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="buyDataArr"  @handleClose="BuyHandleClose" />
-    <SellDialog v-if="detailData" :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="detailData.nft" @handleClose="sellHandleClose" />
+    <BuyDialog
+      :buyDialogVisible="buyDialogVisible"
+      :buyDataArr="buyDataArr"
+      @handleClose="BuyHandleClose"
+    />
+    <SellDialog
+      v-if="detailData"
+      :sellDialogVisible="sellDialogVisible"
+      :floorPrice="floorPrice"
+      :sellDataArr="detailData.nft"
+      @handleClose="sellHandleClose"
+    />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
   </div>
 </template>
 
 <script setup>
-import { ref, toRefs, toRaw, onMounted , inject} from "vue"
-const message = inject('$message')
-import { useRouter, useRoute } from "vue-router";
-import BuyDialog from "@/components/Dialogs/buyDialog.vue"
-import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
-import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
-import ImgCard from "@/components/common/imgCard.vue"
-import ImgCardTow from "@/components/assets/imgs.vue"
-import StarTimer from "@/components/common/starTimer.vue"
-import SellDialog from "@/components/Dialogs/sellDialog.vue"
-import Footer from "@/components/common/footer.vue"
-import { nftDetail, apiGetPrice, apiTxHash } from "@/utils/marketplace"
-import {priceCalculated} from "@/configs/priceCalculate.js"
-import { BlockChain } from "@/components/chain/BlockChain"
+import {ref, toRefs, toRaw, onMounted, inject} from "vue";
+const message = inject("$message");
+import {useRouter, useRoute} from "vue-router";
+import BuyDialog from "@/components/Dialogs/buyDialog.vue";
+import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue";
+import ImgCard from "@/components/common/imgCard.vue";
+import ImgCardTow from "@/components/assets/imgs.vue";
+import StarTimer from "@/components/common/starTimer.vue";
+import SellDialog from "@/components/Dialogs/sellDialog.vue";
+import Footer from "@/components/common/footer.vue";
+import {nftDetail, apiGetPrice, apiTxHash} from "@/utils/marketplace";
+import {priceCalculated} from "@/configs/priceCalculate.js";
+import {BlockChain} from "@/components/chain/BlockChain";
 import {walletStore} from "@/store/wallet";
-import { useMarketplaceStore } from "@/store/marketplace"
-import LazyLoadImg from "@/components/lazyloadimg"
-import {formatPrice} from "@/components/chain/utils"
+import {useMarketplaceStore} from "@/store/marketplace";
+import LazyLoadImg from "@/components/lazyloadimg";
+import {formatPrice} from "@/components/chain/utils";
 import {createModal} from "@/utils/model.util";
-import { contribution, timeStaking } from "@/configs/priceCalculate"
+import {contribution, timeStaking} from "@/configs/priceCalculate";
 const router = useRouter();
 const route = useRoute();
-const localWalletStore = walletStore()
-const marketplaceList = useMarketplaceStore()
+const localWalletStore = walletStore();
+const marketplaceList = useMarketplaceStore();
 const props = defineProps({
   address: String,
-  tokenid: String
-})
-import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
-const detailData = ref(null)
-const assetsDetailData = ref(null)
-const myAddress = localWalletStore.address
-const contractBlankUrl = ref()
-const founderBlankUrl = ref()
-const contractTokenUrl = ref()
-const nftAbilities = ref()
-const icon = ref('')
-const usd = ref('')
-const price = ref('')
-const loadingDialogVisible = ref(false)
-const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS)
-const FOUNDER_ADDRESS = ref(import.meta.env.VUE_APP_FOUNDER_ADDRESS)
+  tokenid: String,
+});
+import placeholderImg from "@/assets/img/marketplace/GenesisHeroes_NFT.png";
+const detailData = ref(null);
+const assetsDetailData = ref(null);
+const myAddress = localWalletStore.address;
+const contractBlankUrl = ref();
+const founderBlankUrl = ref();
+const contractTokenUrl = ref();
+const nftAbilities = ref();
+const icon = ref("");
+const usd = ref("");
+const price = ref("");
+const loadingDialogVisible = ref(false);
+const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS);
+const FOUNDER_ADDRESS = ref(import.meta.env.VUE_APP_FOUNDER_ADDRESS);
 
 // 登录
 const cardLogin = async () => {
-  await new BlockChain().connect()
-}
+  await new BlockChain().connect();
+};
 
 // 购买
-const buyDialogVisible = ref(false)
-const buyDataArr = ref([])
+const buyDialogVisible = ref(false);
+const buyDataArr = ref([]);
 const buyNow = async () => {
-  detailData.value['icon'] = icon.value
-  detailData.value['tokenAmount'] = price.value
-  buyDataArr.value = []
-  buyDataArr.value.push(detailData.value)
-  buyDialogVisible.value = true
-  return
+  detailData.value["icon"] = icon.value;
+  detailData.value["tokenAmount"] = price.value;
+  buyDataArr.value = [];
+  buyDataArr.value.push(detailData.value);
+  buyDialogVisible.value = true;
+  return;
   const buyResult = await createModal(BuyDialog, {
     buyDataArr: buyDataArr.value,
-  }).show()
-  console.log(buyResult.errcode)
-  if(buyResult.errcode == 0) {
-    message.success('buy success')
-  } else if(buyResult.errcode == 1) {
-    if(buyResult.err.message.indexOf() > -1) {
-      message.error('User rejected the request')
+  }).show();
+  console.log(buyResult.errcode);
+  if (buyResult.errcode == 0) {
+    message.success("buy success");
+  } else if (buyResult.errcode == 1) {
+    if (buyResult.err.message.indexOf() > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('buy fail')
+      message.error("buy fail");
     }
   }
-
-}
+};
 const BuyHandleClose = () => {
-  buyDialogVisible.value = false
-}
+  buyDialogVisible.value = false;
+};
 
 // 添加购物车
 const addCart = async () => {
@@ -331,21 +404,21 @@ const addCart = async () => {
       {
         token_id: detailData.value.nft.token_id,
         contract_address: detailData.value.nft.contract_address,
-      }
-    ]
-  }
+      },
+    ],
+  };
   try {
-    const { errcode, errmsg } = await marketplaceList.addCartListState(data)
+    const {errcode, errmsg} = await marketplaceList.addCartListState(data);
     // console.log(errcode, errmsg)
-    if(errcode == 0) {
-      message.success('success! Add from cart')
-      marketplaceList.getCartList = await marketplaceList.getCartListState()
-      getDetail()
+    if (errcode == 0) {
+      message.success("success! Add from cart");
+      marketplaceList.getCartList = await marketplaceList.getCartListState();
+      getDetail();
     }
   } catch (e) {
-    message.error('fail! Add from cart')
+    message.error("fail! Add from cart");
   }
-}
+};
 
 // 移除购物车
 const clearCart = async () => {
@@ -356,256 +429,259 @@ const clearCart = async () => {
       {
         token_id: detailData.value.nft.token_id,
         contract_address: detailData.value.nft.contract_address,
-      }
-    ]
-  }
+      },
+    ],
+  };
   try {
-    const { errcode, errmsg } =  await marketplaceList.delCartListState(data)
-    if(errcode == 0) {
-      message.success('success! Remove from cart')
-      marketplaceList.getCartList = await marketplaceList.getCartListState()
-      getDetail()
+    const {errcode, errmsg} = await marketplaceList.delCartListState(data);
+    if (errcode == 0) {
+      message.success("success! Remove from cart");
+      marketplaceList.getCartList = await marketplaceList.getCartListState();
+      getDetail();
     }
   } catch (e) {
     // console.log(e)
   }
-}
+};
 
 // 下链使用
-const lockToGame = async(type) => {
-  if(type == 'founder') {
+const lockToGame = async (type) => {
+  if (type == "founder") {
     const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        message: `Are you sure you want to stake?`
-      }).show()
-      if (confirmResult.errcode == 0) {
-        loadingDialogVisible.value = true
-        unlockMainConfirm()
-      }
-  } else if(type == 'convert') {
-    const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      message: 'Are you sure you want to stake?'
-    }).show()
+      title: "",
+      message: `Are you sure you want to stake?`,
+    }).show();
     if (confirmResult.errcode == 0) {
-      loadingDialogVisible.value = true
-      lockToGameConfirm()
+      loadingDialogVisible.value = true;
+      unlockMainConfirm();
     }
-  } else if(type == 'redeem') {
+  } else if (type == "convert") {
     const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        message: `Redeem ${detailData.value.nft.detail.gold_coins} Gold to your game account. Do you wish to proceed?`
-        // message: 'Are you sure you want to stake?'
-      }).show()
-      if (confirmResult.errcode == 0) {
-        loadingDialogVisible.value = true
-        lockToGameConfirm()
-      }
+      title: "",
+      message: "Are you sure you want to stake?",
+    }).show();
+    if (confirmResult.errcode == 0) {
+      loadingDialogVisible.value = true;
+      lockToGameConfirm();
+    }
+  } else if (type == "redeem") {
+    const confirmResult = await createModal(ConfirmDialog, {
+      title: "",
+      message: `Redeem ${detailData.value.nft.detail.gold_coins} Gold to your game account. Do you wish to proceed?`,
+      // message: 'Are you sure you want to stake?'
+    }).show();
+    if (confirmResult.errcode == 0) {
+      loadingDialogVisible.value = true;
+      lockToGameConfirm();
+    }
   }
-}
+};
 const lockToGameConfirm = async () => {
   try {
-    const bc = new BlockChain()
-    let res = await bc.locker.lock(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
+    const bc = new BlockChain();
+    let res = await bc.locker.lock(detailData.value.nft.contract_address, [detailData.value.nft.token_id]);
     // message.success('lockToGame success')
-    detailData.value.nft['status'] = 1
-    if(detailData.value.nft.type == 11) {
+    detailData.value.nft["status"] = 1;
+    if (detailData.value.nft.type == 11) {
       const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        noBtnTitle: '',
-        message: 'Redeem is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
-      }).show()
+        title: "",
+        noBtnTitle: "",
+        message: "Redeem is complete. Please refresh the page in 3 to 4 minutes to view the updated status.",
+      }).show();
     } else {
-        const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        noBtnTitle: '',
-        message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
-      }).show()
+      const confirmResult = await createModal(ConfirmDialog, {
+        title: "",
+        noBtnTitle: "",
+        message: "Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.",
+      }).show();
     }
-    loadingDialogVisible.value = false
-    if(res) {
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
           // message.success('Unstake success.')
-          if(confirmed == 1) {
-            detailData.value.nft['status'] = ''
-            router.go(-1)
+          if (confirmed == 1) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
             clearInterval(timer);
           }
         }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    console.log(e.message)
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
+    console.log(e.message);
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('lockToGame fail.')
+      message.error("lockToGame fail.");
     }
-    loadingDialogVisible.value = false
+    loadingDialogVisible.value = false;
   }
-}
+};
 const unlockMainConfirm = async () => {
   try {
-    const bc = new BlockChain()
-    let res = await bc.locker.lockMain(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
-    detailData.value.nft['status'] = 1
+    const bc = new BlockChain();
+    let res = await bc.locker.lockMain(detailData.value.nft.contract_address, [detailData.value.nft.token_id]);
+    detailData.value.nft["status"] = 1;
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
-    }).show()
-    loadingDialogVisible.value = false
-    if(res) {
+      title: "",
+      noBtnTitle: "",
+      message: "Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.",
+    }).show();
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
           // message.success('Unstake success.')
-          if(confirmed == 1) {
-            detailData.value.nft['status'] = ''
-            router.go(-1)
+          if (confirmed == 1) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
             clearInterval(timer);
           }
         }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('lockToGame fail.')
+      message.error("lockToGame fail.");
     }
-    loadingDialogVisible.value = false
+    loadingDialogVisible.value = false;
   }
-}
+};
 
 // 赎回
 const backStaking = async () => {
-  if(marketplaceList.userGold < 0) {
+  if (marketplaceList.userGold < 0) {
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      message: 'Unstake Failed - Negative in-game gold balance. Please adjust your balance to continue.'
-    }).show()
+      title: "",
+      message: "Unstake Failed - Negative in-game gold balance. Please adjust your balance to continue.",
+    }).show();
   } else {
-    if(detailData.value.nft.type == 13) {
-      founderLock()
-    } else if(detailData.value.nft.type == 1 || detailData.value.nft.type == 12) {
-      heroLock()
+    if (detailData.value.nft.type == 13) {
+      founderLock();
+    } else if (detailData.value.nft.type == 1 || detailData.value.nft.type == 12) {
+      heroLock();
     }
   }
-}
+};
 
 const heroLock = async () => {
-  loadingDialogVisible.value = true
+  loadingDialogVisible.value = true;
   try {
-    const bc = new BlockChain()
-    let res = await bc.locker.unlockOrMintGameNft(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
-    detailData.value.nft['status'] = 1
+    const bc = new BlockChain();
+    let res = await bc.locker.unlockOrMintGameNft(detailData.value.nft.contract_address, [
+      detailData.value.nft.token_id,
+    ]);
+    detailData.value.nft["status"] = 1;
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
-    }).show()
-    loadingDialogVisible.value = false
-    if(res) {
+      title: "",
+      noBtnTitle: "",
+      message:
+        "Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.",
+    }).show();
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
-        // message.success('Unstake success.')
-        if( confirmed) {
-          detailData.value.nft['status'] = ''
-          router.go(-1)
-          clearInterval(timer);
-        }
-      }, 2000);
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
+          // message.success('Unstake success.')
+          if (confirmed) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
+            clearInterval(timer);
+          }
+        }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    loadingDialogVisible.value = false
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
-    } else if (e.message.indexOf('select wallet') > -1) {
-      message.error('user cancel select wallet')
+    loadingDialogVisible.value = false;
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
+    } else if (e.message.indexOf("select wallet") > -1) {
+      message.error("user cancel select wallet");
     } else {
-      message.error('Unstake fail')
+      message.error("Unstake fail");
     }
   }
-}
+};
 const founderLock = async () => {
-  loadingDialogVisible.value = true
+  loadingDialogVisible.value = true;
   try {
-    const bc = new BlockChain()
-    let res = await bc.locker.unlockMain(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
-    detailData.value.nft['status'] = 1
+    const bc = new BlockChain();
+    let res = await bc.locker.unlockMain(detailData.value.nft.contract_address, [detailData.value.nft.token_id]);
+    detailData.value.nft["status"] = 1;
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
-    }).show()
-    loadingDialogVisible.value = false
-    if(res) {
+      title: "",
+      noBtnTitle: "",
+      message:
+        "Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.",
+    }).show();
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
-        // message.success('Unstake success.')
-        if( confirmed) {
-          detailData.value.nft['status'] = ''
-          router.go(-1)
-          clearInterval(timer);
-        }
-      }, 2000);
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
+          // message.success('Unstake success.')
+          if (confirmed) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
+            clearInterval(timer);
+          }
+        }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    loadingDialogVisible.value = false
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
-    } else if (e.message.indexOf('select wallet') > -1) {
-      message.error('user cancel select wallet')
-    } else if (e.message.indexOf('eoa address changed') > -1) {
+    loadingDialogVisible.value = false;
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
+    } else if (e.message.indexOf("select wallet") > -1) {
+      message.error("user cancel select wallet");
+    } else if (e.message.indexOf("eoa address changed") > -1) {
       const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        noBtnTitle: '',
-        message: "It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again."
-      }).show()
+        title: "",
+        noBtnTitle: "",
+        message:
+          "It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again.",
+      }).show();
     } else {
-      message.error('Unstake fail')
+      message.error("Unstake fail");
     }
   }
-}
-
+};
 
 // 售卖弹窗
-const floorPrice = ref('0')
-const sellDialogVisible = ref(false)
-const beginSell = async() => {
-  if (detailData.value.event) return
-  floorPrice.value = await getFloorPrice()
-  sellDialogVisible.value = true
-}
-
+const floorPrice = ref("0");
+const sellDialogVisible = ref(false);
+const beginSell = async () => {
+  if (detailData.value.event) return;
+  floorPrice.value = await getFloorPrice();
+  sellDialogVisible.value = true;
+};
 
 // 取消售卖
-const cancelSell = async() => {
+const cancelSell = async () => {
   // console.log('cancelSell', detailData.value.event)
 
-  if (!detailData.value.event) return
+  if (!detailData.value.event) return;
   try {
-    let res = await new BlockChain().market.cancelOrder([detailData.value.event.data.id])
-    if(res.result) {
+    let res = await new BlockChain().market.cancelOrder([detailData.value.event.data.id]);
+    if (res.result) {
       let timer = setTimeout(() => {
-        getDetail()
-        message.success('Your item has been delisted.')
-        clearTimeout(timer)
+        getDetail();
+        message.success("Your item has been delisted.");
+        clearTimeout(timer);
       }, 2000);
     }
   } catch (e) {
@@ -620,13 +696,13 @@ const cancelSell = async() => {
     // } catch (e2) {
     //   // console.log('cancelSell fail', e.message)
     // }
-    if(e.message.indexOf('rejected')  > -1) {
-      message.error('User rejected the request')
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('Your item has failed to be delisted.')
+      message.error("Your item has failed to be delisted.");
     }
   }
-}
+};
 
 // 处理地址
 const sliceAddress = (address) => {
@@ -635,7 +711,7 @@ const sliceAddress = (address) => {
     return `${address.substring(0, 6)}......${address.slice(-4)}`;
   }
   return address;
-}
+};
 
 // 获取地板价
 const getFloorPrice = async () => {
@@ -644,96 +720,97 @@ const getFloorPrice = async () => {
     contract_address: detailData.value.nft.contract_address,
     item_id: detailData.value.nft.item_id,
     quality: detailData.value.nft.detail.quality,
-  }
-  let res = await apiGetPrice(data)
-  if(res.lowest_price_goods) {
-    floorPrice.value = res.lowest_price_goods.event.data.buy[0].amount
+  };
+  let res = await apiGetPrice(data);
+  if (res.lowest_price_goods) {
+    floorPrice.value = res.lowest_price_goods.event.data.buy[0].amount;
   } else {
-    floorPrice.value = '0'
+    floorPrice.value = "0";
   }
-  return floorPrice.value
-}
+  return floorPrice.value;
+};
 
 // 关闭出售弹窗
 const sellHandleClose = (val) => {
-  if(val) {
+  if (val) {
     let timer = setTimeout(() => {
-      getDetail()
-      clearTimeout(timer)
+      getDetail();
+      clearTimeout(timer);
     }, 2000);
-    sellDialogVisible.value = false
+    sellDialogVisible.value = false;
   } else {
-    sellDialogVisible.value = false
+    sellDialogVisible.value = false;
   }
-}
+};
 
 // mint上链
 const mintHero = async () => {
-  console.log(toRaw(marketplaceList.activitySwitch).heroMint)
+  console.log(toRaw(marketplaceList.activitySwitch).heroMint);
   // return
-  if(toRaw(marketplaceList.activitySwitch).heroMint == 0) {
+  if (toRaw(marketplaceList.activitySwitch).heroMint == 0) {
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Mint Failed'
-    }).show()
+      title: "",
+      noBtnTitle: "",
+      message: "Mint Failed",
+    }).show();
   } else {
-    if(marketplaceList.userGold < 0) {
+    if (marketplaceList.userGold < 0) {
       const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        noBtnTitle: '',
-        message: 'Mint Failed - Negative in-game gold balance. Please adjust your balance to continue.'
-      }).show()
+        title: "",
+        noBtnTitle: "",
+        message: "Mint Failed - Negative in-game gold balance. Please adjust your balance to continue.",
+      }).show();
     } else {
-        try {
-        const res = await new BlockChain().locker.mintNft([detailData.value.nft.uniid])
-        message.success('Mint success.')
-        router.go(-1)
+      try {
+        const res = await new BlockChain().locker.mintNft([detailData.value.nft.uniid]);
+        message.success("Mint success.");
+        router.go(-1);
       } catch (e) {
-        if(e.message.indexOf('rejected') > -1) {
-          message.error('User rejected the request')
-        } else if (e.message.indexOf('select wallet') > -1) {
-          message.error('user cancel select wallet')
+        if (e.message.indexOf("rejected") > -1) {
+          message.error("User rejected the request");
+        } else if (e.message.indexOf("select wallet") > -1) {
+          message.error("user cancel select wallet");
         } else {
-          message.error('Mint Failed.')
+          message.error("Mint Failed.");
         }
       }
     }
   }
-}
+};
 
 const getDetail = async () => {
-  let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid)
+  let {errcode, errmsg, data} = await nftDetail(props.address, props.tokenid);
   // console.log(data)
-  contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}`
-  
-  contractTokenUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/token/${data.nft.contract_address}/instance/${data.nft.token_id}`
+  contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}`;
+
+  contractTokenUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/token/${data.nft.contract_address}/instance/${
+    data.nft.token_id
+  }`;
   if (errcode) {
     // console.log(errmsg)
     //TODO:: 提示错误信息
-    return
+    return;
   }
-  const nftData = data.nft
-  nftData.event = data.event
-  nftAbilities.value = data.nft.detail
-  detailData.value = data
+  const nftData = data.nft;
+  nftData.event = data.event;
+  nftAbilities.value = data.nft.detail;
+  detailData.value = data;
   if (data.event?.data) {
-    const _data = formatPrice(data.event?.data)
-    icon.value = _data.icon
-    usd.value = _data.usd
-    price.value = _data.tokenAmount
-    
+    const _data = formatPrice(data.event?.data);
+    icon.value = _data.icon;
+    usd.value = _data.usd;
+    price.value = _data.tokenAmount;
   }
-}
+};
 onMounted(() => {
-  if(location.pathname.length > 8) {
-    getDetail()
+  if (location.pathname.length > 8) {
+    getDetail();
   } else {
-    detailData.value = marketplaceList.detailData
-    founderBlankUrl.value = `https://etherscan.io/token/0xec23679653337d4c6390d0eeba682246a6067777?a=${detailData.value.nft.token_id}`
-    nftAbilities.value = marketplaceList.detailData.nft.detail
+    detailData.value = marketplaceList.detailData;
+    founderBlankUrl.value = `https://etherscan.io/token/0xec23679653337d4c6390d0eeba682246a6067777?a=${detailData.value.nft.token_id}`;
+    nftAbilities.value = marketplaceList.detailData.nft.detail;
   }
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -744,7 +821,7 @@ onMounted(() => {
   .bg-content {
     width: 100%;
     height: 100%;
-    background: url('@/assets/img/marketplace/BG01.png') no-repeat;
+    background: url("@/assets/img/marketplace/BG01.png") no-repeat;
     background-size: 100% 100%;
   }
   .detail-bg {
@@ -774,9 +851,9 @@ onMounted(() => {
               font-size: 18px;
             }
             .img-btm {
-              bottom:16px;
+              bottom: 16px;
               left: 20px;
-              >div {
+              > div {
                 width: 110px;
                 height: 40px;
                 font-size: 18px;
@@ -824,10 +901,10 @@ onMounted(() => {
                   margin: 0 8px;
                 }
                 span {
-                  font-family: 'MEurostile';
+                  font-family: "MEurostile";
                   font-weight: 700;
                   font-size: 32px;
-                  color: #FFFFFF;
+                  color: #ffffff;
                 }
               }
             }
@@ -849,14 +926,15 @@ onMounted(() => {
       }
       .top-right {
         width: 712px;
+        padding-bottom: 80px;
         h2 {
           font-size: 42px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
         }
         .top-right-owner {
           display: flex;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
           font-size: 30px;
           .address {
@@ -872,16 +950,16 @@ onMounted(() => {
           background: #2d2738;
           border-radius: 20px;
           margin-top: 10px;
-          color: #BB7FFF;
+          color: #bb7fff;
           padding: 15px 20px;
           box-sizing: border-box;
           li {
             display: flex;
             justify-content: space-between;
-            >div {
+            > div {
               display: flex;
               font-size: 28px;
-              color: #9950FD;
+              color: #9950fd;
             }
             .time {
               display: flex;
@@ -902,10 +980,10 @@ onMounted(() => {
               display: flex;
               align-items: center;
               span {
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: 400;
                 font-size: 24px;
-                color: #BB7FFF;
+                color: #bb7fff;
               }
               .bold {
                 font-weight: bold;
@@ -924,7 +1002,7 @@ onMounted(() => {
           height: 40px;
           line-height: 40px;
           border-radius: 20px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: 300;
           font-size: 18px;
           display: flex;
@@ -945,19 +1023,19 @@ onMounted(() => {
               display: inline-block;
               height: 40px;
               line-height: 40px;
-              color: #9A50FF;
+              color: #9a50ff;
             }
-            
+
             &:nth-child(2) {
               margin-left: 20px;
               span {
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: 600;
                 font-size: 20px;
-                color: #F3F0FF;
+                color: #f3f0ff;
               }
               .expected {
-                color: #00DEFF;
+                color: #00deff;
               }
               img {
                 width: 25px;
@@ -965,7 +1043,6 @@ onMounted(() => {
               }
             }
           }
-          
         }
         .top-right-btns {
           div {
@@ -973,16 +1050,16 @@ onMounted(() => {
             justify-content: space-between;
             align-items: center;
             margin: 10px 0;
-            >div {
+            > div {
               width: 348px;
               height: 57px;
               display: flex;
               justify-content: center;
               align-items: center;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: bold;
               font-size: 28px;
-              color: #FFFFFF;
+              color: #ffffff;
               border-radius: 12px;
               cursor: pointer;
             }
@@ -1037,14 +1114,14 @@ onMounted(() => {
           }
         }
         .info {
-          color: #B3B5DA;
+          color: #b3b5da;
           margin-top: 40px;
           h2 {
-            font-family: 'Poppins';
+            font-family: "Poppins";
             font-weight: bold;
             font-size: 30px;
             color: #fff;
-            border-bottom: 2px solid #3A3B57;
+            border-bottom: 2px solid #3a3b57;
           }
           li {
             display: flex;
@@ -1056,14 +1133,14 @@ onMounted(() => {
               text-align: left;
               margin-top: 10px;
               a {
-                color: #B3B5DA;
+                color: #b3b5da;
                 cursor: pointer;
               }
             }
             .contract-address {
               position: relative;
               cursor: pointer;
-              >div {
+              > div {
                 width: 560px;
                 height: 40px;
                 border-radius: 10px;
@@ -1078,7 +1155,7 @@ onMounted(() => {
                 display: none;
               }
               &:hover {
-                >div {
+                > div {
                   display: block;
                 }
               }
@@ -1087,10 +1164,11 @@ onMounted(() => {
         }
       }
       .btm-left {
+        margin-top: 40px;
         padding-bottom: 90px;
         h2 {
           font-size: 30px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
           margin-bottom: 10px;
         }
@@ -1110,7 +1188,7 @@ onMounted(() => {
             div {
               text-align: center;
               font-size: 22px;
-              color: #B3B5DA;
+              color: #b3b5da;
               font-family: "Poppins";
               h5 {
                 font-weight: bold;
@@ -1128,23 +1206,23 @@ onMounted(() => {
         .gold-content {
           width: 455px;
           height: 84px;
-          background: #2D2738;
+          background: #2d2738;
           border-radius: 20px;
           display: flex;
           justify-content: space-between;
           .left {
             padding: 10px 19px;
-            font-family: 'Poppins';
+            font-family: "Poppins";
             font-size: 22px;
             h4 {
               height: 18px;
               font-weight: 400;
-              color: #B3B5DA;
+              color: #b3b5da;
             }
             p {
               height: 20px;
               font-weight: bold;
-              color: #FFFFFF;
+              color: #ffffff;
               margin-top: 18px;
             }
           }
@@ -1170,10 +1248,10 @@ onMounted(() => {
               height: 82px;
               padding: 20px;
               box-sizing: border-box;
-              background: #1A1821;
-              box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+              background: #1a1821;
+              box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
               border-radius: 10px;
-              border: 1px solid #B966FF;
+              border: 1px solid #b966ff;
             }
             &:hover {
               .right-tips {
diff --git a/src/views/DetailView1.vue b/src/views/DetailView1.vue
index 36a84b0..0636c52 100644
--- a/src/views/DetailView1.vue
+++ b/src/views/DetailView1.vue
@@ -6,7 +6,105 @@
         <div class="content">
           <div class="top-left">
             <div class="top-left-img">
-              <ImgCard :nftData="detailData.nft" />
+              <ImgCard v-if="detailData.nft.token_id" :nftData="detailData.nft" />
+              <ImgCardTow v-else class="mint-hero" :nftData="detailData.nft" />
+            </div>
+            <div v-if="detailData.nft.type == 1 || detailData.nft.type == 12" class="btm-left">
+              <h2>Property</h2>
+              <div class="btm-detail">
+                <li>
+                  <div>
+                    <h5>Tier</h5>
+                    <p>{{ nftAbilities['quality'] }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Active Days</h5>
+                    <p>{{ nftAbilities['max_mining_days'] }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Wealth Value</h5>
+                    <p>{{ parseInt(nftAbilities['wealth']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Luck Value</h5>
+                    <p>{{ parseInt(nftAbilities['lucky']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>HP</h5>
+                    <p>{{ parseInt(nftAbilities['hp']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Attack</h5>
+                    <p>{{ parseInt(nftAbilities['atk']) }}</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Defense</h5>
+                    <p>{{ Number(nftAbilities['def']).toFixed(2) }}%</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Block Rate</h5>
+                    <p>{{ Number(nftAbilities['block']).toFixed(2) }}%</p>
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <h5>Crit Rate</h5>
+                    <p>{{ Number(nftAbilities['crit']).toFixed(2) }}%</p>
+                  </div>
+                </li>
+                <li v-if="nftAbilities['chip_slots']">
+                  <div>
+                    <h5>Chip Slots</h5>
+                    <p>{{ nftAbilities['chip_slots'] }}</p>
+                  </div>
+                </li>
+                <li v-if="nftAbilities['combat_ability_l']">
+                  <div>
+                    <h5 class="min-size">Combat Ability I</h5>
+                    <p>{{ nftAbilities['combat_ability_l'] }}</p>
+                  </div>
+                </li>
+                <li v-if="nftAbilities['combat_ability_2']">
+                  <div>
+                    <h5 class="min-size">Combat Ability II</h5>
+                    <p>{{ nftAbilities['combat_ability_2'] }}</p>
+                  </div>
+                </li>
+              </div>
+            </div>
+            <div
+              v-else-if="detailData.nft.item_id == 10017 || detailData.nft.item_id == 10018"
+              class="btm-left"
+            >
+              <h2>Property</h2>
+              <div class="gold-content">
+                <div class="left">
+                  <h4>Gold Amount</h4>
+                  <p>{{ detailData.nft.detail.gold_coins }}</p>
+                </div>
+                <div class="right">
+                  <div class="right-img">
+                    <img src="@/assets/img/marketplace/Icon_!.png" alt />
+                  </div>
+                  <div
+                    class="right-tips"
+                  >A Gold Card is equivalent to 100,000 Gold. Once redeemed, 100,000 Gold will be credited to your Counter Fire game account.</div>
+                </div>
+              </div>
             </div>
           </div>
           <div class="top-right">
@@ -14,13 +112,15 @@
             <h2 v-else>{{ detailData.nft.name }}</h2>
             <div class="top-right-owner">
               <div>Owner:</div>
-              <div class="address">{{ detailData.nft.owner_address ? detailData.nft.owner_address : myAddress }}</div>
+              <div
+                class="address"
+              >{{ detailData.nft.owner_address ? detailData.nft.owner_address : myAddress }}</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="img">
+                  <img src="@/assets/img/marketplace/time.png" alt="img" />
                   <!-- <div>Time remaining: &nbsp;<StarTimer :endAt="detailData.event.data.end_at" /></div> -->
                   <div>(UTC)End Time: &nbsp;{{detailData.event.data.end_at}}</div>
                 </div>
@@ -28,28 +128,40 @@
               <li>
                 <div class="price">
                   <span class="bold">{{ price }}&nbsp;</span>
-                  <img :src="icon" alt="ICON">
+                  <img :src="icon" alt="ICON" />
                   <span>( $ {{ usd }} )</span>
                 </div>
               </li>
             </div>
-            <div class="back-time" v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
+            <div
+              class="back-time"
+              v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()"
+            >
               <div>
-                <img src="@/assets/img/marketplace/time.png" alt="">
-                <span>Time remaining :  &nbsp;
+                <img src="@/assets/img/marketplace/time.png" alt />
+                <span>
+                  Time remaining : &nbsp;
                   {{ timeStaking(detailData.nft.last_lock_time)[0] }}d:
                   {{ timeStaking(detailData.nft.last_lock_time)[1] }}h:
                   {{ timeStaking(detailData.nft.last_lock_time)[2] }}m
                 </span>
               </div>
               <div>
-                <span class="expected" v-if="detailData.nft.type == 1 || detailData.nft.type == 12">+{{contribution(detailData.nft.detail.quality, detailData.nft.type)}}/d</span>
-                <span class="expected" v-if="detailData.nft.type == 13">+{{contribution(detailData.nft.quality, detailData.nft.type)}}/d</span>
-                <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+                <span
+                  class="expected"
+                  v-if="detailData.nft.type == 1 || detailData.nft.type == 12"
+                >+{{contribution(detailData.nft.detail.quality, detailData.nft.type)}}/d</span>
+                <span
+                  class="expected"
+                  v-if="detailData.nft.type == 13"
+                >+{{contribution(detailData.nft.quality, detailData.nft.type)}}/d</span>
+                <img src="@/assets/img/marketplace/totalContribution.png" alt />
               </div>
             </div>
             <div class="top-right-btns">
-              <div v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
+              <div
+                v-if="FOUNDER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase() || LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()"
+              >
                 <div class="cancel" v-if="detailData.nft?.status == 1">
                   <span>Loading</span>
                 </div>
@@ -57,7 +169,9 @@
                   <span @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Withdraw</span>
                 </div>
               </div>
-              <div v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()">
+              <div
+                v-if="(detailData.nft.type == 1 && !detailData.nft.contract_address) && LOCKER_ADDRESS.toLowerCase() != detailData.nft.owner_address.toLowerCase()"
+              >
                 <div class="mint" @click="mintHero">Mint</div>
               </div>
               <!-- 
@@ -66,16 +180,28 @@
               3、购买
               4、
               -->
-              
+
               <div v-if="myAddress != detailData.nft.owner_address">
-                <div v-if="detailData.event != null" class="buy" @click="localWalletStore.token == '' ? cardLogin() : buyNow()">Buy Now</div>
-                <div class="add" v-if="detailData.event != null && 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
+                  v-if="detailData.event != null"
+                  class="buy"
+                  @click="localWalletStore.token == '' ? cardLogin() : buyNow()"
+                >Buy Now</div>
+                <div
+                  class="add"
+                  v-if="detailData.event != null && 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()">
+                <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="">
+                  <img src="@/assets/img/marketplace/Move_out.png" alt />
                 </div>
               </div>
               <!--
@@ -84,22 +210,34 @@
               3、使用
               -->
               <div v-if="myAddress == detailData.nft.owner_address && detailData.nft?.status != 1">
-                <div class="sell" @click="beginSell" v-if="detailData.nft.on_sale == 0 && detailData.nft.type != 13">List</div>
+                <div
+                  class="sell"
+                  @click="beginSell"
+                  v-if="detailData.nft.on_sale == 0 && detailData.nft.type != 13"
+                >List</div>
                 <div class="cancel" @click="cancelSell" v-if="detailData.nft.on_sale == 1">Delist</div>
-                <div class="redeem" v-if="detailData.nft.on_sale == 0 && (detailData.nft.type == 1 || detailData.nft.type == 12)" @click="lockToGame('convert')">
+                <div
+                  class="redeem"
+                  v-if="detailData.nft.on_sale == 0 && (detailData.nft.type == 1 || detailData.nft.type == 12)"
+                  @click="lockToGame('convert')"
+                >
                   <span>Stake</span>
                 </div>
                 <div class="redeem" v-else-if="detailData.nft.type == 13">
                   <span v-if="detailData.nft?.status == 1" @click="lockToGame('founder')">Loading</span>
                   <span v-else @click="lockToGame('founder')">Stake</span>
                 </div>
-                <!-- <div class="redeem" @click="lockToGame('redeem')" v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 11">Redeem</div> -->
+                <div
+                  class="redeem"
+                  @click="lockToGame('redeem')"
+                  v-if="detailData.nft.on_sale == 0 && detailData.nft.type == 11"
+                >Redeem</div>
               </div>
               <!-- <div v-else-if="detailData.nft?.status == 1">
                 <div class="cancel">
                   <span>Loading</span>
                 </div>
-              </div> -->
+              </div>-->
             </div>
             <div class="info">
               <h2>Info</h2>
@@ -107,14 +245,27 @@
                 <div>Contract address</div>
                 <div class="contract-address">
                   <div>{{ detailData.nft.contract_address}}</div>
-                  <span v-if="detailData.nft.type != 13"><a :href="contractBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
-                  <span v-else><a :href="founderBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.contract_address) }}</a></span>
+                  <span v-if="detailData.nft.type != 13">
+                    <a
+                      :href="contractBlankUrl"
+                      target="_blank"
+                    >{{ sliceAddress(detailData.nft.contract_address) }}</a>
+                  </span>
+                  <span v-else>
+                    <a
+                      :href="founderBlankUrl"
+                      target="_blank"
+                    >{{ sliceAddress(detailData.nft.contract_address) }}</a>
+                  </span>
                 </div>
               </li>
               <li>
                 <div>Token ID</div>
                 <div>
-                  <a :href="contractTokenUrl" target="_blank">{{ detailData.nft.token_id ? detailData.nft.token_id : '-' }}</a>
+                  <a
+                    :href="contractTokenUrl"
+                    target="_blank"
+                  >{{ detailData.nft.token_id ? detailData.nft.token_id : '-' }}</a>
                 </div>
               </li>
               <li>
@@ -123,8 +274,18 @@
               </li>
               <li>
                 <div>Metadata</div>
-                <div v-if="detailData.nft.type != 13"><a :href="detailData.nft.meta_url" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
-                <div v-else><a :href="founderBlankUrl" target="_blank">{{ sliceAddress(detailData.nft.meta_url) }}</a></div>
+                <div v-if="detailData.nft.type != 13">
+                  <a
+                    :href="detailData.nft.meta_url"
+                    target="_blank"
+                  >{{ sliceAddress(detailData.nft.meta_url) }}</a>
+                </div>
+                <div v-else>
+                  <a
+                    :href="founderBlankUrl"
+                    target="_blank"
+                  >{{ sliceAddress(detailData.nft.meta_url) }}</a>
+                </div>
               </li>
               <li>
                 <div>Royalties</div>
@@ -143,47 +304,84 @@
           <div v-if="detailData.nft.type == 1 || detailData.nft.type == 12" 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'">
+              <li>
+                <div>
                   <h5>Tier</h5>
-                  <p>{{ item }}</p>
+                  <p>{{ nftAbilities['quality'] }}</p>
                 </div>
-                <div v-show="val == 'max_mining_days'">
+              </li>
+              <li>
+                <div>
                   <h5>Active Days</h5>
-                  <p>{{ item }}</p>
+                  <p>{{ nftAbilities['max_mining_days'] }}</p>
                 </div>
-                <div v-show="val == 'wealth'">
+              </li>
+              <li>
+                <div>
                   <h5>Wealth Value</h5>
-                  <p>{{ parseInt(item) }}</p>
+                  <p>{{ parseInt(nftAbilities['wealth']) }}</p>
                 </div>
-                <div v-show="val == 'lucky'">
+              </li>
+              <li>
+                <div>
                   <h5>Luck Value</h5>
-                  <p>{{ parseInt(item) }}</p>
+                  <p>{{ parseInt(nftAbilities['lucky']) }}</p>
                 </div>
-                <div v-show="val == 'hp'">
+              </li>
+              <li>
+                <div>
                   <h5>HP</h5>
-                  <p>{{ parseInt(item) }}</p>
+                  <p>{{ parseInt(nftAbilities['hp']) }}</p>
                 </div>
-                <div v-show="val == 'atk'">
+              </li>
+              <li>
+                <div>
                   <h5>Attack</h5>
-                  <p>{{ parseInt(item) }}</p>
+                  <p>{{ parseInt(nftAbilities['atk']) }}</p>
                 </div>
-                <div v-show="val == 'def'">
+              </li>
+              <li>
+                <div>
                   <h5>Defense</h5>
-                  <p>{{ Number(item).toFixed(2) }}%</p>
+                  <p>{{ Number(nftAbilities['def']).toFixed(2) }}%</p>
                 </div>
-                <div v-show="val == 'block'">
+              </li>
+              <li>
+                <div>
                   <h5>Block Rate</h5>
-                  <p>{{ Number(item).toFixed(2) }}%</p>
+                  <p>{{ Number(nftAbilities['block']).toFixed(2) }}%</p>
                 </div>
-                <div v-show="val == 'crit'">
+              </li>
+              <li>
+                <div>
                   <h5>Crit Rate</h5>
-                  <p>{{ Number(item).toFixed(2) }}%</p>
+                  <p>{{ Number(nftAbilities['crit']).toFixed(2) }}%</p>
+                </div>
+              </li>
+              <li v-if="nftAbilities['chip_slots']">
+                <div>
+                  <h5>Chip Slots</h5>
+                  <p>{{ nftAbilities['chip_slots'] }}</p>
+                </div>
+              </li>
+              <li v-if="nftAbilities['combat_ability_l']">
+                <div>
+                  <h5 class="min-size">Combat Ability I</h5>
+                  <p>{{ nftAbilities['combat_ability_l'] }}</p>
+                </div>
+              </li>
+              <li v-if="nftAbilities['combat_ability_2']">
+                <div>
+                  <h5 class="min-size">Combat Ability II</h5>
+                  <p>{{ nftAbilities['combat_ability_2'] }}</p>
                 </div>
               </li>
             </div>
           </div>
-          <div v-else-if="detailData.nft.item_id == 10017 || detailData.nft.item_id == 10018" class="btm-left">
+          <div
+            v-else-if="detailData.nft.item_id == 10017 || detailData.nft.item_id == 10018"
+            class="btm-left"
+          >
             <h2>Property</h2>
             <div class="gold-content">
               <div class="left">
@@ -192,11 +390,11 @@
               </div>
               <div class="right">
                 <div class="right-img">
-                  <img src="@/assets/img/marketplace/Icon_!.png" alt="">
-                </div>
-                <div class="right-tips">
-                  A Gold Card is equivalent to 100,000 Gold. Once redeemed, 100,000 Gold will be credited to your Counter Fire game account.
+                  <img src="@/assets/img/marketplace/Icon_!.png" alt />
                 </div>
+                <div
+                  class="right-tips"
+                >A Gold Card is equivalent to 100,000 Gold. Once redeemed, 100,000 Gold will be credited to your Counter Fire game account.</div>
               </div>
             </div>
           </div>
@@ -204,88 +402,98 @@
       </div>
     </div>
     <Footer />
-    <BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="buyDataArr"  @handleClose="BuyHandleClose" />
-    <SellDialog v-if="detailData" :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="detailData.nft" @handleClose="sellHandleClose" />
+    <BuyDialog
+      :buyDialogVisible="buyDialogVisible"
+      :buyDataArr="buyDataArr"
+      @handleClose="BuyHandleClose"
+    />
+    <SellDialog
+      v-if="detailData"
+      :sellDialogVisible="sellDialogVisible"
+      :floorPrice="floorPrice"
+      :sellDataArr="detailData.nft"
+      @handleClose="sellHandleClose"
+    />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
   </div>
 </template>
 
 <script setup>
-import { ref, toRefs, toRaw, onMounted , inject} from "vue"
-const message = inject('$message')
-import { useRouter, useRoute } from "vue-router";
-import BuyDialog from "@/components/Dialogs/buyDialog.vue"
-import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
-import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
-import ImgCard from "@/components/common/imgCard.vue"
-import StarTimer from "@/components/common/starTimer.vue"
-import SellDialog from "@/components/Dialogs/sellDialog.vue"
-import Footer from "@/components/common/footer.vue"
-import { nftDetail, apiGetPrice, apiTxHash } from "@/utils/marketplace"
-import {priceCalculated} from "@/configs/priceCalculate.js"
-import { BlockChain } from "@/components/chain/BlockChain"
+import {ref, toRefs, toRaw, onMounted, inject} from "vue";
+const message = inject("$message");
+import {useRouter, useRoute} from "vue-router";
+import BuyDialog from "@/components/Dialogs/buyDialog.vue";
+import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue";
+import ImgCard from "@/components/common/imgCard.vue";
+import ImgCardTow from "@/components/assets/imgs.vue";
+import StarTimer from "@/components/common/starTimer.vue";
+import SellDialog from "@/components/Dialogs/sellDialog.vue";
+import Footer from "@/components/common/footer.vue";
+import {nftDetail, apiGetPrice, apiTxHash} from "@/utils/marketplace";
+import {priceCalculated} from "@/configs/priceCalculate.js";
+import {BlockChain} from "@/components/chain/BlockChain";
 import {walletStore} from "@/store/wallet";
-import { useMarketplaceStore } from "@/store/marketplace"
-import LazyLoadImg from "@/components/lazyloadimg"
-import {formatPrice} from "@/components/chain/utils"
+import {useMarketplaceStore} from "@/store/marketplace";
+import LazyLoadImg from "@/components/lazyloadimg";
+import {formatPrice} from "@/components/chain/utils";
 import {createModal} from "@/utils/model.util";
-import { contribution, timeStaking } from "@/configs/priceCalculate"
+import {contribution, timeStaking} from "@/configs/priceCalculate";
 const router = useRouter();
 const route = useRoute();
-const localWalletStore = walletStore()
-const marketplaceList = useMarketplaceStore()
+const localWalletStore = walletStore();
+const marketplaceList = useMarketplaceStore();
 const props = defineProps({
   address: String,
-  tokenid: String
-})
-import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
-const detailData = ref(null)
-const assetsDetailData = ref(null)
-const myAddress = localWalletStore.address
-const contractBlankUrl = ref()
-const founderBlankUrl = ref()
-const contractTokenUrl = ref()
-const nftAbilities = ref()
-const icon = ref('')
-const usd = ref('')
-const price = ref('')
-const loadingDialogVisible = ref(false)
-const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS)
-const FOUNDER_ADDRESS = ref(import.meta.env.VUE_APP_FOUNDER_ADDRESS)
+  tokenid: String,
+});
+import placeholderImg from "@/assets/img/marketplace/GenesisHeroes_NFT.png";
+const detailData = ref(null);
+const assetsDetailData = ref(null);
+const myAddress = localWalletStore.address;
+const contractBlankUrl = ref();
+const founderBlankUrl = ref();
+const contractTokenUrl = ref();
+const nftAbilities = ref();
+const icon = ref("");
+const usd = ref("");
+const price = ref("");
+const loadingDialogVisible = ref(false);
+const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS);
+const FOUNDER_ADDRESS = ref(import.meta.env.VUE_APP_FOUNDER_ADDRESS);
 
 // 登录
 const cardLogin = async () => {
-  await new BlockChain().connect()
-}
+  await new BlockChain().connect();
+};
 
 // 购买
-const buyDialogVisible = ref(false)
-const buyDataArr = ref([])
+const buyDialogVisible = ref(false);
+const buyDataArr = ref([]);
 const buyNow = async () => {
-  detailData.value['icon'] = icon.value
-  detailData.value['tokenAmount'] = price.value
-  buyDataArr.value = []
-  buyDataArr.value.push(detailData.value)
-  buyDialogVisible.value = true
-  return
+  detailData.value["icon"] = icon.value;
+  detailData.value["tokenAmount"] = price.value;
+  buyDataArr.value = [];
+  buyDataArr.value.push(detailData.value);
+  buyDialogVisible.value = true;
+  return;
   const buyResult = await createModal(BuyDialog, {
     buyDataArr: buyDataArr.value,
-  }).show()
-  console.log(buyResult.errcode)
-  if(buyResult.errcode == 0) {
-    message.success('buy success')
-  } else if(buyResult.errcode == 1) {
-    if(buyResult.err.message.indexOf() > -1) {
-      message.error('User rejected the request')
+  }).show();
+  console.log(buyResult.errcode);
+  if (buyResult.errcode == 0) {
+    message.success("buy success");
+  } else if (buyResult.errcode == 1) {
+    if (buyResult.err.message.indexOf() > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('buy fail')
+      message.error("buy fail");
     }
   }
-
-}
+};
 const BuyHandleClose = () => {
-  buyDialogVisible.value = false
-}
+  buyDialogVisible.value = false;
+};
 
 // 添加购物车
 const addCart = async () => {
@@ -295,21 +503,21 @@ const addCart = async () => {
       {
         token_id: detailData.value.nft.token_id,
         contract_address: detailData.value.nft.contract_address,
-      }
-    ]
-  }
+      },
+    ],
+  };
   try {
-    const { errcode, errmsg } = await marketplaceList.addCartListState(data)
+    const {errcode, errmsg} = await marketplaceList.addCartListState(data);
     // console.log(errcode, errmsg)
-    if(errcode == 0) {
-      message.success('success! Add from cart')
-      marketplaceList.getCartList = await marketplaceList.getCartListState()
-      getDetail()
+    if (errcode == 0) {
+      message.success("success! Add from cart");
+      marketplaceList.getCartList = await marketplaceList.getCartListState();
+      getDetail();
     }
   } catch (e) {
-    message.error('fail! Add from cart')
+    message.error("fail! Add from cart");
   }
-}
+};
 
 // 移除购物车
 const clearCart = async () => {
@@ -320,236 +528,259 @@ const clearCart = async () => {
       {
         token_id: detailData.value.nft.token_id,
         contract_address: detailData.value.nft.contract_address,
-      }
-    ]
-  }
+      },
+    ],
+  };
   try {
-    const { errcode, errmsg } =  await marketplaceList.delCartListState(data)
-    if(errcode == 0) {
-      message.success('success! Remove from cart')
-      marketplaceList.getCartList = await marketplaceList.getCartListState()
-      getDetail()
+    const {errcode, errmsg} = await marketplaceList.delCartListState(data);
+    if (errcode == 0) {
+      message.success("success! Remove from cart");
+      marketplaceList.getCartList = await marketplaceList.getCartListState();
+      getDetail();
     }
   } catch (e) {
     // console.log(e)
   }
-}
+};
 
 // 下链使用
-const lockToGame = async(type) => {
-  if(type == 'founder') {
+const lockToGame = async (type) => {
+  if (type == "founder") {
     const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        message: `Are you sure you want to stake?`
-      }).show()
-      if (confirmResult.errcode == 0) {
-        loadingDialogVisible.value = true
-        unlockMainConfirm()
-      }
-  } else if(type == 'convert') {
-    const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      message: 'Are you sure you want to stake?'
-    }).show()
+      title: "",
+      message: `Are you sure you want to stake?`,
+    }).show();
     if (confirmResult.errcode == 0) {
-      loadingDialogVisible.value = true
-      lockToGameConfirm()
+      loadingDialogVisible.value = true;
+      unlockMainConfirm();
+    }
+  } else if (type == "convert") {
+    const confirmResult = await createModal(ConfirmDialog, {
+      title: "",
+      message: "Are you sure you want to stake?",
+    }).show();
+    if (confirmResult.errcode == 0) {
+      loadingDialogVisible.value = true;
+      lockToGameConfirm();
+    }
+  } else if (type == "redeem") {
+    const confirmResult = await createModal(ConfirmDialog, {
+      title: "",
+      message: `Redeem ${detailData.value.nft.detail.gold_coins} Gold to your game account. Do you wish to proceed?`,
+      // message: 'Are you sure you want to stake?'
+    }).show();
+    if (confirmResult.errcode == 0) {
+      loadingDialogVisible.value = true;
+      lockToGameConfirm();
     }
   }
-}
+};
 const lockToGameConfirm = async () => {
   try {
-    await new BlockChain().locker.lock(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
+    const bc = new BlockChain();
+    let res = await bc.locker.lock(detailData.value.nft.contract_address, [detailData.value.nft.token_id]);
     // message.success('lockToGame success')
-    detailData.value.nft['status'] = 1
-    const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
-    }).show()
-    loadingDialogVisible.value = false
-    if(res) {
+    detailData.value.nft["status"] = 1;
+    if (detailData.value.nft.type == 11) {
+      const confirmResult = await createModal(ConfirmDialog, {
+        title: "",
+        noBtnTitle: "",
+        message: "Redeem is complete. Please refresh the page in 3 to 4 minutes to view the updated status.",
+      }).show();
+    } else {
+      const confirmResult = await createModal(ConfirmDialog, {
+        title: "",
+        noBtnTitle: "",
+        message: "Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.",
+      }).show();
+    }
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
           // message.success('Unstake success.')
-          if(confirmed == 1) {
-            detailData.value.nft['status'] = ''
-            router.go(-1)
+          if (confirmed == 1) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
             clearInterval(timer);
           }
         }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
+    console.log(e.message);
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('lockToGame fail.')
+      message.error("lockToGame fail.");
     }
-    loadingDialogVisible.value = false
+    loadingDialogVisible.value = false;
   }
-}
+};
 const unlockMainConfirm = async () => {
   try {
-    const bc = new BlockChain()
-    let res = await bc.locker.lockMain(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
-    detailData.value.nft['status'] = 1
+    const bc = new BlockChain();
+    let res = await bc.locker.lockMain(detailData.value.nft.contract_address, [detailData.value.nft.token_id]);
+    detailData.value.nft["status"] = 1;
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.'
-    }).show()
-    loadingDialogVisible.value = false
-    if(res) {
+      title: "",
+      noBtnTitle: "",
+      message: "Staking is complete. Please refresh the page in 3 to 4 minutes to view the updated status.",
+    }).show();
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
           // message.success('Unstake success.')
-          if(confirmed == 1) {
-            detailData.value.nft['status'] = ''
-            router.go(-1)
+          if (confirmed == 1) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
             clearInterval(timer);
           }
         }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('lockToGame fail.')
+      message.error("lockToGame fail.");
     }
-    loadingDialogVisible.value = false
+    loadingDialogVisible.value = false;
   }
-}
+};
 
 // 赎回
 const backStaking = async () => {
-  if(marketplaceList.userGold < 0) {
+  if (marketplaceList.userGold < 0) {
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      message: 'Unstake Failed - Negative in-game gold balance. Please adjust your balance to continue.'
-    }).show()
+      title: "",
+      message: "Unstake Failed - Negative in-game gold balance. Please adjust your balance to continue.",
+    }).show();
   } else {
-    if(detailData.value.nft.type == 13) {
-      founderLock()
-    } else if(detailData.value.nft.type == 1 || detailData.value.nft.type == 12) {
-      heroLock()
+    if (detailData.value.nft.type == 13) {
+      founderLock();
+    } else if (detailData.value.nft.type == 1 || detailData.value.nft.type == 12) {
+      heroLock();
     }
   }
-}
+};
 
 const heroLock = async () => {
-  loadingDialogVisible.value = true
+  loadingDialogVisible.value = true;
   try {
-    const bc = new BlockChain()
-    let res = await bc.locker.unlockOrMintGameNft(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
-    detailData.value.nft['status'] = 1
+    const bc = new BlockChain();
+    let res = await bc.locker.unlockOrMintGameNft(detailData.value.nft.contract_address, [
+      detailData.value.nft.token_id,
+    ]);
+    detailData.value.nft["status"] = 1;
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
-    }).show()
-    loadingDialogVisible.value = false
-    if(res) {
+      title: "",
+      noBtnTitle: "",
+      message:
+        "Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.",
+    }).show();
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
-        // message.success('Unstake success.')
-        if( confirmed) {
-          detailData.value.nft['status'] = ''
-          router.go(-1)
-          clearInterval(timer);
-        }
-      }, 2000);
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
+          // message.success('Unstake success.')
+          if (confirmed) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
+            clearInterval(timer);
+          }
+        }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    loadingDialogVisible.value = false
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
-    } else if (e.message.indexOf('select wallet') > -1) {
-      message.error('user cancel select wallet')
+    loadingDialogVisible.value = false;
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
+    } else if (e.message.indexOf("select wallet") > -1) {
+      message.error("user cancel select wallet");
     } else {
-      message.error('Unstake fail')
+      message.error("Unstake fail");
     }
   }
-}
+};
 const founderLock = async () => {
-  loadingDialogVisible.value = true
+  loadingDialogVisible.value = true;
   try {
-    const bc = new BlockChain()
-    let res = await bc.locker.unlockMain(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
-    detailData.value.nft['status'] = 1
+    const bc = new BlockChain();
+    let res = await bc.locker.unlockMain(detailData.value.nft.contract_address, [detailData.value.nft.token_id]);
+    detailData.value.nft["status"] = 1;
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.'
-    }).show()
-    loadingDialogVisible.value = false
-    if(res) {
+      title: "",
+      noBtnTitle: "",
+      message:
+        "Unstake success. It is expected to take 3-4 minutes. Please log in to the original wallet address to check later.",
+    }).show();
+    loadingDialogVisible.value = false;
+    if (res) {
       try {
-        const { confirmed } = await apiTxHash(detailData.value.nft.net_id, res)
-        let timer = setInterval( async () => {
-        // message.success('Unstake success.')
-        if( confirmed) {
-          detailData.value.nft['status'] = ''
-          router.go(-1)
-          clearInterval(timer);
-        }
-      }, 2000);
+        const {confirmed} = await apiTxHash(detailData.value.nft.net_id, res);
+        let timer = setInterval(async () => {
+          // message.success('Unstake success.')
+          if (confirmed) {
+            detailData.value.nft["status"] = "";
+            router.go(-1);
+            clearInterval(timer);
+          }
+        }, 2000);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     }
   } catch (e) {
-    loadingDialogVisible.value = false
-    if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
-    } else if (e.message.indexOf('select wallet') > -1) {
-      message.error('user cancel select wallet')
-    } else if (e.message.indexOf('eoa address changed') > -1) {
+    loadingDialogVisible.value = false;
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
+    } else if (e.message.indexOf("select wallet") > -1) {
+      message.error("user cancel select wallet");
+    } else if (e.message.indexOf("eoa address changed") > -1) {
       const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
-        noBtnTitle: '',
-        message: "It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again."
-      }).show()
+        title: "",
+        noBtnTitle: "",
+        message:
+          "It looks like there's an issue with your MetaMask or OKX wallet address. Please check your wallet address and try again.",
+      }).show();
     } else {
-      message.error('Unstake fail')
+      message.error("Unstake fail");
     }
   }
-}
-
+};
 
 // 售卖弹窗
-const floorPrice = ref('0')
-const sellDialogVisible = ref(false)
-const beginSell = async() => {
-  if (detailData.value.event) return
-  floorPrice.value = await getFloorPrice()
-  sellDialogVisible.value = true
-}
-
+const floorPrice = ref("0");
+const sellDialogVisible = ref(false);
+const beginSell = async () => {
+  if (detailData.value.event) return;
+  floorPrice.value = await getFloorPrice();
+  sellDialogVisible.value = true;
+};
 
 // 取消售卖
-const cancelSell = async() => {
+const cancelSell = async () => {
   // console.log('cancelSell', detailData.value.event)
 
-  if (!detailData.value.event) return
+  if (!detailData.value.event) return;
   try {
-    let res = await new BlockChain().market.cancelOrder([detailData.value.event.data.id])
-    if(res.result) {
+    let res = await new BlockChain().market.cancelOrder([detailData.value.event.data.id]);
+    if (res.result) {
       let timer = setTimeout(() => {
-        getDetail()
-        message.success('Your item has been delisted.')
-        clearTimeout(timer)
+        getDetail();
+        message.success("Your item has been delisted.");
+        clearTimeout(timer);
       }, 2000);
     }
   } catch (e) {
@@ -564,13 +795,13 @@ const cancelSell = async() => {
     // } catch (e2) {
     //   // console.log('cancelSell fail', e.message)
     // }
-    if(e.message.indexOf('rejected')  > -1) {
-      message.error('User rejected the request')
+    if (e.message.indexOf("rejected") > -1) {
+      message.error("User rejected the request");
     } else {
-      message.error('Your item has failed to be delisted.')
+      message.error("Your item has failed to be delisted.");
     }
   }
-}
+};
 
 // 处理地址
 const sliceAddress = (address) => {
@@ -579,7 +810,7 @@ const sliceAddress = (address) => {
     return `${address.substring(0, 6)}......${address.slice(-4)}`;
   }
   return address;
-}
+};
 
 // 获取地板价
 const getFloorPrice = async () => {
@@ -588,86 +819,97 @@ const getFloorPrice = async () => {
     contract_address: detailData.value.nft.contract_address,
     item_id: detailData.value.nft.item_id,
     quality: detailData.value.nft.detail.quality,
-  }
-  let res = await apiGetPrice(data)
-  if(res.lowest_price_goods) {
-    floorPrice.value = res.lowest_price_goods.event.data.buy[0].amount
+  };
+  let res = await apiGetPrice(data);
+  if (res.lowest_price_goods) {
+    floorPrice.value = res.lowest_price_goods.event.data.buy[0].amount;
   } else {
-    floorPrice.value = '0'
+    floorPrice.value = "0";
   }
-  return floorPrice.value
-}
+  return floorPrice.value;
+};
 
 // 关闭出售弹窗
 const sellHandleClose = (val) => {
-  if(val) {
+  if (val) {
     let timer = setTimeout(() => {
-      getDetail()
-      clearTimeout(timer)
+      getDetail();
+      clearTimeout(timer);
     }, 2000);
-    sellDialogVisible.value = false
+    sellDialogVisible.value = false;
   } else {
-    sellDialogVisible.value = false
+    sellDialogVisible.value = false;
   }
-}
+};
 
 // mint上链
 const mintHero = async () => {
-  if(marketplaceList.userGold < 0) {
+  console.log(toRaw(marketplaceList.activitySwitch).heroMint);
+  // return
+  if (toRaw(marketplaceList.activitySwitch).heroMint == 0) {
     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
-      noBtnTitle: '',
-      message: 'Mint Failed - Negative in-game gold balance. Please adjust your balance to continue.'
-    }).show()
+      title: "",
+      noBtnTitle: "",
+      message: "Mint Failed",
+    }).show();
   } else {
+    if (marketplaceList.userGold < 0) {
+      const confirmResult = await createModal(ConfirmDialog, {
+        title: "",
+        noBtnTitle: "",
+        message: "Mint Failed - Negative in-game gold balance. Please adjust your balance to continue.",
+      }).show();
+    } else {
       try {
-      const res = await new BlockChain().locker.mintNft([detailData.value.nft.uniid])
-      message.success('Mint success.')
-      router.go(-1)
-    } catch (e) {
-      if(e.message.indexOf('rejected') > -1) {
-        message.error('User rejected the request')
-      } else if (e.message.indexOf('select wallet') > -1) {
-        message.error('user cancel select wallet')
-      } else {
-        message.error('Mint Failed.')
+        const res = await new BlockChain().locker.mintNft([detailData.value.nft.uniid]);
+        message.success("Mint success.");
+        router.go(-1);
+      } catch (e) {
+        if (e.message.indexOf("rejected") > -1) {
+          message.error("User rejected the request");
+        } else if (e.message.indexOf("select wallet") > -1) {
+          message.error("user cancel select wallet");
+        } else {
+          message.error("Mint Failed.");
+        }
       }
     }
   }
-}
+};
 
 const getDetail = async () => {
-  let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid)
+  let {errcode, errmsg, data} = await nftDetail(props.address, props.tokenid);
   // console.log(data)
-  contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}`
-  
-  contractTokenUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/token/${data.nft.contract_address}/instance/${data.nft.token_id}`
+  contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}`;
+
+  contractTokenUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/token/${data.nft.contract_address}/instance/${
+    data.nft.token_id
+  }`;
   if (errcode) {
     // console.log(errmsg)
     //TODO:: 提示错误信息
-    return
+    return;
   }
-  const nftData = data.nft
-  nftData.event = data.event
-  nftAbilities.value = data.nft.detail
-  detailData.value = data
+  const nftData = data.nft;
+  nftData.event = data.event;
+  nftAbilities.value = data.nft.detail;
+  detailData.value = data;
   if (data.event?.data) {
-    const _data = formatPrice(data.event?.data)
-    icon.value = _data.icon
-    usd.value = _data.usd
-    price.value = _data.tokenAmount
-    
+    const _data = formatPrice(data.event?.data);
+    icon.value = _data.icon;
+    usd.value = _data.usd;
+    price.value = _data.tokenAmount;
   }
-}
+};
 onMounted(() => {
-  if(location.pathname.length > 8) {
-    getDetail()
+  if (location.pathname.length > 8) {
+    getDetail();
   } else {
-    detailData.value = marketplaceList.detailData
-    founderBlankUrl.value = `https://etherscan.io/token/0xec23679653337d4c6390d0eeba682246a6067777?a=${detailData.value.nft.token_id}`
-    nftAbilities.value = marketplaceList.detailData.nft.detail
+    detailData.value = marketplaceList.detailData;
+    founderBlankUrl.value = `https://etherscan.io/token/0xec23679653337d4c6390d0eeba682246a6067777?a=${detailData.value.nft.token_id}`;
+    nftAbilities.value = marketplaceList.detailData.nft.detail;
   }
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -678,7 +920,7 @@ onMounted(() => {
   .bg-content {
     width: 100%;
     height: 100%;
-    background: url('@/assets/img/marketplace/BG01.png') no-repeat;
+    background: url("@/assets/img/marketplace/BG01.png") no-repeat;
     background-size: 100% 100%;
   }
   .detail-bg {
@@ -689,16 +931,16 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     .content {
-      width: 1266px;
+      width: 1091px;
       margin: 0 auto;
       padding-top: 76px;
       display: flex;
       justify-content: space-between;
       color: #fff;
       .top-left {
-        width: 453px;
+        width: 321px;
         .top-left-img {
-          height: 678px;
+          height: 478px;
           :deep(.card-img-common) {
             .img-top {
               width: 120px;
@@ -708,9 +950,9 @@ onMounted(() => {
               font-size: 18px;
             }
             .img-btm {
-              bottom:16px;
+              bottom: 16px;
               left: 20px;
-              >div {
+              > div {
                 width: 110px;
                 height: 40px;
                 font-size: 18px;
@@ -720,18 +962,77 @@ onMounted(() => {
               }
             }
           }
+          :deep(.imgs) {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            .imgs-bg {
+              width: 100%;
+              height: 100%;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+              // height: 450px;
+            }
+            .imgs-img {
+              width: 311px;
+              height: 413px;
+            }
+            .imgs-day {
+              bottom: 180px;
+              width: 90px;
+              height: 30px;
+              line-height: 30px;
+              font-size: 18px;
+              font-weight: 700;
+            }
+            .imgs-detail {
+              width: 311px;
+              height: 50px;
+              bottom: 65px;
+              div {
+                display: flex;
+                align-items: center;
+                img {
+                  width: 40px;
+                  height: 40px;
+                  margin: 0 8px;
+                }
+                span {
+                  font-family: "MEurostile";
+                  font-weight: 700;
+                  font-size: 32px;
+                  color: #ffffff;
+                }
+              }
+            }
+            .imgs-quality {
+              bottom: 85px;
+              width: 80px;
+              height: 86px;
+            }
+            .imgs-name {
+              bottom: 15px;
+              font-size: 36px;
+            }
+          }
+          .mint-hero {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
       .top-right {
-        width: 719px;
+        width: 712px;
         h2 {
           font-size: 42px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
         }
         .top-right-owner {
           display: flex;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
           font-size: 30px;
           .address {
@@ -747,16 +1048,16 @@ onMounted(() => {
           background: #2d2738;
           border-radius: 20px;
           margin-top: 10px;
-          color: #BB7FFF;
+          color: #bb7fff;
           padding: 15px 20px;
           box-sizing: border-box;
           li {
             display: flex;
             justify-content: space-between;
-            >div {
+            > div {
               display: flex;
               font-size: 28px;
-              color: #9950FD;
+              color: #9950fd;
             }
             .time {
               display: flex;
@@ -777,10 +1078,10 @@ onMounted(() => {
               display: flex;
               align-items: center;
               span {
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: 400;
                 font-size: 24px;
-                color: #BB7FFF;
+                color: #bb7fff;
               }
               .bold {
                 font-weight: bold;
@@ -799,7 +1100,7 @@ onMounted(() => {
           height: 40px;
           line-height: 40px;
           border-radius: 20px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: 300;
           font-size: 18px;
           display: flex;
@@ -820,19 +1121,19 @@ onMounted(() => {
               display: inline-block;
               height: 40px;
               line-height: 40px;
-              color: #9A50FF;
+              color: #9a50ff;
             }
-            
+
             &:nth-child(2) {
               margin-left: 20px;
               span {
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: 600;
                 font-size: 20px;
-                color: #F3F0FF;
+                color: #f3f0ff;
               }
               .expected {
-                color: #00DEFF;
+                color: #00deff;
               }
               img {
                 width: 25px;
@@ -840,7 +1141,6 @@ onMounted(() => {
               }
             }
           }
-          
         }
         .top-right-btns {
           div {
@@ -848,16 +1148,16 @@ onMounted(() => {
             justify-content: space-between;
             align-items: center;
             margin: 10px 0;
-            >div {
+            > div {
               width: 348px;
               height: 57px;
               display: flex;
               justify-content: center;
               align-items: center;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: bold;
               font-size: 28px;
-              color: #FFFFFF;
+              color: #ffffff;
               border-radius: 12px;
               cursor: pointer;
             }
@@ -912,14 +1212,14 @@ onMounted(() => {
           }
         }
         .info {
-          color: #B3B5DA;
+          color: #b3b5da;
           margin-top: 40px;
           h2 {
-            font-family: 'Poppins';
+            font-family: "Poppins";
             font-weight: bold;
             font-size: 30px;
             color: #fff;
-            border-bottom: 2px solid #3A3B57;
+            border-bottom: 2px solid #3a3b57;
           }
           li {
             display: flex;
@@ -931,14 +1231,14 @@ onMounted(() => {
               text-align: left;
               margin-top: 10px;
               a {
-                color: #B3B5DA;
+                color: #b3b5da;
                 cursor: pointer;
               }
             }
             .contract-address {
               position: relative;
               cursor: pointer;
-              >div {
+              > div {
                 width: 560px;
                 height: 40px;
                 border-radius: 10px;
@@ -953,7 +1253,7 @@ onMounted(() => {
                 display: none;
               }
               &:hover {
-                >div {
+                > div {
                   display: block;
                 }
               }
@@ -965,7 +1265,7 @@ onMounted(() => {
         padding-bottom: 90px;
         h2 {
           font-size: 30px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
           margin-bottom: 10px;
         }
@@ -973,22 +1273,26 @@ onMounted(() => {
           display: flex;
           flex-wrap: wrap;
           clear: both;
-          width: 489px;
+          justify-content: space-between;
+          width: 318px;
           li {
             width: 154px;
             height: 84px;
             background: #2d2738;
             border-radius: 20px;
-            margin-right: 9px;
+            // margin-right: 9px;
             margin-bottom: 10px;
             div {
               text-align: center;
               font-size: 22px;
-              color: #B3B5DA;
+              color: #b3b5da;
               font-family: "Poppins";
               h5 {
                 font-weight: bold;
               }
+              .min-size {
+                font-size: 18px;
+              }
               p {
                 font-weight: 400;
                 color: #fff;
@@ -999,23 +1303,23 @@ onMounted(() => {
         .gold-content {
           width: 455px;
           height: 84px;
-          background: #2D2738;
+          background: #2d2738;
           border-radius: 20px;
           display: flex;
           justify-content: space-between;
           .left {
             padding: 10px 19px;
-            font-family: 'Poppins';
+            font-family: "Poppins";
             font-size: 22px;
             h4 {
               height: 18px;
               font-weight: 400;
-              color: #B3B5DA;
+              color: #b3b5da;
             }
             p {
               height: 20px;
               font-weight: bold;
-              color: #FFFFFF;
+              color: #ffffff;
               margin-top: 18px;
             }
           }
@@ -1041,10 +1345,10 @@ onMounted(() => {
               height: 82px;
               padding: 20px;
               box-sizing: border-box;
-              background: #1A1821;
-              box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+              background: #1a1821;
+              box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
               border-radius: 10px;
-              border: 1px solid #B966FF;
+              border: 1px solid #b966ff;
             }
             &:hover {
               .right-tips {