1，资产-当前委托 完成 2，资产-历史委托 完成 3，资产-仓位历史 完成 4，资产-历史成交 完成 5，资产-资金流水 完成 6，资产-委托详情 60％

src/assets/icon/asset/CopySimple.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0625 3.5H2.1875C2.07147 3.5 1.96019 3.54609 1.87814 3.62814C1.79609 3.71019 1.75 3.82147 1.75 3.9375V11.8125C1.75 11.9285 1.79609 12.0398 1.87814 12.1219C1.96019 12.2039 2.07147 12.25 2.1875 12.25H10.0625C10.1785 12.25 10.2898 12.2039 10.3719 12.1219C10.4539 12.0398 10.5 11.9285 10.5 11.8125V3.9375C10.5 3.82147 10.4539 3.71019 10.3719 3.62814C10.2898 3.54609 10.1785 3.5 10.0625 3.5ZM9.625 11.375H2.625V4.375H9.625V11.375ZM12.25 2.1875V10.0625C12.25 10.1785 12.2039 10.2898 12.1219 10.3719C12.0398 10.4539 11.9285 10.5 11.8125 10.5C11.6965 10.5 11.5852 10.4539 11.5031 10.3719C11.4211 10.2898 11.375 10.1785 11.375 10.0625V2.625H3.9375C3.82147 2.625 3.71019 2.57891 3.62814 2.49686C3.54609 2.41481 3.5 2.30353 3.5 2.1875C3.5 2.07147 3.54609 1.96019 3.62814 1.87814C3.71019 1.79609 3.82147 1.75 3.9375 1.75H11.8125C11.9285 1.75 12.0398 1.79609 12.1219 1.87814C12.2039 1.96019 12.25 2.07147 12.25 2.1875Z" fill="#DF384C"/>
+</svg>

src/router/index.js

@@ -8,6 +8,8 @@ import Notification from "../views/notification/Index.vue";
 import IndexUser from "../views/index/User.vue";
 import UserCenter from "../views/index/UserCenter.vue";
 import MarketDetails from "../views/market/details/Index.vue";
+import HistoryIndex from "../views/asset/history/Index.vue";
+import EntrustDetails from "../views/asset/history/EntrustDetails.vue";
 
 const routes = [
   {
@@ -55,6 +57,16 @@ const routes = [
     name: "marketDetails",
     component: MarketDetails,
   },
+  {
+    path: "/historyIndex",
+    name: "historyIndex",
+    component: HistoryIndex,
+  },
+  {
+    path: "/entrustDetails",
+    name: "entrustDetails",
+    component: EntrustDetails,
+  },
 ];
 
 const router = createRouter({

src/views/asset/Index.vue

@@ -53,7 +53,7 @@
           <div class="pf600 fs18 fc121212">持仓明细</div>
           <div class="sys-notifi pf600 fs14 fcA8A8A8">ICO明细</div>
         </div>
-        <div class="history pf600 fs14 fcA8A8A8">
+        <div class="history pf600 fs14 fcA8A8A8" @click="goHistory">
           <img src="../../assets/icon/asset/clock-rewind.svg" alt="" />
           历史
         </div>
@@ -120,6 +120,10 @@
   import { useRouter } from "vue-router";
 
   const router = useRouter();
+
+  const goHistory = () => {
+    router.push("/historyIndex");
+  };
 </script>
 <style lang="less" scoped>
   .asset-index {

src/views/asset/history/CurrentEntrustment.vue

@@ -0,0 +1,211 @@
+<template>
+  <!-- 当前委托 -->
+  <div class="details-main">
+    <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 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">0.215 USDT</div>
+          </div>
+          <div class="price-item">
+            <div class="pf500 fs12 fcA8A8A8">状态</div>
+            <div class="pf500 fs12 fc333333">止损</div>
+          </div>
+        </div>
+        <div class="price-bottom">
+          <div class="price-item">
+            <div class="pf500 fs12 fcA8A8A8">触发价格</div>
+            <div class="pf500 fs12 fc333333">标记价格>20</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">未触发</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .details-main {
+    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: 161px;
+      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;
+            }
+          }
+        }
+
+        .price-bottom {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 9px;
+          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/history/EntrustDetails.vue

@@ -0,0 +1,115 @@
+<template>
+  <HeaderNav headerText="委托详情"></HeaderNav>
+  <div class="entrust-details">
+    <div class="details-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>
+        </div>
+      </div>
+      <div class="name-right pf500 fs12 fc45B26B">完全成交</div>
+    </div>
+    <div class="details-first margin-top10">
+      <div class="pf500 fs14 fc666666">已实现盈亏</div>
+      <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .entrust-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    .margin-top10 {
+      margin-top: 10px;
+    }
+
+    .margin-top12 {
+      margin-top: 12px;
+    }
+
+    .details-name {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 50px;
+      width: 349px;
+      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: flex-start;
+          margin-left: 8px;
+          height: 40px;
+
+          .name-flag {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+
+            .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;
+            }
+          }
+        }
+      }
+
+      .name-right {
+        width: 76px;
+        height: 24px;
+        text-align: center;
+        line-height: 24px;
+        border-radius: 5px;
+        background: #45b26b1a;
+      }
+    }
+
+    .details-first {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 349px;
+      height: 20px;
+    }
+  }
+</style>

