diff --git a/src/assets/img/ranking/CFbg.png b/src/assets/img/ranking/CFbg.png
new file mode 100644
index 0000000..e4b191b
Binary files /dev/null and b/src/assets/img/ranking/CFbg.png differ
diff --git a/src/assets/img/ranking/Circuit_point.png b/src/assets/img/ranking/Circuit_point.png
new file mode 100644
index 0000000..bcb0f59
Binary files /dev/null and b/src/assets/img/ranking/Circuit_point.png differ
diff --git a/src/assets/img/ranking/Icon_history.png b/src/assets/img/ranking/Icon_history.png
new file mode 100644
index 0000000..ee64a6b
Binary files /dev/null and b/src/assets/img/ranking/Icon_history.png differ
diff --git a/src/assets/img/ranking/Picture frame .png b/src/assets/img/ranking/Picture frame .png
new file mode 100644
index 0000000..0d96411
Binary files /dev/null and b/src/assets/img/ranking/Picture frame .png differ
diff --git a/src/assets/img/ranking/Ranking1.png b/src/assets/img/ranking/Ranking1.png
new file mode 100644
index 0000000..fa803d9
Binary files /dev/null and b/src/assets/img/ranking/Ranking1.png differ
diff --git a/src/assets/img/ranking/Ranking2.png b/src/assets/img/ranking/Ranking2.png
new file mode 100644
index 0000000..a19cf07
Binary files /dev/null and b/src/assets/img/ranking/Ranking2.png differ
diff --git a/src/assets/img/ranking/Ranking3.png b/src/assets/img/ranking/Ranking3.png
new file mode 100644
index 0000000..ed10656
Binary files /dev/null and b/src/assets/img/ranking/Ranking3.png differ
diff --git a/src/assets/img/ranking/Tournament_title.png b/src/assets/img/ranking/Tournament_title.png
new file mode 100644
index 0000000..0ec32f7
Binary files /dev/null and b/src/assets/img/ranking/Tournament_title.png differ
diff --git a/src/assets/img/ranking/head_default.jpg b/src/assets/img/ranking/head_default.jpg
new file mode 100644
index 0000000..a11ed8d
Binary files /dev/null and b/src/assets/img/ranking/head_default.jpg differ
diff --git a/src/components/assets/assetsHeader.vue b/src/components/assets/assetsHeader.vue
index e06a311..eab480a 100644
--- a/src/components/assets/assetsHeader.vue
+++ b/src/components/assets/assetsHeader.vue
@@ -3,28 +3,31 @@
     <div class="header-content">
       <div class="assets-user">
         <div class="assets-user-img" :style="{background: bgCor[bgCorFloor]}">
-          <img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image">
-          <img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image">
+          <img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image" />
+          <img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image" />
         </div>
         <div class="assets-user-name">
           <div class="vip" @click="isBindVip">
-            <img :src="stakingVipImgList[vipInfo.level].img" alt="">
+            <img :src="stakingVipImgList[vipInfo.level].img" alt />
           </div>
           <div class="adderss">
