1，划转首页 完成 2，划转历史 完成 3，我的资产-首页 完成 4，我的资产-总览 完成 5，我的资产-余额 完成 6，我的资产-合约-持有仓位 完成 7，我的资产-合约-当前委托 完成 8，首页动态组件切换修改为路由切换Tab 完成

src/assets/icon/index/bottom-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 0.75L4.75 4.75L8.75 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/index/exchange-right-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8538 5.35403L7.35375 9.85403C7.25993 9.94785 7.13268 10.0006 7 10.0006C6.86732 10.0006 6.74007 9.94785 6.64625 9.85403C6.55243 9.76021 6.49972 9.63296 6.49972 9.50028C6.49972 9.3676 6.55243 9.24035 6.64625 9.14653L10.2931 5.50028H0.5C0.367392 5.50028 0.240215 5.4476 0.146447 5.35383C0.0526785 5.26006 0 5.13289 0 5.00028C0 4.86767 0.0526785 4.74049 0.146447 4.64672C0.240215 4.55296 0.367392 4.50028 0.5 4.50028H10.2931L6.64625 0.854028C6.55243 0.760208 6.49972 0.63296 6.49972 0.500278C6.49972 0.367596 6.55243 0.240348 6.64625 0.146528C6.74007 0.0527077 6.86732 0 7 0C7.13268 0 7.25993 0.0527077 7.35375 0.146528L11.8538 4.64653C11.9002 4.69296 11.9371 4.74811 11.9623 4.80881C11.9874 4.86951 12.0004 4.93457 12.0004 5.00028C12.0004 5.06599 11.9874 5.13105 11.9623 5.19175C11.9371 5.25245 11.9002 5.30759 11.8538 5.35403Z" fill="#666666"/>
+</svg>

src/assets/icon/index/exchange.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="11" viewBox="0 0 19 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8413 7.61891C17.9684 7.77133 18.0299 7.96793 18.0123 8.16562C17.9947 8.36331 17.8995 8.54597 17.7475 8.67359C16.12 10.0217 14.6669 10.5008 13.3413 10.5008C11.5994 10.5008 10.0769 9.67484 8.66032 8.90703C6.28375 7.61797 4.23156 6.50422 1.2475 8.97641C1.17229 9.04308 1.08444 9.09395 0.989181 9.126C0.89392 9.15806 0.793187 9.17064 0.692969 9.16299C0.59275 9.15535 0.495091 9.12764 0.405792 9.08151C0.316492 9.03538 0.237376 8.97178 0.173143 8.89447C0.10891 8.81717 0.0608698 8.72774 0.0318781 8.6315C0.00288641 8.53526 -0.00646576 8.43418 0.00437688 8.33426C0.0152195 8.23433 0.0460358 8.13761 0.0949951 8.04983C0.143954 7.96205 0.210058 7.88501 0.289378 7.82328C4.05531 4.70422 6.88188 6.23703 9.37656 7.59078C11.7531 8.87984 13.8053 9.99266 16.7894 7.52047C16.9422 7.39479 17.1386 7.33461 17.3356 7.35305C17.5326 7.37149 17.7144 7.46705 17.8413 7.61891ZM1.2475 2.98203C4.23156 0.509843 6.28375 1.62266 8.66032 2.91172C10.0769 3.68047 11.5994 4.50547 13.3413 4.50547C14.6669 4.50547 16.12 4.02641 17.7475 2.67828C17.8268 2.61655 17.8929 2.53951 17.9419 2.45173C17.9908 2.36395 18.0217 2.26723 18.0325 2.1673C18.0433 2.06738 18.034 1.9663 18.005 1.87006C17.976 1.77382 17.928 1.68439 17.8637 1.60709C17.7995 1.52978 17.7204 1.46618 17.6311 1.42005C17.5418 1.37392 17.4441 1.34621 17.3439 1.33857C17.2437 1.33092 17.143 1.3435 17.0477 1.37556C16.9524 1.40761 16.8646 1.45848 16.7894 1.52516C13.8053 3.99734 11.7531 2.88359 9.37656 1.59453C6.88188 0.241718 4.05531 -1.29203 0.289378 1.82703C0.148538 1.95709 0.0628486 2.13614 0.0499104 2.32741C0.0369722 2.51868 0.0977675 2.70764 0.219809 2.85548C0.34185 3.00333 0.515871 3.09882 0.706127 3.12236C0.896382 3.14589 1.08843 3.09568 1.24282 2.98203H1.2475Z" fill="#94A3B8"/>
+</svg>

