Merge branch 'main' into web3_transection

# Conflicts:
#	src/router/index.js

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.13.2",
-        "klinecharts": "^8.6.3",
+        "klinecharts": "^10.0.0-beta1",
         "vant": "^4.9.21",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
@@ -4273,9 +4273,9 @@
       }
     },
     "node_modules/klinecharts": {
-      "version": "8.6.3",
-      "resolved": "https://registry.npmjs.org/klinecharts/-/klinecharts-8.6.3.tgz",
-      "integrity": "sha512-hGDtWiMNywEDneZFmt+vZ6tOYutCDWV5FPBcXcn7L8kGwe73Q5yJayk8UzP9pIQSBWyxswWIySKh/BVFA6GhuQ==",
+      "version": "10.0.0-beta1",
+      "resolved": "https://registry.npmjs.org/klinecharts/-/klinecharts-10.0.0-beta1.tgz",
+      "integrity": "sha512-5ZxFGjJeZqt9+q45lZDhApC3kdgrk51i27uSpIELgXJLNgfSc0anlb8XkU+52LVrBYnTv9dFr8/Q7lG81vIV1w==",
       "license": "Apache-2.0"
     },
     "node_modules/klona": {

package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "axios": "^1.13.2",
-    "klinecharts": "^8.6.3",
+    "klinecharts": "^10.0.0-beta1",
     "vant": "^4.9.21",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",

src/router/index.js

@@ -83,15 +83,17 @@ const routes = [
             meta: { title: '期权' },
           },
 
-          {
-            path: 'margin',
-            name: 'TradeMargin',
-            component: TradeMargin,
-            meta: { title: '杠杆' }
-          },
-          { path: 'settings',
-            name: 'TradeSettings',
-            component: TradeSettings },
+                    {
+                        path: "margin",
+                        name: "TradeMargin",
+                        component: TradeMargin,
+                        meta: {title: "杠杆"},
+                    },
+                    {
+                        path: 'settings',
+                        name: 'TradeSettings',
+                        component: TradeSettings
+                    },
 
          ]
         },
@@ -323,6 +325,31 @@ const routes = [
         name: "userLoanIndex",
         component: UserLoanIndex,
     },
