今日工作 1，资产-理财-进行中 完成 2，资产-理财-已结束 完成 3，资产-期权-首页 完成 4，资产-期权-持有仓位 完成 5，资产-期权-当前委托 完成 6，资产-秒合约-首页 完成 7，资产-秒合约-持有仓位 完成 8，资产-秒合约-当前委托 完成 9，资产-杠杆-首页 完成 10，资产-杠杆-持有仓位 完成 11，资产-杠杆-当前委托 完成 12，充币历史 完成 13，提币历史 完成

src/router/index.js

@@ -30,6 +30,8 @@ import RechargeChangeCoin from "../views/index/recharge/ChangeCoin.vue";
 import Transfer from "../views/index/recharge/Transfer.vue";
 import TransferHistory from "../views/index/recharge/TransferHistory.vue";
 import UserAsset from "../views/asset/UserAsset.vue";
+import RechargeHistory from "../views/index/recharge/RechargeHistory.vue";
+import WithdrawHistory from "../views/index/recharge/WithdrawHistory.vue";
 
 const routes = [
   {
@@ -39,7 +41,7 @@ const routes = [
     children: [
       {
         path: "",
-        name: "",
+        name: "appIndex",
         component: AppIndex,
       },
       {
@@ -189,6 +191,16 @@ const routes = [
     name: "userAsset",
     component: UserAsset,
   },
+  {
+    path: "/rechargeHistory",
+    name: "rechargeHistory",
+    component: RechargeHistory,
+  },
+  {
+    path: "/withdrawHistory",
+    name: "withdrawHistory",
+    component: WithdrawHistory,
+  },
 ];
 
 const router = createRouter({

src/views/asset/myAsset/FinancialManagement.vue

@@ -1,6 +1,367 @@
 <template>
   <!-- 理财 -->
-  <div class="financial-management">理财</div>
+  <div class="financial-management">
+    <div class="asset-total">
+      <div class="asset-title pf400 fs16 fc1F2937">理财总资产(USDT)</div>
+      <div class="asset-number pf600 fs32 fc1F2937">1,125,158.00</div>
+      <div class="asset-approximately pf400 fs16 fcDF384C">≈35,458.00</div>
+      <div class="asset-revenue">
+        <div class="asset-left">
+          <div class="text pf400 fs12 fc6A7187">昨日收益(USDT)</div>
+          <div class="number pf400 fs16 fc061237">5,678.00</div>
+        </div>
+        <div class="asset-right">
+          <div class="text pf400 fs12 fc6A7187">累计收益(USDT)</div>
+          <div class="number pf400 fs16 fc061237">5,678.00</div>
+        </div>
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF">理财</div>
+    <div class="notifi-classifi">
+      <div class="pf600 fs14 fc121212" @click="currentTab = 0">进行中</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="currentTab = 1">已结束</div>
+    </div>
+    <div class="conduct-ing" v-if="currentTab == 0">
+      <div class="coin-item" v-for="(item, index) in 2" :key="index">
+        <div class="item-name">
+          <img src="@/assets/icon/coin/bnb.svg" alt="" />
+          <div class="item-info">
+            <div class="info-top pf500 fs14 fc1F2937">
+              <div>Bitcoin定期</div>
+              <div>申购数量</div>
+            </div>
+            <div class="info-bottom">
+              <div class="pf400 fs10 fcA9A9A9">定期</div>
+              <div class="pf600 fs14 fc1F2937">1,125,158.00</div>
+            </div>
+          </div>
+        </div>
+        <div class="item-line"></div>
+        <div class="item-use pf500 fs12 margin-top10">
+          <div class="fcA8A8A8">理财周期</div>
+          <div class="fcDF384C">15 天</div>
+        </div>
+        <div class="item-use pf500 fs12 margin-top4">
+          <div class="fcA8A8A8">预估每日收益</div>
+          <div class="fc767676">0.45 USDT</div>
+        </div>
+        <div class="item-use pf500 fs12 margin-top4">
+          <div class="fcA8A8A8">预估总收益</div>
+          <div class="fc767676">0.45 USDT</div>
+        </div>
+        <div class="item-use pf500 fs12 margin-top4">
+          <div class="fcA8A8A8">收益率</div>
+          <div class="fc767676">0.16%</div>
+        </div>
+        <div class="conduct-btn pf600 fs14 fcFFFFFF">进行中</div>
+      </div>
+    </div>
+    <div class="finish-end" v-if="currentTab == 1">
+      <div class="coin-item" v-for="(item, index) in 2" :key="index">
+        <div class="item-name">
+          <img src="@/assets/icon/coin/bnb.svg" alt="" />
+          <div class="item-info">
+            <div class="info-top pf500 fs14 fc1F2937">
+              <div>Bitcoin定期</div>
+              <div>申购数量</div>
+            </div>
+            <div class="info-bottom">
+              <div class="pf400 fs10 fcA9A9A9">定期</div>
+              <div class="pf600 fs14 fc1F2937">1,125,158.00</div>
+            </div>
+          </div>
+        </div>
+        <div class="item-line"></div>
+        <div class="item-use pf500 fs12 margin-top10">
+          <div class="fcA8A8A8">理财周期</div>
+          <div class="fcDF384C">15 天</div>
+        </div>
+        <div class="item-use pf500 fs12 margin-top4">
+          <div class="fcA8A8A8">预估每日收益</div>
+          <div class="fc767676">0.45 USDT</div>
+        </div>
+        <div class="item-use pf500 fs12 margin-top4">
+          <div class="fcA8A8A8">预估总收益</div>
+          <div class="fc767676">0.45 USDT</div>
+        </div>
+        <div class="item-use pf500 fs12 margin-top4">
+          <div class="fcA8A8A8">收益率</div>
+          <div class="fc767676">0.16%</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import { ref } from "vue";
+
+  const currentTab = ref(0);
+</script>
+<style lang="less" scoped>
+  .financial-management {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 30px;
+    width: 100%;
+
+    .asset-total {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 16px;
+      width: 343px;
+
+      .asset-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 22px;
+
+        .eye-close {
+          margin-left: 5px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      .asset-number {
+        margin-top: 3px;
+        height: 44px;
+        line-height: 44px;
+      }
+
+      .asset-approximately {
+        margin-top: 1px;
+        height: 22px;
+        line-height: 22px;
+      }
+
+      .asset-revenue {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 6px;
+        height: 44px;
+
+        .asset-left,
+        .asset-right {
+          height: 100%;
+
+          .text {
+            height: 20px;
+            line-height: 20px;
+            letter-spacing: 0.3px;
+          }
+
+          .number {
+            margin-top: 3px;
+            height: 24px;
+            line-height: 24px;
+          }
+        }
+      }
+    }
+
+    .submit {
+      margin-top: 16px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 15px;
+      width: 349px;
+      height: 24px;
+
+      .sys-notifi {
+        margin-left: 61px;
+      }
+    }
+
+    .conduct-ing {
+      width: 345px;
+
+      .coin-item {
+        padding-left: 19px;
+        padding-right: 11px;
+        margin-top: 10px;
+        width: 100%;
+        height: 209px;
+        border-radius: 8px;
+        border: 1px solid #ebebeb;
+        box-sizing: border-box;
+
+        .item-name {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 12.5px;
+          width: 100%;
+          height: 34px;
+
+          img {
+            width: 32px;
+            height: 32px;
+          }
+
+          .item-info {
+            width: calc(345px - 40px - 30px);
+            height: 34px;
+
+            .info-top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+              height: 20px;
+            }
+
+            .info-bottom {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+              height: 14px;
+            }
+          }
+        }
+
+        .item-line {
+          margin-top: 10px;
+          width: 100%;
+          height: 1px;
+          background: #e9e9e9;
+        }
+
+        .margin-top10 {
+          margin-top: 10px;
+        }
+
+        .margin-top4 {
+          margin-top: 4px;
+        }
+
+        .item-use {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          height: 18px;
+        }
+
+        .conduct-btn {
+          margin-top: 8px;
+          width: 311px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          border-radius: 100px;
+          background: #df384c;
+          letter-spacing: 0.2px;
+        }
+      }
+    }
+
+    .finish-end {
+      width: 345px;
+
+      .coin-item {
+        padding-left: 19px;
+        padding-right: 11px;
+        margin-top: 10px;
+        width: 100%;
+        height: 158px;
+        border-radius: 8px;
+        border: 1px solid #ebebeb;
+        box-sizing: border-box;
+
+        .item-name {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 12.5px;
+          width: 100%;
+          height: 34px;
+
+          img {
+            width: 32px;
+            height: 32px;
+          }
+
+          .item-info {
+            width: calc(345px - 40px - 30px);
+            height: 34px;
+
+            .info-top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+              height: 20px;
+            }
+
+            .info-bottom {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+              height: 14px;
+            }
+          }
+        }
+
+        .item-line {
+          margin-top: 10px;
+          width: 100%;
+          height: 1px;
+          background: #e9e9e9;
+        }
+
+        .margin-top10 {
+          margin-top: 10px;
+        }
+
+        .margin-top4 {
+          margin-top: 4px;
+        }
+
+        .item-use {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          height: 18px;
+        }
+
+        .conduct-btn {
+          margin-top: 8px;
+          width: 311px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          border-radius: 100px;
+          background: #df384c;
+          letter-spacing: 0.2px;
+        }
+      }
+    }
+  }
+</style>

src/views/asset/myAsset/Lever.vue

@@ -1,6 +1,503 @@
 <template>
   <!-- 杠杆 -->
-  <div class="lever">杠杆</div>
+  <div class="lever">
+    <div class="asset-total">
+      <div class="asset-title pf400 fs16 fc1F2937">杠杆总资产(USDT)</div>
+      <div class="asset-number pf600 fs32 fc1F2937">1,125,158.00</div>
+      <div class="asset-approximately pf400 fs16 fcDF384C">≈35,458.00</div>
+      <div class="asset-revenue">
+        <div class="asset-left">
+          <div class="text pf400 fs12 fc6A7187">今日盈亏(USDT)</div>
+          <div class="number pf400 fs16 fc061237">5,678.00</div>
+        </div>
+        <div class="asset-right">
+          <div class="text pf400 fs12 fc6A7187">盈亏率(%)</div>
+          <div class="number-two pf400 fs16 fc061237">0.10</div>
+        </div>
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF">交易</div>
+    <div class="notifi-classifi">
+      <div class="classifi-left">
+        <div class="pf600 fs14 fc121212" @click="currentTab = 0">持有仓位(2)</div>
+        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="currentTab = 1">
+          当前委托(0)
+        </div>
+      </div>
+      <div class="classifi-right pf600 fs14 fcA8A8A8">
+        <img src="@/assets/icon/index/history.svg" alt="" />全部
+      </div>
+    </div>
+    <div class="owner-cangwei" v-if="currentTab == 0">
+      <div class="details-item" v-for="(item, index) in 2" :key="index">
+        <div class="item-name">
+          <div class="name-left">
+            <img src="../../../assets/icon/coin/bnb.svg" alt="" class="left-coin" />
+            <div class="name-area">
+              <div class="pf500 fs16 fc121212">BTC/USDT</div>
+              <div class="name-flag">
+                <div class="flag-buy pf500 fs10 fcFFFFFF">买入</div>
+                <div class="flag-cang pf500 fs10 fcFFFFFF">逐仓 20X</div>
+                <div class="flag-price pf500 fs10 fcFFFFFF">市价</div>
+              </div>
+            </div>
+          </div>
+          <div class="name-right">
+            <div class="pf500 fs12 fc767676">2025-11-04, 16:30</div>
+            <div class="pf500 fs12 fc767676">下单时间</div>
+          </div>
+        </div>
+        <div class="item-line"></div>
+        <div class="item-price">
+          <div class="price-bottom">
+            <div class="price-item">
+              <div class="pf500 fs12 fcA8A8A8">倍数</div>
+              <div class="pf500 fs12 fc333333">200X</div>
+            </div>
+            <div class="price-item">
+              <div class="pf500 fs12 fcA8A8A8">数量</div>
+              <div class="pf500 fs12 fc333333">0.215 USDT</div>
+            </div>
+            <div class="price-item">
+              <div class="pf500 fs12 fcA8A8A8">价格</div>
+              <div class="pf500 fs12 fc333333">0.215 USDT</div>
+            </div>
+          </div>
+          <div class="submit pf600 fs14 fcFFFFFF">平仓</div>
+        </div>
+      </div>
+    </div>
+    <div class="current-weituo" v-if="currentTab == 1">
+      <div
+        class="details-item"
+        v-for="(item, index) in 2"
+        :key="index"
+        @click="detailsClick">
+        <div class="item-name">
+          <div class="name-left">
+            <img src="../../../assets/icon/coin/bnb.svg" alt="" class="left-coin" />
+            <div class="name-area">
+              <div class="pf500 fs16 fc121212">BTC/USDT</div>
+              <div class="name-flag">
+                <div class="flag-buy pf500 fs10 fcFFFFFF">买入</div>
+                <div class="flag-cang pf500 fs10 fcFFFFFF">20X</div>
+                <div class="flag-price pf500 fs10 fcFFFFFF">市价</div>
+              </div>
+            </div>
+          </div>
+          <div class="name-right pf500 fs12 fcFFFFFF">撤单</div>
+        </div>
+        <div class="item-line"></div>
+        <div class="item-price">
+          <div class="price-top">
+            <div class="price-item">
+              <div class="pf500 fs12 fcA8A8A8">数量</div>
+              <div class="pf500 fs12 fc333333">0.215 USDT</div>
+            </div>
+            <div class="price-item">
+              <div class="pf500 fs12 fcA8A8A8">下单时间</div>
+              <div class="pf500 fs12 fc333333">2025-11-04, 16:30</div>
+            </div>
+            <div class="price-item">
+              <div class="pf500 fs12 fcA8A8A8">价格</div>
+              <div class="pf500 fs12 fc333333">0.215 USDT</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import { ref } from "vue";
+
+  const currentTab = ref(0);
+</script>
+<style lang="less" scoped>
+  .lever {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 30px;
+    width: 100%;
+
+    .asset-total {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 16px;
+      width: 343px;
+
+      .asset-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 22px;
+
+        .eye-close {
+          margin-left: 5px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      .asset-number {
+        margin-top: 3px;
+        height: 44px;
+        line-height: 44px;
+      }
+
+      .asset-approximately {
+        margin-top: 1px;
+        height: 22px;
+        line-height: 22px;
+      }
+
+      .asset-revenue {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 6px;
+        height: 44px;
+
+        .asset-left,
+        .asset-right {
+          height: 100%;
+
+          .text {
+            height: 20px;
+            line-height: 20px;
+            letter-spacing: 0.3px;
+          }
+
+          .number {
+            margin-top: 3px;
+            height: 24px;
+            line-height: 24px;
+          }
+
+          .number-two {
+            margin-top: 3px;
+            height: 24px;
+            line-height: 24px;
+            text-align: end;
+          }
+        }
+      }
+    }
+
+    .submit {
+      margin-top: 16px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 15px;
+      width: 349px;
+      height: 24px;
+
+      .classifi-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-end;
+        height: 24px;
+
+        .sys-notifi {
+          margin-left: 29px;
+        }
+      }
+
+      .classifi-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: end;
+        height: 24px;
+
+        img {
+          margin-right: 4px;
+        }
+      }
+    }
+
+    .owner-cangwei {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 10px;
+      width: 100%;
+
+      .details-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 10px;
+        width: 345px;
+        height: 165px;
+        border: 1px solid #ebebeb;
+        border-radius: 8px;
+
+        .item-name {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 10px;
+          width: 320px;
+          height: 40px;
+
+          .name-left {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            height: 40px;
+
+            .left-coin {
+              width: 40px;
+              height: 40px;
+            }
+
+            .name-area {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+              margin-left: 8px;
+              height: 40px;
+
+              .name-flag {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                height: 15px;
+
+                .flag-buy {
+                  width: 33px;
+                  height: 15px;
+                  line-height: 15px;
+                  text-align: center;
+                  background: #45b26b;
+                  border-radius: 3px;
+                }
+
+                .flag-cang {
+                  margin-left: 2px;
+                  width: 49px;
+                  height: 15px;
+                  line-height: 15px;
+                  text-align: center;
+                  background: #a8a8a8;
+                  border-radius: 3px;
+                }
+
+                .flag-price {
+                  margin-left: 2px;
+                  width: 33px;
+                  height: 15px;
+                  line-height: 15px;
+                  text-align: center;
+                  background: #a8a8a8;
+                  border-radius: 3px;
+                }
+              }
+            }
+          }
+
+          .name-right {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            align-items: flex-end;
+            height: 40px;
+          }
+        }
+
+        .item-line {
+          margin-top: 8px;
+          width: 320px;
+          height: 1.5px;
+          background: #e9e9e9;
+        }
+
+        .item-price {
+          width: 320px;
+          height: 85px;
+
+          .price-bottom {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            margin-top: 4px;
+            width: 100%;
+            height: 38px;
+
+            .price-item {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+              align-items: center;
+              width: 80px;
+              height: 38px;
+            }
+          }
+        }
+
+        .submit {
+          margin-top: 11px;
+          width: 311px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          border-radius: 100px;
+          background: #df384c;
+          letter-spacing: 0.2px;
+        }
+      }
+    }
+
+    .current-weituo {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+
+      .details-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 10px;
+        width: 345px;
+        height: 110px;
+        border: 1px solid #ebebeb;
+        border-radius: 8px;
+
+        .item-name {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 10px;
+          width: 320px;
+          height: 40px;
+
+          .name-left {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            height: 40px;
+
+            .left-coin {
+              width: 40px;
+              height: 40px;
+            }
+
+            .name-area {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+              margin-left: 8px;
+              height: 40px;
+
+              .name-flag {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                height: 15px;
+
+                .flag-buy {
+                  width: 33px;
+                  height: 15px;
+                  line-height: 15px;
+                  text-align: center;
+                  background: #45b26b;
+                  border-radius: 3px;
+                }
+
+                .flag-cang {
+                  margin-left: 2px;
+                  width: 49px;
+                  height: 15px;
+                  line-height: 15px;
+                  text-align: center;
+                  background: #a8a8a8;
+                  border-radius: 3px;
+                }
+
+                .flag-price {
+                  margin-left: 2px;
+                  width: 33px;
+                  height: 15px;
+                  line-height: 15px;
+                  text-align: center;
+                  background: #a8a8a8;
+                  border-radius: 3px;
+                }
+              }
+            }
+          }
+
+          .name-right {
+            width: 56px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            border-radius: 5px;
+            background: #df384c;
+          }
+        }
+
+        .item-line {
+          margin-top: 8px;
+          width: 320px;
+          height: 1.5px;
+          background: #e9e9e9;
+        }
+
+        .item-price {
+          margin-top: 7px;
+          width: 320px;
+          height: 85px;
+
+          .price-top {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 100%;
+            height: 38px;
+
+            .price-item {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+              align-items: center;
+              height: 38px;
+
+              &:nth-child(1),
+              &:nth-child(3) {
+                width: 80px;
+              }
+              &:nth-child(2) {
+                width: 160px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/asset/myAsset/MiaoContract.vue

@@ -1,6 +1,152 @@
 <template>
   <!-- 秒合约 -->
-  <div class="second-contract">秒合约</div>
+  <div class="second-contract">
+    <div class="asset-total">
+      <div class="asset-title pf400 fs16 fc1F2937">秒合约总资产(USDT)</div>
+      <div class="asset-number pf600 fs32 fc1F2937">1,125,158.00</div>
+      <div class="asset-approximately pf400 fs16 fcDF384C">≈35,458.00</div>
+      <div class="asset-revenue">
+        <div class="asset-left">
+          <div class="text pf400 fs12 fc6A7187">昨日收益(USDT)</div>
+          <div class="number pf400 fs16 fc061237">5,678.00</div>
+        </div>
+        <div class="asset-right">
+          <div class="text pf400 fs12 fc6A7187">累计收益(USDT)</div>
+          <div class="number-two pf400 fs16 fc061237">5.25</div>
+        </div>
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF">交易</div>
+    <div class="notifi-classifi">
+      <div class="classifi-left">
+        <div class="pf600 fs14 fc121212">持有仓位(2)</div>
+        <div class="sys-notifi pf600 fs14 fcA8A8A8">当前委托(0)</div>
+      </div>
+      <div class="classifi-right pf600 fs14 fcA8A8A8">
+        <img src="@/assets/icon/index/history.svg" alt="" />全部
+      </div>
+    </div>
+  </div>
 </template>
 <script setup></script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .second-contract {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 30px;
+    width: 100%;
+
+    .asset-total {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 16px;
+      width: 343px;
+
+      .asset-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 22px;
+
+        .eye-close {
+          margin-left: 5px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      .asset-number {
+        margin-top: 3px;
+        height: 44px;
+        line-height: 44px;
+      }
+
+      .asset-approximately {
+        margin-top: 1px;
+        height: 22px;
+        line-height: 22px;
+      }
+
+      .asset-revenue {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 6px;
+        height: 44px;
+
+        .asset-left,
+        .asset-right {
+          height: 100%;
+
+          .text {
+            height: 20px;
+            line-height: 20px;
+            letter-spacing: 0.3px;
+          }
+
+          .number {
+            margin-top: 3px;
+            height: 24px;
+            line-height: 24px;
+          }
+
+          .number-two {
+            margin-top: 3px;
+            height: 24px;
+            line-height: 24px;
+            text-align: end;
+          }
+        }
+      }
+    }
+
+    .submit {
+      margin-top: 16px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 15px;
+      width: 349px;
+      height: 24px;
+
+      .classifi-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-end;
+        height: 24px;
+
+        .sys-notifi {
+          margin-left: 29px;
+        }
+      }
+
+      .classifi-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: end;
+        height: 24px;
+
+        img {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+</style>

src/views/asset/myAsset/Option.vue

@@ -1,6 +1,152 @@
 <template>
   <!-- 期权 -->
-  <div class="option">期权</div>
+  <div class="option">
+    <div class="asset-total">
+      <div class="asset-title pf400 fs16 fc1F2937">期权总资产(USDT)</div>
+      <div class="asset-number pf600 fs32 fc1F2937">1,125,158.00</div>
+      <div class="asset-approximately pf400 fs16 fcDF384C">≈35,458.00</div>
+      <div class="asset-revenue">
+        <div class="asset-left">
+          <div class="text pf400 fs12 fc6A7187">今日盈亏(USDT)</div>
+          <div class="number pf400 fs16 fc061237">5,678.00</div>
+        </div>
+        <div class="asset-right">
+          <div class="text pf400 fs12 fc6A7187">盈亏率(%)</div>
+          <div class="number-two pf400 fs16 fc061237">5.25</div>
+        </div>
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF">交易</div>
+    <div class="notifi-classifi">
+      <div class="classifi-left">
+        <div class="pf600 fs14 fc121212">持有仓位(2)</div>
+        <div class="sys-notifi pf600 fs14 fcA8A8A8">当前委托(0)</div>
+      </div>
+      <div class="classifi-right pf600 fs14 fcA8A8A8">
+        <img src="@/assets/icon/index/history.svg" alt="" />全部
+      </div>
+    </div>
+  </div>
 </template>
 <script setup></script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .option {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 30px;
+    width: 100%;
+
+    .asset-total {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 16px;
+      width: 343px;
+
+      .asset-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 22px;
+
+        .eye-close {
+          margin-left: 5px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      .asset-number {
+        margin-top: 3px;
+        height: 44px;
+        line-height: 44px;
+      }
+
+      .asset-approximately {
+        margin-top: 1px;
+        height: 22px;
+        line-height: 22px;
+      }
+
+      .asset-revenue {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 6px;
+        height: 44px;
+
+        .asset-left,
+        .asset-right {
+          height: 100%;
+
+          .text {
+            height: 20px;
+            line-height: 20px;
+            letter-spacing: 0.3px;
+          }
+
+          .number {
+            margin-top: 3px;
+            height: 24px;
+            line-height: 24px;
+          }
+
+          .number-two {
+            margin-top: 3px;
+            height: 24px;
+            line-height: 24px;
+            text-align: end;
+          }
+        }
+      }
+    }
+
+    .submit {
+      margin-top: 16px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 15px;
+      width: 349px;
+      height: 24px;
+
+      .classifi-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-end;
+        height: 24px;
+
+        .sys-notifi {
+          margin-left: 29px;
+        }
+      }
+
+      .classifi-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: end;
+        height: 24px;
+
+        img {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+</style>

src/views/index/recharge/ChangeCoin.vue

@@ -6,7 +6,7 @@
         src="../../../assets/icon/index/left-arrow.svg"
         @click="toPath()" />
       充值
-      <div class="save pf600 fs14 fcA8A8A8">
+      <div class="save pf600 fs14 fcA8A8A8" @click="toHistory">
         <img src="../../../assets/icon/index/history.svg" alt="" />历史
       </div>
     </div>
@@ -27,6 +27,10 @@
 
   const router = useRouter();
 
+  const toHistory = () => {
+    router.push("/rechargeHistory");
+  };
+
   const coinData = [
     {
       img: require("@/assets/icon/coin/bnb.svg"),

src/views/index/recharge/RechargeHistory.vue

@@ -0,0 +1,157 @@
+<template>
+  <!-- 充值历史 -->
+  <div class="loan-header">
+    <div class="header-content pf600 fs16 fc1F2937">
+      <img
+        class="left-arrow-image"
+        src="../../../assets/icon/index/left-arrow.svg"
+        @click="toPath()" />
+      充币历史
+      <div class="save pf600 fs14 fcA8A8A8">
+        <img src="../../../assets/icon/index/CalendarDots.svg" alt="" />
+      </div>
+    </div>
+  </div>
+  <div class="recharge-history">
+    <div class="flow-item" v-for="(item, index) in 2" :key="index">
+      <div class="item-name">
+        <div class="name-left pf500 fs16 fc1F2937">
+          <img src="@/assets/icon/coin/bnb.svg" alt="" />BTC/USDT
+        </div>
+        <div class="name-right pf500 fs12 fc45B26B">成功</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">主网络</div>
+        <div class="pf500 fs12 fc666666">ERC 20</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">充币金额</div>
+        <div class="pf500 fs12 fc666666">1000.05 USDT</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">充币地址</div>
+        <div class="pf500 fs12 fc666666">s2gf5s8fs05fsd85gsd200s...gs50vsvs</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">充币时间</div>
+        <div class="pf500 fs12 fc666666">2025-11-07 12:25:12</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const toPath = () => {
+    router.back();
+  };
+</script>
+<style lang="less" scoped>
+  .loan-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 48px;
+    background: #ffffff;
+    overflow: hidden;
+
+    .header-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 48px;
+
+      .left-arrow-image {
+        position: absolute;
+        left: 14px;
+        top: 16px;
+        width: 9px;
+        height: 16px;
+      }
+
+      .save {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        position: absolute;
+        top: 12.3px;
+        right: 16px;
+        height: 24px;
+
+        img {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  .recharge-history {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+
+    .flow-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 10px;
+      width: 345px;
+      height: 170px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+
+      .item-name {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 15px;
+        width: 320px;
+        height: 24px;
+
+        .name-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          height: 24px;
+
+          img {
+            margin-right: 4px;
+            width: 24px;
+            height: 24px;
+          }
+        }
+
+        .name-right {
+          width: 58px;
+          height: 24px;
+          line-height: 24px;
+          border-radius: 5px;
+          background: #45b26b1a;
+          text-align: center;
+        }
+      }
+
+      .item-first {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+        width: 320px;
+        height: 20px;
+      }
+    }
+  }
+</style>

src/views/index/recharge/RechargeIndex.vue

@@ -3,7 +3,7 @@
   <HeaderNav headerText="充值"></HeaderNav>
   <div class="recharge-index">
     <div class="qr-code">
-      <div class="code-name pf500 fs18 fc1F2937" @click="goChangeCoin">
+      <div class="code-name pf500 fs18 fc1F2937">
         <img src="../../../assets/icon/coin/bnb.svg" alt="" />
         Bitcoin
       </div>
@@ -36,7 +36,7 @@
           placeholder="请输入充值金额" />
       </div>
     </div>
-    <div class="submit pf600 fs14 fcFFFFFF">充值</div>
+    <div class="submit pf600 fs14 fcFFFFFF" @click="goChangeCoin">充值</div>
   </div>
 </template>
 <script setup>

src/views/index/recharge/WithdrawHistory.vue

@@ -0,0 +1,157 @@
+<template>
+  <!-- 提现历史 -->
+  <div class="loan-header">
+    <div class="header-content pf600 fs16 fc1F2937">
+      <img
+        class="left-arrow-image"
+        src="../../../assets/icon/index/left-arrow.svg"
+        @click="toPath()" />
+      提币历史
+      <div class="save pf600 fs14 fcA8A8A8">
+        <img src="../../../assets/icon/index/CalendarDots.svg" alt="" />
+      </div>
+    </div>
+  </div>
+  <div class="withdraw-history">
+    <div class="flow-item" v-for="(item, index) in 2" :key="index">
+      <div class="item-name">
+        <div class="name-left pf500 fs16 fc1F2937">
+          <img src="@/assets/icon/coin/bnb.svg" alt="" />BTC/USDT
+        </div>
+        <div class="name-right pf500 fs12 fc45B26B">成功</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">主网络</div>
+        <div class="pf500 fs12 fc666666">ERC 20</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">提币金额</div>
+        <div class="pf500 fs12 fc666666">1000.05 USDT</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">提币地址</div>
+        <div class="pf500 fs12 fc666666">s2gf5s8fs05fsd85gsd200s...gs50vsvs</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs14 fc666666">提币时间</div>
+        <div class="pf500 fs12 fc666666">2025-11-07 12:25:12</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const toPath = () => {
+    router.back();
+  };
+</script>
+<style lang="less" scoped>
+  .loan-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 48px;
+    background: #ffffff;
+    overflow: hidden;
+
+    .header-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 48px;
+
+      .left-arrow-image {
+        position: absolute;
+        left: 14px;
+        top: 16px;
+        width: 9px;
+        height: 16px;
+      }
+
+      .save {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        position: absolute;
+        top: 12.3px;
+        right: 16px;
+        height: 24px;
+
+        img {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  .withdraw-history {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+
+    .flow-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 10px;
+      width: 345px;
+      height: 170px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+
+      .item-name {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 15px;
+        width: 320px;
+        height: 24px;
+
+        .name-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          height: 24px;
+
+          img {
+            margin-right: 4px;
+            width: 24px;
+            height: 24px;
+          }
+        }
+
+        .name-right {
+          width: 58px;
+          height: 24px;
+          line-height: 24px;
+          border-radius: 5px;
+          background: #45b26b1a;
+          text-align: center;
+        }
+      }
+
+      .item-first {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+        width: 320px;
+        height: 20px;
+      }
+    }
+  }
+</style>

src/views/index/recharge/WithdrawIndex.vue

@@ -7,7 +7,7 @@
         src="../../../assets/icon/index/left-arrow.svg"
         @click="toPath()" />
       提现
-      <div class="save pf600 fs14 fcA8A8A8">
+      <div class="save pf600 fs14 fcA8A8A8" @click="toHistory">
         <img src="../../../assets/icon/index/history.svg" alt="" />历史
       </div>
     </div>
@@ -56,6 +56,10 @@
   const toPath = () => {
     router.back();
   };
+
+  const toHistory = () => {
+    router.push("/withdrawHistory");
+  };
 </script>
 <style lang="less" scoped>
   .loan-header {