-            <img :src="icon_pass" alt="">
+            <img :src="icon_pass" alt />
             {{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}
           </div>
           <div class="email">
             <p>Email: {{ userInfoData.email ? userInfoData.email : '-' }}</p>
           </div>
           <div class="name">
-            <p>Player name:&nbsp;&nbsp; <span>{{ userInfoData.nickname ? userInfoData.nickname : '-' }}</span></p>
+            <p>
+              Player name:&nbsp;&nbsp;
+              <span>{{ userInfoData.nickname ? userInfoData.nickname : '-' }}</span>
+            </p>
           </div>
           <div class="recharge">
             <div class="recharge-left">
               <li>
                 <div class="recharge-img">
-                  <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
+                  <img src="@/assets/img/marketplace/icon_diamond.png" alt />
                 </div>
                 <span>{{ userInfoData.diamond ? userInfoData.diamond : 0 }}</span>
               </li>
@@ -33,12 +36,16 @@
               </li>
             </div>
             <div class="recharge-right">
-              <img class="icon" @click="rechargeLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
+              <img
+                class="icon"
+                @click="rechargeLogDialogVisible = true"
+                src="@/assets/img/marketplace/History.png"
+                alt
+              />
             </div>
           </div>
         </div>
-        <div>
-        </div>
+        <div></div>
       </div>
       <div class="uaw-listing">
         <div class="uaw-listing-content">
@@ -46,25 +53,29 @@
             <li>
               <div class="img">
                 <div>
-                  <img src="@/assets/img/marketplace/CECIcon.png" alt="">
+                  <img src="@/assets/img/marketplace/CECIcon.png" alt />
                 </div>
                 <p>
-                  CEC: 
-                  <!-- <span v-if="cecInfo?.total != 0">{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
-                  <span v-else>0</span> -->
+                  CEC:
+                  <span
+                    v-if="cecInfo?.total != 0"
+                  >{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
+                  <span v-else>0</span>
                 </p>
               </div>
-                <div class="staking-btn" @click="toStaking('/staking')">Stake</div>
+              <div class="staking-btn" @click="toStaking('/staking')">Stake</div>
             </li>
             <li>
               <div class="img">
                 <div>
-                  <img src="@/assets/img/staking/esCEC.png" alt="">
+                  <img src="@/assets/img/staking/esCEC.png" alt />
                 </div>
                 <p>
-                  esCEC: 
-                  <!-- <span v-if="cecInfo?.total != 0">{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
-                  <span v-else>0</span> -->
+                  esCEC:
+                  <span
+                    v-if="cecInfo?.total != 0"
+                  >{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
+                  <span v-else>0</span>
                 </p>
               </div>
               <div class="staking-btn" @click="toStaking('/conversion')">Vest</div>
@@ -73,22 +84,27 @@
           <div class="right">
             <div class="tips">
               <div class="tips-img">
-                <img src="@/assets/img/marketplace/Description.png" alt="">
+                <img src="@/assets/img/marketplace/Description.png" alt />
               </div>
               <div class="tips-message">Shows earned CEC</div>
             </div>
             <div class="log" @click="receiveLog">
-              <img src="@/assets/img/marketplace/History.png" alt="">
+              <img src="@/assets/img/marketplace/History.png" alt />
             </div>
           </div>
         </div>
         <div class="expected-content">
           <div class="total">
-            <p>Total Contribution Credits:&nbsp; </p>
+            <p>Total Contribution Credits:&nbsp;</p>
             <div>
               <span>{{ userInfoData.contribution_point }}</span>
-              <img src="@/assets/img/marketplace/totalContribution.png" alt="">
-              <img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
+              <img src="@/assets/img/marketplace/totalContribution.png" alt />
+              <img
+                class="icon"
+                @click="conLogDialogVisible = true"
+                src="@/assets/img/marketplace/History.png"
+                alt
+              />
             </div>
           </div>
           <!-- <div class="day">
@@ -98,35 +114,39 @@
               <img src="@/assets/img/marketplace/totalContribution.png" alt="">
               <img class="icon" @click="rulesDialogVisible = true" src="@/assets/img/marketplace/Description.png" alt="">
             </div>
-          </div> -->
+          </div>-->
         </div>
-        
+
         <div class="btn">
           <!-- <span class="yes" v-if="cecInfo?.stages[0]?.unlocked || cecInfo?.stages[1]?.unlocked" @click="confirmDialogVisible = false">Collection</span>
-          <span class="no" v-else @click="confirmCec">Collection</span> -->
+          <span class="no" v-else @click="confirmCec">Collection</span>-->
         </div>
         <div ref="conLogModal">
-          <a-modal :class="'conLogModal'" :getContainer="() => $refs.conLogModal" v-model:open="conLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+          <a-modal
+            :class="'conLogModal'"
+            :getContainer="() => $refs.conLogModal"
+            v-model:open="conLogDialogVisible"
+            :closable="false"
+            :footer="null"
+            :maskClosable="false"
+          >
             <div class="log-title">Contribution Credits Record</div>
             <div class="closable" @click="conLogDialogVisible = false">
-              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+              <img src="@/assets/img/marketplace/Close_counter.png" alt />
             </div>
             <div class="log-content">
               <div class="log-header">
-                <li>
-                  Activity
-                </li>
-                <li>
-                  Date
-                </li>
-                <li>
-                  Reward
-                </li>
+                <li>Activity</li>
+                <li>Date</li>
+                <li>Reward</li>
               </div>
               <div class="log-body">
-                <div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
+                <div
+                  v-if="contributionList == undefined || contributionList.length <= 0"
+                  class="no-data"
+                >
                   <div>
-                    <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+                    <img src="@/assets/img/marketplace/Empty_state.png" alt />
                   </div>
                   <p>No Data</p>
                 </div>
@@ -139,13 +159,11 @@
                     <!-- 消耗 -->
                     <span v-if="item.type == 2">Gold Spent</span>
                   </li>
-                  <li>
-                    {{ timeFormat(item.give_time*1000) }}
-                  </li>
+                  <li>{{ timeFormat(item.give_time*1000) }}</li>
                   <li class="cec-amount">
-                    <!-- <span>{{  priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]  }}</span> -->
+                    <span>{{ priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
                     <span>{{contributionLogs(item.contribution_point)}}</span>
-                    <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+                    <img src="@/assets/img/marketplace/totalContribution.png" alt />
                   </li>
                 </div>
               </div>
@@ -153,22 +171,23 @@
           </a-modal>
         </div>
         <div ref="cecLogModal">
-          <a-modal :class="'cecLogModal'" :getContainer="() => $refs.cecLogModal" v-model:open="logDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+          <a-modal
+            :class="'cecLogModal'"
+            :getContainer="() => $refs.cecLogModal"
+            v-model:open="logDialogVisible"
+            :closable="false"
+            :footer="null"
+            :maskClosable="false"
+          >
             <div class="log-title">CEC Allocation Record</div>
             <div class="closable" @click="logDialogVisible = false">
-              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+              <img src="@/assets/img/marketplace/Close_counter.png" alt />
             </div>
             <div class="log-content">
               <div class="log-header">
-                <li>
-                  Event
-                </li>
-                <li>
-                  Date
-                </li>
-                <li>
-                  Reward
-                </li>
+                <li>Event</li>
+                <li>Date</li>
+                <li>Reward</li>
               </div>
               <div class="log-body">
                 <div class="pages" v-for="(item, index) in cecInfo?.records" :key="index">
@@ -178,17 +197,17 @@
                     <span v-else-if="item.desc == 'game test parse 1'">P2E Season 1</span>
                     <span v-else>{{ item.desc }}</span>
                   </li>
-                  <li>
-                    {{ item.earnTime }}
-                  </li>
+                  <li>{{ item.earnTime }}</li>
                   <li class="cec-amount">
-                    <!-- <span v-if="item.desc != ''">{{  priceCalculated(BigInt(item.amount),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]  }}</span> -->
-                    <img v-if="item.desc != ''" src="@/assets/img/marketplace/CECIcon.png" alt="">
+                    <span
+                      v-if="item.desc != ''"
+                    >{{ priceCalculated(BigInt(item.amount),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
+                    <img v-if="item.desc != ''" src="@/assets/img/marketplace/CECIcon.png" alt />
                   </li>
                 </div>
                 <div class="no-data" v-if="cecInfo?.total == 0">
                   <div>
-                    <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+                    <img src="@/assets/img/marketplace/Empty_state.png" alt />
                   </div>
                   <p>No Data</p>
                 </div>
@@ -197,19 +216,19 @@
             <div class="pagination">
               <div class="prev">
                 <div>
-                  <img src="@/assets/img/marketplace/Previous.png" alt="">
+                  <img src="@/assets/img/marketplace/Previous.png" alt />
                 </div>
                 <span>Previous</span>
               </div>
               <div class="pager">
                 <span class="active">1</span>
                 <!-- <span>2</span>
-                <span>3</span> -->
+                <span>3</span>-->
               </div>
               <div class="next">
                 <span>Next</span>
                 <div>
-                  <img src="@/assets/img/marketplace/Next.png" alt="">
+                  <img src="@/assets/img/marketplace/Next.png" alt />
                 </div>
               </div>
             </div>
@@ -241,23 +260,32 @@
                   </div>
               </template>
               </a-table-column>
-            </a-table> -->
+            </a-table>-->
           </a-modal>
         </div>
         <div ref="confirmModal">
-          <a-modal :class="'confirmModal'" :getContainer="() => $refs.confirmModal" v-model:open="confirmDialogVisible" :footer="null" :maskClosable="false">
+          <a-modal
+            :class="'confirmModal'"
+            :getContainer="() => $refs.confirmModal"
+            v-model:open="confirmDialogVisible"
+            :footer="null"
+            :maskClosable="false"
+          >
             <div class="content">
               <li>
                 <div class="confirm-header">激励领取第一期</div>
                 <div class="confirm-content">
                   <p>阶段1：</p>
                   <div>
-                    <img src="@/assets/img/marketplace/0000.png" alt="">
+                    <img src="@/assets/img/marketplace/0000.png" alt />
                   </div>
                   <p>解锁总奖池50%</p>
                   <p>可领取数量： {{ priceCalculated(Number(cecInfo?.stages[0]?.amount),18) }}</p>
                   <div class="btn">
-                    <span class="yes" v-if="cecInfo?.stages[0]?.unlocked && cecInfo?.stages[0]?.status == 0">领取</span>
+                    <span
+                      class="yes"
+                      v-if="cecInfo?.stages[0]?.unlocked && cecInfo?.stages[0]?.status == 0"
+                    >领取</span>
                     <span v-else>领取</span>
                   </div>
                 </div>
@@ -267,12 +295,15 @@
                 <div class="confirm-content">
                   <p>阶段2：</p>
                   <div>
-                    <img src="@/assets/img/marketplace/0000.png" alt="">
+                    <img src="@/assets/img/marketplace/0000.png" alt />
                   </div>
                   <p>解锁总奖池50%</p>
                   <p>可领取数量： {{ priceCalculated(Number(cecInfo?.stages[1]?.amount),18) }}</p>
                   <div class="btn">
-                    <span class="yes" v-if="cecInfo?.stages[1]?.unlocked && cecInfo?.stages[1]?.status == 0">领取</span>
+                    <span
+                      class="yes"
+                      v-if="cecInfo?.stages[1]?.unlocked && cecInfo?.stages[1]?.status == 0"
+                    >领取</span>
                     <span v-else>领取</span>
                   </div>
                 </div>
@@ -281,10 +312,17 @@
           </a-modal>
         </div>
         <div ref="rulesModel">
-          <a-modal :class="'rulesModal'" :getContainer="() => $refs.rulesModel" v-model:open="rulesDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+          <a-modal
+            :class="'rulesModal'"
+            :getContainer="() => $refs.rulesModel"
+            v-model:open="rulesDialogVisible"
+            :closable="false"
+            :footer="null"
+            :maskClosable="false"
+          >
             <div class="log-title">Staking Rules</div>
             <div class="closable" @click="rulesDialogVisible = false">
-              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+              <img src="@/assets/img/marketplace/Close_counter.png" alt />
             </div>
             <h3>1. Staking Rules</h3>
             <div class="text">
@@ -364,7 +402,14 @@
       </div>
     </div>
     <div ref="rechargeListModal">
-      <a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+      <a-modal
+        :class="'rechargeListModal'"
+        :getContainer="() => $refs.rechargeListModal"
+        v-model:open="rechargeListDialogVisible"
+        :closable="false"
+        :footer="null"
+        :maskClosable="false"
+      >
         <div class="title">Top-Up</div>
         <div class="credits">
           <div class="credits-top">
@@ -373,27 +418,30 @@
           <div class="credits-top">
             <p>Top-Up to Earn</p>
             <div class="tips-hover">
-              <img src="@/assets/img/marketplace/Description.png" alt="">
+              <img src="@/assets/img/marketplace/Description.png" alt />
               <div class="credits-tips">
-                <div>
-                  Get 1 Contribution Credit for Every 1U Spent on Diamonds
-                </div>
+                <div>Get 1 Contribution Credit for Every 1U Spent on Diamonds</div>
               </div>
             </div>
           </div>
           <div class="credits-btm">
-            <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+            <img src="@/assets/img/marketplace/totalContribution.png" alt />
             <span>{{ contributionAmount }}</span>
           </div>
         </div>
         <div class="closable" @click="rechargeListDialogVisible = false">
-          <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+          <img src="@/assets/img/marketplace/Close_counter.png" alt />
         </div>
         <p>Diamonds are centralized assets that can be used in the game</p>
         <div class="content">
-          <div class="item" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item, index)">
+          <div
+            class="item"
+            v-for="(item, index) in rechargeList"
+            :key="index"
+            @click="selectItem(item, index)"
+          >
             <div class="activity" v-if="activeIndex == index">
-              <img src="@/assets/img/marketplace/selected.png" alt="">
+              <img src="@/assets/img/marketplace/selected.png" alt />
             </div>
             <div class="first" v-if="item.max_buy_times < 9999">
               <div>
@@ -403,31 +451,40 @@
               </div>
             </div>
             <div class="item-img">
-              <img :src="rechargeImgList[item.goods_id].img" alt="">
+              <img :src="rechargeImgList[item.goods_id].img" alt />
             </div>
             <div class="purchase" v-if="item.max_buy_times < 9999">
               <p>Bonus</p>
               <div>
-                <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
+                <img src="@/assets/img/marketplace/icon_diamond.png" alt />
               </div>
-              <p><span>+</span>{{ item.present_diamond }}</p>
+              <p>
+                <span>+</span>
+                {{ item.present_diamond }}
+              </p>
             </div>
             <div v-else class="purchase-amount">
               <div>
-                <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
+                <img src="@/assets/img/marketplace/icon_diamond.png" alt />
               </div>
               <span>{{brickworkAmount*100}}</span>
             </div>
             <div v-if="item.max_buy_times != 9999" class="item-amount">
               <div>
-                <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
+                <img src="@/assets/img/marketplace/icon_diamond.png" alt />
               </div>
               {{ item.diamond }}
             </div>
             <div v-else class="item-amount item-amount-input">
               <span @click="rechargeDecrease">-</span>
               <!-- <span>0</span> -->
-              <input type="number" placeholder="0" v-model="brickworkAmount" @input="handleInput" oninput="value=value.replace(/[^\d]/g,'')">
+              <input
+                type="number"
+                placeholder="0"
+                v-model="brickworkAmount"
+                @input="handleInput"
+                oninput="value=value.replace(/[^\d]/g,'')"
+              />
               <span @click="rechargeIncrease">+</span>
               <h4>Unit</h4>
             </div>
@@ -435,37 +492,41 @@
           <div class="item"></div>
         </div>
         <div class="conform-btn" @click="conformBtn">
-          <span v-if="confirmRecharge?.goods_id == 1006">{{ priceAmount ? confirmRecharge.price : 0 }}</span>
+          <span
+            v-if="confirmRecharge?.goods_id == 1006"
+          >{{ priceAmount ? confirmRecharge.price : 0 }}</span>
           <span v-else>{{ confirmRecharge?.price }}</span>
-          <img :src="icon_usdc" alt="">
+          <img :src="icon_usdc" alt />
         </div>
       </a-modal>
     </div>
     <div ref="rechargeLogModal">
-      <a-modal :class="'rechargeLogModal'" :getContainer="() => $refs.rechargeLogModal" v-model:open="rechargeLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+      <a-modal
+        :class="'rechargeLogModal'"
+        :getContainer="() => $refs.rechargeLogModal"
+        v-model:open="rechargeLogDialogVisible"
+        :closable="false"
+        :footer="null"
+        :maskClosable="false"
+      >
         <div class="log-title">Transaction History</div>
         <div class="closable" @click="rechargeLogDialogVisible = false">
-          <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+          <img src="@/assets/img/marketplace/Close_counter.png" alt />
         </div>
         <div class="log-content">
           <div class="log-header">
-            <li>
-              Action
-            </li>
-            <li>
-              Date
-            </li>
-            <li>
-              From
-            </li>
-            <li>
-              Amount
-            </li>
+            <li>Action</li>
+            <li>Date</li>
+            <li>From</li>
+            <li>Amount</li>
           </div>
           <div class="log-body">
-            <div v-if="rechargeHistoryList == undefined || rechargeHistoryList.length <= 0" class="no-data">
+            <div
+              v-if="rechargeHistoryList == undefined || rechargeHistoryList.length <= 0"
+              class="no-data"
+            >
               <div>
-                <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+                <img src="@/assets/img/marketplace/Empty_state.png" alt />
               </div>
               <p>No Data</p>
             </div>
@@ -474,461 +535,483 @@
                 <span v-if="item.type == 0">Top-Up</span>
                 <span v-else>Spending</span>
               </li>
-              <li>
-                {{ timeFormat(item.date*1000) }}
-              </li>
-              <li>
-                {{ sliceAddress(item.from) }}
-              </li>
+              <li>{{ timeFormat(item.date*1000) }}</li>
+              <li>{{ sliceAddress(item.from) }}</li>
               <li class="cec-amount">
-                <!-- <span>{{  priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]  }}</span> -->
+                <span>{{ priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
                 <span>{{contributionLogs(item.amount)}}</span>
-                <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
+                <img src="@/assets/img/marketplace/icon_diamond.png" alt />
               </li>
             </div>
           </div>
         </div>
       </a-modal>
     </div>
-    <VipDialog :vipDialogVisible="vipDialogVisible" @handleClose="vipHandleClose" :vipInfo="vipInfo" @vipDialogCli="toStaking('/staking')" />
+    <VipDialog
+      :vipDialogVisible="vipDialogVisible"
+      @handleClose="vipHandleClose"
+      :vipInfo="vipInfo"
+      @vipDialogCli="toStaking('/staking')"
+    />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
   </div>
 </template>
 
 <script setup>
-import { ref, toRaw, watch, computed, onMounted, inject } from "vue"
+import {ref, toRaw, watch, computed, onMounted, inject} from "vue";
 const message = inject("$message");
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
 import VipDialog from "@/components/staking/vipDialog.vue";
-import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue";
 import {createModal} from "@/utils/model.util";
-import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory, apiDiamondHistory, apiGameLog, apiSwitch, apiVipInfo, apiBindPassport, apiVipDetails } from "@/utils/marketplace"
-import { priceCalculated, timeFormat, contributionLogs, sliceAddress } from "@/configs/priceCalculate"
-import { rechargeImgList, stakingVipImgList } from "@/configs/cenImg"
-import { icon_usdc, icon_pass } from "@/configs/configchain"
-import { useRouter, useRoute } from "vue-router";
-import { useMarketplaceStore } from "@/store/marketplace"
-import { BlockChain } from "@/components/chain/BlockChain"
+import {
+  apiCecInfo,
+  apiExpected,
+  apiUserData,
+  apiContribution,
+  apiRechargeGoods,
+  apiRechargeHistory,
+  apiDiamondHistory,
+  apiGameLog,
+  apiSwitch,
+  apiVipInfo,
+  apiBindPassport,
+  apiVipDetails,
+} from "@/utils/marketplace";
+import {priceCalculated, timeFormat, contributionLogs, sliceAddress} from "@/configs/priceCalculate";
+import {rechargeImgList, stakingVipImgList} from "@/configs/cenImg";
+import {icon_usdc, icon_pass} from "@/configs/configchain";
+import {useRouter, useRoute} from "vue-router";
+import {useMarketplaceStore} from "@/store/marketplace";
+import {BlockChain} from "@/components/chain/BlockChain";
 import {walletStore} from "@/store/wallet";
+import {PassportWallet} from "@/components/chain/wallet/PassportWallet";
 
 const router = useRouter();
-const marketplaceStore = useMarketplaceStore()
-const localWalletStore = walletStore()
+const marketplaceStore = useMarketplaceStore();
+const localWalletStore = walletStore();
 // loading 弹窗
-const loadingDialogVisible = ref(false)
-const bgCor = ref(['#5bbbff', '#ffc35b', '#bb7fff', '#ff6600'])
-const logDialogVisible = ref(false)
+const loadingDialogVisible = ref(false);
+const bgCor = ref(["#5bbbff", "#ffc35b", "#bb7fff", "#ff6600"]);
+const logDialogVisible = ref(false);
 
 const bgCorFloor = computed(() => {
-  if(!localWalletStore.showAddress) return 0
-  return parseInt(localWalletStore.showAddress.substring(0,6))%4
-})
+  if (!localWalletStore.showAddress) return 0;
+  return parseInt(localWalletStore.showAddress.substring(0, 6)) % 4;
+});
 const imageUrl = computed(() => {
-  let str = parseInt(localWalletStore.showAddress.substring(0,6))%34
+  let str = parseInt(localWalletStore.showAddress.substring(0, 6)) % 34;
   if (str < 10) {
-    str = '0' + str
+    str = "0" + str;
   }
-  let imgUrl = `https://res.counterfire.games/headimg/00${str}.png`
+  let imgUrl = `https://res.counterfire.games/headimg/00${str}.png`;
   return new URL(imgUrl, import.meta.url).href;
 });
 
 const rechargeImgUrl = computed(() => {
-  let imgUrl = `./img/marketplace/1001.png`
+  let imgUrl = `./img/marketplace/1001.png`;
   console.log(imgUrl);
   return new URL(imgUrl, import.meta.url).href;
-})
+});
 
 // 获取mint开关
-const getMintSwitch= async () => {
+const getMintSwitch = async () => {
   // console.log(localWalletStore.address)
-  if(localWalletStore.token) {
-    let res = await apiSwitch()
-    marketplaceStore.activitySwitch = res.data
+  if (localWalletStore.token) {
+    let res = await apiSwitch();
+    marketplaceStore.activitySwitch = res.data;
   }
-}
+};
 
 // 打开历史记录弹窗
 const receiveLog = () => {
-  logDialogVisible.value = true
-}
+  logDialogVisible.value = true;
+};
 
-const confirmDialogVisible = ref(false)
+const confirmDialogVisible = ref(false);
 // 领取奖励
 const confirmCec = () => {
   // console.log('-------')
+};
 
-}
-
-const rulesDialogVisible = ref(false)
+const rulesDialogVisible = ref(false);
 
 const cecInfo = ref({
   total: 0,
-  available: '',
+  available: "",
   stages: [
     {
       stage: 1,
-      amount: '',
-      unlocked: '',
-      claimTime: '',
-      unlockTime: ''
-    }
+      amount: "",
+      unlocked: "",
+      claimTime: "",
+      unlockTime: "",
+    },
   ],
   records: [
     {
-      address: '',
-      amount: '',
-      desc: '',
-      earnTime: ''
-    }
-  ]
-})
+      address: "",
+      amount: "",
+      desc: "",
+      earnTime: "",
+    },
+  ],
+});
 const getCecInfo = async () => {
-  let address = localWalletStore.address
-  if(address) {
-    const {data, errcode} = await apiCecInfo(address,localWalletStore.token)
-    if(errcode == 0) {
-      cecInfo.value = data
+  let address = localWalletStore.address;
+  if (address) {
+    const {data, errcode} = await apiCecInfo(address, localWalletStore.token);
+    if (errcode == 0) {
+      cecInfo.value = data;
     }
   } else {
-    return
+    return;
   }
-}
+};
 
-const conLogDialogVisible = ref(false)
-const contributionList = ref()
+const conLogDialogVisible = ref(false);
+const contributionList = ref();
 const getContribution = async () => {
-  let address = localWalletStore.address
-  if(address) {
-    const {rows, errcode} = await apiContribution(address)
-    if(errcode == 0) {
-      contributionList.value = rows
+  let address = localWalletStore.address;
+  if (address) {
+    const {rows, errcode} = await apiContribution(address);
+    if (errcode == 0) {
+      contributionList.value = rows;
     }
   } else {
-    return
+    return;
   }
-}
+};
 
-const contributionPoint = ref(0)
+const contributionPoint = ref(0);
 const getExpected = async () => {
-  let address = localWalletStore.address
-  if(address) {
-    const {contribution_point, errcode} = await apiExpected(address)
-    if(errcode == 0) {
-      contributionPoint.value = contribution_point
+  let address = localWalletStore.address;
+  if (address) {
+    const {contribution_point, errcode} = await apiExpected(address);
+    if (errcode == 0) {
+      contributionPoint.value = contribution_point;
     }
   } else {
-    return
+    return;
   }
-}
+};
 
-const contributionPointTotal = ref(0)
-const userInfoData = ref(
-  {
-    contribution_point: "0.00",
-    diamond: "",
-    email: "",
-    errcode: 0,
-    errmsg: "",
-    gold: "0.00",
-    nickname: "",
-  }
-)
+const contributionPointTotal = ref(0);
+const userInfoData = ref({
+  contribution_point: "0.00",
+  diamond: "",
+  email: "",
+  errcode: 0,
+  errmsg: "",
+  gold: "0.00",
+  nickname: "",
+});
 const getUserData = async () => {
-  let address = localWalletStore.address
-  if(address) {
-    let res = await apiUserData(address)
-    if(res.errcode == 0) {
-      marketplaceStore.userGold = res.gold
-      userInfoData.value = res
-      marketplaceStore.contributionPoint = res.contribution_point
+  let address = localWalletStore.address;
+  if (address) {
+    let res = await apiUserData(address);
+    if (res.errcode == 0) {
+      marketplaceStore.userGold = res.gold;
+      userInfoData.value = res;
+      marketplaceStore.contributionPoint = res.contribution_point;
     }
   } else {
-    return
+    return;
   }
-}
+};
 
 // 充值----------------------------------------stats
-const rechargeLogDialogVisible = ref(false)
-const rechargeListDialogVisible = ref(false)
-const activeIndex = ref(0)
-const rechargeList = ref()
-const rechargeHistoryList = ref()
-const confirmRecharge = ref()
-const brickworkAmount = ref(1)
-const priceAmount = ref(1)
-const contributionAmount = ref(0)
+const rechargeLogDialogVisible = ref(false);
+const rechargeListDialogVisible = ref(false);
+const activeIndex = ref(0);
+const rechargeList = ref();
+const rechargeHistoryList = ref();
+const confirmRecharge = ref();
+const brickworkAmount = ref(1);
+const priceAmount = ref(1);
+const contributionAmount = ref(0);
 
 // 打开充值弹窗
 const rechargeDialogVisible = async () => {
-  let token = localWalletStore.token
-  if(token) {
-    rechargeListDialogVisible.value = true
+  let token = localWalletStore.token;
+  if (token) {
+    rechargeListDialogVisible.value = true;
   } else {
-    await new BlockChain().connect()
+    await new BlockChain().connect();
   }
-}
+};
 
 // 列表
 const getRechargeGoods = async () => {
-  const { errcode, errmsg, rows, contribution} = await apiRechargeGoods(localWalletStore.address)
-  if(errcode == 0) {
-    contributionAmount.value = contribution
-    rechargeList.value = rows
-    confirmRecharge.value = rows[0]
+  const {errcode, errmsg, rows, contribution} = await apiRechargeGoods(localWalletStore.address);
+  if (errcode == 0) {
+    contributionAmount.value = contribution;
+    rechargeList.value = rows;
+    confirmRecharge.value = rows[0];
   }
-}
+};
 
 // selectItem 预选充值数量
 const selectItem = (data, index) => {
-  activeIndex.value = index
-  if(data.goods_id == 1006) {
+  activeIndex.value = index;
+  if (data.goods_id == 1006) {
     confirmRecharge.value = {
       diamond: brickworkAmount.value,
       goods_id: data.goods_id,
       price: priceAmount.value,
       max_buy_times: data.max_buy_times,
-      currency_list: [...data.currency_list]
-    }
+      currency_list: [...data.currency_list],
+    };
   } else {
-    confirmRecharge.value = data
+    confirmRecharge.value = data;
   }
-}
+};
 
 const handleInput = (e) => {
-  if(Number(brickworkAmount.value) > toRaw(confirmRecharge.value).max_buy_times) {
-    brickworkAmount.value = toRaw(confirmRecharge.value).max_buy_times
-    toRaw(confirmRecharge.value).price = toRaw(confirmRecharge.value).max_buy_times
-    toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
+  if (Number(brickworkAmount.value) > toRaw(confirmRecharge.value).max_buy_times) {
+    brickworkAmount.value = toRaw(confirmRecharge.value).max_buy_times;
+    toRaw(confirmRecharge.value).price = toRaw(confirmRecharge.value).max_buy_times;
+    toRaw(confirmRecharge.value).diamond = brickworkAmount.value * 100;
   } else {
-    toRaw(confirmRecharge.value).price = brickworkAmount.value
-    toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
-    priceAmount.value = brickworkAmount.value
+    toRaw(confirmRecharge.value).price = brickworkAmount.value;
+    toRaw(confirmRecharge.value).diamond = brickworkAmount.value * 100;
+    priceAmount.value = brickworkAmount.value;
   }
-  
-}
+};
 
 const rechargeDecrease = async () => {
-  if(brickworkAmount.value == 1) return false
-  brickworkAmount.value--
-  priceAmount.value = brickworkAmount.value
+  if (brickworkAmount.value == 1) return false;
+  brickworkAmount.value--;
+  priceAmount.value = brickworkAmount.value;
   // priceAmount.value--
-  if(confirmRecharge.value.goods_id == 1006) {
-    toRaw(confirmRecharge.value).price = brickworkAmount.value
-    toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
+  if (confirmRecharge.value.goods_id == 1006) {
+    toRaw(confirmRecharge.value).price = brickworkAmount.value;
+    toRaw(confirmRecharge.value).diamond = brickworkAmount.value * 100;
   }
-}
+};
 const rechargeIncrease = async () => {
-  if(brickworkAmount.value == toRaw(confirmRecharge.value).max_buy_times) return false
-  brickworkAmount.value++
-  priceAmount.value = brickworkAmount.value
+  if (brickworkAmount.value == toRaw(confirmRecharge.value).max_buy_times) return false;
+  brickworkAmount.value++;
+  priceAmount.value = brickworkAmount.value;
   // priceAmount.value++
-  if(confirmRecharge.value.goods_id == 1006) {
-    toRaw(confirmRecharge.value).price = brickworkAmount.value
-    toRaw(confirmRecharge.value).diamond = brickworkAmount.value*100
+  if (confirmRecharge.value.goods_id == 1006) {
+    toRaw(confirmRecharge.value).price = brickworkAmount.value;
+    toRaw(confirmRecharge.value).diamond = brickworkAmount.value * 100;
   }
-}
+};
 
 // 充值
 const conformBtn = async () => {
-    let address = localWalletStore.address
-    if(toRaw(confirmRecharge.value).price == 0) {
-      message.error('Please select the amount of bricks to be recharged.')
-    } else {
-      loadingDialogVisible.value = true
-      let goods_num = Number(toRaw(confirmRecharge.value).goods_id) == 1006 ? Number(brickworkAmount.value) : 1
-      try {
-        const bc = new BlockChain()
-        let res = await bc.mall.execBuyItem(Number(toRaw(confirmRecharge.value).goods_id), goods_num,toRaw(confirmRecharge.value).currency_list[0].address)
-        if(res) {
-          brickworkAmount.value = 1
-          priceAmount.value = 1
-          activeIndex.value = 0
-          await dataInfo()
-          loadingDialogVisible.value = false
-          // message.success('Top-Up Successful')
-          const confirmResult = await createModal(ConfirmDialog, {
-            title: '',
-            noBtnTitle: '',
-            message: 'Top-Up Successful'
-          }).show()
-        }
-      } catch(e) {
-        console.log(e)
-        if(e.message.indexOf('rejected') > -1 || e.message.indexOf('reject') > -1) {
-          // message.error('Top-Up Cancelled by User')
-          const confirmResult = await createModal(ConfirmDialog, {
-            title: '',
-            noBtnTitle: '',
-            message: 'Top-Up Cancelled by User'
-          }).show()
-        } else if(e.message.indexOf('Error during transaction') > -1) {
-          // message.error('Top-Up Failed - Insufficient Balance')
-          const confirmResult = await createModal(ConfirmDialog, {
-            title: '',
-            noBtnTitle: '',
-            message: 'Top-Up Failed - Insufficient Balance'
-          }).show()
-        } else {
-          // message.error('Top-Up fail.')
-          const confirmResult = await createModal(ConfirmDialog, {
-            title: '',
-            noBtnTitle: '',
-            message: 'Top-Up fail.'
-          }).show()
-        }
-        loadingDialogVisible.value = false
+  let address = localWalletStore.address;
+  if (toRaw(confirmRecharge.value).price == 0) {
+    message.error("Please select the amount of bricks to be recharged.");
+  } else {
+    loadingDialogVisible.value = true;
+    let goods_num = Number(toRaw(confirmRecharge.value).goods_id) == 1006 ? Number(brickworkAmount.value) : 1;
+    try {
+      const bc = new BlockChain();
+      let res = await bc.mall.execBuyItem(
+        Number(toRaw(confirmRecharge.value).goods_id),
+        goods_num,
+        toRaw(confirmRecharge.value).currency_list[0].address
+      );
+      if (res) {
+        brickworkAmount.value = 1;
+        priceAmount.value = 1;
+        activeIndex.value = 0;
+        await dataInfo();
+        loadingDialogVisible.value = false;
+        // message.success('Top-Up Successful')
+        const confirmResult = await createModal(ConfirmDialog, {
+          title: "",
+          noBtnTitle: "",
+          message: "Top-Up Successful",
+        }).show();
       }
+    } catch (e) {
+      console.log(e);
+      if (e.message.indexOf("rejected") > -1 || e.message.indexOf("reject") > -1) {
+        // message.error('Top-Up Cancelled by User')
+        const confirmResult = await createModal(ConfirmDialog, {
+          title: "",
+          noBtnTitle: "",
+          message: "Top-Up Cancelled by User",
+        }).show();
+      } else if (e.message.indexOf("Error during transaction") > -1) {
+        // message.error('Top-Up Failed - Insufficient Balance')
+        const confirmResult = await createModal(ConfirmDialog, {
+          title: "",
+          noBtnTitle: "",
+          message: "Top-Up Failed - Insufficient Balance",
+        }).show();
+      } else {
+        // message.error('Top-Up fail.')
+        const confirmResult = await createModal(ConfirmDialog, {
+          title: "",
+          noBtnTitle: "",
+          message: "Top-Up fail.",
+        }).show();
+      }
+      loadingDialogVisible.value = false;
     }
+  }
   // } else {
   //   const confirmResult = await createModal(ConfirmDialog, {
-  //     title: 'Need login to Passport', 
+  //     title: 'Need login to Passport',
   //     noBtnTitle: '',
   //     message: 'Please log in with Passport.'
   //   }).show()
   // }
-}
+};
 
 const getRechargeHistory = async () => {
-  let address = localWalletStore.address
+  let address = localWalletStore.address;
   // let res = await apiRechargeHistory(address)
-  if(address) {
-    let res = await apiDiamondHistory(address)
-  // if(!res.rows) {
-  //   res.rows = []
-  // }
-  // res.rows.forEach(item => {
-  //   item['event'] = 'Top_Up'
-  // })
-  // his.rows.forEach(item => {
-  //   item['event'] = 'Spending'
-  // })
-  rechargeHistoryList.value = res.rows
+  if (address) {
+    let res = await apiDiamondHistory(address);
+    // if(!res.rows) {
+    //   res.rows = []
+    // }
+    // res.rows.forEach(item => {
+    //   item['event'] = 'Top_Up'
+    // })
+    // his.rows.forEach(item => {
+    //   item['event'] = 'Spending'
+    // })
+    rechargeHistoryList.value = res.rows;
   }
-  
-}
+};
 
 // 打点
 const getGameLog = async () => {
   let data = {
-    account_id: '',
-    session_id: '',
-    gameid: '',
-    channel: '',
-    event_name: '',
-    localuuid: ''
-  }
+    account_id: "",
+    session_id: "",
+    gameid: "",
+    channel: "",
+    event_name: "",
+    localuuid: "",
+  };
   try {
-    let res = await apiGameLog(data)
-    console.log(res)
-  } catch(e) {
-    loadingDialogVisible.value = false
+    let res = await apiGameLog(data);
+    console.log(res);
+  } catch (e) {
+    loadingDialogVisible.value = false;
   }
-}
+};
 // 充值----------------------------------------end
 
 // vip-------------------------------------start
-const vipDialogVisible = ref(false)
-const bindPassportAddress = ref()
+const vipDialogVisible = ref(false);
+const bindPassportAddress = ref();
 const vipInfo = ref({
   level: 0,
   curpoint: 0,
   target: 0,
-})
+});
 const vipHandleClose = () => {
-  vipDialogVisible.value = false
-}
+  vipDialogVisible.value = false;
+};
 const isBindVip = () => {
-  if(localWalletStore.token) {
-  //   alert('先登录')
-  // } else {
-    if(bindPassportAddress.value) {
-      vipDialogVisible.value = true
+  if (localWalletStore.token) {
+    //   alert('先登录')
+    // } else {
+    if (bindPassportAddress.value) {
+      vipDialogVisible.value = true;
     } else {
-      bindVipAddress()
+      bindVipAddress();
     }
   }
-}
+};
 
 // 获取vip等级
 const getVipDetails = async () => {
-  let src = await apiVipDetails()
-  vipInfo.value = src.info
-}
+  let src = await apiVipDetails();
+  vipInfo.value = src.info;
+};
 
 // 查看是否绑定账号
 const getIsBandVip = async () => {
-  let res = await apiVipInfo()
-  bindPassportAddress.value = res.info.bind_passport_address
-}
+  let res = await apiVipInfo();
+  bindPassportAddress.value = res.info.bind_passport_address;
+};
 
 // 绑定VIP账号
 const bindVipAddress = async () => {
-  await new  BlockChain().appendPassport()
+  await new BlockChain().appendPassport();
   const data = {
-    passport_jwt: 'Bearer ' + await new  BlockChain().passportToken()
-  }
-  let res = await apiBindPassport(data)
-  console.log(res)
-  if(res.errcode != 0) {
-    message.error(`${res.errmsg}`)
+    passport_jwt: "Bearer " + (await new BlockChain().passportToken()),
+  };
+  let res = await apiBindPassport(data);
+  console.log(res);
+  if (res.errcode != 0) {
+    // message.error(`${res.errmsg}`);
+    const confirmResult = await createModal(ConfirmDialog, {
+      title: "",
+      noBtnTitle: "",
+      message: "The account has been bound",
+    }).show();
+    console.log(confirmResult.errcode)
+    if(confirmResult.errcode == 0) {
+      new PassportWallet().logout();
+    } 
   } else {
-    dataInfo()
+    dataInfo();
   }
-}
+};
 
 const toStaking = (path) => {
   router.push(path);
-}
+};
 // vip-------------------------------------end
