1，资产-委托详情 完成 2，资产-仓位详情-委托记录 完成 3，资产-仓位详情-成交记录 完成 4，资产-仓位详情-资金流水 完成 5，ICO-认购缺省页 完成 6，ICO-认购 完成 7，ICO-配售缺省页 完成 8，ICO-配售 完成

src/router/index.js

@@ -10,6 +10,9 @@ 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";
+import PositionDetails from "../views/asset/history/PositionDetails.vue";
+import IcoIndex from "../views/index/ico/Index.vue";
+import LoanIndex from "../views/index/loan/Index.vue";
 
 const routes = [
   {
@@ -67,6 +70,21 @@ const routes = [
     name: "entrustDetails",
     component: EntrustDetails,
   },
+  {
+    path: "/positionDetails",
+    name: "positionDetails",
+    component: PositionDetails,
+  },
+  {
+    path: "/icoIndex",
+    name: "icoIndex",
+    component: IcoIndex,
+  },
+  {
+    path: "/loanIndex",
+    name: "loanIndex",
+    component: LoanIndex,
+  },
 ];
 
 const router = createRouter({

src/views/asset/history/CommissionRecord.vue

@@ -0,0 +1,206 @@
+<template>
+  <!-- 仓位详情-委托记录 -->
+  <div class="commission-record">
+    <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="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>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const detailsClick = () => {
+    router.push("/entrustDetails");
+  };
+</script>
+<style lang="less" scoped>
+  .commission-record {
+    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/CurrentEntrustment.vue

@@ -1,7 +1,11 @@
 <template>
   <!-- 当前委托 -->
   <div class="details-main">
-    <div class="details-item" v-for="(item, index) in 2" :key="index">
+    <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" />
@@ -50,7 +54,15 @@
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const detailsClick = () => {
+    router.push("/entrustDetails");
+  };
+</script>
 <style lang="less" scoped>
   .details-main {
     display: flex;

src/views/asset/history/EntrustDetails.vue

@@ -18,6 +18,63 @@
       <div class="pf500 fs14 fc666666">已实现盈亏</div>
       <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
     </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">委托类型</div>
+      <div class="pf500 fs12 fc666666">市价</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">委托总量</div>
+      <div class="pf500 fs12 fc666666">12.1890 USDT</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">已成交量</div>
+      <div class="pf500 fs12 fc666666">0.252 USDT</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">委托价格</div>
+      <div class="pf500 fs12 fc666666">市价</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">成交价格</div>
+      <div class="pf500 fs12 fc666666">13,339.20</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">手续费</div>
+      <div class="pf500 fs12 fc666666">25.840030 USDT</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">创建时间</div>
+      <div class="pf500 fs12 fc666666">2025-11-04, 16:30</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">更新时间</div>
+      <div class="pf500 fs12 fc666666">2025-11-04, 16:30</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">订单号</div>
+      <div class="copy pf500 fs12 fcA8A8A8">
+        2508050505052008502060
+        <img src="../../../assets/icon/asset/CopySimple.svg" alt="" />
+      </div>
+    </div>
+    <div class="transaction-record">
+      <div class="record-text pf600 fs14 fc121212">成交记录</div>
+      <div class="record-head pf500 fs12 fcA8A8A8">
+        <div class="head-number">成交数量(USDT)</div>
+        <div class="head-price">成交价</div>
+        <div class="head-time">时间</div>
+      </div>
+      <div class="record-body">
+        <div
+          class="record-item pf500 fs12 fc333333"
+          v-for="(item, index) in 3"
+          :key="index">
+          <div class="record-number">0.215 USDT</div>
+          <div class="record-price">103.250805</div>
+          <div class="record-time">2025-11-04, 16:30</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -110,6 +167,85 @@
       align-items: center;
       width: 349px;
       height: 20px;
+
+      .copy {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 20px;
+
+        img {
+          margin-left: 5px;
+        }
+      }
+    }
+
+    .transaction-record {
+      margin-top: 16px;
+      width: 349px;
+
+      .record-head {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        margin-top: 12px;
+        width: 100%;
+
+        .head-number {
+          width: 130px;
+          height: 18px;
+          line-height: 18px;
+          text-align: left;
+        }
+
+        .head-price {
+          width: 100px;
+          height: 18px;
+          line-height: 18px;
+          text-align: center;
+        }
+
+        .head-time {
+          width: 119px;
+          height: 18px;
+          line-height: 18px;
+          text-align: right;
+        }
+      }
+
+      .record-body {
+        width: 100%;
+
+        .record-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          margin-top: 4px;
+          width: 100%;
+
+          .record-number {
+            width: 130px;
+            height: 18px;
+            line-height: 18px;
+            text-align: left;
+          }
+
+          .record-price {
+            width: 100px;
+            height: 18px;
+            line-height: 18px;
+            text-align: center;
+          }
+
+          .record-time {
+            width: 119px;
+            height: 18px;
+            line-height: 18px;
+            text-align: right;
+          }
+        }
+      }
     }
   }
 </style>

src/views/asset/history/HistoricalEntrustment.vue

@@ -1,7 +1,11 @@
 <template>
   <!-- 历史委托 -->
   <div class="history-entrust">
-    <div class="details-item" v-for="(item, index) in 2" :key="index">
+    <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" />
@@ -46,7 +50,15 @@
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const detailsClick = () => {
+    router.push("/entrustDetails");
+  };
+</script>
 <style lang="less" scoped>
   .history-entrust {
     display: flex;

src/views/asset/history/HistoricalTransactions.vue

@@ -35,15 +35,15 @@
         </div>
         <div class="price-bottom">
           <div class="price-item">
-            <div class="pf500 fs12 fcA8A8A8">保证金</div>
+            <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 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 fcA8A8A8">手续费</div>
             <div class="pf500 fs12 fc333333">0.215 USDT</div>
           </div>
         </div>

src/views/asset/history/MoneyFlow.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 仓位详情-资金流水 -->
+  <div class="money-flow">
+    <div class="flow-item" v-for="(item, index) in 2" :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>
+  .money-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/PositionDetails.vue

@@ -0,0 +1,238 @@
+<template>
+  <!-- 仓位详情 -->
+  <HeaderNav headerText="仓位详情"></HeaderNav>
+  <div class="position-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>
+    <div class="details-first margin-top10">
+      <div class="pf500 fs14 fc666666">已实现盈亏</div>
+      <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">平仓类型</div>
+      <div class="pf500 fs12 fc666666">主动平仓</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">开仓价格</div>
+      <div class="pf500 fs12 fc666666">12.1890 USDT</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">平仓价格</div>
+      <div class="pf500 fs12 fc666666">0.252 USDT</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">最大持仓量</div>
+      <div class="pf500 fs12 fc666666">1.502 BTC</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">平仓数量</div>
+      <div class="pf500 fs12 fc666666">1.502 BTC</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">开仓时间</div>
+      <div class="pf500 fs12 fc666666">2025-11-04, 16:30</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">平仓时间</div>
+      <div class="pf500 fs12 fc666666">2025-11-04, 16:30</div>
+    </div>
+    <div class="details-first margin-top12">
+      <div class="pf500 fs14 fc666666">订单号</div>
+      <div class="copy pf500 fs12 fcA8A8A8">
+        2508050505052008502060
+        <img src="../../../assets/icon/asset/CopySimple.svg" alt="" />
+      </div>
+    </div>
+    <div class="flow-item">
+      <div class="item-first">
+        <div class="pf500 fs16 fc2C3131">已实现盈亏</div>
+        <div class="pf500 fs14 fc45B26B">+0.2015 USDT</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">平仓盈亏</div>
+        <div class="pf500 fs12 fc666666">-0.252 USDT</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">手续费</div>
+        <div class="pf500 fs12 fc666666">-0.252 USDT</div>
+      </div>
+      <div class="item-first">
+        <div class="pf500 fs12 fc666666">资金费用</div>
+        <div class="pf500 fs12 fc666666">0.00 USDT</div>
+      </div>
+    </div>
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212" @click="messageChange('commissionRecord')">
+        委托记录
+      </div>
+      <div
+        class="sys-notifi pf600 fs14 fcA8A8A8"
+        @click="messageChange('transactionRecord')">
+        成交记录
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('moneyFlow')">
+        资金流水
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../index/components/HeaderNav.vue";
+  import CommissionRecord from "./CommissionRecord.vue";
+  import MoneyFlow from "./MoneyFlow.vue";
+  import TransactionRecord from "./TransactionRecord.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("commissionRecord");
+  const componentsMap = {
+    commissionRecord: CommissionRecord,
+    moneyFlow: MoneyFlow,
+    transactionRecord: TransactionRecord,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .position-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 100px;
+    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;
+            }
+          }
+        }
+      }
+    }
+
+    .details-first {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 349px;
+      height: 20px;
+
+      .copy {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 20px;
+
+        img {
+          margin-left: 5px;
+        }
+      }
+    }
+
+    .flow-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 14px;
+      width: 345px;
+      height: 108px;
+      border-radius: 8px;
+      background: #f5f5f5;
+
+      .item-first {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 5px;
+        width: 320px;
+        height: 20px;
+      }
+    }
+
+    .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: 23px;
+      }
+    }
+  }
+</style>

