diff --git a/.env.dev b/.env.dev
index 2d0ac21..9d7a0bc 100644
--- a/.env.dev
+++ b/.env.dev
@@ -14,5 +14,5 @@ VUE_APP_NET_ID='13473'
 VUE_APP_MARKET_CURRENCY='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
 VUE_APP_MAKEFEE_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'
 VUE_APP_LOCKER_ADDRESS='0xC8607507451059CfAe6Ca4D07EC6f631ce8ef9f9'
-VUE_APP_EXPLORER_URL='https://explorer.testnet.immutable.com/address/'
+VUE_APP_EXPLORER_URL='https://explorer.testnet.immutable.com'
 VUE_APP_PRODUCTION=sandbox
\ No newline at end of file
diff --git a/.env.development b/.env.development
index c77ad1a..5f45365 100644
--- a/.env.development
+++ b/.env.development
@@ -14,5 +14,5 @@ VUE_APP_NET_ID='13473'
 VUE_APP_MARKET_CURRENCY='0xFd42bfb03212dA7e1A4608a44d7658641D99CF34'
 VUE_APP_MAKEFEE_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'
 VUE_APP_LOCKER_ADDRESS='0xC8607507451059CfAe6Ca4D07EC6f631ce8ef9f9'
-VUE_APP_EXPLORER_URL='https://explorer.testnet.immutable.com/address/'
+VUE_APP_EXPLORER_URL='https://explorer.testnet.immutable.com'
 VUE_APP_PRODUCTION=sandbox
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 75b0e0d..af0934d 100644
--- a/.env.production
+++ b/.env.production
@@ -14,5 +14,5 @@ VUE_APP_NET_ID='13371'
 VUE_APP_MARKET_CURRENCY='0x52A6c53869Ce09a731CD772f245b97A4401d3348'
 VUE_APP_MAKEFEE_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'
 VUE_APP_LOCKER_ADDRESS='0x2034e51e1a24f8b488610aBBDCc74F3e0cA833df'
-VUE_APP_EXPLORER_URL='https://explorer.immutable.com/address/'
+VUE_APP_EXPLORER_URL='https://explorer.immutable.com'
 VUE_APP_PRODUCTION=production
\ No newline at end of file
diff --git a/.env.test b/.env.test
index 8dc0e08..b37ad59 100644
--- a/.env.test
+++ b/.env.test
@@ -14,5 +14,5 @@ VUE_APP_NET_ID='13371'
 VUE_APP_MARKET_CURRENCY='0x52A6c53869Ce09a731CD772f245b97A4401d3348'
 VUE_APP_MAKEFEE_ADDRESS='0x50A8e60041A206AcaA5F844a1104896224be6F39'
 VUE_APP_LOCKER_ADDRESS='0x2034e51e1a24f8b488610aBBDCc74F3e0cA833df'
-VUE_APP_EXPLORER_URL='https://explorer.immutable.com/address/'
+VUE_APP_EXPLORER_URL='https://explorer.immutable.com'
 VUE_APP_PRODUCTION=production
\ No newline at end of file
diff --git a/package.json b/package.json
index c844e71..d32cd7a 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "task": "vite --host --mode dev",
     "dev": "vite --host --mode development",
+    "prod": "vite --host --mode production",
     "build:task": "vite build --mode dev",
     "build:dev": "vite build --mode development",
     "build:test": "vite build --mode test",
diff --git a/src/assets/img/home/new-img/gameWeb_p1_slogan.png b/src/assets/img/home/new-img/gameWeb_p1_slogan.png
index 2f5b0ef..9e29f25 100644
Binary files a/src/assets/img/home/new-img/gameWeb_p1_slogan.png and b/src/assets/img/home/new-img/gameWeb_p1_slogan.png differ
diff --git a/src/components/Dialogs/buyDialog.vue b/src/components/Dialogs/buyDialog.vue
index ae543f2..1086bd0 100644
--- a/src/components/Dialogs/buyDialog.vue
+++ b/src/components/Dialogs/buyDialog.vue
@@ -1,39 +1,48 @@
 <template>