src/views/asset/history/FundFlow.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 资金流水 -->
+  <div class="fund-flow">
+    <div class="flow-item" v-for="(item, index) in 3" :key="index">
+      <div class="item-first">
+        <div class="pf500 fs16 fc2C3131">USDT</div>
+        <div class="pf500 fs14 fc333333">2025-11-04, 16:30</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">类型</div>
+        <div class="pf500 fs12 fc666666">资金费用</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">合约</div>
+        <div class="pf500 fs12 fc666666">BTCUSDT 永续</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">总额</div>
+        <div class="pf500 fs12 fc666666">+2.2572255</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .fund-flow {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    .flow-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 10px;
+      width: 345px;
+      height: 108px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+
+      .item-first {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 5px;
+        width: 320px;
+        height: 24px;
+      }
+    }
+  }
+</style>

src/views/asset/history/HistoricalEntrustment.vue

@@ -0,0 +1,194 @@
+<template>
+  <!-- 历史委托 -->
+  <div class="history-entrust">
+    <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 pf500 fs12 fcFFFFFF">已失效</div>
+      </div>
+      <div class="item-line"></div>
+      <div class="item-price">
+        <div class="price-top">
+          <div class="item-yingkui">
+            <div class="pf500 fs12 fcA8A8A8">未实现盈亏(USDT)</div>
+            <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
+          </div>
+          <div class="item-yingkui">
+            <div class="pf500 fs12 fcA8A8A8">下单时间</div>
+            <div class="pf500 fs12 fc333333">2025-11-04, 16:30</div>
+          </div>
+        </div>
+        <div class="price-bottom">
+          <div class="price-item">
+            <div class="pf500 fs12 fcA8A8A8">委托总量</div>
+            <div class="pf500 fs12 fc333333">50.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 class="price-item">
+            <div class="pf500 fs12 fcA8A8A8">已成交量</div>
+            <div class="pf500 fs12 fc333333">5.215 USDT</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .history-entrust {
+    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: 155px;
+      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: #a8a8a8;
+        }
+      }
+
+      .item-line {
+        margin-top: 8px;
+        width: 320px;
+        height: 1.5px;
+        background: #e9e9e9;
+      }
+
+      .item-price {
+        margin-top: 6px;
+        width: 320px;
+        height: 85px;
+
+        .price-top {
+          .item-yingkui {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 320px;
+            height: 20px;
+          }
+        }
+
+        .price-bottom {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 5px;
+          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/history/HistoricalTransactions.vue

@@ -0,0 +1,201 @@
+<template>
+  <!-- 历史成交 -->
+  <div class="history-trans">
+    <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>
+          </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-top">
+          <div class="item-yingkui">
+            <div class="pf500 fs12 fcA8A8A8">已实现盈亏(USDT)</div>
+            <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
+          </div>
+          <div class="item-order">
+            <div class="pf500 fs12 fcA8A8A8">订单号</div>
+            <div class="copy pf500 fs12 fcA8A8A8">
+              2508050505052008502060
+              <img src="../../../assets/icon/asset/CopySimple.svg" alt="" />
+            </div>
+          </div>
+        </div>
+        <div class="price-bottom">
+          <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 class="price-item">
+            <div class="pf500 fs12 fcA8A8A8">收益率</div>
+            <div class="pf500 fs12 fc333333">0.215 USDT</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .history-trans {
+    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: 155px;
+      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;
+              }
+            }
+          }
+        }
+
+        .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-top {
+          .item-order {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 320px;
+            height: 20px;
+
+            .copy {
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+              height: 20px;
+
+              img {
+                margin-left: 5px;
+              }
+            }
+          }
+          .item-yingkui {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 4px;
+            width: 320px;
+            height: 20px;
+          }
+        }
+
+        .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;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/asset/history/Index.vue

