diff --git a/src/assets/img/marketplace/1001.png b/src/assets/img/marketplace/1001.png
new file mode 100644
index 0000000..bae5997
Binary files /dev/null and b/src/assets/img/marketplace/1001.png differ
diff --git a/src/assets/img/marketplace/1002.png b/src/assets/img/marketplace/1002.png
new file mode 100644
index 0000000..ad33306
Binary files /dev/null and b/src/assets/img/marketplace/1002.png differ
diff --git a/src/assets/img/marketplace/1003.png b/src/assets/img/marketplace/1003.png
new file mode 100644
index 0000000..a80f866
Binary files /dev/null and b/src/assets/img/marketplace/1003.png differ
diff --git a/src/assets/img/marketplace/1004.png b/src/assets/img/marketplace/1004.png
new file mode 100644
index 0000000..d61f57c
Binary files /dev/null and b/src/assets/img/marketplace/1004.png differ
diff --git a/src/assets/img/marketplace/1005.png b/src/assets/img/marketplace/1005.png
new file mode 100644
index 0000000..ad3b8be
Binary files /dev/null and b/src/assets/img/marketplace/1005.png differ
diff --git a/src/assets/img/marketplace/1006.png b/src/assets/img/marketplace/1006.png
new file mode 100644
index 0000000..a055000
Binary files /dev/null and b/src/assets/img/marketplace/1006.png differ
diff --git a/src/assets/img/marketplace/icon_USDT.png b/src/assets/img/marketplace/icon_USDT.png
new file mode 100644
index 0000000..d769a45
Binary files /dev/null and b/src/assets/img/marketplace/icon_USDT.png differ
diff --git a/src/assets/img/marketplace/icon_diamond.png b/src/assets/img/marketplace/icon_diamond.png
new file mode 100644
index 0000000..6d5e265
Binary files /dev/null and b/src/assets/img/marketplace/icon_diamond.png differ
diff --git a/src/assets/img/marketplace/selected.png b/src/assets/img/marketplace/selected.png
new file mode 100644
index 0000000..e081cee
Binary files /dev/null and b/src/assets/img/marketplace/selected.png differ
diff --git a/src/components/assets/assetsHeader.vue b/src/components/assets/assetsHeader.vue
index 9177ff0..4d65c50 100644
--- a/src/components/assets/assetsHeader.vue
+++ b/src/components/assets/assetsHeader.vue
@@ -1,315 +1,419 @@
 <template>
   <div class="mkt-header">