-const isPassprotLogin = ref(false)
+const isPassprotLogin = ref(false);
 const dataInfo = async () => {
   // const bc = new BlockChain()
   // isPassprotLogin.value = bc.passportLogined
   // console.log(isPassprotLogin.value)
-  // await getVipDetails()
-  // await getIsBandVip()
-  await getMintSwitch()
-  await getCecInfo()
-  await getContribution()
-  await getExpected()
-  await getUserData()
-  await getRechargeGoods()
-  await getRechargeHistory()
-}
+  await getVipDetails();
+  await getIsBandVip();
+  await getMintSwitch();
+  await getCecInfo();
+  await getContribution();
+  await getExpected();
+  await getUserData();
+  await getRechargeGoods();
+  await getRechargeHistory();
+};
 
-watch(localWalletStore,() => {
+watch(localWalletStore, () => {
   // console.log('localWalletStore.token',localWalletStore.address,localWalletStore.token)
-  if(!localWalletStore.token) {
+  if (!localWalletStore.token) {
     cecInfo.value = {
       total: 0,
-      available: '',
+      available: "",
       stages: [
         {
           stage: 1,
-          amount: '',
-          unlocked: '',
-          claimTime: '',
-          unlockTime: ''
-        }
+          amount: "",
+          unlocked: "",
+          claimTime: "",
+          unlockTime: "",
+        },
       ],
       records: [
         {
-          address: '',
-          amount: '',
-          desc: '',
-          earnTime: ''
-        }
-      ]
-    }
+          address: "",
+          amount: "",
+          desc: "",
+          earnTime: "",
+        },
+      ],
+    };
   } else {
-    dataInfo()
+    dataInfo();
   }
-})
+});
 
 onMounted(() => {
   // dataInfo()
-})
-
+});
 </script>
 
 <style lang="scss" scoped>