src/views/asset/history/PositionHistory.vue

@@ -1,7 +1,11 @@
 <template>
   <!-- 仓位历史 -->
   <div class="posit-history">
-    <div class="details-item" v-for="(item, index) in 2" :key="index">
+    <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" />
@@ -62,7 +66,15 @@
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const detailsClick = () => {
+    router.push("/positionDetails");
+  };
+</script>
 <style lang="less" scoped>
   .posit-history {
     display: flex;

src/views/asset/history/TransactionRecord.vue

@@ -0,0 +1,200 @@
+<template>
+  <!-- 仓位详情-成交记录 -->
+  <div class="commission-record">
+    <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>
+  .commission-record {
+    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;
+        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/index/Index.vue

@@ -37,7 +37,11 @@
       <img src="../../assets/img/index/Rectangle 1.png" alt="" />
     </div>
     <div class="index-menu">
-      <div class="menu-item" v-for="(item, index) in indexMenu" :key="index">
+      <div
+        class="menu-item"
+        v-for="(item, index) in indexMenu"
+        :key="index"
+        @click="goMenu(index)">
         <img :src="item.image" alt="" />
         <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
       </div>
@@ -86,6 +90,14 @@
     },
   ];
 
+  const goMenu = (index) => {
+    if (index == 0) {
+      router.push("/icoIndex");
+    } else if (index == 2) {
+      router.push("/loanIndex");
+    }
+  };
+
   const goSearch = () => {
     router.push("/searchIcon");
   };