-    <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">
-      </div>
-      <div class="assets-user-name">
-        <div>{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
-        <div class="total">
-          <p>Total Contribution Credits:&nbsp; <span>{{ contributionPointTotal }}</span></p>
-          <img src="@/assets/img/marketplace/totalContribution.png" alt="">
-          <img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
+    <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">
         </div>
-        <div class="day">
-          <p>Daily Expected:&nbsp;&nbsp; <span>+{{ contributionPoint }}/d</span></p>
-          <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>
-    <div class="uaw-listing">
-      <div class="uaw-listing-content">
-        <div class="left">&nbsp;</div>
-        <div class="img">
-          <img src="@/assets/img/marketplace/CECIcon.png" alt="">
-        </div>
-        <div class="right">
-          <div class="tips">
-            <div class="tips-img">
-              <img src="@/assets/img/marketplace/Description.png" alt="">
-            </div>
-            <div class="tips-message">Shows earned CEC</div>
+        <div class="assets-user-name">
+          <div class="adderss">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
+          <div class="email">
+            <p>Total Contribution Credits:</p>
           </div>
-          <div class="log" @click="receiveLog">
-            <img src="@/assets/img/marketplace/History.png" alt="">
+          <div class="name">
+            <p>Player name:&nbsp;&nbsp; <span>{{ contributionPoint }}</span></p>
           </div>
-        </div>
-      </div>
-      <div class="uaw-cec-amount">
-        <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>
-        </p>
-      </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> -->
-      </div>
-      <div ref="conLogModal">
-        <a-modal :class="'conLogModal'" :getContainer="() => $refs.conLogModal" v-model:open="conLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
-          <div class="log-title">Staking Contribution Credits Record</div>
-          <div class="closable" @click="conLogDialogVisible = false">
-            <img src="@/assets/img/marketplace/Close_counter.png" alt="">
-          </div>
-          <div class="log-content">
-            <div class="log-header">
-              <!-- <li>
-                Event
-              </li> -->
+          <div class="recharge">
+            <div class="recharge-left">
               <li>
-                Date
-              </li>
-              <li>
-                Reward
-              </li>
-            </div>
-            <div class="log-body">
-              <div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
-                <div>
-                  <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+                <div class="recharge-img">
+                  <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
                 </div>
-                <p>No Data</p>
+                <span>0</span>
+              </li>
+              <li>
+                <div class="recharge-btn" @click="rechargeListDialogVisible = true">Top up</div>
+              </li>
+            </div>
+            <div class="recharge-right">
+              <img class="icon" @click="rechargeLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
+            </div>
+          </div>
+        </div>
+        <div>
+        </div>
+      </div>
+      <div class="uaw-listing">
+        <div class="uaw-listing-content">
+          <div class="left">
+            <div class="img">
+              <img src="@/assets/img/marketplace/CECIcon.png" alt="">
+            </div>
+              <div class="uaw-cec-amount">
+              <p>
+                CEC: 
+                <br>
+                <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>
+          <div class="right">
+            <div class="tips">
+              <div class="tips-img">
+                <img src="@/assets/img/marketplace/Description.png" alt="">
               </div>
-              <div v-else class="pages" v-for="(item, index) in contributionList" :key="index">
+              <div class="tips-message">Shows earned CEC</div>
+            </div>
+            <div class="log" @click="receiveLog">
+              <img src="@/assets/img/marketplace/History.png" alt="">
+            </div>
+          </div>
+        </div>
+        <div class="expected-content">
+          <div class="total">
+            <p>Total Contribution Credits:&nbsp; </p>
+            <div>
+              <span>{{ contributionPointTotal }}</span>
+              <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">
+            <p>Daily Expected:&nbsp;&nbsp;</p>
+            <div>
+              <span>+{{ contributionPoint }}/d</span>
+              <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 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> -->
+        </div>
+        <div ref="conLogModal">
+          <a-modal :class="'conLogModal'" :getContainer="() => $refs.conLogModal" v-model:open="conLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+            <div class="log-title">Staking Contribution Credits Record</div>
+            <div class="closable" @click="conLogDialogVisible = false">
+              <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+            </div>
+            <div class="log-content">
+              <div class="log-header">
                 <!-- <li>
-                  <span>contributionList</span>
+                  Event
                 </li> -->
                 <li>
-                  {{ timeFormat(item.date*1000) }}
-                </li>
-                <li class="cec-amount">
-                  <!-- <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="">
-                </li>
-              </div>
-            </div>
-          </div>
-        </a-modal>
-      </div>
-      <div ref="cecLogModal">
-        <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="">
-          </div>
-          <div class="log-content">
-            <div class="log-header">
-              <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">
-                <li>
-                  <span v-if="item.desc == 'uaw'">Hill's Treasure Hunt</span>
-                  <span v-else-if="item.desc == 'p2a'">Wheel of Fortune</span>
-                  <span v-else-if="item.desc == 'game test parse 1'">P2E Season 1</span>
-                  <span v-else>{{ item.desc }}</span>
+                  Date
                 </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="">
+                  Reward
                 </li>
               </div>
-              <div class="no-data" v-if="cecInfo?.total == 0">
-                <div>
-                  <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+              <div class="log-body">
+                <div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
+                  <div>
+                    <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+                  </div>
+                  <p>No Data</p>
+                </div>
+                <div v-else class="pages" v-for="(item, index) in contributionList" :key="index">
+                  <!-- <li>
+                    <span>contributionList</span>
+                  </li> -->
+                  <li>
+                    {{ timeFormat(item.date*1000) }}
+                  </li>
+                  <li class="cec-amount">
+                    <!-- <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="">
+                  </li>
                 </div>
-                <p>No Data</p>
               </div>
             </div>
+          </a-modal>
+        </div>
+        <div ref="cecLogModal">
+          <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="">
+            </div>
+            <div class="log-content">
+              <div class="log-header">
+                <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">
+                  <li>
+                    <span v-if="item.desc == 'uaw'">Hill's Treasure Hunt</span>
+                    <span v-else-if="item.desc == 'p2a'">Wheel of Fortune</span>
+                    <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 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="">
+                  </li>
+                </div>
+                <div class="no-data" v-if="cecInfo?.total == 0">
+                  <div>
+                    <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+                  </div>
+                  <p>No Data</p>
+                </div>
+              </div>
+            </div>
+            <div class="pagination">
+              <div class="prev">
+                <div>
+                  <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> -->
+              </div>
+              <div class="next">
+                <span>Next</span>
+                <div>
+                  <img src="@/assets/img/marketplace/Next.png" alt="">
+                </div>
+              </div>
+            </div>
+            <!-- <a-table :dataSource="cecInfo?.records" :pagination="false">
+              <a-table-column title="Event" data-index="desc" :width="400">
+                <template  #default="{ text: desc }">
+                  <div class="nft">
+                    <div class="nft-img">
+                    </div>
+                    <div class="nft-name">{{ desc }}</div>
+                  </div>
+              </template>
+              </a-table-column>
+              <a-table-column title="Date" data-index="earnTime" :width="400">
+                <template  #default="{ text: earnTime }">
+                  <div class="nft">
+                    <div class="nft-img">
+                    </div>
+                    <div class="nft-name">{{ earnTime }}</div>
+                  </div>
+              </template>
+              </a-table-column>
+              <a-table-column title="Reward" data-index="amount" :width="400">
+                <template  #default="{ text: amount }">
+                  <div class="nft">
+                    <div class="nft-img">
+                    </div>
+                    <div class="nft-name">{{ priceCalculated(Number(amount)) }}</div>
+                  </div>
+              </template>
+              </a-table-column>
+            </a-table> -->
+          </a-modal>
+        </div>
+        <div ref="confirmModal">
+          <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="">
+                  </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 v-else>领取</span>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div class="confirm-header">激励领取第二期</div>
+                <div class="confirm-content">
+                  <p>阶段2：</p>
+                  <div>
+                    <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 v-else>领取</span>
+                  </div>
+                </div>
+              </li>
+            </div>
+          </a-modal>
+        </div>
+        <div ref="rulesModel">
+          <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="">
+            </div>
+            <h3>1. Staking Rules</h3>
+            <div class="text">
+              <p>*Contributions only count if staked for a minimum of 24 hours.</p>
+              <p>*If unstaked before 24 hours, no Credits will be awarded.</p>
+              <p>*Contribution Credits are calculated daily at 00:00 UTC.</p>
+            </div>
+            <h3>2. Staking Rewards</h3>
+            <div class="staking-content">
+              <li>
+                <h4>hero</h4>
+                <div class="hero-title">
+                  <span>Tier</span>
+                  <span>Daily contribution points</span>
+                </div>
+                <div class="hero-body">
+                  <div>
+                    <span>Tier 1</span>
+                    <span>10</span>
+                  </div>
+                  <div>
+                    <span>Tier 2</span>
+                    <span>20</span>
+                  </div>
+                  <div>
+                    <span>Tier 3</span>
+                    <span>40</span>
+                  </div>
+                  <div>
+                    <span>Tier 4</span>
+                    <span>80</span>
+                  </div>
+                  <div>
+                    <span>Tier 5</span>
+                    <span>160</span>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <h4>Founder’s Tag</h4>
+                <div class="hero-title">
+                  <span>Rarity</span>
+                  <span>Daily contribution points</span>
+                </div>
+                <div class="hero-body">
+                  <div>
+                    <span>Common</span>
+                    <span>20</span>
+                  </div>
+                  <div>
+                    <span>Rare</span>
+                    <span>40</span>
+                  </div>
+                  <div>
+                    <span>Legendary</span>
+                    <span>100</span>
+                  </div>
+                  <div>
+                    <span>&nbsp;</span>
+                    <span></span>
+                  </div>
+                  <div>
+                    <span>&nbsp;</span>
+                    <span></span>
+                  </div>
+                </div>
+              </li>
+            </div>
+            <h3>3. Bonus Calculation</h3>
+            <div class="text">
+              <p>Each Founder's Tag: +10%</p>
+              <p>Each Genesis Hero: +5%</p>
+              <p>Maximum bonus cap: +100%</p>
+            </div>
+          </a-modal>
+        </div>
+      </div>
+    </div>
+    <div ref="rechargeListModal">
+      <a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+        <div class="title">Diamond Top up</div>
+        <div class="closable" @click="rechargeListDialogVisible = false">
+          <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 activity" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item)">
+            <div class="item-img">
+              <img src="@/assets/img/marketplace/1001.png" alt="">
+            </div>
+            <div v-if="index != 5" class="item-amount">×{{ item.diamond }}</div>
+            <div v-else class="item-amount item-amount-input">
+              <span @click="rechargeDecrease">-</span>
+              <!-- <span>0</span> -->
+              <input type="text" placeholder="0" v-model="brickworkAmount">
+              <span @click="rechargeIncrease">+</span>
+            </div>
           </div>
-          <div class="pagination">
-            <div class="prev">
+        </div>
+        <div class="conform-btn" @click="conformBtn">
+          <span>{{ confirmRecharge?.price }}</span>
+          <img src="@/assets/img/marketplace/icon_USDT.png" 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">
+        <div class="log-title">Staking Contribution Credits Record</div>
+        <div class="closable" @click="rechargeLogDialogVisible = false">
+          <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>
+          </div>
+          <div class="log-body">
+            <div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
               <div>
-                <img src="@/assets/img/marketplace/Previous.png" alt="">
+                <img src="@/assets/img/marketplace/Empty_state.png" alt="">
               </div>
-              <span>Previous</span>
+              <p>No Data</p>
             </div>
-            <div class="pager">
-              <span class="active">1</span>
-              <!-- <span>2</span>
-              <span>3</span> -->
-            </div>
-            <div class="next">
-              <span>Next</span>
-              <div>
-                <img src="@/assets/img/marketplace/Next.png" alt="">
-              </div>
+            <div v-else class="pages" v-for="(item, index) in contributionList" :key="index">
+              <!-- <li>
+                <span>contributionList</span>
+              </li> -->
+              <li>
+                {{ timeFormat(item.date*1000) }}
+              </li>
+              <li class="cec-amount">
+                <!-- <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="">
+              </li>
             </div>
           </div>
-          <!-- <a-table :dataSource="cecInfo?.records" :pagination="false">
-            <a-table-column title="Event" data-index="desc" :width="400">
-              <template  #default="{ text: desc }">
-                <div class="nft">
-                  <div class="nft-img">
-                  </div>
-                  <div class="nft-name">{{ desc }}</div>
-                </div>
-            </template>
-            </a-table-column>
-            <a-table-column title="Date" data-index="earnTime" :width="400">
-              <template  #default="{ text: earnTime }">
-                <div class="nft">
-                  <div class="nft-img">
-                  </div>
-                  <div class="nft-name">{{ earnTime }}</div>
-                </div>
-            </template>
-            </a-table-column>
-            <a-table-column title="Reward" data-index="amount" :width="400">
-              <template  #default="{ text: amount }">
-                <div class="nft">
-                  <div class="nft-img">
-                  </div>
-                  <div class="nft-name">{{ priceCalculated(Number(amount)) }}</div>
-                </div>
-            </template>
-            </a-table-column>
-          </a-table> -->
-        </a-modal>
-      </div>
-      <div ref="confirmModal">
-        <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="">
-                </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 v-else>领取</span>
-                </div>
-              </div>
-            </li>
-            <li>
-              <div class="confirm-header">激励领取第二期</div>
-              <div class="confirm-content">
-                <p>阶段2：</p>
-                <div>
-                  <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 v-else>领取</span>
-                </div>
-              </div>
-            </li>
-          </div>
-        </a-modal>
-      </div>
-      <div ref="rulesModel">
-        <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="">
-          </div>
-          <h3>1. Staking Rules</h3>
-          <div class="text">
-            <p>*Contributions only count if staked for a minimum of 24 hours.</p>
-            <p>*If unstaked before 24 hours, no Credits will be awarded.</p>
-            <p>*Contribution Credits are calculated daily at 00:00 UTC.</p>
-          </div>
-          <h3>2. Staking Rewards</h3>
-          <div class="staking-content">
-            <li>
-              <h4>hero</h4>
-              <div class="hero-title">
-                <span>Tier</span>
-                <span>Daily contribution points</span>
-              </div>
-              <div class="hero-body">
-                <div>
-                  <span>Tier 1</span>
-                  <span>10</span>
-                </div>
-                <div>
-                  <span>Tier 2</span>
-                  <span>20</span>
-                </div>
-                <div>
-                  <span>Tier 3</span>
-                  <span>40</span>
-                </div>
-                <div>
-                  <span>Tier 4</span>
-                  <span>80</span>
-                </div>
-                <div>
-                  <span>Tier 5</span>
-                  <span>160</span>
-                </div>
-              </div>
-            </li>
-            <li>
-              <h4>Founder’s Tag</h4>
-              <div class="hero-title">
-                <span>Rarity</span>
-                <span>Daily contribution points</span>
-              </div>
-              <div class="hero-body">
-                <div>
-                  <span>Common</span>
-                  <span>20</span>
-                </div>
-                <div>
-                  <span>Rare</span>
-                  <span>40</span>
-                </div>
-                <div>
-                  <span>Legendary</span>
-                  <span>100</span>
-                </div>
-                <div>
-                  <span>&nbsp;</span>
-                  <span></span>
-                </div>
-                <div>
-                  <span>&nbsp;</span>
-                  <span></span>
-                </div>
-              </div>
-            </li>
-          </div>
-          <h3>3. Bonus Calculation</h3>
-          <div class="text">
-            <p>Each Founder's Tag: +10%</p>
-            <p>Each Genesis Hero: +5%</p>
-            <p>Maximum bonus cap: +100%</p>
-          </div>
-        </a-modal>
-      </div>
+        </div>
+      </a-modal>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted } from "vue"
+import { ref, toRaw, watch, computed, onMounted } from "vue"
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
 import {createModal} from "@/utils/model.util";