+    {
+        path: "/rechargeHistory",
+        name: "rechargeHistory",
+        component: RechargeHistory,
+    },
+    {
+        path: "/withdrawHistory",
+        name: "withdrawHistory",
+        component: WithdrawHistory,
+    },
+    {
+        path: "/financialIndex",
+        name: "financialIndex",
+        component: FinancialIndex,
+    },
+    {
+        path: "/financialBuy",
+        name: "financialBuy",
+        component: FinancialBuy,
+    },
+    {
+        path: "/myFinancial",
+        name: "myFinancial",
+        component: MyFinancial,
+    },
 ];
 
 const router = createRouter({

src/views/HomeIndex.vue

@@ -6,7 +6,7 @@
         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"
@@ -28,7 +28,7 @@
 
   const tabbarChange = (key, path) => {
     current.value = key;
-    router.push('/'+key);
+    router.push(path);
   };
 
   const tabbarList = [
@@ -62,6 +62,7 @@
     },
     {
       key: "user",
+      path: "/userIndex",
       image: require("@/assets/icon/tabbar/user-circle.png"),
       selectedImage: require("@/assets/icon/tabbar/user-circle.png"),
       text: "我的",

src/views/asset/myAsset/FinancialManagement.vue

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

src/views/asset/myAsset/Lever.vue

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

src/views/asset/myAsset/MiaoContract.vue

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

src/views/asset/myAsset/Option.vue

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

src/views/index/Index.vue

@@ -93,6 +93,8 @@
   const goMenu = (index) => {
     if (index == 0) {
       router.push("/icoIndex");
+    } else if (index == 1) {
+      router.push("/financialIndex");
     } else if (index == 2) {
       router.push("/loanIndex");
     } else if (index == 6) {

src/views/index/financial/Buy.vue

@@ -0,0 +1,257 @@
+<template>
+  <!-- 理财购买 -->
+  <HeaderNav headerText="理财"></HeaderNav>
+  <div class="financial-buy">
+    <div class="item-name">
+      <img src="@/assets/icon/coin/bnb.svg" alt="" />
+      <div class="coin-name">
+        <div class="first pf500 fs14 fc1F2937">Bitcoin定期</div>
+        <div class="second pf400 fs10 fcA9A9A9">定期</div>
+      </div>
+    </div>
+    <div class="product">
+      <div class="product-item pf500 fcFFFFFF" v-for="(item, index) in 3" :key="index">
+        <div class="rate fs14">4.50%</div>
+        <div class="date fs12">30天</div>
+      </div>
+    </div>
+    <div class="number">
+      <div class="number-left pf400 fs14 fc333333">数量</div>
+      <div class="number-right pf400 fs12 fc333333">
+        <input type="checkbox" class="checkbox" v-model="autoBuyFlag" />自动申购
+      </div>
+    </div>
+    <div class="number-input">
+      <input type="text" class="input pf400 fs14 fc333333" placeholder="最少1000.00" />
+      <div class="all pf400 fs14 fc333333">USDT <span class="fcDF384C">全部</span></div>
+    </div>
+    <div class="use-number pf400 fs12 fc333333">可用&nbsp; 215.0508 USDT</div>
+    <div class="message margin-top20 pf500 fs14 fc666666">
+      <div>理财周期</div>
+      <div>30天</div>
+    </div>
+    <div class="message margin-top28 pf500 fs14 fc666666">
+      <div>预估每日收益</div>
+      <div>0.1215 USDT</div>
+    </div>
+    <div class="message margin-top28 pf500 fs14 fc666666">
+      <div>预估总收益</div>
+      <div>20 USDT</div>
+    </div>
+    <div class="message margin-top28 pf500 fs14 fc666666">
+      <div>收益率</div>
+      <div>4.50%</div>
+    </div>
+    <div class="profit-statement">
+      <div class="title pf500 fs14 fc333333">收益说明</div>
+      <div class="desc pf400 fs12 fc999999">
+        定期理财为固定利率方式计息，计息开始时间为申购日次日 <br />
+        到期后本息自动发放到账户余额
+      </div>
+    </div>
+    <div class="submit pf600 fs14 fcFFFFFF">立即购买</div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+  import CheckBox from "../../../components/ui/CheckBox.vue.vue";
+  import { ref } from "vue";
+
+  const autoBuyFlag = ref(true);
+</script>
+<style lang="less" scoped>
+  .financial-buy {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .margin-top20 {
+      margin-top: 20px;
+    }
+
+    .margin-top28 {
+      margin-top: 28px;
+    }
+
+    .item-name {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      width: 345px;
+      height: 34px;
+
+      img {
+        width: 32px;
+        height: 32px;
+      }
+
+      .coin-name {
+        margin-left: 10px;
+        height: 34px;
+
+        .first {
+          height: 20px;
+          line-height: 20px;
+        }
+
+        .second {
+          height: 14px;
+          line-height: 14px;
+        }
+      }
+    }
+
+    .product {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 0 11px;
+      margin-top: 24.5px;
+      width: 345px;
+      height: 70px;
+      box-sizing: border-box;
+
+      .product-item {
+        width: 95px;
+        height: 100%;
+
+        .rate {
+          width: 100%;
+          height: 41px;
+          line-height: 41px;
+          text-align: center;
+          border-radius: 6px 6px 0 0;
+          background: #df384c;
+          letter-spacing: 0.53px;
+        }
+
+        .date {
+          width: 100%;
+          height: 29px;
+          line-height: 29px;
+          text-align: center;
+          background: #ff8282cc;
+          border-radius: 0 0 6px 6px;
+          letter-spacing: 0.53px;
+        }
+      }
+    }
+
+    .number {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 19px;
+      width: 345px;
+      height: 24px;
+
+      .number-left {
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .number-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 24px;
+
+        .checkbox {
+          margin-right: 6px;
+          width: 16px;
+          height: 16px;
+          border-radius: 4px;
+          background: #ffffff;
+          border: 1px solid #a8a8a8;
+          appearance: none;
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          cursor: pointer;
+          position: relative;
+        }
+
+        .checkbox:checked::after {
+          content: "✓";
+          font-size: 12px;
+          color: black; /* 默认对号颜色 */
+          position: absolute;
+          left: 2.5px;
+          top: 0.6px;
+        }
+      }
+    }
+
+    .number-input {
+      position: relative;
+      margin-top: 5px;
+      width: 345px;
+      height: 45px;
+
+      .input {
+        padding-left: 11px;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border-radius: 6px;
+        border: none;
+        outline: none;
+        background: #f5f5f5;
+      }
+
+      .all {
+        position: absolute;
+        top: 13px;
+        right: 11px;
+      }
+    }
+
+    .use-number {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 7px;
+      width: 345px;
+      height: 18px;
+    }
+
+    .message {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 345px;
+      height: 18px;
+    }
+
+    .profit-statement {
+      margin-top: 36px;
+      width: 345px;
+
+      .title {
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .desc {
+        line-height: 20px;
+      }
+    }
+
+    .submit {
+      margin-top: 72px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+      letter-spacing: 0.2px;
+    }
+  }
+</style>

src/views/index/financial/Index.vue

@@ -0,0 +1,278 @@
+<template>
+  <!-- 理财首页 -->
+  <HeaderNav headerText="理财"></HeaderNav>
+  <div class="financial-index">
+    <div class="asset-total">
+      <div class="my-asset">
+        <div class="total-left">
+          <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="total-right pf500 fs12 fcFFFFFF" @click="goMyFinancial">我的理财</div>
+      </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="advertisement">
+      <img src="@/assets/img/index/Rectangle 1.svg" alt="" />
+    </div>
+    <div class="index-menu">
+      <div class="menu-item" v-for="(item, index) in indexMenu" :key="index">
+        <img :src="item.image" alt="" />
+        <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
+      </div>
+    </div>
+    <div class="recommend">
+      <div class="title pf600 fs18 fc121212">理财推荐</div>
+      <div class="recomment-body">
+        <div
+          class="recomment-item"
+          v-for="(item, index) in 5"
+          :key="index"
+          @click="goFinancialBuy">
+          <div class="item-left">
+            <img src="@/assets/icon/coin/bnb.svg" alt="" />
+            <div class="item-time">
+              <div class="time-top pf500 fs14 fc2C3131">Bitcoin定期</div>
+              <div class="time-bottom pf400 fs10 fcA9A9A9">定期</div>
+            </div>
+          </div>
+          <div class="item-right">
+            <div class="time-top pf500 fs14 fc2C3131">0.35%</div>
+            <div class="time-bottom pf400 fs10 fcA9A9A9">15天</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const goMyFinancial = () => {
+    router.push("/myFinancial");
+  };
+
+  const goFinancialBuy = () => {
+    router.push("/financialBuy");
+  };
+
+  const indexMenu = [
+    {
+      name: "云算力",
+      image: require("@/assets/icon/index/yunsuanli.svg"),
+    },
+    {
+      name: "贷款",
+      image: require("@/assets/icon/index/daikuan.svg"),
+    },
+    {
+      name: "质押",
+      image: require("@/assets/icon/index/zhiya.svg"),
+    },
+  ];
+</script>
+<style lang="less" scoped>
+  .financial-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .asset-total {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 17px;
+      width: 343px;
+
+      .my-asset {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 343px;
+        align-items: center;
+
+        .total-left {
+          .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;
+          }
+        }
+
+        .total-right {
+          width: 76px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          border-radius: 5px;
+          background: #df384c;
+        }
+      }
+
+      .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;
+          }
+        }
+      }
+    }
+
+    .advertisement {
+      margin-top: 10px;
+      width: 345px;
+      height: 85px;
+    }
+
+    .index-menu {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 15px;
+      width: 269px;
+      height: 57px;
+
+      .menu-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 57px;
+        height: 57px;
+
+        img {
+          width: 32px;
+          height: 32px;
+        }
+
+        .item-text {
+          margin-top: 1px;
+          height: 24px;
+          line-height: 24px;
+          letter-spacing: 0.2px;
+        }
+      }
+    }
+
+    .recommend {
+      width: 345px;
+
+      .title {
+        margin-top: 15px;
+        height: 24px;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      .recomment-body {
+        margin-top: 13px;
+        width: 100%;
+
+        .recomment-item {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-top: 25px;
+          height: 34px;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .item-left {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+
+            img {
+              width: 32px;
+              height: 32px;
+            }
+
+            .item-time {
+              margin-left: 10px;
+              height: 34px;
+
+              .time-top {
+                height: 20px;
+                line-height: 20px;
+              }
+
+              .time-bottom {
+                height: 14px;
+                line-height: 14px;
+              }
+            }
+          }
+
+          .item-right {
+            height: 34px;
+
+            .time-top {
+              height: 20px;
+              line-height: 20px;
+            }
+
+            .time-bottom {
+              height: 14px;
+              line-height: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/index/financial/MyFinancial.vue

@@ -0,0 +1,135 @@
+<template>
+  <!-- 我的理财 -->
+  <HeaderNav headerText="我的理财"></HeaderNav>
+  <div class="my-financial">
+    <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 pf600 fs14 fc1F2937">
+            <div>Bitcoin定期</div>
+            <div class="pf400 fs12">申购数量</div>
+          </div>
+          <div class="info-bottom">
+            <div class="pf400 fs10 fcA9A9A9">定期</div>
+            <div class="pf600 fs14 fc1F2937">1,125,158.00</div>
+          </div>
+        </div>
+      </div>
+      <div class="item-line"></div>
+      <div class="item-use pf500 fs12 margin-top10">
+        <div class="fcA8A8A8">理财周期</div>
+        <div class="fcDF384C">15 天</div>
+      </div>
+      <div class="item-use pf500 fs12 margin-top4">
+        <div class="fcA8A8A8">预估每日收益</div>
+        <div class="fc767676">0.45 USDT</div>
+      </div>
+      <div class="item-use pf500 fs12 margin-top4">
+        <div class="fcA8A8A8">预估总收益</div>
+        <div class="fc767676">0.45 USDT</div>
+      </div>
+      <div class="item-use pf500 fs12 margin-top4">
+        <div class="fcA8A8A8">收益率</div>
+        <div class="fc767676">0.16%</div>
+      </div>
+      <div class="conduct-btn pf600 fs14 fcFFFFFF">进行中</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .my-financial {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .coin-item {
+      padding-left: 19px;
+      padding-right: 11px;
+      margin-top: 10px;
+      width: 345px;
+      height: 209px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+      box-sizing: border-box;
+
+      .item-name {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 12.5px;
+        width: 100%;
+        height: 34px;
+
+        img {
+          width: 32px;
+          height: 32px;
+        }
+
+        .item-info {
+          width: calc(345px - 40px - 30px);
+          height: 34px;
+
+          .info-top {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            height: 20px;
+          }
+
+          .info-bottom {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            height: 14px;
+          }
+        }
+      }
+
+      .item-line {
+        margin-top: 10px;
+        width: 100%;
+        height: 1px;
+        background: #e9e9e9;
+      }
+
+      .margin-top10 {
+        margin-top: 10px;
+      }
+
+      .margin-top4 {
+        margin-top: 4px;
+      }
+
+      .item-use {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 18px;
+      }
+
+      .conduct-btn {
+        margin-top: 8px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+        letter-spacing: 0.2px;
+      }
+    }
+  }
+</style>

src/views/index/recharge/ChangeCoin.vue

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

src/views/index/recharge/RechargeHistory.vue

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

src/views/index/recharge/RechargeIndex.vue

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

src/views/index/recharge/WithdrawHistory.vue

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

src/views/index/recharge/WithdrawIndex.vue

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