src/router/index.js

@@ -1,5 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeIndex from "../views/HomeIndex.vue";
+import AppIndex from "../views/index/Index.vue";
+import MarketIndex from "../views/market/Index.vue";
+import BitcoinIndex from "../views/bitcoin/Index.vue";
+import AssetIndex from "../views/asset/Index.vue";
+import UserIndex from "../views/user/Index.vue";
 import ApplyPermission from "../views/index/ApplyPermission.vue";
 import SplashScreen from "../views/index/SplashScreen.vue";
 import RiskTips from "../views/index/RiskTips.vue";
@@ -22,12 +27,42 @@ import DeleteAccount from "../views/user/DeleteAccount.vue";
 import RechargeIndex from "../views/index/recharge/RechargeIndex.vue";
 import WithdrawIndex from "../views/index/recharge/WithdrawIndex.vue";
 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";
 
 const routes = [
   {
     path: "/",
     name: "home",
     component: HomeIndex,
+    children: [
+      {
+        path: "",
+        name: "",
+        component: AppIndex,
+      },
+      {
+        path: "marketIndex",
+        name: "marketIndex",
+        component: MarketIndex,
+      },
+      {
+        path: "bitcoinIndex",
+        name: "bitcoinIndex",
+        component: BitcoinIndex,
+      },
+      {
+        path: "assetIndex",
+        name: "assetIndex",
+        component: AssetIndex,
+      },
+      {
+        path: "userIndex",
+        name: "userIndex",
+        component: UserIndex,
+      },
+    ],
   },
   {
     path: "/applyPermission",
@@ -139,6 +174,21 @@ const routes = [
     name: "withdrawIndex",
     component: WithdrawIndex,
   },
+  {
+    path: "/transfer",
+    name: "transfer",
+    component: Transfer,
+  },
+  {
+    path: "/transferHistory",
+    name: "transferHistory",
+    component: TransferHistory,
+  },
+  {
+    path: "/userAsset",
+    name: "userAsset",
+    component: UserAsset,
+  },
 ];
 
 const router = createRouter({

src/views/HomeIndex.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="index">
-    <component :is="currentComponent" />
+    <router-view />
     <div class="footer-tabbar">
       <div
         class="tabbar-item"
         v-for="(item, index) in tabbarList"
         :key="index"
-        @click="tabbarChange(item.key)">
+        @click="tabbarChange(item.key, item.path)">
         <img
           class="item-image"
           :src="current === item.key ? item.selectedImage : item.image"
@@ -19,60 +19,55 @@
   </div>
 </template>
 <script setup>
-  import { ref, computed } from "vue";
-  import CalendarIndex from "./index/Index.vue";
-  import NoticeIndex from "./market/Index.vue";
-  import FootprintIndex from "./bitcoin/Index.vue";
-  import AiIndex from "./asset/Index.vue";
-  import UserIndex from "./user/Index.vue";
+  import { useRouter } from "vue-router";
+  import { ref } from "vue";
+
+  const router = useRouter();
 
   const current = ref("index");
-  const componentsMap = {
-    index: CalendarIndex,
-    market: NoticeIndex,
-    bitcoin: FootprintIndex,
-    asset: AiIndex,
-    user: UserIndex,
-  };
 
-  const currentComponent = computed(() => componentsMap[current.value]);
+  const tabbarChange = (key, path) => {
+    current.value = key;
+    router.push(path);
+  };
 
   const tabbarList = [
     {
       key: "index",
+      path: "/",
       image: require("@/assets/icon/tabbar/home-clicked.png"),
       selectedImage: require("@/assets/icon/tabbar/home-clicked.png"),
       text: "首页",
     },
     {
       key: "market",
+      path: "/marketIndex",
       image: require("@/assets/icon/tabbar/bitcoin-circle.png"),
       selectedImage: require("@/assets/icon/tabbar/bitcoin-circle.png"),
       text: "行情",
     },
     {
       key: "bitcoin",
+      path: "/bitcoinIndex",
       image: require("@/assets/icon/tabbar/bitcoin-circle.png"),
       selectedImage: require("@/assets/icon/tabbar/bitcoin-circle.png"),
       text: "交易",
     },
     {
       key: "asset",
+      path: "/assetIndex",
       image: require("@/assets/icon/tabbar/wallet.png"),
       selectedImage: require("@/assets/icon/tabbar/wallet.png"),
       text: "资产",
     },
     {
       key: "user",
+      path: "/userIndex",
       image: require("@/assets/icon/tabbar/user-circle.png"),
       selectedImage: require("@/assets/icon/tabbar/user-circle.png"),
       text: "我的",
     },
   ];
-
-  const tabbarChange = (key) => {
-    current.value = key;
-  };
 </script>
 <style lang="less" scoped>
   .index {

src/views/asset/Index.vue

@@ -3,7 +3,7 @@
     <div class="asset-header">
       <div class="header-content pf600 fs18 fc121212">
         资产
-        <div class="save pf600 fs14 fc333333">我的资产</div>
+        <div class="save pf600 fs14 fc333333" @click="goUserAsset">我的资产</div>
       </div>
     </div>
     <div class="asset-total">
@@ -26,21 +26,21 @@
       </div>
     </div>
     <div class="asset-money">
-      <div class="money-item">
+      <div class="money-item" @click="goRecharge">
         <div class="item-img">
           <img src="../../assets/img/index/Rectangle 8.svg" />
         </div>
         <div class="pf400 fs14 fc666666">充币</div>
         <img src="../../assets/icon/asset/divider.svg" alt="" class="divider-img" />
       </div>
-      <div class="money-item">
+      <div class="money-item" @click="goWithdraw">
         <div class="item-img">
           <img src="../../assets/img/index/Rectangle 9.svg" />
         </div>
         <div class="pf400 fs14 fc666666">提币</div>
         <img src="../../assets/icon/asset/divider.svg" alt="" class="divider-img" />
       </div>
-      <div class="money-item">
+      <div class="money-item" @click="goTransfer">
         <div class="item-img">
           <img src="../../assets/img/index/user/huazhuan.svg" />
         </div>
@@ -124,6 +124,22 @@
   const goHistory = () => {
     router.push("/historyIndex");
   };
+
+  const goRecharge = () => {
+    router.push("/rechargeIndex");
+  };
+
+  const goWithdraw = () => {
+    router.push("/withdrawIndex");
+  };
+
+  const goTransfer = () => {
+    router.push("/transfer");
+  };
+
+  const goUserAsset = () => {
+    router.push("/userAsset");
+  };
 </script>
 <style lang="less" scoped>
   .asset-index {
@@ -156,7 +172,7 @@
         .left-arrow-image {
           position: absolute;
           left: 14px;
-          top: 15px;
+          top: 16px;
           width: 9px;
           height: 16px;
         }

src/views/asset/UserAsset.vue

@@ -0,0 +1,62 @@
+<template>
+  <!-- 我的资产 -->
+  <HeaderNav headerText="资产"></HeaderNav>
+  <div class="user-asset">
+    <div class="notifi-classifi pf600 fs14">
+      <div class="fc121212" @click="messageChange('overview')">总览</div>
+      <div class="fcA8A8A8" @click="messageChange('balance')">余额</div>
+      <div class="fcA8A8A8" @click="messageChange('contract')">合约</div>
+      <div class="fcA8A8A8" @click="messageChange('financialManagement')">理财</div>
+      <div class="fcA8A8A8" @click="messageChange('option')">期权</div>
+      <div class="fcA8A8A8" @click="messageChange('miaoContract')">秒合约</div>
+      <div class="fcA8A8A8" @click="messageChange('lever')">杠杆</div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../index/components/HeaderNav.vue";
+  import Balance from "./myAsset/Balance.vue";
+  import Contract from "./myAsset/Contract.vue";
+  import FinancialManagement from "./myAsset/FinancialManagement.vue";
+  import Lever from "./myAsset/Lever.vue";
+  import MiaoContract from "./myAsset/MiaoContract.vue";
+  import Option from "./myAsset/Option.vue";
+  import Overview from "./myAsset/Overview.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("overview");
+  const componentsMap = {
+    balance: Balance,
+    contract: Contract,
+    financialManagement: FinancialManagement,
+    lever: Lever,
+    miaoContract: MiaoContract,
+    option: Option,
+    overview: Overview,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .user-asset {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-top: calc(48px);
+      width: 345px;
+      height: 24px;
+    }
+  }
+</style>

src/views/asset/myAsset/Balance.vue

@@ -0,0 +1,213 @@
+<template>
+  <!-- 余额 -->
+  <div class="balance">
+    <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>
+    <div class="asset-money">
+      <div class="money-item" @click="goRecharge">
+        <div class="item-img">
+          <img src="@/assets/img/index/Rectangle 8.svg" />
+        </div>
+        <div class="pf400 fs14 fc666666">充币</div>
+        <img src="@/assets/icon/asset/divider.svg" alt="" class="divider-img" />
+      </div>
+      <div class="money-item" @click="goWithdraw">
+        <div class="item-img">
+          <img src="@/assets/img/index/Rectangle 9.svg" />
+        </div>
+        <div class="pf400 fs14 fc666666">提币</div>
+        <img src="@/assets/icon/asset/divider.svg" alt="" class="divider-img" />
+      </div>
+      <div class="money-item" @click="goTransfer">
+        <div class="item-img">
+          <img src="@/assets/img/index/user/huazhuan.svg" />
+        </div>
+        <div class="pf400 fs14 fc666666">划转</div>
+      </div>
+    </div>
+    <div class="balance-coin">
+      <div class="pf600 fs14 fc121212">余额</div>
+      <div class="coin-main">
+        <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>215520.54(USDT)</div>
+              </div>
+              <div class="info-bottom">
+                <div class="pf400 fs10 fcA9A9A9">BTC</div>
+                <div class="pf400 fs10 fcDF384C">≈￥25280.580</div>
+              </div>
+            </div>
+          </div>
+          <div class="item-line"></div>
+          <div class="item-use pf500 fs12 margin-top10">
+            <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>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .balance {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    .asset-total {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 16px;
+      width: 343px;
+
+      .asset-title {
+        height: 22px;
+        line-height: 22px;
+      }
+
+      .asset-number {
+        margin-top: 3px;
+        height: 44px;
+        line-height: 44px;
+      }
+
+      .asset-approximately {
+        margin-top: 1px;
+        height: 22px;
+        line-height: 22px;
+      }
+    }
+
+    .asset-money {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 10px;
+      width: 345px;
+      height: 80px;
+
+      .money-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 114px;
+        height: 80px;
+
+        .divider-img {
+          position: absolute;
+          top: 14.5px;
+          right: 0;
+        }
+
+        .item-img {
+          margin-bottom: 3px;
+          width: 32px;
+          height: 32px;
+
+          img {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      }
+    }
+
+    .balance-coin {
+      margin-top: 10px;
+      width: 345px;
+
+      .coin-main {
+        width: 100%;
+
+        .coin-item {
+          padding-left: 19px;
+          padding-right: 11px;
+          margin-top: 10px;
+          width: 100%;
+          height: 115px;
+          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;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/asset/myAsset/Contract.vue

@@ -0,0 +1,432 @@
+<template>
+  <!-- 合约 -->
+  <div class="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 pf400 fs16 fc061237">5,678.00</div>
+        </div>
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF">交易</div>
+    <div class="page-container">
+      <div class="tabs-header">
+        <div class="tabs-left">
+          <div
+            v-for="(tab, index) in tabs"
+            :key="index"
+            class="tab-item"
+            :class="{ active: currentTab === index }"
+            @click="currentTab = index">
+            {{ tab }}
+            <div class="active-line" v-if="currentTab === index"></div>
+          </div>
+        </div>
+        <div class="tabs-right">
+          <span
+            class="history-icon"
+            style="align-content: center; display: flex; gap: 5px; align-items: center">
+            <img src="../../../assets/icon/bitcoin/shizhong.svg" alt="" /> 全部</span
+          >
+        </div>
+      </div>
+      <position v-if="currentTab == 0"></position>
+      <div v-if="currentTab == 1" class="order-list">
+        <div v-for="item in orders" :key="item.id" class="order-card">
+          <div class="card-top">
+            <div class="coin-info">
+              <div class="coin-icon">₿</div>
+              <div class="coin-details">
+                <div class="coin-name">
+                  {{ item.symbol }}
+                  <span class="contract-tag">{{ item.contractType }}</span>
+                </div>
+                <div class="tags-row">
+                  <span class="tag" :class="item.side === 'buy' ? 'tag-buy' : 'tag-sell'">
+                    {{ item.side === "buy" ? "买入" : "卖出" }}
+                  </span>
+                  <span class="tag tag-gray">逐仓 {{ item.leverage }}</span>
+                  <span class="tag tag-gray">{{ item.orderType }}</span>
+                </div>
+              </div>
+            </div>
+            <button
+              v-if="item.canCancel"
+              class="btn-cancel"
+              @click="handleCancel(item.id)">
+              撤单
+            </button>
+            <div v-else class="badge-completed">已完成</div>
+          </div>
+          <div class="divider"></div>
+          <div class="card-body-grid">
+            <div class="grid-item align-left">
+              <div class="label">数量</div>
+              <div class="value">{{ item.amount }}</div>
+            </div>
+            <div class="grid-item align-center">
+              <div class="label">价格</div>
+              <div class="value">{{ item.price }}</div>
+            </div>
+            <div class="grid-item align-right">
+              <div class="label">状态</div>
+              <div class="value bold-text">{{ item.statusText }}</div>
+            </div>
+            <div class="grid-item align-left">
+              <div class="label">触发价格</div>
+              <div class="value">{{ item.triggerPrice }}</div>
+            </div>
+            <div class="grid-item align-center">
+              <div class="label">下单时间</div>
+              <div class="value">{{ item.time }}</div>
+            </div>
+            <div class="grid-item align-right">
+              <div class="label">状态</div>
+              <div class="value bold-text">{{ item.stateText }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { defineAsyncComponent, ref } from "vue";
+
+  const position = defineAsyncComponent(() =>
+    import("../../bitcoin/components/position.vue")
+  );
+
+  // 1. 模拟数据：为了还原图片，我们创建两个不同的订单对象
+  const orders = ref([
+    {
+      id: 1,
+      symbol: "BTC/USDT",
+      contractType: "永续",
+      side: "buy", // 'buy' | 'sell'
+      leverage: "20X",
+      orderType: "市价",
+      amount: "0.215 USDT",
+      price: "0.215 USDT",
+      statusText: "止损",
+      triggerPrice: "标记价格>20",
+      time: "2025-11-04, 16:30",
+      stateText: "未触发",
+      canCancel: true, // 显示红色撤单按钮
+    },
+    {
+      id: 2,
+      symbol: "BTC/USDT",
+      contractType: "永续",
+      side: "sell",
+      leverage: "20X",
+      orderType: "市价",
+      amount: "0.215 USDT",
+      price: "0.215 USDT",
+      statusText: "止盈",
+      triggerPrice: "标记价格>20",
+      time: "2025-11-04, 16:30",
+      stateText: "未触发",
+      canCancel: false, // 显示灰色已完成/不可操作按钮
+    },
+  ]);
+
+  // 当前选中的 Tab，默认选中 index 1 (当前委托)
+  const currentTab = ref(0);
+  const tabs = ["持有仓位(2)", "当前委托(2)"];
+
+  // 按钮操作
+  const handleCancel = (id) => {
+    console.log("撤单 ID:", id);
+    // 这里写撤单逻辑
+  };
+</script>
+<style lang="less" scoped>
+  .contract {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    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;
+    }
+
+    /* 基础设置 */
+    .page-container {
+      width: 100%;
+      //min-height: 100vh;
+      //background-color: #FAFAFA; /* 浅灰背景 */
+      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
+        Arial, sans-serif;
+    }
+
+    /* --- Tabs 样式 --- */
+    .tabs-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px;
+      background-color: #fff;
+      height: 44px;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    .tabs-left {
+      display: flex;
+      gap: 24px;
+    }
+
+    .tab-item {
+      font-size: 15px;
+      color: #999;
+      position: relative;
+      cursor: pointer;
+      padding: 10px 0;
+    }
+
+    .tab-item.active {
+      color: #333;
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    .active-line {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 20px;
+      height: 3px;
+      background-color: #121212; /* 选中时的蓝色 */
+      border-radius: 2px;
+    }
+
+    .tabs-right {
+      color: #999;
+      font-size: 14px;
+      align-content: center;
+    }
+
+    /* --- 列表卡片样式 --- */
+    .order-list {
+      padding: 15px;
+    }
+
+    .order-card {
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 12px;
+      //box-shadow: 0 2px 8px rgba(0,0,0,0.02); /* 轻微阴影 */
+      border: 1px solid #f0f0f0;
+    }
+
+    /* 卡片头部 */
+    .card-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 12px;
+    }
+
+    .coin-info {
+      display: flex;
+      gap: 10px;
+    }
+
+    .coin-icon {
+      width: 36px;
+      height: 36px;
+      background-color: #f7931a; /* BTC 橙色 */
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 20px;
+    }
+
+    .coin-name {
+      font-size: 16px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 4px;
+    }
+
+    .contract-tag {
+      font-size: 12px;
+      font-weight: normal;
+      color: #333;
+    }
+
+    .tags-row {
+      display: flex;
+      gap: 6px;
+    }
+
+    /* 标签体系 */
+    .tag {
+      font-size: 11px;
+      padding: 1px 4px;
+      border-radius: 2px;
+      color: #fff;
+    }
+
+    .tag-buy {
+      background-color: #2ebd85; /* 涨/买入绿 */
+    }
+
+    .tag-sell {
+      background-color: #df294a; /* 跌/卖出红 */
+    }
+
+    .tag-gray {
+      background-color: #f0f0f0;
+      color: #999;
+    }
+
+    /* 按钮体系 */
+    .btn-cancel {
+      background-color: #df294a;
+      color: white;
+      border: none;
+      padding: 6px 16px;
+      border-radius: 4px;
+      font-size: 13px;
+      cursor: pointer;
+    }
+
+    .badge-completed {
+      background-color: #aaa;
+      color: white;
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-size: 13px;
+    }
+
+    .divider {
+      height: 1px;
+      background-color: #f5f5f5;
+      margin-bottom: 12px;
+    }
+
+    /* --- 数据网格 Grid --- */
+    .card-body-grid {
+      display: grid;
+      /* 定义三列，左侧和中间自动，右侧靠边 */
+      grid-template-columns: 1fr 1fr 1fr;
+      row-gap: 12px; /* 行间距 */
+    }
+
+    .grid-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    /* 对齐方式 */
+    .align-left {
+      align-items: flex-start;
+    }
+    .align-center {
+      align-items: center;
+    }
+    .align-right {
+      align-items: flex-end;
+    }
+
+    .label {
+      font-size: 12px;
+      color: #999; /* 灰色标签 */
+    }
+
+    .value {
+      font-size: 13px;
+      color: #333;
+      font-family: Helvetica, Arial, sans-serif; /* 数字字体优化 */
+    }
+
+    .bold-text {
+      font-weight: 500;
+    }
+  }
+</style>

src/views/asset/myAsset/FinancialManagement.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- 理财 -->
+  <div class="financial-management">理财</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

src/views/asset/myAsset/Lever.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- 杠杆 -->
+  <div class="lever">杠杆</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

src/views/asset/myAsset/MiaoContract.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- 秒合约 -->
+  <div class="second-contract">秒合约</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

src/views/asset/myAsset/Option.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- 期权 -->
+  <div class="option">期权</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

src/views/asset/myAsset/Overview.vue

@@ -0,0 +1,50 @@
+<template>
+  <!-- 总览 -->
+  <div class="overview">
+    <div class="overview-item" v-for="(item, index) in 5" :key="index">
+      <div class="item-balance pf500 fs14 fc1F2937">
+        <div>账户余额</div>
+        <div>215520.54(USDT)</div>
+      </div>
+      <div class="item-asset">
+        <div class="pf400 fs12 fc6A7187">账户资产</div>
+        <div class="pf400 fs12 fcDF384C">≈￥25280.580</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .overview {
+    .overview-item {
+      padding-left: 12px;
+      padding-right: 11px;
+      margin-top: 10px;
+      width: 345px;
+      height: 70px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      box-sizing: border-box;
+
+      .item-balance {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 13px;
+        width: 100%;
+        height: 22px;
+      }
+
+      .item-asset {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 2px;
+        width: 100%;
+        height: 22px;
+      }
+    }
+  }
+</style>

src/views/index/components/HeaderNav.vue

@@ -50,7 +50,7 @@
       .left-arrow-image {
         position: absolute;
         left: 14px;
-        top: 15px;
+        top: 16px;
         width: 9px;
         height: 16px;
       }

src/views/index/loan/Index.vue

@@ -102,7 +102,7 @@
       .left-arrow-image {
         position: absolute;
         left: 14px;
-        top: 15px;
+        top: 16px;
         width: 9px;
         height: 16px;
       }

src/views/index/recharge/ChangeCoin.vue

@@ -85,7 +85,7 @@
       .left-arrow-image {
         position: absolute;
         left: 14px;
-        top: 15px;
+        top: 16px;
         width: 9px;
         height: 16px;
       }

src/views/index/recharge/Transfer.vue

@@ -0,0 +1,297 @@
+<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" @click="toTransferHistory">
+        <img src="../../../assets/icon/index/history.svg" alt="" />历史
+      </div>
+    </div>
+  </div>
+  <div class="transfer">
+    <div class="account">
+      <div class="account-left">
+        <div class="money-account">
+          <div class="pf500 fs12 fc999999">从</div>
+          <div class="pf500 fs14 fc333333">资金账户</div>
+        </div>
+        <div class="line"></div>
+        <div class="money-account">
+          <div class="pf500 fs12 fc999999">到</div>
+          <div class="pf500 fs14 fc333333">交易账户</div>
+        </div>
+      </div>
+      <div class="account-right">
+        <img src="@/assets/icon/index/transer.svg" alt="" />
+      </div>
+    </div>
+    <div class="exchange-rate pf400 fs16 fc4B5563">
+      1 BTC <img src="@/assets/icon/index/exchange.svg" alt="" /> 0.0025 ETH
+    </div>
+    <div class="exchange-number">
+      <div class="exchange-coin margin-top38">
+        <div class="pf400 fs22 fc999999">数量</div>
+        <div class="coin-choose pf400 fs18 fc1F2937">
+          <img src="@/assets/icon/coin/bnb.svg" class="coin" alt="" />
+          BTC
+          <img src="@/assets/icon/index/bottom-arrow.svg" class="bottom" alt="" />
+        </div>
+      </div>
+      <div class="exchange-line">
+        <div class="line"></div>
+        <div class="account-right">
+          <img src="@/assets/icon/index/transer.svg" alt="" />
+        </div>
+        <div class="line"></div>
+      </div>
+      <div class="exchange-coin margin-top15">
+        <div class="pf400 fs22 fc999999">数量</div>
+        <div class="coin-choose pf400 fs18 fc1F2937">
+          <img src="@/assets/icon/coin/CardanoBadge.svg" class="coin" alt="" />
+          BTC
+          <img src="@/assets/icon/index/bottom-arrow.svg" class="bottom" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF">划转</div>
+  </div>
+</template>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const toPath = () => {
+    router.back();
+  };
+
+  const toTransferHistory = () => {
+    router.push("transferHistory");
+  };
+</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;
+        }
+      }
+    }
+  }
+
+  .transfer {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: calc(48px + 50px);
+    width: 100%;
+
+    .account {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      width: 345px;
+      height: 90px;
+      border-radius: 6px;
+      border: 1px solid #ebebeb;
+
+      .account-left {
+        .money-account {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          margin-top: 16px;
+          margin-left: 11px;
+          height: 18px;
+
+          div {
+            &:nth-child(1) {
+              margin-right: 13px;
+              width: 12px;
+              height: 18px;
+              line-height: 18px;
+              text-align: center;
+            }
+          }
+        }
+
+        .line {
+          margin-top: 11px;
+          margin-left: 17px;
+          width: 271px;
+          height: 1px;
+          background: #e2e8f0;
+        }
+      }
+
+      .account-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        margin-top: 25px;
+        margin-left: 5px;
+        width: 40px;
+        height: 40px;
+        border-radius: 123px;
+        background: #f8fafc;
+
+        img {
+          width: 14.38px;
+          height: 14.38px;
+        }
+      }
+    }
+
+    .exchange-rate {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 45px;
+      height: 24px;
+
+      img {
+        margin-left: 11px;
+        margin-right: 11px;
+        width: 18px;
+        height: 10.5px;
+      }
+    }
+
+    .exchange-number {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 15px;
+      width: 345px;
+      height: 233px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+
+      .margin-top38 {
+        margin-top: 38px;
+      }
+
+      .margin-top15 {
+        margin-top: 15px;
+      }
+
+      .exchange-coin {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 311px;
+        height: 40px;
+
+        .coin-choose {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          width: 105px;
+          height: 40px;
+          border-radius: 30px;
+          border: 1px solid #ebebeb;
+
+          .coin {
+            margin-left: 10px;
+            margin-right: 6px;
+            width: 24px;
+            height: 24px;
+          }
+
+          .bottom {
+            margin-left: 6px;
+          }
+        }
+      }
+
+      .exchange-line {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 17px;
+        width: 311px;
+        height: 40px;
+
+        .line {
+          width: 135px;
+          height: 1px;
+          background: #e2e8f0;
+        }
+
+        .account-right {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 123px;
+          background: #f8fafc;
+
+          img {
+            width: 14.38px;
+            height: 14.38px;
+          }
+        }
+      }
+    }
+
+    .submit {
+      margin-top: 73px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+  }
+</style>

src/views/index/recharge/TransferHistory.vue

@@ -0,0 +1,193 @@
+<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="transfer-history">
+    <div class="history-item" v-for="(item, index) in 3" :key="index">
+      <div class="item-flag">
+        <div class="flag-left">
+          <img src="@/assets/icon/coin/bnb.svg" class="coin-first" alt="" />
+          <img src="@/assets/icon/index/exchange-right-arrow.svg" class="exchange" />
+          <img
+            src="@/assets/icon/coin/EthereumClassicBadge.svg"
+            class="coin-second"
+            alt="" />
+        </div>
+        <div class="flag-right pf500 fs12 fc45B26B">成功</div>
+      </div>
+      <div class="item-info pf500 fc666666 margin-top13">
+        <div class="fs14">BTC</div>
+        <div class="fs12">1000.05 USDT</div>
+      </div>
+      <div class="item-info pf500 fc666666 margin-top11">
+        <div class="fs14">ETH</div>
+        <div class="fs12">521000.05 ETH</div>
+      </div>
+      <div class="item-info pf500 fc666666 margin-top11">
+        <div class="fs14">换算汇率</div>
+        <div class="info-right fs12">
+          1 BTC <img src="@/assets/icon/index/exchange.svg" alt="" /> 0.0025 ETH
+        </div>
+      </div>
+      <div class="item-info pf500 fc666666 margin-top11">
+        <div class="fs14">划转时间</div>
+        <div class="fs12">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;
+        }
+      }
+    }
+  }
+
+  .transfer-history {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+
+    .history-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;
+
+      .margin-top13 {
+        margin-top: 13px;
+      }
+
+      .margin-top11 {
+        margin-top: 11px;
+      }
+
+      .item-flag {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 15px;
+        width: 326px;
+        height: 24px;
+
+        .flag-left {
+          height: 24px;
+
+          .coin-first {
+            width: 24px;
+            height: 24px;
+          }
+
+          .exchange {
+            margin-left: 8px;
+            width: 12px;
+            height: 10px;
+          }
+
+          .coin-second {
+            margin-left: 8px;
+            width: 24px;
+            height: 24px;
+          }
+        }
+
+        .flag-right {
+          width: 58px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          border-radius: 5px;
+          background: #45b26b1a;
+        }
+      }
+
+      .item-info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 326px;
+        height: 18px;
+
+        .info-right {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          img {
+            margin-left: 4px;
+            margin-right: 4px;
+            width: 14px;
+            height: 14px;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/index/recharge/WithdrawIndex.vue

@@ -48,7 +48,15 @@
     <div class="gas-fee pf500 fs14 fc333333">提现手续费: 3%</div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const toPath = () => {
+    router.back();
+  };
+</script>
 <style lang="less" scoped>
   .loan-header {
     position: fixed;
@@ -72,7 +80,7 @@
       .left-arrow-image {
         position: absolute;
         left: 14px;
-        top: 15px;
+        top: 16px;
         width: 9px;
         height: 16px;
       }

src/views/user/Index.vue

@@ -42,8 +42,12 @@
     router.push("/deleteAccount");
   };
 
-  const goMenuRouter = () => {
-    router.push("/userLoanIndex");
+  const goMenuRouter = (index) => {
+    if (index == 1) {
+      router.push("/userLoanIndex");
+    } else if (index == 4) {
+      router.push("/userAsset");
+    }
   };
 
   const userMenu = [