-import { apiCecInfo, apiExpected, apiUserData, apiContribution } from "@/utils/marketplace"
+import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory } from "@/utils/marketplace"
 import { priceCalculated, timeFormat, contributionLogs } from "@/configs/priceCalculate"
 import { useMarketplaceStore } from "@/store/marketplace"
 import {walletStore} from "@/store/wallet";
@@ -422,11 +526,66 @@ const getUserData = async () => {
   }
 }
 
+// 充值----------------------------------------stats
+const rechargeLogDialogVisible = ref(false)
+const rechargeListDialogVisible = ref(false)
+const rechargeList = ref()
+const confirmRecharge = ref()
+const brickworkAmount = ref(0)
+const priceAmount = ref(0)
+// 列表
+const getRechargeGoods = async () => {
+  const { errcode, errmsg, rows} = await apiRechargeGoods()
+  if(errcode == 0) {
+    rechargeList.value = rows
+    confirmRecharge.value = rows[0]
+  }
+}
+
+// selectItem 预选充值数量
+const selectItem = (data) => {
+  if(data.goods_id == 1006) {
+    confirmRecharge.value = {
+      currency: data.currency,
+      diamond: brickworkAmount.value,
+      goods_id: data.goods_id,
+      price: priceAmount.value
+    }
+  } else {
+    confirmRecharge.value = data
+  }
+}
+
+const rechargeDecrease = async () => {
+  if(brickworkAmount.value == 0) return false
+  brickworkAmount.value--
+  priceAmount.value--
+  toRaw(confirmRecharge.value).price = priceAmount.value
+}
+const rechargeIncrease = async () => {
+  brickworkAmount.value++
+  priceAmount.value++
+  toRaw(confirmRecharge.value).price = priceAmount.value
+}
+
+const conformBtn = () => {
+  console.log(toRaw(confirmRecharge.value))
+}
+
+const getRechargeHistory = async () => {
+  let address = localWalletStore.address
+  let res = await apiRechargeHistory(address)
+  console.log(res,'-----------------------------')
+}
+// 充值----------------------------------------end
+
 const dataInfo = async () => {
   await getCecInfo()
   await getContribution()
   await getExpected()
   await getUserData()
+  await getRechargeGoods()
+  // await getRechargeHistory()
 }
 
 watch(localWalletStore,() => {
@@ -468,190 +627,288 @@ onMounted(() => {
 <style lang="scss" scoped>
 .mkt-header {
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 168px;
-  .assets-user {
+  .header-content {
+    width: 100%;
     display: flex;
-    padding: 0 0 45px 77px;
-    .assets-user-img {
-      width: 173.8px;
-      height: 173.8px;
-      margin-right: 25px;
-      border-radius: 16px;
-      overflow: hidden;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .assets-user-name {
-      font-family: 'Poppins';
-      font-weight: bold;
-      font-size: 30px;
-      color: #FFFFFF;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 168px;
+    .assets-user {
+      display: flex;
+      height: 174px;
       background: rgba(26,24,33, .5);
       border-radius: 40px;
-      padding: 20px;
-      >div {
-        display: flex;
-        align-items: center;
-        margin-bottom: 5px;
-        p {
-          display: flex;
-          align-items: center;
-          span {
-            color: #00DEFF;
-            font-size: 26px;
-          }
-        }
-      }
-      .total {
-        font-family: 'Poppins';
-        font-weight: bold;
-        font-size: 18px;
-        img {
-          width: 27px;
-          height: 27px;
-          margin-left: 10px;
-        }
-        .icon {
-          width: 27px;
-          height: 27px;
-          cursor: pointer;
-        }
-      }
-      .day {
-        font-family: 'Poppins';
-        font-weight: 500;
-        font-size: 14px;
-        img {
-          width: 27px;
-          height: 27px;
-          margin-left: 10px;
-        }
-        .icon {
-          width: 27px;
-          height: 27px;
-          cursor: pointer;
-        }
-        
-      }
-    }
-  }
-  .uaw-listing {
-    color: #FFFFFF;
-    width: 380px;
-    // height: 285px;
-    height: 185px;
-    margin-right: 77px;
-    background: url('@/assets/img/marketplace/CEC_bg.png') no-repeat;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-    // display: none;
-    .uaw-listing-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 115px;
-      margin-top: 24px;
-      .img {
-        width: 119px;
-        height: 115px;
+      margin-left: 77px;
+      .assets-user-img {
+        width: 173.8px;
+        height: 173.8px;
+        margin-right: 25px;
+        border-radius: 16px;
+        overflow: hidden;
         img {
           width: 100%;
           height: 100%;
         }
       }
-      .left {
-        width: 39px;
-      }
-      .right {
-        height: 100%;
-        margin-right: 24px;
-        .tips {
+      .assets-user-name {
+        font-family: 'Poppins';
+        color: #FFFFFF;
+        border-radius: 40px;
+        padding: 10px 20px;
+        .adderss {
+          font-weight: bold;
+          font-size: 30px;
+        }
+        .email {
+          font-size: 20px;
+        }
+        .name {
+          font-size: 20px;
+          span {
+            font-weight: Bold;
+          }
+        }
+        .recharge {
           display: flex;
-          justify-content: end;
           align-items: center;
-          margin-top: 5px;
-          position: relative;
-          .tips-img {
-            width: 39px;
-            height: 39px;
+          width: 349px;
+          height: 36px;
+          margin-top: 10px;
+          .recharge-left {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 349px;
+            height: 100%;
+            background: rgba(0,0,0,.5);
+            border-radius: 16px;
+            li {
+              display: flex;
+              align-items: center;
+              .recharge-img {
+                margin-right: 16px;
+                width: 36px;
+                height: 36px;
+                img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+              span {
+                font-family: 'Poppins';
+                font-weight: bold;
+                font-size: 20px;
+              }
+              .recharge-btn {
+                width: 100px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                font-size: 20px;
+                font-weight: bold;
+                font-family: "Poppins";
+                color: #000;
+                background: #ff917f;
+                border-radius: 16px;
+                cursor: pointer;
+              }
+            }
+          }
+          .recharge-right {
+            margin-left: 11px;
+            .icon {
+              width: 36px;
+              height: 40px;
+              cursor: pointer;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+    .uaw-listing {
+      color: #FFFFFF;
+      width: 448px;
+      height: 279px;
+      // height: 448px;
+      margin-right: 77px;
+      background: url('@/assets/img/marketplace/CEC_bg.png') no-repeat;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      // display: none;
+      .uaw-listing-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 115px;
+        margin-top: 24px;
+        .img {
+          width: 119px;
+          height: 115px;
+          margin-left: 23px;
+          margin-right: 25px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .left {
+          // width: 39px;
+          display: flex;
+        }
+        .right {
+          height: 100%;
+          margin-right: 24px;
+          .tips {
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            margin-top: 5px;
+            position: relative;
+            .tips-img {
+              width: 39px;
+              height: 39px;
+              cursor: pointer;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .tips-message {
+              position: absolute;
+              top: -45px;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 200px;
+              border-radius: 20px;
+              height: 40px;
+              line-height: 40px;
+              text-align: center;
+              background: #2d2738;
+              font-size: 18px;
+              display: none;
+            }
+            &:hover {
+              .tips-message {
+                display: block;
+              }
+            }
+          }
+          .log {
+            width: 36px;
+            height: 40px;
+            margin-top: 19px;
             cursor: pointer;
             img {
               width: 100%;
               height: 100%;
             }
           }
-          .tips-message {
-            position: absolute;
-            top: -45px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 200px;
-            border-radius: 20px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            background: #2d2738;
-            font-size: 18px;
-            display: none;
-          }
-          &:hover {
-            .tips-message {
-              display: block;
-            }
-          }
-        }
-        .log {
-          width: 36px;
-          height: 40px;
-          margin-top: 19px;
-          cursor: pointer;
-          img {
-            width: 100%;
-            height: 100%;
-          }
         }
       }
-    }
-    .uaw-cec-amount {
-      margin-top: 18px;
-      text-align: center;
-      font-family: 'Poppins';
-      font-weight: 400;
-      font-size: 24px;
-    }
-    
-    .btn {
-      width: 160px;
-      height: 40px;
-      line-height: 40px;
-      margin: 0 auto;
-      margin-top: 30px;
-      text-align: center;
-      display: none;
-      span {
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-        background: #3a3b57;
-        cursor:no-drop;
-      }
-      .yes {
-        color: #000;
-        border-radius: 20px;
-        background: #fec25d;
+      .expected-content {
+        width: 416px;
+        margin: 0 auto;
         font-family: 'Poppins';
-        font-weight: 500;
-        font-size: 14px;
-        color: #2D2738;
-        cursor: pointer;
+        font-weight: bold;
+        font-size: 30px;
+        color: #FFFFFF;
+        border-top: 2px solid #525482;
+        box-sizing: border-box;
+        padding-top: 14px;
+        padding-right: 10px;
+        >div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 16px;
+          margin-bottom: 5px;
+          font-family: 'Poppins';
+          p {
+            display: flex;
+            align-items: center;
+            
+          }
+          span {
+              color: #00DEFF;
+              font-size: 26px;
+            }
+        }
+        .total {
+          font-weight: bold;
+          div {
+            display: flex;
+            align-items: center;
+          }
+          img {
+            width: 27px;
+            height: 27px;
+            margin-left: 10px;
+          }
+          .icon {
+            width: 27px;
+            height: 27px;
+            cursor: pointer;
+          }
+        }
+        .day {
+          font-weight: 500;
+          div {
+            display: flex;
+            align-items: center;
+          }
+          img {
+            width: 27px;
+            height: 27px;
+            margin-left: 10px;
+          }
+          .icon {
+            width: 27px;
+            height: 27px;
+            cursor: pointer;
+          }
+        }
+      }
+      .uaw-cec-amount {
+        margin-top: 18px;
+        // text-align: center;
+        font-family: 'Poppins';
+        font-weight: 400;
+        font-size: 24px;
+      }
+      
+      .btn {
+        width: 160px;
+        height: 40px;
+        line-height: 40px;
+        margin: 0 auto;
+        margin-top: 30px;
+        text-align: center;
+        display: none;
+        span {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          background: #3a3b57;
+          cursor:no-drop;
+        }
+        .yes {
+          color: #000;
+          border-radius: 20px;
+          background: #fec25d;
+          font-family: 'Poppins';
+          font-weight: 500;
+          font-size: 14px;
+          color: #2D2738;
+          cursor: pointer;
+        }
       }
     }
   }
+  
   :deep(.conLogModal) {
     width: 1052px !important;
     height: 714px;
@@ -1251,5 +1508,117 @@ onMounted(() => {
       }
     }
   }
+  :deep(.rechargeLogModal) {
+
+  }
+  :deep(.rechargeListModal) {
+    width: 1219px !important;
+    height: 895px;
+    background: #1A1821;
+    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    border-radius: 100px;
+    border: 1px solid #B966FF;
+    .ant-modal-content {
+      width: 100%;
+      padding: 0;
+      background: none;
+      color: #fff;
+      box-shadow: 0 0 0 0;
+      .ant-modal-body {
+        width: 100%;
+        text-align: center;
+
+        .title {
+          font-family: 'Anton';
+          font-weight: 400;
+          font-size: 48px;
+          margin-top: 25px;
+        }
+        .closable {
+          position: absolute;
+          top: -50px;
+          right: -50px;
+          cursor: pointer;
+        }
+        p {
+          font-family: 'Poppins';
+          font-weight: 400;
+          font-size: 20px;
+          color: #9950FD;
+        }
+        .content {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-evenly;
+          clear: both;
+          margin-top: 7px;
+          .item {
+            width: 332px;
+            height: 258px;
+            border-radius: 40px;
+            background: #2d2738;
+            margin-top: 31px;
+            .item-img {
+              width: 312px;
+              height: 206px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .item-amount {
+              font-family: 'Poppins';
+              font-weight: bold;
+              font-size: 36px;
+              line-height: 1;
+            }
+            .item-amount-input {
+              width: 222px;
+              height: 42px;
+              display: flex;
+              align-items: center;
+              justify-content: space-evenly;
+              margin: 0 auto;
+              background: #1E1B26;
+              border-radius: 21px;
+              span {
+                cursor: pointer;
+              }
+              input {
+                color: #fff;
+                width: 100px;
+                height: 42px;
+                border: 0px;
+                text-align: center;
+              }
+            }
+          }
+        }
+        .conform-btn {
+          width: 427px;
+          height: 81px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #FEC25D;
+          box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+          border-radius: 30px;
+          margin: 0 auto;
+          margin-top: 56px;
+          font-family: 'Poppins';
+          font-weight: bold;
+          font-size: 36px;
+          color: #2D2738;
+          cursor: pointer;
+          img {
+            width: 54px;
+            height: 54px;
+            margin-left: 16px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/marketplace/mktContent.vue b/src/components/marketplace/mktContent.vue
index 3ba3286..a9d94a4 100644
--- a/src/components/marketplace/mktContent.vue
+++ b/src/components/marketplace/mktContent.vue
@@ -365,6 +365,27 @@ const marketHandleScroll = () => {
 }
 
 onMounted(() => {
+  marketplaceList.getParamsData = {
+    page_size: 20,
+    cursor: '',
+    search: {
+      name: '',
+    },
+    filter: {
+      price_min: '',
+      price_max: '',
+      item_ids: [],
+      hero_ranks: [],
+    },
+    sort: {
+      fields: [
+        {
+          name: 'price', 
+          type: 0,
+        }
+      ]
+    }
+  }
   getHeroData()
   window.addEventListener("scroll", marketHandleScroll, true);
 })
diff --git a/src/utils/marketplace.js b/src/utils/marketplace.js
index 0e12314..6b74694 100644
--- a/src/utils/marketplace.js
+++ b/src/utils/marketplace.js
@@ -165,3 +165,15 @@ export const apiContribution = async (account_address) => {
   const url = `${API_BASE}/api/activity/stacking/history/${account_address}`
   return httpGet(url, {})
 }
+
+// 充值列表
+export const apiRechargeGoods = async () => {
+  const url = `${API_BASE}/api/recharge/goods`
+  return httpGet(url, {})
+}
+
+// 充值记录
+export const apiRechargeHistory = async (account_address) => {
+  const url = `${API_BASE}/api/recharge/history/${net_id}/${account_address}`
+  return httpPost(url, {})
+}