src/views/index/ico/Index.vue

@@ -0,0 +1,64 @@
+<template>
+  <!-- ICO-首页 -->
+  <HeaderNav headerText="ICO"></HeaderNav>
+  <div class="ico-index">
+    <div class="index-classifi">
+      <div class="pf600 fs18 fc121212" @click="messageChange('subscription')">认购</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('placement')">
+        配售
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('lotteryResult')">
+        中签结果
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('coinPreview')">
+        新币预览
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('relus')">
+        ICO规则
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+  import CoinPreview from "./CoinPreview.vue";
+  import LotteryResult from "./LotteryResult.vue";
+  import Placement from "./Placement.vue";
+  import Relus from "./Relus.vue";
+  import Subscription from "./Subscription.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("subscription");
+  const componentsMap = {
+    coinPreview: CoinPreview,
+    lotteryResult: LotteryResult,
+    placement: Placement,
+    relus: Relus,
+    subscription: Subscription,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .ico-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    .index-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 48px;
+      width: 349px;
+      height: 24px;
+    }
+  }
+</style>

src/views/index/ico/Placement.vue

@@ -0,0 +1,132 @@
+<template>
+  <!-- 配售 -->
+  <div class="placement">
+    <div class="subscription-content" v-if="subscriptionData > 0">
+      <div class="subscription-head pf400 fs12 fc666666">
+        <div class="head-name">名称</div>
+        <div class="head-price">单价</div>
+        <div class="head-operate">操作</div>
+      </div>
+      <div class="subscription-body">
+        <div
+          class="subscription-item"
+          v-for="(item, index) in subscriptionData"
+          :key="index">
+          <div class="item-name pf400 fs14 fc2C3131">MFEIANS</div>
+          <div class="item-price pf400 fs14 fc2C3131">13.3156</div>
+          <div class="item-operate">
+            <div class="text pf500 fs12 fcFFFFFF">配售</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subscription-null" v-else>
+      <img
+        src="../../../assets/icon/index/subscription-null.svg"
+        class="img-null"
+        alt="" />
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from "vue";
+
+  const subscriptionData = ref(6);
+</script>
+<style lang="less" scoped>
+  .placement {
+    width: 349px;
+
+    .subscription-content {
+      margin-top: 10px;
+      width: 100%;
+
+      .subscription-head {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        width: 100%;
+        height: 24px;
+
+        .head-name {
+          width: 116px;
+          height: 24px;
+          line-height: 24px;
+          text-align: left;
+          letter-spacing: 0.17px;
+        }
+
+        .head-price {
+          width: 117px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          letter-spacing: 0.17px;
+        }
+
+        .head-operate {
+          width: 116px;
+          height: 24px;
+          line-height: 24px;
+          text-align: right;
+          letter-spacing: 0.17px;
+        }
+      }
+
+      .subscription-body {
+        width: 100%;
+
+        .subscription-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          margin-top: 13px;
+          padding-bottom: 13px;
+          width: 100%;
+          border-bottom: 1px solid #f5f5f5;
+
+          .item-name {
+            width: 116px;
+            height: 24px;
+            line-height: 24px;
+            text-align: left;
+            letter-spacing: 0.17px;
+          }
+
+          .item-price {
+            width: 117px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            letter-spacing: 0.17px;
+          }
+
+          .item-operate {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            width: 116px;
+            height: 24px;
+
+            .text {
+              width: 61px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              border-radius: 5px;
+              background: #df384c;
+            }
+          }
+        }
+      }
+    }
+
+    .subscription-null {
+      .img-null {
+        margin-top: 117px;
+        width: 343px;
+        height: 267px;
+      }
+    }
+  }
+</style>