-  <div class="buy-dialog" ref="buyModal" v-if="props.visible">
-    <div class="top-close" @click="handleCancel">
-      <img src="@/assets/img/marketplace/Close_counter.png" alt />
-    </div>
-    <div class="buy-dialog-content">
-      <div class="content-title">Transaction confirmation ( {{ props.buyDataArr.length }} )</div>
-      <div class="content-table">
-          <div>NFT</div>
-          <div>Token ID</div>
-          <div>Price</div>
-        </div>
-      <div class="content">
-        
-        <div class="content-nfts" v-for="(item, index) in props.buyDataArr" :key="index">
-          <li>
-            <div class="nft">
-              <div class="nft-img">
-                <!-- <img :src="item.nft.image" alt /> -->
-                <ImgCard :nftData="item.nft" />
-              </div>
-              <div class="nft-name">{{ item.nft.name }}</div>
-            </div>
-            <div class="id">{{ item.nft.token_id }}</div>
-            <div class="price">
-              <div>{{ item.tokenAmount }}</div>
-              <div class="price-img">
-                <img :src="item.icon" alt />
-              </div>
-            </div>
-          </li>
-        </div>
+  <div class="buy-dialog" ref="buyModal">
+    <!-- v-if="props.visible" -->
+    <a-modal
+      :class="'buyDia'"
+      v-model:open="props.buyDialogVisible"
+      :closable="false"
+      :footer="null"
+      :getContainer="() => $refs.buyModal"
+      :maskClosable="false"
+      destroyOnClose>
+      <div class="top-close" @click="handleCancel">
+        <img src="@/assets/img/marketplace/Close_counter.png" alt />
       </div>
-      
-    </div>
-    <div class="btm">
+      <div class="buy-dialog-content">
+        <div class="content-title">Transaction confirmation ( {{ props.buyDataArr.length }} )</div>
+        <div class="content-table">
+            <div>NFT</div>
+            <div>Token ID</div>
+            <div>Price</div>
+          </div>
+        <div class="content">
+          
+          <div class="content-nfts" v-for="(item, index) in props.buyDataArr" :key="index">
+            <li>
+              <div class="nft">
+                <div class="nft-img">
+                  <!-- <img :src="item.nft.image" alt /> -->
+                  <ImgCard :nftData="item.nft" />
+                </div>
+                <div class="nft-name">{{ item.nft.name }}</div>
+              </div>
+              <div class="id">{{ item.nft.token_id }}</div>
+              <div class="price">
+                <div>{{ item.tokenAmount }}</div>
+                <div class="price-img">
+                  <img :src="item.icon" alt />
+                </div>
+              </div>
+            </li>
+          </div>
+        </div>
+        
+      </div>
+      <div class="btm">
         <div class="btm-left">
           <li>Total&nbsp;:&nbsp;</li>
           <li>
@@ -45,23 +54,30 @@
         </div>
         <div class="btm-right" @click="buyConfirm">Confirm</div>
       </div>
+      <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
+    </a-modal>
   </div>
 </template>
 <script setup>
-import {ref, toRaw, computed, onMounted} from "vue";
+import {ref, toRaw, computed, onMounted, inject} from "vue";
+const message = inject("$message");
 import {Modal} from "ant-design-vue";
 import ImgCard from "@/components/common/imgCard.vue"
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
 import {priceCalculated} from "@/configs/priceCalculate";
 import {BlockChain} from "@/components/chain/BlockChain";
 import { formatPrice } from "@/components/chain/utils";
 const props = defineProps({
+  buyDialogVisible: {
+    type: Boolean,
+    required: true,
+  },
   buyDataArr: {
     type: Array,
     required: true,
   },
-  visible: ref(Boolean),
-  close: Function,
 });