@@ -0,0 +1,91 @@
+<template>
+  <HeaderNav headerText="交易历史"></HeaderNav>
+  <div class="history-index">
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212">合约</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8">秒合约</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8">期权</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8">杠杆</div>
+    </div>
+    <div class="history-menu">
+      <div class="pf600 fs14 fc121212" @click="messageChange('currentEntrustment')">
+        当前委托
+      </div>
+      <div
+        class="sys-notifi pf600 fs14 fcA8A8A8"
+        @click="messageChange('historicalEntrustment')">
+        历史委托
+      </div>
+      <div
+        class="sys-notifi pf600 fs14 fcA8A8A8"
+        @click="messageChange('positionHistory')">
+        仓位历史
+      </div>
+      <div
+        class="sys-notifi pf600 fs14 fcA8A8A8"
+        @click="messageChange('historicalTransactions')">
+        历史成交
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('fundFlow')">
+        资金流水
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../index/components/HeaderNav.vue";
+  import CurrentEntrustment from "./CurrentEntrustment.vue";
+  import FundFlow from "./FundFlow.vue";
+  import HistoricalEntrustment from "./HistoricalEntrustment.vue";
+  import HistoricalTransactions from "./HistoricalTransactions.vue";
+  import PositionHistory from "./PositionHistory.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("currentEntrustment");
+  const componentsMap = {
+    currentEntrustment: CurrentEntrustment,
+    fundFlow: FundFlow,
+    historicalEntrustment: HistoricalEntrustment,
+    historicalTransactions: HistoricalTransactions,
+    positionHistory: PositionHistory,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .history-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 48px;
+      width: 349px;
+      height: 24px;
+
+      .sys-notifi {
+        margin-left: 31px;
+      }
+    }
+
+    .history-menu {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-top: 10px;
+      width: 349px;
+      height: 24px;
+    }
+  }
+</style>

src/views/asset/history/PositionHistory.vue

@@ -0,0 +1,222 @@
+<template>
+  <!-- 仓位历史 -->
+  <div class="posit-history">
+    <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>
+          </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="item-yingkui">
+            <div class="pf500 fs12 fcA8A8A8">已实现盈亏(USDT)</div>
+            <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
+          </div>
+          <div class="item-yingkui">
+            <div class="pf500 fs12 fcA8A8A8">订单号</div>
+            <div class="copy pf500 fs12 fcA8A8A8">
+              2508050505052008502060
+              <img src="../../../assets/icon/asset/CopySimple.svg" alt="" />
+            </div>
+          </div>
+        </div>
+        <div class="price-bottom">
+          <div class="price-item">
+            <div class="pf500 fs12 fcA8A8A8">最大持仓量</div>
+            <div class="pf500 fs12 fc333333">0.215 BTC</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 class="price-bottom">
+          <div class="price-item">
+            <div class="pf500 fs12 fcA8A8A8">平仓数量</div>
+            <div class="pf500 fs12 fc333333">0.215 BTC</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>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .posit-history {
+    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: 202px;
+      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: 76px;
+          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: 6px;
+        width: 320px;
+        height: 85px;
+
+        .price-top {
+          .item-yingkui {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 320px;
+            height: 20px;
+
+            .copy {
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+              height: 20px;
+
+              img {
+                margin-left: 5px;
+              }
+            }
+          }
+        }
+
+        .price-bottom {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 9px;
+          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>