From cc7a1363de3336c724ea5dafde34236451fe13f7 Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Thu, 19 Sep 2024 11:52:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=89=E5=8A=9B=E8=B5=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ClaimView copy 2.vue | 1894 ++++++++++++++++++++++++++++++++
 src/views/ClaimView.vue        |   50 +-
 2 files changed, 1930 insertions(+), 14 deletions(-)
 create mode 100644 src/views/ClaimView copy 2.vue

diff --git a/src/views/ClaimView copy 2.vue b/src/views/ClaimView copy 2.vue
new file mode 100644
index 0000000..53a4023
--- /dev/null
+++ b/src/views/ClaimView copy 2.vue	
@@ -0,0 +1,1894 @@
+<template>
+  <div class="claim">
+    <div class="claim-content">
+      <div class="claim-content-title">
+        <!-- <img src="@/assets/img/cec_claim/HistoryTxt.png" alt=""> -->
+        <h1>CEC AIRDROP & TOURNAMENT REWARDS</h1>
+      </div>
+      <div class="claim-content-data">
+        <div class="claim-content-data-left">
+          <li>
+            <div class="icon">
+              <img src="@/assets/img/cec_claim/CEC_ICON.png" alt="">
+            </div>
+            <span>CEC</span>
+          </li>
+          <li>
+            <span>Total: {{ Number(cecInfo.total) == 0 ? 0 : priceCalculated(cecInfo.total,18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]}}</span>
+          </li>
+          <li>
+            <span>Claimed: {{ Number(cecInfo.claimed) == 0 ? 0 : priceCalculated(cecInfo.claimed,18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
+        </li>
+        </div>
+        <div class="claim-content-data-right">
+          <div class="unavailable">
+            <span>Unavailable: {{ Number(cecInfo.unavailable) == 0 ? 0 : priceCalculated(cecInfo.unavailable,18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
+            <div class="unavailable-tips">
+              <div>
+                <p>Available for claiming in the future.</p>
+                <p>Stay tuned for updates.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="claim-content-icon">
+        <div class="top">
+          <img src="@/assets/img/marketplace/CECIcon.png" alt="">
+        </div>
+        <div class="text">Available</div>
+        <div class="amount">{{ Number(cecInfo.available) == 0 ? 0 : priceCalculated(cecInfo.available,18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</div>
+      </div>
+      <div class="content" v-if="!address">
+        <div class="content-tips">
+          Log in to check your available CEC at this stage
+        </div>
+        <div class="content-btn">
+          <span class="btn login-btn" @click="connectLogin">Login</span>
+        </div>
+        <div class="content-tips-link">
+          <div>
+            <!-- <file-text-outlined />
+            <a :href="instructionLink" target="_blank">Instruction</a> -->
+          </div>
+        </div>
+        <div class="content-times">
+          <div class="content-time-top" @click="connectLogin">
+            <li>
+              <div class="left">
+                <div>
+                  <img src="@/assets/img/cec_claim/CEC_ICON.png" alt="">
+                </div>
+                <span>Claim to your wallet</span>
+              </div>
+              <div class="right">
+                <span>Starts Sep 9 at 00:00 UTC</span>
+              </div>
+            </li>
+          </div>
+          <div class="content-time-btm">
+            <li>
+              <div class="left left-hover">
+                <div>
+                  <img src="@/assets/img/cec_claim/Bitgetlogo.png" alt="">
+                </div>
+                <h3>Deposit to Bitget</h3>
+                <span>0 gas</span>
+              </div>
+              <div class="right">
+                <span>Closed</span>
+              </div>
+            </li>
+            <li>
+              <div class="left">
+                <p>Grab a share of 1,000,000 $CEC</p>
+              </div>
+            </li>
+          </div>
+        </div>
+      </div>
+      <div class="content" v-else-if="address && cecUserStatus == -2">
+        <div class="content-tips">
+          You have no CEC available to claim.
+        </div>
+        <div class="content-btn">
+          <span class="btn login-btn" @click="connectLogout">Logout</span>
+        </div>
+        <div class="content-tips-link">
+          <div class="padding-right-15">
+            <!-- <file-text-outlined />
+            <a :href="instructionLink" target="_blank">Instruction</a> -->
+          </div>
+        </div>
+        <div class="content-times">
+          <div class="content-time-top">
+            <li>
+              <div class="left">
+                <div>
+                  <img src="@/assets/img/cec_claim/CEC_ICON.png" alt="">
+                </div>
+                <span>Claim to your wallet</span>
+              </div>
+              <div class="right">
+                <span>Starts Sep 9 at 00:00 UTC</span>
+              </div>
+            </li>
+          </div>
+          <div class="content-time-btm">
+            <li>
+              <div class="left left-hover">
+                <div>
+                  <img src="@/assets/img/cec_claim/Bitgetlogo.png" alt="">
+                </div>
+                <h3>Deposit to Bitget</h3>
+                <span>0 gas</span>
+              </div>
+              <div class="right">
+                <span>Closed</span>
+              </div>
+            </li>
+            <li>
+              <div class="left">
+                <p>Grab a share of 1,000,000 $CEC</p>
+              </div>
+            </li>
+          </div>
+        </div>
+      </div>
+      <div class="content" v-else-if="cecUserStatus == -1">
+        <div class="content-tips content-tips-login">
+          <span>Address:</span> {{address}}
+        </div>
+        <!-- <div class="content-tips content-tips-login" v-if="cecInfo.bindUid">
+          <span>You'll receive your $CEC airdrop in Bitget spot account before the listing time.</span>
+        </div> -->
+        <div class="content-tips-link">
+          <div>
+            <!-- <file-text-outlined />
+            <a :href="instructionLink" target="_blank">Instruction</a> -->
+          </div>
+        </div>
+        <div class="content-times">
+          <div class="content-time-top" @click="isEoaWallet">
+            <li>
+              <div class="left">
+                <div>
+                  <img src="@/assets/img/cec_claim/CEC_ICON.png" alt="">
+                </div>
+                <span>Claim to your wallet</span>
+              </div>
+              <div class="right">
+                <!-- <div class="right claim-btn" @click="cecClaim">Claim</div> -->
+                <span>Starts Sep 9 at 00:00 UTC</span>
+              </div>
+            </li>
+            
+          </div>
+          <!-- <div class="content-time-line"></div> -->
+          <div class="content-time-btm">
+            <li>
+              <div class="left">
+                <div>
+                  <img src="@/assets/img/cec_claim/Bitgetlogo.png" alt="">
+                </div>
+                <h3>Deposit to Bitget</h3>
+                <span>0 gas</span>
+              </div>
+              <div class="right">
+                <span>Closed</span>
+              </div>
+            </li>
+            <li>
+              <div class="left">
+                <p>Grab a share of 1,000,000 $CEC</p>
+              </div>
+            </li>
+          </div>
+        </div>
+      </div>
+      <div class="content" v-else>
+        <div class="content-title">
+          <!-- <div class="content-title-left">
+            <div class="content-title-logo">
+              <img src="@/assets/img/cec_claim/Bitgetlogo.png" alt="">
+            </div>
+            <p>Deposit to Bitget</p>
+            <div class="free">0 gas</div>
+          </div> -->
+          <div class="content-title-right">
+            <div class="content-tips-link">
+              <div>
+                <!-- <file-text-outlined />
+                <a :href="instructionLink" target="_blank">Instruction</a> -->
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content-body">
+          <div class="content-body-header">
+            <div class="content-body-header-left">
+              <!-- <span v-if="cecUserStatus == 0">Grab a share of 1,000,000 $CEC</span> -->
+            </div>
+            <div class="content-body-header-right">
+              Starts Sep 9 at 00:00 UTC
+            </div>
+          </div>
+          <div class="content-body-box">
+            <!-- 3 claim 等待 -->
+            <div v-if="cecUserStatus == 3">
+              <div class="body-box-title padding-top">
+                <h3><span>{{Number(availableAmount) == 0 ? 0 : priceCalculated(availableAmount,18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]}}</span> $CEC claimed to your address in progress</h3>
+              </div>
+              <div class="body-box-con margin-top-20">
+                <p>Well done! check the progress on Bscscan</p>
+              </div>
+              <div class="body-box-con margin-20">
+                <!-- <p>check the progress on Bscscan</p> -->
+              </div>
+              <!-- <div class="body-box-btn margin-top-20">
+                <p class="center"></p>
+              </div> -->
+              <div class="body-box-btn margin-top">
+                <p class="center">· Stake at<a href="https://www.bitget.com/events/poolx/1215863452934230016" target="_blank"> Bitget Pool X</a> to grab your share of 900k $CEC.</p>
+              </div>
+              <div class="body-box-btn margin-top">
+                <p class="center">
+                  · Subscribe to CEC on <a href="https://bingx.com/en/act/template/7665/?randomId=4160257273" target="_blank"><span>Bing X</span></a>, Earn Up to 500% APR.
+                </p>
+              </div>
+              <div class="body-box-btn">
+                <!-- <p><a @click="cecUserStatus = 4">Cancel the Pre-Deposit to Bitget</a></p> -->
+              </div>
+            </div>
+            <!-- 4 是否取消绑定交易所 -->
+            <div v-if="cecUserStatus == 4">
+              <div class="body-box-title">
+                <h3>Cancel the Pre-Deposit to Bitget</h3>
+              </div>
+              <div class="body-box-con">
+                <p class="cancel">Canceling the Pre-Deposit will forfeit your event rewards,<br> but you can rejoin before it ends or claim $CEC to your wallet later</p>
+                <!-- <p></p> -->
+              </div>
+              <div class="body-box-btn">
+                <div @click="bindAccount('cancel')">Yes</div>
+                <div class="no" @click="cecUserStatus = 3">No</div>
+              </div>
+            </div>
+            <!-- 5 claim 成功 -->
+            <div v-if="cecUserStatus == 5">
+              <div class="body-box-title padding-top">
+                <h3><span>{{Number(availableAmount) == 0 ? 0 : priceCalculated(availableAmount,18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]}}</span> $CEC successfully claimed</h3>
+              </div>
+              <div class="body-box-content">
+                <li>
+                  <h5>Receiving Address :</h5>
+                </li>
+                <p>{{ claimMyAddress || address }}</p>
+                <p class="center">· Stake at<a href="https://www.bitget.com/events/poolx/1215863452934230016" target="_blank"> <a> Bitget Pool X</a></a> to grab your share of 900k $CEC.</p>
+                <p class="center">
+                  · Subscribe to CEC on <a href="https://bingx.com/en/act/template/7665/?randomId=4160257273" target="_blank"><span>Bing X</span></a>, Earn Up to 500% APR.
+                </p>
+              </div>
+              <div class="body-box-btn">
+                <!-- <p><a @click="cecUserStatus = 4">Cancel the Pre-Deposit to Bitget</a></p> -->
+              </div>
+            </div>
+            
+            <!-- 2 回显交易所绑定信息 -->
+            <div v-if="cecUserStatus == 2">
+              <div class="body-box-title">
+                <h4>Confirm claim of <span>{{Number(cecInfo.available) == 0 ? 0 : priceCalculated(cecInfo.available,18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]}}</span> $CEC</h4>
+              </div>
+              <div class="body-box-con">
+                <!-- <li>
+                  <h5>Bitget UID :</h5>
+                  <span>{{ cecInfo.bindUid }}</span>
+                </li> -->
+                <li>
+                  <h5>Receiving Address :</h5>
+                  <span>{{ claimMyAddress || address }}</span>
+                </li>
+                <li>
+                  <div class="font-size-14">You will use this address to receive $CEC and to pay for gas</div>
+                </li>
+              </div>
+              <div class="body-box-btn">
+                <div @click="cecClaim">Claim</div>
+              </div>
+            </div>
+          <!-- </div>
+          <div class="content-body-box" v-else> -->
+            <!-- 0 是否绑定交易所 -->
+            <div v-if="cecUserStatus == 0">
+              <div class="body-box-title">
+                <h3>Connect the receiving wallet and use it to pay for gas</h3>
+              </div>
+              <div class="body-box-con">
+                <!-- <p class="toBitget"><a href="https://bitget.onelink.me/XqvW?af_xp=custom&pid=Counterfire" target="_blank">No, click to create</a></p> -->
+              </div>
+              <div class="body-box-btn">
+                <div @click="connectWallet">Connect</div>
+              </div>
+            </div>
+            <!-- 1 绑定交易所 -->
+            <div v-if="cecUserStatus == 1">
+              <div class="body-box-title">
+                <p>Submit you $CEC Bitget exchange deposit address and Bitget exchange UID to receive the $CEC airdrop</p>
+                <!-- <p>to receive the #CEC airdrop</p> -->
+              </div>
+              <div class="body-box-con">
+                <div class="uid">
+                  <input type="text" placeholder="Bitget UID" v-model="tradeId">
+                </div>
+                <div class="address">
+                  <input type="text" placeholder="$CEC Deposit Address" v-model="tradeAddress">
+                  <p class="address-invalid" v-if="addressInvalid">Please enter the correct deposit address</p>
+                </div>
+              </div>
+              <div class="body-box-btn">
+                <div @click="bindAccount('send')">Send</div>
+                <span @click="cecUserStatus = 0">Back</span>
+              </div>
+              <div class="body-box-find">
+                <p><a href="https://medium.com/@CounterFire/counter-fire-bitget-pre-deposit-instruction-7592a15c7952" target="_blank">How to find your UID and $CEC deposit address in Bitget?</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- ------------------------------------------------------------------------ -->
+    </div>
+    <div ref="claimLogModal">
+      <a-modal :class="'claimLogModal'" :getContainer="() => $refs.claimLogModal" v-model:open="claimLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+        <!-- <div class="log-title">Cec claim</div> -->
+          <div class="closable" @click="claimLogDialogVisible = false">
+            <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+          </div>
+          <div class="log-content">
+            <h1>Under maintenance</h1>
+          </div>
+      </a-modal>
+    </div>
+    <!-- <div ref="maintainModal">
+      
+    </div> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, toRaw, onMounted, computed, watch, inject} from "vue"
+const message = inject('$message')
+import { FileTextOutlined } from '@ant-design/icons-vue';
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue";
+
+import { priceCalculated } from "@/configs/priceCalculate"
+import {switchEthereumChain} from "@/components/chain/utils"
+import {walletStore} from "@/store/wallet";
+import { useMarketplaceStore } from "@/store/marketplace"
+import { BlockChain } from "@/components/chain/BlockChain"
+import { apiCecInfoAll, apiBindAccount, apiCecClaim } from "@/utils/marketplace"
+import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
+import {createModal} from "@/utils/model.util";
+
+const localWalletStore = walletStore()
+const marketplaceStore = useMarketplaceStore()
+const instructionLink = ref('https://medium.com/@CounterFire/pre-deposit-instruction-a30d6ce62f80')
+const claimLogDialogVisible = ref(false)
+const address = ref()
+const tradeId = ref()
+const tradeAddress = ref()
+const cecUserStatus = ref(-1) // -2 没有cec -1 登陆后 0 获取claim地址  2 账号回显 3 绑定成功提示 4 是否取消绑定 5 取消绑定成功
+const cecInfo = ref({
+  available: 0,
+  bindAddress: '',
+  bindUid: '',
+  claimed: 0,
+  records: [],
+  stage: 0,
+  total: 0,
+  unavailable: 0
+})
+const availableAmount = ref(0)
+
+const getCecTotal = async () => {
+  if(address.value) {
+    let token = marketplaceStore.fireToken || localWalletStore.token
+    let data = await apiCecInfoAll(address.value, token)
+    cecInfo.value = data.data
+    availableAmount.value = cecInfo.value.available
+    if(data.data.bindUid) {
+      if(data.data.available == 0 || data.data.available == '0') {
+        cecUserStatus.value = -2
+      } else {
+        cecUserStatus.value = -1
+      }
+    } else {
+      if(data.data.available == 0 || data.data.available == '0') {
+        cecUserStatus.value = -2
+      } else {
+        cecUserStatus.value = -1
+      }
+    }
+    
+  }
+}
+
+const getCecInfo = async () => {
+  let token = marketplaceStore.fireToken || localWalletStore.token
+  let data = await apiCecInfoAll(address.value, token)
+  cecInfo.value = data.data
+}
+
+
+const connectLogin = async () => {
+  await new BlockChain().cecLogin()
+  address.value = marketplaceStore.fireAddress || localWalletStore.address
+}
+
+const connectLogout = async () => {
+  try {
+    // if(marketplaceStore.fireAddress) {
+      marketplaceStore.fireAddress = ''
+      marketplaceStore.fireToken = ''
+      location.reload()
+    // } else {
+      await new BlockChain().logout()
+    // }
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+watch(() => [marketplaceStore.fireAddress, localWalletStore.address],
+([preTest1, preTest2],
+oldTest1, oldTest2) => {
+  if(preTest1 || preTest2) {
+    address.value = preTest1 || preTest2
+    getCecTotal()
+  }
+})
+
+
+// 绑定取消绑定
+const addressInvalid = ref(false)
+const bindAccount = async (type) => {
+  let walletToken = await new BlockChain().token()
+  let token = marketplaceStore.fireToken || walletToken
+  if(type == 'send') {
+    if(tradeAddress.value) {
+      const data = {
+        accid: tradeId.value,
+        address: tradeAddress.value
+      }
+      let res = await apiBindAccount(data, token)
+      if(res.errcode == 15) {
+        addressInvalid.value = true
+      } else if(res.errcode == 12) {
+        addressInvalid.value = true
+      } else if(res.errcode == 11) {
+        addressInvalid.value = true
+      } else if(res.errcode == 0) {
+        cecInfo.value.bindUid = tradeId.value
+        cecInfo.value.bindAddress = tradeAddress.value
+        addressInvalid.value = false
+        cecUserStatus.value = 2
+      }
+    } else {
+      addressInvalid.value = true
+    }
+  } else if(type == 'cancel') {
+    const data = {
+      accid: '',
+      address: ''
+    }
+    let res = await apiBindAccount(data, token)
+    if(res.errcode == 0) {
+      tradeId.value = ''
+      tradeAddress.value = ''
+      cecUserStatus.value = 5
+    }
+  }
+}
+
+// 
+const reqGetInfo = async () => {
+  getCecTotal()
+}
+
+const claimMyAddress = ref()
+const claimMyProvider = ref()
+// 获取钱包地址
+const connectWallet = async () => {
+  const disabledArr = [3, 5, localWalletStore.walletType]
+  const chainId = parseInt(import.meta.env.VUE_APP_NET_ID_CLAIM);
+  const subTitle = 'Use this wallet to reciveing $CEC and pay gas.'
+  const { provider, address } = await new BlockChain().ClaimSelectAddress({subTitle: subTitle,targetChainId: chainId, disabled: disabledArr})
+  if(address) {
+    claimMyProvider.value = provider
+    claimMyAddress.value = address
+    cecUserStatus.value = 2
+  }
+}
+
+const isEoaWallet = () => {
+  if(localWalletStore.walletType == 1 || localWalletStore.walletType == 2 || localWalletStore.walletType == 4) {
+    cecUserStatus.value = 2
+  } else {
+    cecUserStatus.value = 0
+  }
+}
+
+// 领取
+const cecClaim = async () => {
+  if(localWalletStore.walletType == 1 || localWalletStore.walletType == 2 || localWalletStore.walletType ==4) {
+    walletClaim()
+  } else {
+    let walletToken = await new BlockChain().token()
+    let token = marketplaceStore.fireToken || walletToken
+    let address = claimMyAddress.value
+    let provider = toRaw(claimMyProvider.value)
+    try {
+      cecUserStatus.value = 3
+      let res = await new BlockChain().claim.cecClaim(provider,address, token)
+      if(res) {
+        getCecInfo()
+        cecUserStatus.value = 5
+      }
+    } catch(e) {
+      console.log(e.message)
+      cecUserStatus.value = 2
+      if(e.message.indexOf("User denied transaction signature") > -1) {
+        message.error("User rejected the request");
+      } else if(e.message.indexOf("reject") > -1){
+        message.error("User rejected the request");
+      } else if(e.message.indexOf("User denied request signature") > -1){
+        message.error("User rejected the request");
+      } else {
+        message.error("Claim fail.");
+      }
+    }
+  }
+  
+
+  
+  // let walletToken = await new BlockChain().token()
+  // let token = marketplaceStore.fireToken || walletToken
+  // let res1 = await apiCecClaim(res.address, token)
+}
+
+// wallet eaoCecClaim 
+const walletClaim = async () => {
+  let walletToken = await new BlockChain().token()
+  let token = marketplaceStore.fireToken || walletToken
+  let address = claimMyAddress.value || localWalletStore.address
+  let provider = toRaw(claimMyProvider.value) || new BlockChain().eoaProvider
+  let disabledArr = [1,2,3,4,5]
+  const filteredArray = disabledArr.filter(item => item !== localWalletStore.walletType)
+    try {
+      cecUserStatus.value = 3
+      let res = await new BlockChain().claim.eaoCecClaim(token,filteredArray)
+      if(res) {
+        getCecInfo()
+        cecUserStatus.value = 5
+      }
+    } catch(e) {
+      console.log(e.message)
+      cecUserStatus.value = 2
+      if(e.message.indexOf("User denied transaction signature") > -1) {
+        message.error("User rejected the request");
+      } else if(e.message.indexOf("reject") > -1){
+        message.error("User rejected the request");
+      } else if(e.message.indexOf("User denied request signature") > -1){
+        message.error("User rejected the request");
+      } else {
+        message.error("Claim fail.");
+      }
+    }
+}
+
+onMounted(() => {
+  address.value = marketplaceStore.fireAddress || localWalletStore.address
+  getCecTotal()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.claim {
+  width: 100%;
+  height: 1180px;
+  padding-top: 84px;
+  background: #16141b;
+  color: #fff;
+  background: url('@/assets/img/cec_claim/scene_bg.jpg') no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  .claim-content {
+    position: absolute;
+    top: 127px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1096px;
+    height: 915px;
+    background: url('@/assets/img/cec_claim/Counterfire_bg.png') no-repeat;
+    background-size: 100% 100%;
+    .claim-content-title {
+      // width: 822px;
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      margin: 0 auto;
+      margin-top: 54px;
+      h1 {
+        font-size: 48px;
+        font-family: 'Poppins';
+        font-weight: bold;
+        background-image: linear-gradient(to right, #e1c5ff, #bb7fff);
+        color: transparent;
+        -webkit-background-clip: text;
+      }
+    }
+    .claim-content-data {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 822px;
+      margin: 20px auto;
+      .claim-content-data-left {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        li {
+          display: flex;
+          // justify-content: space-between;
+          margin-right: 40px;
+          .icon {
+            width: 35px;
+            height: 33px;
+            margin-right: 10px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          span {
+            font-family: 'Poppins';
+            font-weight: 600;
+            font-size: 24px;
+          }
+        }
+      }
+      .claim-content-data-right {
+        .unavailable {
+          position: relative;
+          min-width: 180px;
+          height: 39px;
+          padding: 0 10px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 2px solid #fff;
+          color: #fff;
+          border-radius: 20px;
+          background: rgba(145,78,240,0);
+          cursor: pointer;
+          span {
+            font-family: 'Poppins';
+            font-weight: 400;
+            font-size: 14px;
+          }
+          .unavailable-tips {
+            display: none;
+          }
+          &:hover {
+            .unavailable-tips {
+              display: block;
+              position: absolute;
+              right: -300px;
+              top: -20px;
+              width: 280px;
+              height: 70px;
+              padding: 20px;
+              border: 1px solid #B966FF;
+              border-radius: 20px;
+              background: #1a1821;
+              box-shadow: 0px 0px 10px #B966FF;
+              div {
+                font-family: 'Poppins';
+                font-weight: 500;
+                font-size: 13px;
+                line-height: 1.1;
+              }
+            }
+          }
+        }
+      }
+    }
+    .claim-content-icon {
+      width: 561px;
+      height: 389px;
+      margin: 0 auto;
+      margin-top: -100px;
+      position: relative;
+      background: url('@/assets/img/cec_claim/Bg_chest.png') no-repeat;
+      background-size: 100% 100%;
+      .top {
+        width: 160px;
+        height: 153px;
+        margin: 0 auto;
+        position: absolute;
+        top: 120px;
+        left: 50%;
+        transform: translateX(-50%);
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .text {
+        position: absolute;
+        bottom: 62px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: 'Poppins';
+        font-weight: bold;
+        font-size: 24px;
+      }
+      .amount {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 182px;
+        height: 42px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 21px;
+        background: #201d27;
+        font-family: 'Poppins';
+        font-weight: bold;
+        font-size: 24px;
+      }
+    }
+    .content {
+      width: 822px;
+      margin: 0 auto;
+      .content-tips {
+        text-align: center;
+        margin: 10px auto;
+        font-family: 'Poppins';
+        font-weight: 400;
+        font-size: 24px;
+      }
+      .content-tips-login {
+        font-family: "Poppins-Regular";
+        font-size: 14px;
+        span {
+          font-size: 16px;
+          font-family: 'Poppins';
+          font-weight: 700;
+        }
+      }
+      .content-btn {
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 259px;
+          height: 42px;
+          font-size: 18px;
+          background: #FEC25D;
+          border-radius: 21px;
+          font-family: 'Poppins';
+          font-weight: 500;
+          font-size: 24px;
+          color: #2D2738;
+          cursor: pointer;
+        }
+      }
+      .content-tips-link {
+        width: 100%;
+        display: flex;
+        justify-content: end;
+        text-align: right;
+        margin: 40px 0;
+        padding-right: 28px;
+        margin-bottom: 5px;
+        color: #bb7fff;
+        div {
+          display: flex;
+          justify-content: end;
+          align-items: center;
+          text-align: right;
+          cursor: pointer;
+          span {
+            font-size: 14px;
+            margin-right: 5px;
+          }
+          a {
+            text-decoration-line: underline;
+            color: #bb7fff;
+            font-weight: 700;
+            font-family: "Poppins";
+            font-size: 18px;
+          }
+        }
+        .padding-right-15 {
+          padding-right: 15px;
+        }
+      }
+      .content-time {
+        width: 824px;
+        height: 197px;
+        // margin: 40px auto;
+        background: #241d2f;
+        background: url('@/assets/img/cec_claim/Counterfire_bg01.png') no-repeat;
+        background-size: 100% 100%;
+        padding: 35px 45px;
+        border-radius: 40px;
+        box-sizing: border-box;
+        color: #fff;
+        .content-time-top {
+          li {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .left {
+              display: flex;
+              align-items: center;
+              width: 380px;
+              div {
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                overflow: hidden;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+              h3 {
+                font-family: "Poppins";
+                font-size: 24px;
+                font-weight: 700;
+                margin: 0 10px 0 20px;
+              }
+              span {
+                display: inline-block;
+                color: #000;
+                background: #31FFF3;
+                font-size: 12px;
+                font-family: "Poppins";
+                padding: 0 5px;
+                border-radius: 10px;
+              }
+              p {
+                color: #a59dab;
+                font-size: 16px;
+                margin: 10px 0;
+                margin-left: 50px;
+              }
+            }
+            .left-hover {
+              cursor: pointer;
+            }
+            .right {
+              display: flex;
+              align-items: center;
+              span {
+                font-weight: 700;
+                font-size: 16px;
+              }
+              .tips {
+                position: relative;
+                margin-left: 10px;
+                cursor: pointer;
+                img {
+                  width: 28px;
+                  height: 27px;
+                  cursor: pointer;
+                }
+                .tips-box {
+                  display: none;
+                }
+                &:hover {
+                  .tips-box {
+                    display: block;
+                    position: absolute;
+                    right: -360px;
+                    top: -80px;
+                    width: 350px;
+                    height: 85px;
+                    padding: 20px;
+                    border: 1px solid #B966FF;
+                    border-radius: 20px;
+                    background: #1a1821;
+                    box-shadow: 0px 0px 10px #B966FF;
+                    div {
+                      font-family: 'Poppins';
+                      font-weight: 500;
+                      font-size: 13px;
+                      line-height: 1.2;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .content-time-line {
+          width: 100%;
+          height: 2px;
+          background: #44375c;
+        }
+        .content-time-btm {
+          li {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+            font-size: 18px;
+            font-family: 'Poppins';
+            color: #8d8598;
+            .left {
+              margin-left: 50px;
+              width: 390px;
+            }
+            .right {
+              width: 263px;
+              text-align: left;
+            }
+          }
+        }
+      }
+      .content-times {
+        width: 824px;
+        height: 197px;
+        // margin: 40px auto;
+        background: #241d2f;
+        background: url('@/assets/img/cec_claim/Counterfire_bg01.png') no-repeat;
+        background-size: 100% 100%;
+        padding: 10px 10px;
+        border-radius: 40px;
+        box-sizing: border-box;
+        color: #fff;
+        .content-time-top {
+          background: url('@/assets/img/cec_claim/Counterfire_mbg01.png') no-repeat;
+          background-size: 100% 100%;
+          height: 100px;
+          padding: 10px 20px 0 20px;
+          cursor: pointer;
+          li {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+            font-size: 18px;
+            font-family: 'Poppins';
+            // color: #8d8598;
+            .left {
+              // margin-left: 60px;
+              width: 390px;
+              display: flex;
+              align-items: center;
+              padding-left: 20px;
+              font-family: "Poppins";
+              font-size: 24px;
+              font-weight: 700;
+              div {
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                margin-right: 10px;
+                overflow: hidden;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+            }
+            .right {
+              width: 283px;
+              text-align: right;
+              span {
+                padding-right: 40px;
+              }
+              .claim-btn {
+                padding: 5px 20px;
+                border-radius: 20px;
+                color: #000;
+                background: #fec25d;
+                margin-right: 40px;
+              }
+            }
+            .claim-btn {
+              span {
+                color: #fff;
+                padding: 10px;
+                border: 1px solid #31FFF3;
+                border-radius: 20px;
+                cursor: pointer;
+              }
+            }
+          }
+          &:hover {
+            background: url('@/assets/img/cec_claim/Counterfire_mbg01.png') no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .content-time-line {
+          width: 100%;
+          height: 2px;
+          background: #44375c;
+        }
+        .content-time-btm {
+          padding-top: 10px;
+          li {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #8e8497;
+            .left {
+              display: flex;
+              align-items: center;
+              width: 380px;
+              padding-left: 40px;
+              div {
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                overflow: hidden;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+              h3 {
+                font-family: "Poppins";
+                font-size: 24px;
+                font-weight: 700;
+                margin: 0 10px;
+              }
+              span {
+                display: inline-block;
+                color: #000;
+                background: #8e8497;
+                font-size: 12px;
+                font-family: "Poppins";
+                padding: 0 5px;
+                border-radius: 10px;
+              }
+              p {
+                color: #a59dab;
+                font-size: 16px;
+                margin: 10px 0;
+                margin-left: 40px;
+              }
+            }
+            .right {
+              display: flex;
+              align-items: center;
+              span {
+                font-weight: 700;
+                font-size: 16px;
+                padding-right: 60px;
+              }
+              .tips {
+                position: relative;
+                margin-left: 10px;
+                cursor: pointer;
+                img {
+                  width: 28px;
+                  height: 27px;
+                  cursor: pointer;
+                }
+                .tips-box {
+                  display: none;
+                }
+                &:hover {
+                  .tips-box {
+                    display: block;
+                    position: absolute;
+                    right: -360px;
+                    top: -80px;
+                    width: 350px;
+                    height: 85px;
+                    padding: 20px;
+                    border: 1px solid #B966FF;
+                    border-radius: 20px;
+                    background: #1a1821;
+                    box-shadow: 0px 0px 10px #B966FF;
+                    div {
+                      font-family: 'Poppins';
+                      font-weight: 500;
+                      font-size: 13px;
+                      line-height: 1.2;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          
+        }
+      }
+      .content-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 10px;
+        margin-left: 40px;
+        .content-title-left {
+          display: flex;
+          align-items: center;
+          .content-title-logo {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            overflow: hidden;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          p {
+            font-family: 'Poppins';
+            font-weight: 600;
+            font-size: 24px;
+            margin: 0 10px;
+          }
+          .free {
+            width: 75px;
+            margin-top: 10px;
+            text-align: center;
+            background: #31FFF3;
+            border-radius: 9px;
+            font-family: 'Poppins';
+            font-weight: 400;
+            font-size: 14px;
+            color: #000;
+          }
+        }
+        .content-title-right {
+          display: flex;
+          align-items: center;
+          padding-right: 10px;
+          .content-tips-link {
+            margin: 0px;
+          }
+        }
+      }
+      .content-body {
+        width: 824px;
+        height: 359px;
+        margin-top: 9px;
+        background: #2d2738;
+        border-radius: 40px;
+        .content-body-header {
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin: 0 40px;
+          font-family: 'Poppins-Regular';
+          font-weight: 400;
+          font-size: 16px;
+          color: #F9F0FF;
+          .content-body-header-right {
+            display: flex;
+            align-items: center;
+            .tips {
+              position: relative;
+              margin-left: 10px;
+              cursor: pointer;
+              img {
+                width: 28px;
+                height: 27px;
+                cursor: pointer;
+              }
+              .tips-box {
+                display: none;
+              }
+              &:hover {
+                .tips-box {
+                  display: block;
+                  position: absolute;
+                  right: -360px;
+                  top: -80px;
+                  width: 350px;
+                  height: 85px;
+                  padding: 20px;
+                  border: 1px solid #B966FF;
+                  border-radius: 20px;
+                  background: #1a1821;
+                  box-shadow: 0px 0px 10px #B966FF;
+                  div {
+                    font-family: 'Poppins';
+                    font-weight: 500;
+                    font-size: 13px;
+                    line-height: 1.2;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .content-body-box {
+          height: 308px;
+          background: #1E1B26;
+          border-radius: 40px;
+          .body-box-title {
+            text-align: center;
+            font-family: 'Poppins';
+            font-weight: 600;
+            font-size: 24px;
+            color: #914DF0;
+            padding-top: 10px;
+            h3 {
+              padding-top: 40px;
+              span {
+                font-size: 30px;
+              }
+            }
+            h4 {
+              margin-bottom: 10px;
+              span {
+                font-size: 30px;
+              }
+            }
+            p {
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 16px;
+              color: #B29DD1;
+              line-height: 1.2;
+              text-align: left;
+              margin: 0 40px;
+            }
+          }
+          .padding-top {
+            h3 {
+              padding-top: 10px;
+            }
+          }
+          .body-box-con {
+            p {
+              width: 747px;
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 14px;
+              color: #fff;
+              margin: 30px auto;
+              text-align: center;
+              a {
+                font-size: 24px;
+                color: #8C7BA5;
+                text-decoration-line: underline;
+              }
+            }
+            .cancel {
+              margin-bottom: 60px;
+            }
+            >div {
+              width: 747px;
+              height: 37px;
+              margin: 20px auto;
+              background: #362E46;
+              border-radius: 19px;
+              input {
+                width: 100%;
+                height: 100%;
+                border: 0px;
+                padding-left: 20px;
+                font-family: 'Poppins-Regular';
+                font-weight: 400;
+                font-size: 16px;
+                background: #362E46;
+                border-radius: 19px;
+                color: #9488AC;
+              }
+              input[type=number] {
+                -moz-appearance:textfield;
+              }
+              input[type=number]::-webkit-inner-spin-button,
+              input[type=number]::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+              }
+            }
+            input::input-placeholder{
+              color: #9488AC;
+            }
+            input::-webkit-input-placeholder{	//兼容WebKit browsers（Chrome的内核）
+              color: #9488AC;
+            }
+            input::-moz-placeholder{			//Mozilla Firefox 4 to 18
+              color: #9488AC;
+            }
+            input::-moz-placeholder{			//Mozilla Firefox 19+
+              color: #9488AC;
+            }
+            input::-ms-input-placeholder{		//Internet Explorer 10+
+              color: #9488AC;
+            }
+            .uid {
+              margin-top: 30px;
+            }
+            li {
+              display: flex;
+              align-items: center;
+              height: 30px;
+              margin-left: 40px;
+              h5 {
+                font-family: 'Poppins';
+                font-weight: bold;
+                font-size: 18px;
+                margin: 0;
+              }
+              h6 {
+                width: 160px;
+                font-family: 'Poppins';
+                font-weight: 600;
+                font-size: 18px;
+              }
+              span {
+                font-family: 'Poppins';
+                font-weight: 600;
+                font-size: 18px;
+                color: #7EFDFF;
+                margin-left: 20px;
+              }
+              div {
+                font-family: 'Poppins';
+                font-weight: 400;
+                font-size: 16px;
+                color: #8C7BA5;
+                display: flex;
+                align-items: center;
+                p {
+                  color: #8C7BA5;
+                  margin: 0;
+                  margin-left: 40px;
+                }
+              }
+              .font-size-14 {
+                font-size: 15px;
+              }
+              &:nth-child(3) {
+                // margin-top: 10px;
+              }
+              &:nth-child(4) {
+                // margin-top: 10px;
+              }
+            }
+            .address-invalid {
+              margin: 0;
+              margin-top: 5px;
+              text-align: left;
+              color: #fa4962;
+              font-family: 'Poppins-Regular';
+              padding-left: 20px;
+              font-size: 12px;
+            }
+            h5 {
+              font-family: 'Poppins';
+              font-size: 28px;
+              text-align: center;
+              margin-top: 80px;
+            }
+          }
+          .body-box-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 40px;
+            div {
+              width: 259px;
+              height: 42px;
+              line-height: 42px;
+              text-align: center;
+              background: #FEC25D;
+              border-radius: 21px;
+              font-family: 'Poppins';
+              font-weight: 500;
+              font-size: 24px;
+              color: #2D2738;
+              cursor: pointer;
+              &:last-child {
+                margin-left: 20px;
+              }
+            }
+            .no {
+              background: #50FDF7;
+            }
+            span {
+              display: inline-block;
+              // width: 118px;
+              height: 42px;
+              line-height: 42px;
+              padding: 0px 10px;
+              box-sizing: border-box;
+              text-align: center;
+              background: rgba(30,27,38,0);
+              border-radius: 21px;
+              border: 2px solid #9950FD;
+              margin-left: 20px;
+              font-family: 'Poppins';
+              font-weight: 500;
+              font-size: 24px;
+              color: #9950FD;
+              cursor: pointer;
+            }
+            p {
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 14px;
+              color: #8C7BA5;
+              a {
+                color: #8C7BA5;
+                text-decoration-line: underline;
+                cursor: pointer;
+              }
+            }
+            
+            .center {
+              text-align: center;
+              color: #fff;
+              a {
+                margin-top: 20px !important;
+                color: #00f0ff;
+              }
+            }
+          }
+          .body-box-content {
+            width: 450px;
+            margin: 0 auto;
+            padding-left: 40px;
+            font-size: 14px;
+            font-family: 'Poppins';
+            li {
+              margin-top: 20px;
+            }
+            p {
+              margin-bottom: 50px;
+            }
+            .center {
+              margin-top: 10px;
+              margin-bottom: 0;
+              span {
+                font-size: 14px;
+                color: #47bcff;
+                text-decoration-line: underline;
+              }
+              a {
+                color: #7EFDFF;
+                text-decoration-line: underline;
+              }
+            }
+          }
+          .margin-top-20 {
+            margin-top: 20px;
+            p {
+              margin: -0px auto !important;
+            }
+          }
+          .margin-20 {
+            margin-top: 10px;
+            margin-bottom: 30px;
+            p {
+              margin: -0px auto !important;
+            }
+          }
+          .text-center {
+            text-align: left;
+            .center {
+              text-align: left !important;
+              a {
+                font-size: 14px;
+                color: #7EFDFF;
+                span {
+                  margin: 0;
+                  padding: 0;
+                  border: 0px;
+                  color: #47bcff;
+                  text-decoration-line: underline;
+                }
+                a {
+                  color: #7EFDFF;
+                }
+              }
+            }
+          }
+          .margin-top {
+            margin-top: 10px !important;
+            .center {
+              text-align: left !important;
+              a {
+                span {
+                  margin: 0;
+                  padding: 0;
+                  font-size: 14px;
+                  border: 0px;
+                  color: #47bcff;
+                  text-decoration-line: underline;
+                }
+              }
+            }
+          }
+          .body-box-find {
+            p {
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 14px;
+              color: #fff;
+              margin: 20px 0;
+              text-align: center;
+              a {
+                color: #8C7BA5;
+                text-decoration-line: underline;
+              }
+            }
+          }
+        }
+      }
+    }
+    .claim-content-amount {
+      text-align: center;
+      p {
+        font-family: 'Poppins';
+        font-weight: bold;
+        font-size: 48px;
+        span {
+
+        }
+      }
+    }
+    .claim-content-address {
+      display: flex;
+      position: relative;
+      .address {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 717px;
+        height: 78px;
+        margin: 0 auto;
+        border-radius: 39px;
+        background: rgba(0, 0, 0, .5);
+        font-family: 'Poppins';
+        font-weight: 400;
+        font-size: 30px;
+        
+      }
+      .icon {
+        position: absolute;
+        top: 50%;
+        right: 160px;
+        transform: translateY(-50%);
+        width: 60px;
+        height: 60px;
+        cursor: pointer;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .claim-content-btn {
+      width: 720px;
+      height: 74px;
+      background: #6336D7;
+      border-radius: 37px;
+      margin: 0 auto;
+      margin-top: 12px;
+      margin-bottom: 16px;
+      font-family: 'Poppins';
+      font-weight: bold;
+      font-size: 30px;
+      >div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+      .claim-content-btn-claim {
+        // width: 100%;
+        // height: 100%;
+        // display: flex;
+        // align-items: center;
+        // justify-content: center;
+        // cursor: pointer;
+      }
+    }
+    .bind-label {
+      width: 200px;
+      height: 40px;
+      line-height: 40px;
+      margin: 0 auto;
+      margin-bottom: 30px;
+      text-align: left;
+      display: flex;
+      span {
+        display: inline-block;
+        width: 80px;
+      }
+    }
+    .bind-address {
+      width: 120px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      background: #9950fd;
+      margin: 0 auto;
+      cursor: pointer;
+    }
+    .claim-content-tips {
+      font-family: 'Poppins';
+      font-weight: 400;
+      font-size: 24px;
+      color: #B3B5DA;
+      text-align: center;
+      p {
+        span {
+          font-family: 'Poppins-Regular';
+          color: #fff;
+        }
+      }
+    }
+  }
+  :deep(.claimLogModal) {
+    width: 1052px !important;
+    height: 314px;
+    background: #1A1821;
+    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    border-radius: 100px;
+    border: 1px solid #B966FF;
+    .ant-modal-content {
+      padding: 0 99px;
+      color: #FFF;
+      background: #1A1821;
+      box-shadow: 0px 0px 0px 0px rgba(22,22,22,0.13);
+      border-radius: 100px;
+      .ant-modal-body {
+        overflow: hidden;
+        .log-title {
+          font-family: 'Anton';
+          font-weight: 400;
+          font-size: 48px;
+          color: #FFFFFF;
+          margin-top: 23px;
+        }
+        .closable {
+          position: absolute;
+          right: -30px;
+          top: -30px;
+          z-index: 99;
+          cursor: pointer;
+          img {
+            width: 120px;
+            height: 120px;
+          }
+        }
+        .log-content {
+          min-height: 310px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: 'Anton';
+          font-weight: 400;
+          font-size: 48px;
+          color: #FFFFFF;
+          .log-header {
+            display: flex;
+            li {
+              width: 50%;
+              height: 48px;
+              line-height: 48px;
+              text-align: center;
+              font-family: 'Poppins';
+              font-weight: 400;
+              font-size: 14px;
+              color: #A8A5AC;
+              background: #2d2738;
+              &:nth-child(1) {
+                border-radius: 50px 0 0 50px;
+              }
+              // &:nth-child(2) {
+              //     width: 40%;
+              //   }
+              &:nth-child(3) {
+                border-radius: 0 50px 50px 0;
+              }
+            }
+          }
+          .log-body {
+            width: 100%;
+            height: 520px;
+            overflow-y: auto;
+            .pages {
+              display: flex;
+              width: 100%;
+              li {
+                width: 50%;
+                height: 60px;
+                line-height: 60px;
+                font-weight: 600;
+                font-size: 16px;
+                font-family: 'Poppins';
+                text-align: center;
+              }
+              .cec-amount {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #9950FA;
+                span {
+                  display: flex;
+                  justify-content: end;
+                  // width: 80px;
+                  text-align: right;
+                }
+                img {
+                  width: 28px;
+                  height: 28px;
+                  margin-left: 15px;
+                }
+              }
+            }
+            .no-data {
+              position: relative;
+              margin-top: 60px;
+              div {
+                width: 260px;
+                height: 260px;
+                margin: 0 auto;
+              }
+              p {
+                position: absolute;
+                bottom: 50px;
+                left: 52%;
+                transform: translateX(-50%);
+                font-family: 'Poppins';
+                font-weight: bold;
+                font-size: 28px;
+                color: #8587B2;
+              }
+            }
+            &::-webkit-scrollbar {
+              width: 5px;
+            }
+            &::-webkit-scrollbar-track {
+              background: #171220;
+              border-radius: 2px;
+            }
+            &::-webkit-scrollbar-corner {
+              display: block;
+            }
+            &::-webkit-scrollbar-thumb {
+              height: 15px;
+              background: #9950fd;
+              border-radius: 10px;
+            }
+          }
+        }
+        .pagination {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          // background: #1778f1;
+          // .prev {
+          //   // width: 100px;
+          //   // height: 100px;
+          //   display: flex;
+          //   align-items: center;
+          //   div {
+          //     width: 100px;
+          //     height: 100px;
+          //   }
+          // }
+          .pager {
+            span {
+              display: inline-block;
+              width: 29px;
+              height: 29px;
+              line-height: 29px;
+              text-align: center;
+              border-radius: 10px;
+              margin: 0 5px;
+              background: #2d2738;
+              font-family: 'Poppins';
+              font-weight: 200;
+              font-size: 14px;
+              cursor: pointer;
+            }
+            .active {
+              background: #5d5275;
+            }
+          }
+          .prev, .next {
+            // width: 100px;
+            // height: 100px;
+            display: flex;
+            align-items: center;
+            font-family: 'Poppins';
+            font-weight: 600;
+            font-size: 16px;
+            color: #9950FD;
+            cursor: pointer;
+            div {
+              width: 100px;
+              height: 100px;
+            }
+          }
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .ant-table-wrapper {
+          .ant-spin-nested-loading {
+            .ant-spin-container {
+              .ant-table {
+                background: #2d2738;
+                border-bottom: 0px solid #2d2738;
+                color: #FFF;
+                .ant-table-container {
+                  .ant-table-content {
+                    .ant-table-thead {
+                      border-radius: 60px;
+                      tr {
+                        border-radius: 60px;
+                        overflow: hidden;
+                        height: 40px;
+                        line-height: 40px;
+                        th {
+                          background: #2d2738;
+                          border-color: rgba(0,0,0,0);
+                          text-align: center;
+                          font-family: 'Poppins';
+                          font-weight: 400;
+                          font-size: 14px;
+                          color: #A8A5AC;
+                          border-radius: 50px !important;
+                          padding: 0;
+                          overflow: hidden;
+                          &::before {
+                            display: none;
+                          }
+                        }
+                        .ant-table-cell {
+                          overflow: hidden;
+                          border-radius: 50px !important;
+                        }
+                      }
+                      .ant-table-cell {
+                          overflow: hidden;
+                          border-radius: 50px !important;
+                        }
+                    }
+                    .ant-table-tbody {
+                      tr {
+                        background: #16141b;
+                        td {
+                          border-color: rgba(0,0,0,0);
+                          background: #16141b !important;
+                          overflow: visible !important;
+                          vertical-align: middle;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 53a4023..ae42b6f 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -137,7 +137,13 @@
       </div>
       <div class="content" v-else-if="cecUserStatus == -1">
         <div class="content-tips content-tips-login">
-          <span>Address:</span> {{address}}
+          <div>
+            <span>Address:</span> {{address}}
+          </div>
+          <div class="rewards">
+            <div class="rewards-text">Tournament Rewards</div>
+            <div class="rewards-hover">12121</div>
+          </div>
         </div>
         <!-- <div class="content-tips content-tips-login" v-if="cecInfo.bindUid">
           <span>You'll receive your $CEC airdrop in Bitget spot account before the listing time.</span>
@@ -396,19 +402,19 @@ const getCecTotal = async () => {
     let data = await apiCecInfoAll(address.value, token)
     cecInfo.value = data.data
     availableAmount.value = cecInfo.value.available
-    if(data.data.bindUid) {
-      if(data.data.available == 0 || data.data.available == '0') {
-        cecUserStatus.value = -2
-      } else {
-        cecUserStatus.value = -1
-      }
-    } else {
-      if(data.data.available == 0 || data.data.available == '0') {
-        cecUserStatus.value = -2
-      } else {
-        cecUserStatus.value = -1
-      }
-    }
+    // if(data.data.bindUid) {
+    //   if(data.data.available == 0 || data.data.available == '0') {
+    //     cecUserStatus.value = -2
+    //   } else {
+    //     cecUserStatus.value = -1
+    //   }
+    // } else {
+    //   if(data.data.available == 0 || data.data.available == '0') {
+    //     cecUserStatus.value = -2
+    //   } else {
+    //     cecUserStatus.value = -1
+    //   }
+    // }
     
   }
 }
@@ -762,6 +768,10 @@ onMounted(() => {
         font-size: 24px;
       }
       .content-tips-login {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // text-align: center;
         font-family: "Poppins-Regular";
         font-size: 14px;
         span {
@@ -769,6 +779,18 @@ onMounted(() => {
           font-family: 'Poppins';
           font-weight: 700;
         }
+        .rewards {
+          width: 222px;
+          height: 31px;
+          border: 2px solid #625A68;
+          background: #2D2738;
+          border-radius: 16px;
+          margin-left: 20px;
+          font-family: 'Poppins-Regular';
+          font-size: 18px;
+          color: #FEC25D;
+          cursor: pointer;
+        }
       }
       .content-btn {
         margin: 0 auto;