新增公告页面，新增链操作loading弹窗

2024-07-10 16:56:02 +08:00 · 2024-07-10 16:56:02 +08:00 · 6429156822
commit 6429156822
parent d1c2a9ac65
15 changed files with 174 additions and 147 deletions
--- 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
--- 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
--- 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
--- 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
--- 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",
--- a/src/assets/img/home/new-img/gameWeb_p1_slogan.png
+++ b/src/assets/img/home/new-img/gameWeb_p1_slogan.png
--- a/src/components/Dialogs/buyDialog.vue
+++ b/src/components/Dialogs/buyDialog.vue
@ -1,5 +1,14 @@
 <template>
-  <div class="buy-dialog" ref="buyModal" v-if="props.visible">
+  <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>
@ -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;
+  .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;
-  z-index: 10000;
+  }
+}
+.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;
--- 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%;
--- 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;
--- 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
  }
 }

--- 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') {
--- 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) => {
--- 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)
--- 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(() => {
--- 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>