1，理财首页 完成 2，我的理财 完成 3，理财购买 完成

src/router/index.js

@@ -32,6 +32,9 @@ import TransferHistory from "../views/index/recharge/TransferHistory.vue";
 import UserAsset from "../views/asset/UserAsset.vue";
 import RechargeHistory from "../views/index/recharge/RechargeHistory.vue";
 import WithdrawHistory from "../views/index/recharge/WithdrawHistory.vue";
+import FinancialIndex from "../views/index/financial/Index.vue";
+import FinancialBuy from "../views/index/financial/Buy.vue";
+import MyFinancial from "../views/index/financial/MyFinancial.vue";
 
 const routes = [
   {
@@ -201,6 +204,21 @@ const routes = [
     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/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>