@@ -943,7 +1026,7 @@ onMounted(() => {
     .assets-user {
       display: flex;
       height: 174px;
-      background: rgba(26,24,33, .5);
+      background: rgba(26, 24, 33, 0.5);
       border-radius: 40px;
       margin-left: 77px;
       .assets-user-img {
@@ -958,8 +1041,8 @@ onMounted(() => {
         }
       }
       .assets-user-name {
-        font-family: 'Poppins';
-        color: #FFFFFF;
+        font-family: "Poppins";
+        color: #ffffff;
         border-radius: 40px;
         padding: 10px 20px;
         position: relative;
@@ -1007,7 +1090,7 @@ onMounted(() => {
             justify-content: space-between;
             width: 349px;
             height: 100%;
-            background: rgba(0,0,0,.5);
+            background: rgba(0, 0, 0, 0.5);
             border-radius: 16px;
             li {
               display: flex;
@@ -1022,7 +1105,7 @@ onMounted(() => {
                 }
               }
               span {
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: bold;
                 font-size: 20px;
               }
@@ -1057,12 +1140,12 @@ onMounted(() => {
       }
     }
     .uaw-listing {
-      color: #FFFFFF;
+      color: #ffffff;
       width: 448px;
       height: 279px;
       // height: 448px;
       margin-right: 77px;
-      background: url('@/assets/img/marketplace/CEC_bg.png') no-repeat;
+      background: url("@/assets/img/marketplace/CEC_bg.png") no-repeat;
       background-size: 100% 100%;
       box-sizing: border-box;
       // display: none;
@@ -1093,7 +1176,7 @@ onMounted(() => {
                 }
               }
               p {
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: 600;
                 font-size: 18px;
               }
@@ -1104,7 +1187,7 @@ onMounted(() => {
               line-height: 39px;
               text-align: center;
               color: #fff;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: bold;
               background: #1778f1;
               border-radius: 15px;
@@ -1112,11 +1195,11 @@ onMounted(() => {
               cursor: pointer;
             }
             // &:nth-child(2) {
-              // .staking-btn {
-              //   font-size: 14px;
-              //   line-height: 1;
-              //   padding-top: 7px;
-              // }
+            // .staking-btn {
+            //   font-size: 14px;
+            //   line-height: 1;
+            //   padding-top: 7px;
+            // }
             // }
           }
         }
@@ -1173,30 +1256,29 @@ onMounted(() => {
       .expected-content {
         width: 416px;
         margin: 0 auto;
-        font-family: 'Poppins';
+        font-family: "Poppins";
         font-weight: bold;
         font-size: 30px;
-        color: #FFFFFF;
+        color: #ffffff;
         border-top: 2px solid #525482;
         box-sizing: border-box;
         padding-top: 14px;
         padding-right: 10px;
-        >div {
+        > div {
           display: flex;
           align-items: center;
           justify-content: space-between;
           font-size: 16px;
           margin-bottom: 5px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           p {
             display: flex;
             align-items: center;
-            
           }
           span {
-              color: #00DEFF;
-              font-size: 26px;
-            }
+            color: #00deff;
+            font-size: 26px;
+          }
         }
         .total {
           font-weight: bold;
@@ -1236,11 +1318,11 @@ onMounted(() => {
       .uaw-cec-amount {
         margin-top: 18px;
         // text-align: center;
-        font-family: 'Poppins';
+        font-family: "Poppins";
         font-weight: 400;
         font-size: 24px;
       }
-      
+
       .btn {
         width: 160px;
         height: 40px;
@@ -1254,42 +1336,42 @@ onMounted(() => {
           width: 100%;
           height: 100%;
           background: #3a3b57;
-          cursor:no-drop;
+          cursor: no-drop;
         }
         .yes {
           color: #000;
           border-radius: 20px;
           background: #fec25d;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: 500;
           font-size: 14px;
-          color: #2D2738;
+          color: #2d2738;
           cursor: pointer;
         }
       }
     }
   }
-  
+
   :deep(.conLogModal) {
     width: 1052px !important;
     height: 714px;
-    background: #1A1821;
-    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    background: #1a1821;
+    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
     border-radius: 100px;
-    border: 1px solid #B966FF;
+    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);
+      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-family: "Anton";
           font-weight: 400;
           font-size: 48px;
-          color: #FFFFFF;
+          color: #ffffff;
           margin-top: 23px;
         }
         .closable {
@@ -1312,10 +1394,10 @@ onMounted(() => {
               height: 48px;
               line-height: 48px;
               text-align: center;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: 400;
               font-size: 14px;
-              color: #A8A5AC;
+              color: #a8a5ac;
               background: #2d2738;
               &:nth-child(1) {
                 border-radius: 50px 0 0 50px;
@@ -1341,14 +1423,14 @@ onMounted(() => {
                 line-height: 60px;
                 font-weight: 600;
                 font-size: 16px;
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 text-align: center;
               }
               .cec-amount {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                color: #9950FA;
+                color: #9950fa;
                 span {
                   display: flex;
                   justify-content: end;
@@ -1375,10 +1457,10 @@ onMounted(() => {
                 bottom: 50px;
                 left: 52%;
                 transform: translateX(-50%);
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: bold;
                 font-size: 28px;
-                color: #8587B2;
+                color: #8587b2;
               }
             }
             &::-webkit-scrollbar {
@@ -1423,7 +1505,7 @@ onMounted(() => {
               border-radius: 10px;
               margin: 0 5px;
               background: #2d2738;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: 200;
               font-size: 14px;
               cursor: pointer;
@@ -1432,15 +1514,16 @@ onMounted(() => {
               background: #5d5275;
             }
           }
-          .prev, .next {
+          .prev,
+          .next {
             // width: 100px;
             // height: 100px;
             display: flex;
             align-items: center;
-            font-family: 'Poppins';
+            font-family: "Poppins";
             font-weight: 600;
             font-size: 16px;
-            color: #9950FD;
+            color: #9950fd;
             cursor: pointer;
             div {
               width: 100px;
@@ -1458,7 +1541,7 @@ onMounted(() => {
               .ant-table {
                 background: #2d2738;
                 border-bottom: 0px solid #2d2738;
-                color: #FFF;
+                color: #fff;
                 .ant-table-container {
                   .ant-table-content {
                     .ant-table-thead {
@@ -1470,12 +1553,12 @@ onMounted(() => {
                         line-height: 40px;
                         th {
                           background: #2d2738;
-                          border-color: rgba(0,0,0,0);
+                          border-color: rgba(0, 0, 0, 0);
                           text-align: center;
-                          font-family: 'Poppins';
+                          font-family: "Poppins";
                           font-weight: 400;
                           font-size: 14px;
-                          color: #A8A5AC;
+                          color: #a8a5ac;
                           border-radius: 50px !important;
                           padding: 0;
                           overflow: hidden;
@@ -1489,15 +1572,15 @@ onMounted(() => {
                         }
                       }
                       .ant-table-cell {
-                          overflow: hidden;
-                          border-radius: 50px !important;
-                        }
+                        overflow: hidden;
+                        border-radius: 50px !important;
+                      }
                     }
                     .ant-table-tbody {
                       tr {
                         background: #16141b;
                         td {
-                          border-color: rgba(0,0,0,0);
+                          border-color: rgba(0, 0, 0, 0);
                           background: #16141b !important;
                           overflow: visible !important;
                           vertical-align: middle;
@@ -1516,22 +1599,22 @@ onMounted(() => {
   :deep(.cecLogModal) {
     width: 1052px !important;
     height: 714px;
-    background: #1A1821;
-    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    background: #1a1821;
+    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
     border-radius: 100px;
-    border: 1px solid #B966FF;
+    border: 1px solid #b966ff;
     .ant-modal-content {
       padding: 0 99px;
-      color: #FFF;
-      background: #1A1821;
+      color: #fff;
+      background: #1a1821;
       border-radius: 100px;
       .ant-modal-body {
         overflow: hidden;
         .log-title {
-          font-family: 'Anton';
+          font-family: "Anton";
           font-weight: 400;
           font-size: 48px;
-          color: #FFFFFF;
+          color: #ffffff;
           margin-top: 23px;
         }
         .closable {
@@ -1554,17 +1637,17 @@ onMounted(() => {
               height: 48px;
               line-height: 48px;
               text-align: center;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: 400;
               font-size: 14px;
-              color: #A8A5AC;
+              color: #a8a5ac;
               background: #2d2738;
               &:nth-child(1) {
                 border-radius: 50px 0 0 50px;
               }
               &:nth-child(2) {
-                  width: 40%;
-                }
+                width: 40%;
+              }
               &:nth-child(3) {
                 border-radius: 0 50px 50px 0;
               }
@@ -1581,7 +1664,7 @@ onMounted(() => {
                 line-height: 60px;
                 font-weight: 600;
                 font-size: 16px;
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 text-align: center;
                 &:nth-child(2) {
                   width: 40%;
@@ -1591,7 +1674,7 @@ onMounted(() => {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                color: #9950FA;
+                color: #9950fa;
                 img {
                   width: 25px;
                   height: 28px;
@@ -1612,10 +1695,10 @@ onMounted(() => {
                 bottom: 50px;
                 left: 52%;
                 transform: translateX(-50%);
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: bold;
                 font-size: 28px;
-                color: #8587B2;
+                color: #8587b2;
               }
             }
           }
@@ -1645,7 +1728,7 @@ onMounted(() => {
               border-radius: 10px;
               margin: 0 5px;
               background: #2d2738;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: 200;
               font-size: 14px;
               cursor: pointer;
@@ -1654,15 +1737,16 @@ onMounted(() => {
               background: #5d5275;
             }
           }
-          .prev, .next {
+          .prev,
+          .next {
             // width: 100px;
             // height: 100px;
             display: flex;
             align-items: center;
-            font-family: 'Poppins';
+            font-family: "Poppins";
             font-weight: 600;
             font-size: 16px;
-            color: #9950FD;
+            color: #9950fd;
             cursor: pointer;
             div {
               width: 100px;
@@ -1680,7 +1764,7 @@ onMounted(() => {
               .ant-table {
                 background: #2d2738;
                 border-bottom: 0px solid #2d2738;
-                color: #FFF;
+                color: #fff;
                 .ant-table-container {
                   .ant-table-content {
                     .ant-table-thead {
@@ -1692,12 +1776,12 @@ onMounted(() => {
                         line-height: 40px;
                         th {
                           background: #2d2738;
-                          border-color: rgba(0,0,0,0);
+                          border-color: rgba(0, 0, 0, 0);
                           text-align: center;
-                          font-family: 'Poppins';
+                          font-family: "Poppins";
                           font-weight: 400;
                           font-size: 14px;
-                          color: #A8A5AC;
+                          color: #a8a5ac;
                           border-radius: 50px !important;
                           padding: 0;
                           overflow: hidden;
@@ -1711,15 +1795,15 @@ onMounted(() => {
                         }
                       }
                       .ant-table-cell {
-                          overflow: hidden;
-                          border-radius: 50px !important;
-                        }
+                        overflow: hidden;
+                        border-radius: 50px !important;
+                      }
                     }
                     .ant-table-tbody {
                       tr {
                         background: #16141b;
                         td {
-                          border-color: rgba(0,0,0,0);
+                          border-color: rgba(0, 0, 0, 0);
                           background: #16141b !important;
                           overflow: visible !important;
                           vertical-align: middle;
@@ -1738,7 +1822,8 @@ onMounted(() => {
   :deep(.confirmModal) {
     .content {
       display: flex;
-      .confirm-header {}
+      .confirm-header {
+      }
       .confirm-content {
         .btn {
           width: 80px;
@@ -1749,7 +1834,7 @@ onMounted(() => {
             width: 100%;
             height: 100%;
             background: #3a3b57;
-            cursor:no-drop;
+            cursor: no-drop;
           }
           .yes {
             background: #f59a23;
@@ -1762,15 +1847,15 @@ onMounted(() => {
   :deep(.rulesModal) {
     width: 1152px !important;
     height: 805px;
-    background: #1A1821;
-    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    background: #1a1821;
+    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
     border-radius: 100px;
-    border: 1px solid #B966FF;
+    border: 1px solid #b966ff;
     .ant-modal-content {
       width: 944px;
       margin: 0 auto;
-      color: #FFF;
-      background: #1A1821;
+      color: #fff;
+      background: #1a1821;
       border-radius: 100px;
       box-shadow: 0 0 0 0;
       .ant-modal-body {
@@ -1778,12 +1863,12 @@ onMounted(() => {
         .log-title {
           width: 944px;
           margin: 0 auto;
-          font-family: 'Anton';
+          font-family: "Anton";
           font-weight: 400;
           font-size: 48px;
-          color: #FFFFFF;
+          color: #ffffff;
           margin-top: 23px;
-          border-bottom: 2px solid #3D4057;
+          border-bottom: 2px solid #3d4057;
         }
         .closable {
           position: absolute;
@@ -1797,10 +1882,10 @@ onMounted(() => {
           }
         }
         h3 {
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
           font-size: 29px;
-          color: #FFFFFF;
+          color: #ffffff;
           margin-top: 20px;
         }
         .staking-content {
@@ -1810,10 +1895,10 @@ onMounted(() => {
             width: 427px;
             border-radius: 50px;
             h4 {
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: bold;
               font-size: 30px;
-              color: #AB74EA;
+              color: #ab74ea;
               text-align: center;
             }
             .hero-title {
@@ -1821,10 +1906,10 @@ onMounted(() => {
               line-height: 50px;
               background: #604680;
               border-radius: 30px 30px 0 0;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: bold;
               font-size: 18px;
-              color: #F6F6F6;
+              color: #f6f6f6;
               span {
                 display: inline-block;
                 text-align: center;
@@ -1843,10 +1928,10 @@ onMounted(() => {
                 line-height: 46px;
                 text-align: center;
                 background: #2d2738;
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: 600;
                 font-size: 20px;
-                color: #F3F0FF;
+                color: #f3f0ff;
                 border-top: 2px solid #1a1821;
                 span {
                   display: inline-block;
@@ -1872,22 +1957,22 @@ onMounted(() => {
   :deep(.rechargeLogModal) {
     width: 1052px !important;
     height: 714px;
-    background: #1A1821;
-    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    background: #1a1821;
+    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
     border-radius: 100px;
-    border: 1px solid #B966FF;
+    border: 1px solid #b966ff;
     .ant-modal-content {
       padding: 0 99px;
-      color: #FFF;
-      background: #1A1821;
+      color: #fff;
+      background: #1a1821;
       box-shadow: none;
       border-radius: 100px;
       .ant-modal-body {
         .log-title {
-          font-family: 'Anton';
+          font-family: "Anton";
           font-weight: 400;
           font-size: 48px;
-          color: #FFFFFF;
+          color: #ffffff;
           margin-top: 23px;
         }
         .closable {
@@ -1910,17 +1995,17 @@ onMounted(() => {
               height: 48px;
               line-height: 48px;
               text-align: center;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: 400;
               font-size: 14px;
-              color: #A8A5AC;
+              color: #a8a5ac;
               background: #2d2738;
               &:nth-child(1) {
                 border-radius: 50px 0 0 50px;
               }
               &:nth-child(2) {
-                  width: 40%;
-                }
+                width: 40%;
+              }
               &:last-child {
                 border-radius: 0 50px 50px 0;
               }
@@ -1939,7 +2024,7 @@ onMounted(() => {
                 line-height: 60px;
                 font-weight: 600;
                 font-size: 16px;
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 text-align: center;
                 &:nth-child(2) {
                   width: 40%;
@@ -1949,7 +2034,7 @@ onMounted(() => {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                color: #9950FA;
+                color: #9950fa;
                 span {
                   display: inline-block;
                   width: 90px;
@@ -1975,10 +2060,10 @@ onMounted(() => {
                 bottom: 50px;
                 left: 52%;
                 transform: translateX(-50%);
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: bold;
                 font-size: 28px;
-                color: #8587B2;
+                color: #8587b2;
               }
             }
             &::-webkit-scrollbar {
@@ -2023,7 +2108,7 @@ onMounted(() => {
               border-radius: 10px;
               margin: 0 5px;
               background: #2d2738;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: 200;
               font-size: 14px;
               cursor: pointer;
@@ -2032,15 +2117,16 @@ onMounted(() => {
               background: #5d5275;
             }
           }
-          .prev, .next {
+          .prev,
+          .next {
             // width: 100px;
             // height: 100px;
             display: flex;
             align-items: center;
-            font-family: 'Poppins';
+            font-family: "Poppins";
             font-weight: 600;
             font-size: 16px;
-            color: #9950FD;
+            color: #9950fd;
             cursor: pointer;
             div {
               width: 100px;
@@ -2058,7 +2144,7 @@ onMounted(() => {
               .ant-table {
                 background: #2d2738;
                 border-bottom: 0px solid #2d2738;
-                color: #FFF;
+                color: #fff;
                 .ant-table-container {
                   .ant-table-content {
                     .ant-table-thead {
@@ -2070,12 +2156,12 @@ onMounted(() => {
                         line-height: 40px;
                         th {
                           background: #2d2738;
-                          border-color: rgba(0,0,0,0);
+                          border-color: rgba(0, 0, 0, 0);
                           text-align: center;
-                          font-family: 'Poppins';
+                          font-family: "Poppins";
                           font-weight: 400;
                           font-size: 14px;
-                          color: #A8A5AC;
+                          color: #a8a5ac;
                           border-radius: 50px !important;
                           padding: 0;
                           overflow: hidden;
@@ -2089,15 +2175,15 @@ onMounted(() => {
                         }
                       }
                       .ant-table-cell {
-                          overflow: hidden;
-                          border-radius: 50px !important;
-                        }
+                        overflow: hidden;
+                        border-radius: 50px !important;
+                      }
                     }
                     .ant-table-tbody {
                       tr {
                         background: #16141b;
                         td {
-                          border-color: rgba(0,0,0,0);
+                          border-color: rgba(0, 0, 0, 0);
                           background: #16141b !important;
                           overflow: visible !important;
                           vertical-align: middle;
@@ -2119,10 +2205,10 @@ onMounted(() => {
   :deep(.rechargeListModal) {
     width: 1219px !important;
     height: 895px;
-    background: #1A1821;
-    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    background: #1a1821;
+    box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
     border-radius: 100px;
-    border: 1px solid #B966FF;
+    border: 1px solid #b966ff;
     top: 50px;
     z-index: 10;
     .ant-modal-content {
@@ -2135,7 +2221,7 @@ onMounted(() => {
         width: 100%;
         text-align: center;
         .title {
-          font-family: 'Anton';
+          font-family: "Anton";
           font-weight: 400;
           font-size: 48px;
           margin-top: 25px;
@@ -2149,7 +2235,7 @@ onMounted(() => {
           padding-left: 44px;
           padding-top: 30px;
           box-sizing: border-box;
-          background: url('src/assets/img/marketplace/Top-up bg.png') no-repeat;
+          background: url("src/assets/img/marketplace/Top-up bg.png") no-repeat;
           background-size: 100% 100%;
           .credits-top {
             display: flex;
@@ -2157,7 +2243,7 @@ onMounted(() => {
             position: relative;
             p {
               color: #fff;
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: 600;
               font-size: 20px;
             }
@@ -2179,7 +2265,7 @@ onMounted(() => {
                   right: -340px;
                   width: 359px;
                   height: 139px;
-                  background: url('@/assets/img/marketplace/WL.png') no-repeat;
+                  background: url("@/assets/img/marketplace/WL.png") no-repeat;
                   background-size: 100% 100%;
                   border-radius: 10px;
                   display: flex;
@@ -2205,7 +2291,7 @@ onMounted(() => {
               margin-right: 10px;
             }
             span {
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-size: 26px;
               color: #03d4f5;
             }
@@ -2224,10 +2310,10 @@ onMounted(() => {
           }
         }
         p {
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: 400;
           font-size: 20px;
-          color: #9950FD;
+          color: #9950fd;
         }
         .content {
           width: 100%;
@@ -2261,7 +2347,7 @@ onMounted(() => {
               right: -36px;
               width: 131px;
               height: 131px;
-              background: url('@/assets/img/marketplace/First-Time_bg.png') no-repeat;
+              background: url("@/assets/img/marketplace/First-Time_bg.png") no-repeat;
               background-size: 100% 100%;
               display: flex;
               justify-content: center;
@@ -2273,7 +2359,7 @@ onMounted(() => {
                 width: 90px;
                 height: 25px;
                 font-weight: bold;
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 margin: 0 auto;
                 color: #fff;
               }
@@ -2295,16 +2381,16 @@ onMounted(() => {
               width: 346px;
               height: 44px;
               padding-top: 8px;
-              background: url('@/assets/img/marketplace/First_purchase.png') no-repeat;
+              background: url("@/assets/img/marketplace/First_purchase.png") no-repeat;
               background-size: 100% 100%;
               display: flex;
               align-items: center;
               justify-content: center;
               p {
-                font-family: 'Anton';
+                font-family: "Anton";
                 font-weight: 400;
                 font-size: 24px;
-                color: #F8F6FF;
+                color: #f8f6ff;
                 span {
                   font-size: 36px;
                   line-height: 1;
@@ -2348,13 +2434,13 @@ onMounted(() => {
               span {
                 display: inline-block;
                 width: 140px;
-                font-family: 'Poppins';
+                font-family: "Poppins";
                 font-weight: bold;
                 font-size: 36px;
               }
             }
             .item-amount {
-              font-family: 'Poppins';
+              font-family: "Poppins";
               font-weight: bold;
               font-size: 36px;
               line-height: 1;
@@ -2380,7 +2466,7 @@ onMounted(() => {
               align-items: center;
               justify-content: space-between;
               margin: 0 auto;
-              background: #1E1B26;
+              background: #1e1b26;
               border-radius: 21px;
               position: relative;
               input {
@@ -2392,13 +2478,13 @@ onMounted(() => {
                 font-size: 28px;
                 margin-right: 35px;
               }
-              input[type=number] {
-                -moz-appearance:textfield;
+              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[type="number"]::-webkit-inner-spin-button,
+              input[type="number"]::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
               }
               h4 {
                 position: absolute;
@@ -2420,15 +2506,15 @@ onMounted(() => {
           display: flex;
           align-items: center;
           justify-content: center;
-          background: #FEC25D;
-          box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+          background: #fec25d;
+          box-shadow: 0px 15px 28px 3px rgba(22, 22, 22, 0.13);
           border-radius: 30px;
           margin: 0 auto;
           margin-top: 40px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
           font-size: 36px;
-          color: #2D2738;
+          color: #2d2738;
           cursor: pointer;
           span {
             display: inline-block;
diff --git a/src/router/index.js b/src/router/index.js
index 04634f6..d3a0e83 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import Detail from "../views/DetailView.vue";
 import PrivacyView from '../views/PrivacyView.vue';
 import TermsView from '../views/TermsView.vue';
 import CecActivityView from '../views/CecActivityView.vue';
+import RankingView from '../views/rankingView.vue';
 import ClaimView from '../views/ClaimView.vue';
 import StakingView from "../views/StakingView.vue";
 import ConversionView from "../views/ConversionView.vue";
@@ -85,10 +86,19 @@ const routes = [
       canonical: "https://.counterfire.games",
     },
   },
+  // {
+  //   path: "/cecActivity",
+  //   name: "CecActivityView",
+  //   component: CecActivityView,
+  //   meta: {
+  //     title: "Counter Fire-CecActivity",
+  //     canonical: "https://.counterfire.games",
+  //   },
+  // },
   {
     path: "/cecActivity",
     name: "CecActivityView",
-    component: CecActivityView,
+    component: RankingView,
     meta: {
       title: "Counter Fire-CecActivity",
       canonical: "https://.counterfire.games",
diff --git a/src/views/rankingView.vue b/src/views/rankingView.vue
new file mode 100644
index 0000000..28cf09c
--- /dev/null
+++ b/src/views/rankingView.vue
@@ -0,0 +1,817 @@
+<template>
+  <div class="mint">
+    <div class="mint-page">
+      <div class="mint-header">
+        <div class="mint-header-logo" @click="handlHome">
+          <img src="@/assets/img/cec_activity/mint_Logo1.png" alt />
+        </div>
+        <div class="mint-header-right">
+          <div class="left">
+            <div>
+              <a href="https://discord.gg/counterfire" target="_blank">
+                <img src="@/assets/img/cec_activity/Icon_Disc.png" alt />
+              </a>
+            </div>
+            <div @click="toTwitter">
+              <img src="@/assets/img/cec_activity/Icon_X.png" alt />
+            </div>
+          </div>
+          <div class="right">
+            <div
+              class="wallet"
+              v-if="localWalletStore.address == null || localWalletStore.address == ''"
+              @click="getLinkWallet"
+            >
+              <span>Connect Wallet</span>
+              <div class="wallet-btn">
+                <img class="hover-show" src="@/assets/img/cec_activity/ConnectMenu1.png" alt />
+                <img class="hover-none" src="@/assets/img/cec_activity/ConnectMenu2.png" alt />
+              </div>
+            </div>
+            <div class="wallet" v-else @click="isLogout = !isLogout">
+              <div class="wallet-address">{{ localWalletStore.showAddress }}</div>
+              <div class="wallet-btn">
+                <img class="hover-show" src="@/assets/img/cec_activity/ConnectMenu1.png" alt />
+                <img class="hover-none" src="@/assets/img/cec_activity/ConnectMenu2.png" alt />
+              </div>
+              <div class="log-out" v-if="isLogout" @click="logOut">logout</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mint-body">
+        <div class="mint-body-left">
+          <div class="mint-body-left-title">
+            <div>
+              <img src="@/assets/img/ranking/Tournament_title.png" alt />
+            </div>
+          </div>
+          <div class="mint-body-left-content">
+            <div class="mint-body-left-table">
+              <div
+                :class="{active: scoreIndex == index}"
+                v-for="(item, index) in scoreList"
+                :key="index"
+                @click="checkTable(index)"
+              >{{ item }}</div>
+            </div>
+            <div class="mint-body-left-contribute">
+              <li>
+                <h6>{{ Number(0) == 0 ? '-' : 100 }}</h6>
+                <div>
+                  <img src="@/assets/img/ranking/Circuit_point.png" alt />
+                </div>
+              </li>
+            </div>
+            <div class="mint-body-left-my-pro">
+              <div>My Ranking</div>
+              <div>
+                <img src="@/assets/img/ranking/Icon_history.png" alt />
+                <span>History</span>
+              </div>
+            </div>
+            <div class="mint-body-left-cec">
+              <h3>10</h3>
+            </div>
+          </div>
+        </div>
+
+        <div class="mint-body-right">
+          <div class="mint-body-right-top">
+            <div class="right-table">
+              <div
+                :class="{active: scoreIndex == index}"
+                v-for="(item, index) in scoreList"
+                :key="index"
+                @click="checkTable(index)"
+              >{{ item }}</div>
+            </div>
+            <div class="right-time">
+              <p>The current phase</p>
+              <div>
+                <h3>10.1</h3>
+                <h3>-</h3>
+                <h3>10.10</h3>
+              </div>
+            </div>
+          </div>
+          <div class="mint-body-right-btm">
+            <div class="content">
+              <div v-if="rankingTableData.length == 0" class="ranking-content-right-list-no">
+                <div>
+                  <p>None</p>
+                </div>
+              </div>
+              <div v-else class="ranking-content-right-list">
+                <li v-for="(item, index) in rankingTableData" :key="index">
+                  <div class="left">
+                    <div class="left-left">
+                      <div class="rank">
+                        <img v-if="item.rank == 1" src="@/assets/img/ranking/Ranking1.png" alt />
+                        <img v-else-if="item.rank == 2" src="@/assets/img/ranking/Ranking2.png" alt />
+                        <img v-else-if="item.rank == 3" src="@/assets/img/ranking/Ranking3.png" alt />
+                        <span v-else>{{ item.rank }}</span>
+                      </div>
+                    </div>
+                    <div class="left-right">
+                      <div class="user-img">
+                        <!-- <UserImg :imgSrc="item.avatar" /> -->
+                        <!-- <img v-if="imgSrc" :src="imgSrc" alt="" :onerror="defalutUrl"> -->
+                        <img src="@/assets/img/ranking/head_default.jpg" alt />
+                      </div>
+                      <div class="user-name">
+                        <div class="label">Username</div>
+                        <div class="name">{{ item.nickname }}</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="right">
+                    <div class="label" v-if="pointsIndex == 0">Points</div>
+                    <div class="label" v-else>Gems</div>
+                    <div class="records">{{ item.score }}</div>
+                  </div>
+                </li>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-left">
+        <div>
+          <img src="@/assets/img/cec_activity/game_logo02.png" alt />
+        </div>
+        <p>© Candy Bubble Global Limited.ALL RIGHTS RESERVED.</p>
+      </div>
+      <div class="footer-right">
+        <!-- <li>
+            <a href="https://discord.com/invite/counterfire" target="_blank">
+              <img src="./../assets/home/com_Discord_icon.png" alt="">
+            </a>
+          </li>
+          <li>
+            <a href="https://twitter.com/@playCounterFire" target="_blank">
+              <img src="./../assets/home/com_X_icon.png" alt="">
+            </a>
+          </li>
+          <li>
+            <a href="https://www.youtube.com/@playCounterFire" target="_blank">
+              <img src="./../assets/home/com_Youtube_icon.png" alt="">
+            </a>
+        </li>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, watch, computed, onMounted} from "vue";
+import {BlockChain} from "@/components/chain/BlockChain";
+import {apiCecActivity} from "@/utils/marketplace";
+import {contributionLogs} from "@/configs/priceCalculate";
+import {walletStore} from "@/store/wallet";
+import {useMarketplaceStore} from "@/store/marketplace";
+const localWalletStore = walletStore();
+const marketplaceStore = useMarketplaceStore();
+
+import {useRouter, useRoute} from "vue-router";
+const router = useRouter();
+
+const scoreList = ref(["Total score", "Weekly score"]);
+const scoreIndex = ref(0);
+const rankingIndex = ref(0);
+const rankingTableData = ref([
+  {
+    rank: 1,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 2,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 3,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 0,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 0,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 0,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 0,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 0,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+  {
+    rank: 0,
+    avatar: 0,
+    nickname: "aa",
+    score: 0,
+  },
+]);
+const checkTable = (index) => {
+  scoreIndex.value = index;
+};
+
+// 链接钱包
+const getLinkWallet = async () => {
+  await new BlockChain().connect();
+};
+
+const isLogout = ref(false);
+// 退出登录
+const logOut = async () => {
+  try {
+    isLogout.value = false;
+    await new BlockChain().logout();
+    location.reload();
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+// 跳回首页
+const handlHome = () => {
+  router.push("/");
+};
+
+const loginDiscord = () => {
+  const _address = localWalletStore.address;
+  const codeChallenge = Date.now();
+  const state = btoa(`${_address}|${codeChallenge}`);
+  // const url = 'https://discord.com/api/oauth2/authorize?client_id=1116692240224501850&redirect_uri=http%3A%2F%2Flocalhost%3A3010%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read'
+  const url = `https://discord.com/api/oauth2/authorize?client_id=1117759635269636096&redirect_uri=https%3A%2F%2Foauth-svr.cebggame.com%2Fdiscord%2Fredirect_uri&response_type=code&scope=guilds%20identify%20guilds.members.read&state=${state}`;
+  // location.href = url
+  // // Redirect the user to the Discord OAuth2 authorization page
+  let params = `scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no,width=600,height=800,left=100,top=100`;
+  let newwin = window.open(url, "discord login", params);
+  console.log(newwin);
+  var timer = setInterval(function () {
+    if (newwin.closed) {
+      clearInterval(timer);
+    }
+  }, 10);
+};
+
+// 发送推文
+const toTwitter = () => {
+  const url = "https://twitter.com/intent/tweet?text=";
+  const hashtags = encodeURIComponent("500,000 $CEC Awaits - Earn Your Share!");
+  const imageUrl = encodeURIComponent(`https://counterfire.games/cecActivity`);
+  const params = `${hashtags}&url=${imageUrl}`;
+  // const params = `${hashtags}`;
+  window.open(`${url}${params}`, "_blank");
+};
+
+const mintInit = async () => {};
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.mint {
+  background: #0f1013;
+  .mint-page {
+    width: 1803px;
+    height: 1084px;
+    background: url("@/assets/img/ranking/CFbg.png") no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto;
+    margin-top: 29px;
+    // height: 100vh;
+    .mint-header {
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 1497px;
+      height: 152px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      z-index: 9;
+      .mint-header-logo {
+        width: 263px;
+        height: 100%;
+        cursor: pointer;
+      }
+      .mint-header-right {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        .left {
+          width: 106px;
+          height: 47px;
+          display: flex;
+          justify-content: space-evenly;
+          align-items: center;
+          background: #2d2738;
+          border-radius: 25px;
+          margin-right: 21px;
+          div {
+            width: 19px;
+            height: 14px;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            a {
+              display: block;
+              width: 19px;
+              height: 14px;
+            }
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+        .right {
+          cursor: pointer;
+          .wallet {
+            width: 220px;
+            height: 50px;
+            border-radius: 26px;
+            padding-left: 40px;
+            display: flex;
+            align-items: center;
+            margin-right: 80px;
+            background: #2d2738;
+            position: relative;
+            span {
+              display: inline-block;
+              width: 100%;
+              height: 100%;
+              line-height: 50px;
+              margin-right: 10px;
+              font-size: 16px;
+            }
+            .wallet-address {
+              width: 100%;
+              height: 100%;
+              line-height: 50px;
+              font-size: 16px;
+            }
+            .wallet-btn {
+              z-index: 999;
+              position: absolute;
+              top: -25px;
+              right: -45px;
+              width: 100px;
+              height: 100px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+              .hover-show {
+                display: block;
+              }
+              .hover-none {
+                display: none;
+              }
+              .wallet-list {
+                position: absolute;
+                left: 50%;
+                bottom: -50%;
+                transform: translateX(-50%);
+                border-radius: 20px;
+                overflow: hidden;
+                display: none;
+                li {
+                  width: 200px;
+                  height: 40px;
+                  line-height: 40px;
+                  padding: 10px;
+                  font-size: 14px;
+                  text-align: center;
+                  display: flex;
+                  align-items: center;
+                  box-sizing: border-box;
+                  background: #342f3b;
+                  img {
+                    width: 30px;
+                    height: 30px;
+                    margin-right: 8px;
+                  }
+                  &:hover {
+                    background: #e0e0e0;
+                    color: #0f1013;
+                  }
+                }
+              }
+              &:hover {
+                .hover-show {
+                  display: none;
+                }
+                .hover-none {
+                  display: block;
+                }
+                .wallet-list {
+                  display: block;
+                }
+              }
+            }
+            .log-out {
+              position: absolute;
+              left: 0;
+              top: 100%;
+              width: 100%;
+              height: 100%;
+              background: #2d2738;
+              border-radius: 26px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 16px;
+              border: 2px solid #bb7fff;
+            }
+          }
+        }
+      }
+    }
+    .mint-body {
+      width: 1497px;
+      margin: 0 auto;
+      position: relative;
+      top: -152px;
+      .mint-body-left {
+        position: absolute;
+        top: 140px;
+        left: 35px;
+        z-index: 9;
+        .mint-body-left-title {
+          display: flex;
+          align-items: center;
+          div {
+            width: 392px;
+            height: 151px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+        .mint-body-left-content {
+          width: 241px;
+          height: 303px;
+          margin-top: 31px;
+          background: #2c2635;
+          border-radius: 40px;
+          text-align: left;
+          .mint-body-left-table {
+            padding-top: 21px;
+            // padding-left: 17px;
+            font-family: "Poppins";
+            font-weight: 400;
+            font-size: 16px;
+            color: #fff;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-around;
+            div {
+              padding-bottom: 3px;
+              border-bottom: 3px solid #fff;
+              cursor: pointer;
+            }
+            .active {
+              color: #994ffd;
+              border-color: #994ffd;
+              position: relative;
+              &::after {
+                display: block;
+                content: "";
+                border-width: 5px;
+                border-style: solid;
+                border-color: transparent transparent #9950fd transparent;
+
+                /* 定位 */
+                position: absolute;
+                left: 50%;
+                bottom: 0px;
+                transform: translateX(-50%);
+              }
+            }
+          }
+          .mint-body-left-contribute {
+            width: 100%;
+            height: 69px;
+            margin-top: 4px;
+            position: relative;
+            li {
+              position: absolute;
+              left: -14px;
+              width: 269px;
+              height: 69px;
+              display: flex;
+              align-items: center;
+              padding-left: 27px;
+              background: url("@/assets/img/cec_activity/Credit_bg1.png") no-repeat;
+              background-size: 100% 100%;
+              div {
+                width: 35px;
+                height: 50px;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+              h6 {
+                font-family: "Anton";
+                font-weight: 400;
+                font-size: 42px;
+                color: #00deff;
+                margin-right: 11px;
+              }
+            }
+          }
+          .mint-body-left-my-pro {
+            display: flex;
+            justify-content: space-evenly;
+            // align-items: center;
+            font-family: "Poppins";
+            font-weight: 600;
+            font-size: 16px;
+            color: #fff;
+            margin-top: 20px;
+            div {
+              display: flex;
+              align-items: center;
+              font-family: "Poppins";
+              font-weight: 600;
+              font-size: 16px;
+              color: #fff;
+              cursor: pointer;
+              img {
+                margin-right: 8px;
+              }
+              span {
+                font-weight: 400;
+                font-size: 12px;
+                color: #fdfdff;
+              }
+            }
+          }
+          .mint-body-left-cec {
+            display: flex;
+            align-items: center;
+            padding-left: 50px;
+            margin-top: 20px;
+            h3 {
+              font-family: "Anton";
+              font-weight: 400;
+              font-size: 46px;
+              color: #ffc35b;
+            }
+          }
+        }
+      }
+      .mint-body-right {
+        position: absolute;
+        top: 154px;
+        right: 0px;
+        .mint-body-right-top {
+          display: flex;
+          align-items: flex-end;
+          justify-content: flex-end;
+          margin-bottom: 30px;
+          color: #fff;
+          .right-table {
+            display: flex;
+            height: 28px;
+            margin-right: 80px;
+            div {
+              margin: 0 10px;
+              border-bottom: 3px solid #fff;
+              cursor: pointer;
+            }
+            .active {
+              color: #994ffd;
+              border-color: #994ffd;
+              position: relative;
+              &::after {
+                display: block;
+                content: "";
+                border-width: 5px;
+                border-style: solid;
+                border-color: transparent transparent #9950fd transparent;
+
+                /* 定位 */
+                position: absolute;
+                left: 50%;
+                bottom: 0px;
+                transform: translateX(-50%);
+              }
+            }
+          }
+          .right-time {
+            width: 148px;
+            margin-right: 80px;
+            p {
+              font-family: "Poppins";
+              font-weight: 500;
+              font-size: 16px;
+              color: #ffffff;
+            }
+            div {
+              display: flex;
+              justify-content: space-between;
+              h3 {
+                font-family: "Anton";
+                font-weight: 400;
+                font-size: 31px;
+                color: #ffffff;
+                height: 35px;
+              }
+            }
+          }
+        }
+        .mint-body-right-btm {
+          .content {
+            width: 630px;
+            color: #fff;
+            height: 620px;
+            padding: 0 30px;
+            box-sizing: border-box;
+            position: relative;
+            overflow-y: scroll;
+            .ranking-content-right-list {
+              li {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                background: #2d2738;
+                padding: 8px 50px;
+                border-radius: 30px;
+                margin-top: 15px;
+                .left {
+                  display: flex;
+                  align-items: center;
+                  .left-left {
+                    width: 50px;
+                    margin-right: 30px;
+                    .rank {
+                      width: 40px;
+                      text-align: center;
+                      span {
+                        font-size: 18px;
+                        font-weight: 700;
+                        // font-family: "Anton-Regular";
+                        color: #9950fd;
+                      }
+                      img {
+                        width: 40px;
+                        height: 30px;
+                      }
+                    }
+                  }
+                  .left-right {
+                    display: flex;
+                    align-items: center;
+                    .user-name {
+                      font-size: 16px;
+                      margin-left: 20px;
+                      line-height: 1.4;
+                      .label {
+                        text-align: left;
+                        color: #979797;
+                        font-size: 14px;
+                      }
+                      .name {
+                        font-size: 14px;
+                      }
+                    }
+                    .user-img {
+                      width: 40px;
+                      height: 40px;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      background: url("@/assets/img/ranking/Picture frame .png") no-repeat;
+                      background-size: 100% 100%;
+                      padding: 3px;
+                      img {
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 50%;
+                      }
+                    }
+                  }
+                }
+                .right {
+                  line-height: 1.4;
+                  .label {
+                    text-align: left;
+                    color: #979797;
+                    font-size: 14px;
+                  }
+                  .records {
+                    font-size: 14px;
+                    text-align: left;
+                  }
+                  .icon {
+                    width: 10px;
+                    height: 12px;
+                    margin-left: 5px;
+                    display: flex;
+                    align-items: center;
+                    img {
+                      width: 100%;
+                      height: 100%;
+                    }
+                  }
+                }
+              }
+            }
+            .ranking-content-right-list-no {
+              height: 500px;
+              position: relative;
+              div {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 200px;
+                height: 140px;
+                background: url("./../../assets/box/none01.png") no-repeat;
+                background-size: 100% 100%;
+                p {
+                  position: absolute;
+                  bottom: 8%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                  font-size: 14px;
+                }
+              }
+            }
+            &::-webkit-scrollbar {
+              width: 5px;
+            }
+            &::-webkit-scrollbar-track {
+              background: #171220;
+              border-radius: 2px;
+            }
+            &::-webkit-scrollbar-corner {
+              display: block;
+            }
+            &::-webkit-scrollbar-thumb {
+              height: 15px;
+              background: #9950fd;
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    width: 100%;
+    height: 98px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 45px;
+    box-sizing: border-box;
+    border-top: 2px solid #2c2635;
+    background: #1a1821;
+    .footer-left {
+      color: #877e98;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      div {
+        width: 235px;
+        height: 51px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>