+const loadingDialogVisible = ref(false)
 const totalPrice = computed(() => {
   let total = 0n;
   for (let sub of props.buyDataArr) {
@@ -76,23 +92,34 @@ const handleOk = (e) => {
 };
 
 const buyConfirm = async () => {
+  loadingDialogVisible.value = true;
   const lists = toRaw(props.buyDataArr);
   const ids = lists.map((item) => item.event.data.id);
   const bc = new BlockChain();
   try {
     let res = await bc.market.batchBuy(ids);
-    console.log(res)
+    console.log(res,'message')
     if (res != undefined && res.length > 0) {
-      hideModal({errcode: 0, res});
+      loadingDialogVisible.value = false;
+      if(res == 'Insufficient Balance') {
+        message.error('Insufficient Balance.')
+      } else {
+        emit("handleClose");
+        message.success('Success! Buy.')
+      }
     }
   } catch (err) {
-    console.log("buy fail", err.message);
-    hideModal({errcode: 1, err});
+    if(err.message.indexOf('rejected')  > -1) {
+      message.error('User rejected the request')
+    } else {
+      message.error('Buy fail.')
+    }
+    loadingDialogVisible.value = false;
   }
 };
 
 const handleCancel = (e) => {
-  hideModal({errcode: 1});
+  emit("handleClose");
 };
 
 function hideModal(result = null) {
@@ -115,20 +142,32 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.buy-dialog {
-  position: fixed;
-  top: 20%;
-  left: 50%;
-  transform: translateX(-50%);
+:deep(.buyDia) {
+  width: 1141px !important;
+  height: 705px !important;
   color: #fff;
-  width: 1140px;
-  min-height: 500px;
-  padding: 0px;
-  background: #1a1821;
-  border: 1px solid #b966ff;
-  box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
-  border-radius: 100px;
-  z-index: 10000;
+  .ant-modal-content {
+    padding: 0px;
+    background: #1a1821;
+    border: 1px solid #b966ff;
+    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
+    border-radius: 100px;
+  }
+}
+.buy-dialog {
+  // position: fixed;
+  // top: 20%;
+  // left: 50%;
+  // transform: translateX(-50%);
+  // color: #fff;
+  // width: 1140px;
+  // min-height: 500px;
+  // padding: 0px;
+  // background: #1a1821;
+  // border: 1px solid #b966ff;
+  // box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
+  // border-radius: 100px;
+  // z-index: 10000;
   .top-close {
     position: absolute;
     top: -23px;
diff --git a/src/components/Dialogs/loadingDialog.vue b/src/components/Dialogs/loadingDialog.vue
index c85e8a6..480b5a2 100644
--- a/src/components/Dialogs/loadingDialog.vue
+++ b/src/components/Dialogs/loadingDialog.vue
@@ -1,5 +1,6 @@
 <template>
-  <a-modal :class="'buyDia'" v-model:open="props.loadingDialogVisible" :closable="false" :footer="null" :maskClosable="false" @ok="handleOk">
+  <div ref="loadingModal">
+  <a-modal :class="'loadingDialog'" :getContainer="() => $refs.loadingModal" v-model:open="props.loadingDialogVisible" :closable="false" :footer="null" :mask="true" :maskClosable="false" @ok="handleOk">
     <!-- <template #footer>
       <a-button key="back" @click="handleCancel">Return</a-button>
       <a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
@@ -11,7 +12,9 @@
       <!-- <p>Please wait. Data is loading</p> -->
     </div>
   </a-modal>
+</div>
 </template>
+
 <script setup>
 import { ref, toRaw } from "vue";
 const props = defineProps({
@@ -33,13 +36,12 @@ emit('handleClose')
 </script>
 
 <style lang="scss" scoped>
-.ant-modal {
-
-// :deep(.buyDia) {
-  width: 500px !important;
+:deep(.loadingDialog) {
+  width: 450px !important;
+  height: 50px;
   color: #fff;
+  padding-top: 350px;
   // top: 50%;
-  margin-top: 500px;
   .ant-modal-content {
     padding: 0px;
     background: rgba(0,0,0,0);
@@ -47,16 +49,19 @@ emit('handleClose')
     // box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
     border-radius: 100px;
     .ant-modal-body {
-      padding: 0;
+      padding: 0 !important;
       // padding-bottom: 10px;
       .content {
         display: flex;
         justify-content: center;
         align-items: center;
+        width: 450px !important;
         height: 50px;
         div {
           width: 30px;
           height: 30px;
+          display: flex;
+          justify-content: center;
           img {
             width: 100%;
             height: 100%;
diff --git a/src/components/Dialogs/sellDialog.vue b/src/components/Dialogs/sellDialog.vue
index 18b5e8e..28b1a2b 100644
--- a/src/components/Dialogs/sellDialog.vue
+++ b/src/components/Dialogs/sellDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="sellModal">
     <a-modal
-      :class="'buyDia'"
+      :class="'sellDia'"
       v-model:open="props.sellDialogVisible"
       :closable="false"
       :footer="null"
@@ -32,6 +32,7 @@
                       maxlength="7"
                       v-model="priceValue"
                       placeholder="Enter Listing Price"
+                      @keyup.enter.native="sellConfirm"
                       onkeyup="value=value.replace(/[^0-9.]/g,'').replace(/\.{5,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d\d\d\d).*$/,'$1$2.$3')"
                       onafterpaste="value=value.replace(/[^0-9.]/g,'').replace(/\.{5,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d\d\d\d).*$/,'$1$2.$3')"
                     />
@@ -129,8 +130,8 @@
           </div>
         </div>
       </div>
+    <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
     </a-modal>
-    <!-- <LoadingDialog :loadingDialogVisible="loadingDialogVisible" /> -->
   </div>
 </template>
 <script setup>
@@ -138,7 +139,7 @@ import {ref, toRaw, onMounted, inject} from "vue";
 const message = inject("$message");
 import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
 import ImgCard from "@/components/common/imgCard.vue"
-// import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
 import {priceCalculated, timeFormat, royaltiesPrice, feePrice, totalPrice} from "@/configs/priceCalculate.js";
 import {BlockChain} from "@/components/chain/BlockChain";
 import { ethers } from "ethers"
@@ -199,17 +200,22 @@ const sellConfirm = async () => {
       currencyAmount: ethers.utils.parseEther(priceValue.value).toString(),
       orderExpiry: orderData,
     };
+    loadingDialogVisible.value = true;
+    // return
     try {
       const bc = new BlockChain();
       let res = await bc.market.beginSellERC721(data);
       if (res.result) {
         let timer = setTimeout(() => {
+        loadingDialogVisible.value = false;
           message.success("Success! Your item has been listed for sale.");
           emit("handleClose", true);
           clearTimeout(timer);
         }, 2000);
       }
     } catch (e) {
+  loadingDialogVisible.value = false;
+
       if(e.message.indexOf('rejected') > -1) {
         message.error('User rejected the request')
       } else {
@@ -244,7 +250,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 // .ant-modal-wrap{
 
-:deep(.ant-modal) {
+:deep(.sellDia) {
   width: 1172.2px !important;
   height: 848.4px;
   color: #fff;
diff --git a/src/components/assets/myCard.vue b/src/components/assets/myCard.vue
index 19a639f..8596283 100644
--- a/src/components/assets/myCard.vue
+++ b/src/components/assets/myCard.vue
@@ -38,6 +38,7 @@
       <div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Cancel listing</div>
     </div>
     <SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
+    <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
   </div>
 </template>
 
@@ -47,6 +48,7 @@ const message = inject('$message')
 import SellDialog from "@/components/Dialogs/sellDialog.vue"
 import { apiGetPrice, nftDetail } from "@/utils/marketplace"
 import ImgCard from "@/components/common/imgCard.vue"
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
 import { priceCalculated } from "@/configs/priceCalculate"
 import LazyLoadImg from "@/components/lazyloadimg"
 import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
@@ -136,6 +138,7 @@ const lockToGame = async(type) => {
         message: `Redeem ${props.nftData.detail.gold_coins} Gold to your game account. Do you wish to proceed?`
       }).show()
       if (confirmResult.errcode == 0) {
+        loadingDialogVisible = true
         lockToGameConfirm()
       }
   } else if(type == 'convert') {
@@ -144,6 +147,7 @@ const lockToGame = async(type) => {
       message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
     }).show()
     if (confirmResult.errcode == 0) {
+      loadingDialogVisible = true
       lockToGameConfirm()
     }
   }
@@ -155,6 +159,7 @@ const lockToGameConfirm = async () => {
     message.success('lockToGame success')
     // router.go(-1)
     emit('renewMyNft')
+    loadingDialogVisible = false
     // router.push('/assets')
   } catch (e) {
     if(e.message.indexOf('rejected') > -1) {
@@ -162,6 +167,7 @@ const lockToGameConfirm = async () => {
     } else {
       message.error('lockToGame fail.')
     }
+    loadingDialogVisible = false
   }
 }
 
diff --git a/src/components/cart/index.vue b/src/components/cart/index.vue
index 5277222..a2552ae 100644
--- a/src/components/cart/index.vue
+++ b/src/components/cart/index.vue
@@ -49,6 +49,7 @@
     </div>
     <div v-if="cartList !== undefined && cartList.length > 0" class="cart-btn" @click="buyAll">Buy All</div>
     <div v-else class="cart-btn" @click="toMarketplace">Select NFTs to Buy</div>
+    <BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="cartList"  @handleClose="buyHandleClose" />
   </div>
 </template>
 
@@ -190,7 +191,12 @@ const clearCart = async () => {
   }
 }
 
+const buyDialogVisible = ref(false)
+// const buyDataArr = []
 const buyAll = async () => {
+  buyDialogVisible.value = true
+  // buyDataArr.value = cartList.value
+  return
   try {
     const confirmResult = await createModal(BuyDialog, {
       buyDataArr: cartList.value,
@@ -212,6 +218,10 @@ const buyAll = async () => {
   }
 }
 
+const buyHandleClose = () => {
+  buyDialogVisible.value = false
+}
+
 // watch(() => route.path,(newPath, oldPath) => {
 //   let routerPath = newPath.split('/')
 //   if(routerPath[1] == 'marketplace' || routerPath[1] == 'assets' || routerPath[1] == 'detail') {
diff --git a/src/components/common/card.vue b/src/components/common/card.vue
index 00ba574..f9479ad 100644
--- a/src/components/common/card.vue
+++ b/src/components/common/card.vue
@@ -33,6 +33,7 @@
     <div class="card-btn" v-else>
       <div class="card-cancel" @click="cancelNft(nftData)">Off the shelves</div>
     </div>
+    <BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="buyDataArr"  @handleClose="buyHandleClose" />
   </div>
 </template>
 
@@ -41,6 +42,7 @@ import { ref, toRaw, onMounted, getCurrentInstance, inject, computed } from "vue
 const message = inject('$message')
 import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 import ImgCard from "@/components/common/imgCard.vue"
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
 import {priceCalculated} from "@/configs/priceCalculate.js"
 import {walletStore} from "@/store/wallet";
 import { BlockChain } from "@/components/chain/BlockChain"
@@ -64,15 +66,18 @@ const props = defineProps({
   },
 });
 
+const buyDialogVisible = ref(false)
 const buyDataArr = ref([])
 
 // 确认购买弹窗
 const buyNft = async (val) => {
   props.nftData['icon'] = icon.value
-  // props.nftData['icon'] = price.value
+  props.nftData['price'] = price.value
   buyDataArr.value = []
   buyDataArr.value.push(props.nftData)
-  console.log("buy",buyDataArr.value)
+  buyDialogVisible.value = true
+  return
+  // console.log("buy",buyDataArr.value)
   const buyResult = await createModal(BuyDialog, {
     buyDataArr: buyDataArr.value,
   }).show()
@@ -90,6 +95,10 @@ const buyNft = async (val) => {
     }
   }
 }
+const buyHandleClose = () => {
+  buyDialogVisible.value = false
+  emit('renewNft')
+}
 
 // 取消售卖
 const cancelNft = async (val) => {
diff --git a/src/components/marketplace/mktContent.vue b/src/components/marketplace/mktContent.vue
index 13e1b87..b88adb2 100644
--- a/src/components/marketplace/mktContent.vue
+++ b/src/components/marketplace/mktContent.vue
@@ -303,7 +303,7 @@ const renewNft = async() => {
 // 总条数
 const totalCount = ref(0)
 const getHeroData = async () => {
-  // loadingDialogVisible.value = false;
+  // loadingDialogVisible.value = true;
   try {
     let nftListBox
     // const { errcode, errmsg, rows, page } = await marketplaceList.getMarketplaceState(reqData.value)
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 1df4f83..6e4292e 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -72,7 +72,9 @@
               </li>
               <li>
                 <div>Token ID</div>
-                <div>{{ detailData.nft.token_id }}</div>
+                <div>
+                  <a :href="contractTokenUrl" target="_blank">{{ detailData.nft.token_id }}</a>
+                </div>
               </li>
               <li>
                 <div>Blockchain</div>
@@ -154,7 +156,9 @@
       </div>
     </div>
     <Footer />
+    <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>
 
@@ -164,6 +168,7 @@ const message = inject('$message')
 import { useRouter } 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"
@@ -187,10 +192,12 @@ import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 const detailData = ref(null)
 const myAddress = localWalletStore.address
 const contractBlankUrl = ref()
+const contractTokenUrl = ref()
 const nftAbilities = ref()
 const icon = ref('')
 const usd = ref('')
 const price = ref('')
+const loadingDialogVisible = ref(false)
 
 // 登录
 const cardLogin = async () => {
@@ -198,10 +205,15 @@ const cardLogin = async () => {
 }
 
 // 购买
+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
   const buyResult = await createModal(BuyDialog, {
     buyDataArr: buyDataArr.value,
   }).show()
@@ -217,6 +229,9 @@ const buyNow = async () => {
   }
 
 }
+const BuyHandleClose = () => {
+  buyDialogVisible.value = false
+}
 
 // 添加购物车
 const addCart = async () => {
@@ -274,6 +289,7 @@ const lockToGame = async(type) => {
         message: `Redeem ${detailData.value.nft.detail.gold_coins} Gold to your game account. Do you wish to proceed?`
       }).show()
       if (confirmResult.errcode == 0) {
+        loadingDialogVisible.value = true
         lockToGameConfirm()
       }
   } else if(type == 'convert') {
@@ -281,8 +297,8 @@ const lockToGame = async(type) => {
       title: '', 
       message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
     }).show()
-    // console.log('confirmResult',confirmResult)
     if (confirmResult.errcode == 0) {
+      loadingDialogVisible.value = true
       lockToGameConfirm()
     }
   }
@@ -291,6 +307,7 @@ const lockToGameConfirm = async () => {
   try {
     await new BlockChain().locker.lock(detailData.value.nft.contract_address, [detailData.value.nft.token_id])
     message.success('lockToGame success')
+    loadingDialogVisible.value = false
     router.go(-1)
   } catch (e) {
     if(e.message.indexOf('rejected') > -1) {
@@ -298,7 +315,9 @@ const lockToGameConfirm = async () => {
     } else {
       message.error('lockToGame fail.')
     }
-  } 
+    loadingDialogVisible.value = false
+  }
+  
 }
 
 
@@ -387,7 +406,8 @@ const sellHandleClose = (val) => {
 
 const getDetail = async () => {
   let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid)
-  contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}${data.nft.contract_address}`
+  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:: 提示错误信息
@@ -404,7 +424,7 @@ const getDetail = async () => {
     price.value = _data.tokenAmount
     
   }
-  // console.log(data,contractBlankUrl.value,import.meta.env.VUE_APP_NET_ID,import.meta.env.VUE_APP_GPAL_API,`${import.meta.env.VUE_APP_EXPLORER_URL}${data.nft.contract_address}`,'----')
+  // console.log(detailData.value,contractBlankUrl.value,import.meta.env.VUE_APP_NET_ID,import.meta.env.VUE_APP_GPAL_API,`${import.meta.env.VUE_APP_EXPLORER_URL}${data.nft.contract_address}`,'----')
 }
 
 onMounted(() => {
diff --git a/src/views/NoticeView.vue b/src/views/NoticeView.vue
index d0a65a5..58f8881 100644
--- a/src/views/NoticeView.vue
+++ b/src/views/NoticeView.vue
@@ -5,42 +5,8 @@
         <div>
           <img src="@/assets/img/notice/Announcement01.jpg" alt="">
         </div>
-        <!-- <h4>Dear Players,</h4>
-        <p>
-          We want to provide some important updates regarding the issue in Bounty Mode that occurred on <span>July 7th</span>. 
-          Due to a technical glitch, some players experienced abnormal entry ticket usage, allowing them to accumulate excessive amounts of Gold. 
-          Specifically, <span>68 accounts</span> exploited this issue, collectively obtaining <span>134,710.9456 Gold</span>, which was then spent in various ways.
-        </p>
-        <p>
-          To maintain fairness in the game, we have deducted the improperly gained Gold from these accounts. 
-          As a result, some accounts now show a <span>negative balance</span>.Players with negative balances will need to <span>earn or 
-          deposit Gold</span> to return their accounts to a positive balance. If they fail to do so by the end of P2E Season 1, 
-          they will not be able to reclaim their Genesis Hero and will automatically be enrolled in future Counter Fire activities.
-        </p>
-        <p>
-          We are pleased to see that the majority of players did not exploit this issue. As a token of our appreciation for your honesty and support, 
-          we will be <span>rewarding all players who participated in Bounty Mode on July 7th with tickets</span>; e.g., if you participated in 5 matches and won them, 
-          you will receive an additional 5 tickets as a thank you for your continued support.
-        </p>
-        <p>
-          4Additionally, we want to extend our gratitude to those who spoke out to uphold community integrity during this incident. 
-          We will be providing <span>special rewards</span> to these players in future events as a gesture of our appreciation.
-        </p>
-        <p>
-          We apologize for any inconvenience this issue may have caused and thank you for your patience and understanding. 
-          We are working diligently to improve the game and ensure a fair and enjoyable experience for everyone.
-        </p>
-        <p>
-          hank you for your continued support and understanding.
-        </p>
-        <div>
-          <div>Sincerely.</div>
-          <div>Counter Fire Team</div>
-        </div> -->
       </div>
       <div class="notice-content-table">
-        <!-- <a-table :dataSource="nftData" :columns="columns" :pagination="false" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
-        </a-table> -->
         <div>
           <img src="@/assets/img/notice/Announcement02.jpg" alt="">
         </div>
@@ -51,42 +17,7 @@
 </template>
 
 <script setup>
-import { ref, toRaw } from "vue"
-import noticeJson from "@/configs/notice.json"
 import Footer from "@/components/common/footer.vue"
-const columns = [
-  {
-    title: 'NAME',
-    dataIndex: 'name',
-  },
-  {
-    title: 'Account_Address',
-    dataIndex: 'address',
-  },
-  {
-    title: 'Illegally obtained gold coins',
-    dataIndex: 'obtained',
-  }
-]
-
-// const nftData = toRaw(noticeJson)
-// const nftData = ref([
-//   {
-//     name: "aa",
-//     address: '12121221',
-//     gold: '1122'
-//   },
-//   {
-//     name: "aa",
-//     address: '12121221',
-//     gold: '1122'
-//   },
-//   {
-//     name: "aa",
-//     address: '12121221',
-//     gold: '1122'
-//   }
-// ])
 </script>
 
 <style lang="scss" scoped>