src/views/index/ico/Subscription.vue

@@ -0,0 +1,132 @@
+<template>
+  <!-- 认购 -->
+  <div class="subscription">
+    <div class="subscription-content" v-if="subscriptionData > 0">
+      <div class="subscription-head pf400 fs12 fc666666">
+        <div class="head-name">名称</div>
+        <div class="head-price">单价</div>
+        <div class="head-operate">操作</div>
+      </div>
+      <div class="subscription-body">
+        <div
+          class="subscription-item"
+          v-for="(item, index) in subscriptionData"
+          :key="index">
+          <div class="item-name pf400 fs14 fc2C3131">Bitcoin</div>
+          <div class="item-price pf400 fs14 fc2C3131">15.3156</div>
+          <div class="item-operate">
+            <div class="text pf500 fs12 fcFFFFFF">认购</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="subscription-null" v-else>
+      <img
+        src="../../../assets/icon/index/subscription-null.svg"
+        class="img-null"
+        alt="" />
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from "vue";
+
+  const subscriptionData = ref(6);
+</script>
+<style lang="less" scoped>
+  .subscription {
+    width: 349px;
+
+    .subscription-content {
+      margin-top: 10px;
+      width: 100%;
+
+      .subscription-head {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        width: 100%;
+        height: 24px;
+
+        .head-name {
+          width: 116px;
+          height: 24px;
+          line-height: 24px;
+          text-align: left;
+          letter-spacing: 0.17px;
+        }
+
+        .head-price {
+          width: 117px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          letter-spacing: 0.17px;
+        }
+
+        .head-operate {
+          width: 116px;
+          height: 24px;
+          line-height: 24px;
+          text-align: right;
+          letter-spacing: 0.17px;
+        }
+      }
+
+      .subscription-body {
+        width: 100%;
+
+        .subscription-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          margin-top: 13px;
+          padding-bottom: 13px;
+          width: 100%;
+          border-bottom: 1px solid #f5f5f5;
+
+          .item-name {
+            width: 116px;
+            height: 24px;
+            line-height: 24px;
+            text-align: left;
+            letter-spacing: 0.17px;
+          }
+
+          .item-price {
+            width: 117px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            letter-spacing: 0.17px;
+          }
+
+          .item-operate {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            width: 116px;
+            height: 24px;
+
+            .text {
+              width: 61px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              border-radius: 5px;
+              background: #45b26b;
+            }
+          }
+        }
+      }
+    }
+
+    .subscription-null {
+      .img-null {
+        margin-top: 117px;
+        width: 343px;
+        height: 267px;
+      }
+    }
+  }
+</style>