1，ICO-中签结果-认购 完成 2，ICO-中签结果-配售 完成 3，ICO-新币预览 完成 4，ICO-ICO规则 完成 5，ICO-查看币种详情 完成 6，贷款-首页 完成 7，用户-我的贷款 完成50%

src/assets/icon/index/Headphones.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9272 5.12437C18.03 4.21817 16.9629 3.49783 15.7869 3.0046C14.611 2.51137 13.3493 2.25494 12.0741 2.25H12C9.41414 2.25 6.93419 3.27723 5.10571 5.10571C3.27723 6.93419 2.25 9.41414 2.25 12V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5H6C6.59674 19.5 7.16903 19.2629 7.59099 18.841C8.01295 18.419 8.25 17.8467 8.25 17.25V13.5C8.25 12.9033 8.01295 12.331 7.59099 11.909C7.16903 11.4871 6.59674 11.25 6 11.25H3.78375C3.97087 9.20025 4.91742 7.29448 6.43759 5.90683C7.95776 4.51919 9.94173 3.7499 12 3.75H12.0628C14.1125 3.75866 16.0851 4.53253 17.5939 5.91993C19.1027 7.30733 20.0389 9.20822 20.2191 11.25H18C17.4033 11.25 16.831 11.4871 16.409 11.909C15.9871 12.331 15.75 12.9033 15.75 13.5V17.25C15.75 17.8467 15.9871 18.419 16.409 18.841C16.831 19.2629 17.4033 19.5 18 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V12C21.7549 10.7246 21.5081 9.46077 21.0237 8.28093C20.5393 7.10108 19.8268 6.02841 18.9272 5.12437ZM6 12.75C6.19891 12.75 6.38968 12.829 6.53033 12.9697C6.67098 13.1103 6.75 13.3011 6.75 13.5V17.25C6.75 17.4489 6.67098 17.6397 6.53033 17.7803C6.38968 17.921 6.19891 18 6 18H4.5C4.30109 18 4.11032 17.921 3.96967 17.7803C3.82902 17.6397 3.75 17.4489 3.75 17.25V12.75H6ZM20.25 17.25C20.25 17.4489 20.171 17.6397 20.0303 17.7803C19.8897 17.921 19.6989 18 19.5 18H18C17.8011 18 17.6103 17.921 17.4697 17.7803C17.329 17.6397 17.25 17.4489 17.25 17.25V13.5C17.25 13.3011 17.329 13.1103 17.4697 12.9697C17.6103 12.829 17.8011 12.75 18 12.75H20.25V17.25Z" fill="#1F2937"/>
+</svg>

src/assets/icon/user/Eye.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4569 7.7975C15.435 7.74813 14.9056 6.57375 13.7287 5.39687C12.1606 3.82875 10.18 3 7.99999 3C5.81999 3 3.83937 3.82875 2.27124 5.39687C1.09437 6.57375 0.562494 7.75 0.543119 7.7975C0.51469 7.86144 0.5 7.93064 0.5 8.00062C0.5 8.0706 0.51469 8.1398 0.543119 8.20375C0.564994 8.25312 1.09437 9.42688 2.27124 10.6038C3.83937 12.1713 5.81999 13 7.99999 13C10.18 13 12.1606 12.1713 13.7287 10.6038C14.9056 9.42688 15.435 8.25312 15.4569 8.20375C15.4853 8.1398 15.5 8.0706 15.5 8.00062C15.5 7.93064 15.4853 7.86144 15.4569 7.7975ZM7.99999 12C6.07624 12 4.39562 11.3006 3.00437 9.92188C2.43352 9.35418 1.94786 8.70685 1.56249 8C1.94776 7.29309 2.43343 6.64574 3.00437 6.07812C4.39562 4.69938 6.07624 4 7.99999 4C9.92374 4 11.6044 4.69938 12.9956 6.07812C13.5676 6.6456 14.0543 7.29295 14.4406 8C13.99 8.84125 12.0269 12 7.99999 12ZM7.99999 5C7.40665 5 6.82663 5.17595 6.33328 5.50559C5.83994 5.83524 5.45542 6.30377 5.22836 6.85195C5.00129 7.40013 4.94188 8.00333 5.05764 8.58527C5.17339 9.16721 5.45912 9.70176 5.87867 10.1213C6.29823 10.5409 6.83278 10.8266 7.41472 10.9424C7.99667 11.0581 8.59987 10.9987 9.14804 10.7716C9.69622 10.5446 10.1648 10.1601 10.4944 9.66671C10.824 9.17336 11 8.59334 11 8C10.9992 7.2046 10.6828 6.44202 10.1204 5.87959C9.55797 5.31716 8.79539 5.00083 7.99999 5ZM7.99999 10C7.60443 10 7.21775 9.8827 6.88885 9.66294C6.55996 9.44318 6.30361 9.13082 6.15224 8.76537C6.00086 8.39991 5.96125 7.99778 6.03842 7.60982C6.11559 7.22186 6.30608 6.86549 6.58578 6.58579C6.86549 6.30608 7.22185 6.1156 7.60981 6.03843C7.99778 5.96126 8.39991 6.00087 8.76536 6.15224C9.13081 6.30362 9.44317 6.55996 9.66293 6.88886C9.8827 7.21776 9.99999 7.60444 9.99999 8C9.99999 8.53043 9.78928 9.03914 9.41421 9.41421C9.03913 9.78929 8.53043 10 7.99999 10Z" fill="#1F2937"/>
+</svg>

src/router/index.js

@@ -13,6 +13,8 @@ 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";
+import LoanRules from "../views/index/loan/Rules.vue";
+import UserLoanIndex from "../views/user/loan/Index.vue";
 
 const routes = [
   {
@@ -85,6 +87,16 @@ const routes = [
     name: "loanIndex",
     component: LoanIndex,
   },
+  {
+    path: "/loanRules",
+    name: "loanRules",
+    component: LoanRules,
+  },
+  {
+    path: "/userLoanIndex",
+    name: "userLoanIndex",
+    component: UserLoanIndex,
+  },
 ];
 
 const router = createRouter({

src/views/index/ico/CoinPreview.vue

@@ -0,0 +1,93 @@
+<template>
+  <!-- 新币预览 -->
+  <div class="coin-preview">
+    <div class="subscription-head pf400 fs12 fc666666">
+      <div class="head-first">SN</div>
+      <div class="head-first">CD</div>
+      <div class="head-first">LD</div>
+      <div class="head-first">IP</div>
+      <div class="head-first">API</div>
+      <div class="head-first">SPD</div>
+      <div class="head-first">SPED</div>
+      <div class="head-first">FDLG</div>
+    </div>
+    <div class="subscription-body">
+      <div
+        class="subscription-item pf400 fs12 fc2C3131"
+        v-for="(item, index) in 5"
+        :key="index">
+        <div class="item-first">{{ index + 1 }}</div>
+        <div class="item-first">XYAN</div>
+        <div class="item-first">11/06</div>
+        <div class="item-first">66.3</div>
+        <div class="item-first">25.2%</div>
+        <div class="item-first">10/13</div>
+        <div class="item-first">10/13</div>
+        <div class="item-first">495%</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .coin-preview {
+    width: 349px;
+
+    .subscription-head {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      margin-top: 10px;
+      width: 100%;
+      height: 24px;
+
+      .head-first {
+        width: 44.5px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        letter-spacing: 0.17px;
+
+        &:first-child {
+          width: 31.5px;
+          text-align: left;
+        }
+
+        &:last-child {
+          width: 48.5px;
+          text-align: right;
+        }
+      }
+    }
+
+    .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-first {
+          width: 44.5px;
+          text-align: center;
+          letter-spacing: 0.17px;
+
+          &:first-child {
+            width: 31.5px;
+            text-align: left;
+          }
+
+          &:last-child {
+            width: 48.5px;
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/index/ico/LotteryResult.vue

@@ -0,0 +1,128 @@
+<template>
+  <!-- 中签结果 -->
+  <div class="lottery-result">
+    <div class="notifi-classifi">
+      <div class="pf600 fs14 fc121212">认购</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8">配售</div>
+    </div>
+    <div class="subscription-head pf400 fs12 fc666666">
+      <div class="head-flag">状态</div>
+      <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 6" :key="index">
+        <div class="item-flag pf500 fs12 fc2C3131">已完成</div>
+        <div class="item-name pf400 fs12 fc2C3131">Bitcoin</div>
+        <div class="item-price pf400 fs12 fc2C3131">0/0</div>
+        <div class="item-operate pf400 fs12 fc2C3131">2025-11-04 14:25:06</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .lottery-result {
+    width: 349px;
+
+    .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: 42px;
+      }
+    }
+
+    .subscription-head {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      margin-top: 14px;
+      width: 100%;
+      height: 24px;
+
+      .head-flag {
+        width: 40px;
+        height: 24px;
+        line-height: 24px;
+        text-align: left;
+        letter-spacing: 0.17px;
+      }
+
+      .head-name {
+        width: 106px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        letter-spacing: 0.17px;
+      }
+
+      .head-price {
+        width: 107px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        letter-spacing: 0.17px;
+      }
+
+      .head-operate {
+        width: 96px;
+        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-flag {
+          width: 40px;
+          height: 24px;
+          line-height: 24px;
+          text-align: left;
+          letter-spacing: 0.17px;
+        }
+
+        .item-name {
+          width: 106px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          letter-spacing: 0.17px;
+        }
+
+        .item-price {
+          width: 107px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          letter-spacing: 0.17px;
+        }
+
+        .item-operate {
+          width: 96px;
+          height: 24px;
+          text-align: right;
+        }
+      }
+    }
+  }
+</style>

src/views/index/ico/Relus.vue

@@ -0,0 +1,25 @@
+<template>
+  <!-- 规则 -->
+  <div class="rules pf400 fs14 fc666666">
+    ICO是区块链项目的众筹方式，通过出售代币（而非传统初创企业的股权）来筹集资金。开发团队通常在以太坊、BNB
+    Chain或Solana等智能合约平台上铸造固定数量的加密资产（多为实用型或治理型代币）。<br />
+    早期投资者可用ETH、BNB、USDC等主流加密货币以专属优惠价兑换新资产。这些资金将用于项目开发，而购入的代币可能随项目的成功而增值。<br />
+    ICO通常发生在项目未完成阶段，支持者可以押注未来的应用场景——如去中心化存储访问权、交易费折扣、治理投票权、质押收益等。自Filecoin和Bancor等项目瞬间募集数百万美元后，该模式已成为行业标准。<br />
+    尽管监管日益严格（尤其在美国，多数代币可能被认定为未注册证券），ICO在创新友好司法管辖区仍具热度。其核心特征包括：<br />
+    · 全球触达（任何互联网用户均可参与） <br />
+    · 通过现有智能合约网络实现快速结算<br />
+    · 资金流向透明可查（记录于公开区块链）<br />
+    但低准入门槛也伴随着骗局、过度承诺路线图及代码审计不足等风险。成功的ICO需要平衡大胆愿景与可验证进展，提供详尽的代币经济学模型及明确的法律披露。<br />
+    ICO如何运作？ <br />
+    简而言之，ICO遵循以下流程：团队发布白皮书→部署智能合约销售合约→收取加密货币并兑换新代币。<br />
+    然而表层流程背后，涉及法律审查、持续营销、社区讨论与流动性规划等复杂的环节——这些要素最终决定了项目成败。<br />
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .rules {
+    margin-top: 10px;
+    width: 349px;
+    line-height: 24px;
+  }
+</style>

src/views/index/loan/Index.vue

@@ -0,0 +1,237 @@
+<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 pf500 fs14 fcDF384C">
+        <img src="../../../assets/icon/index/Headphones.svg" alt="" />
+      </div>
+    </div>
+  </div>
+  <div class="loan-index">
+    <div class="loan-info">
+      <div class="info-left">
+        <img src="../../../assets/img/index/user/default-head.png" alt="" />
+        <div class="info-name">
+          <div class="pf500 fs18 fc121212">用户昵称</div>
+          <div class="pf400 fs14 fc6A7187">ID: 658908</div>
+        </div>
+      </div>
+      <div class="info-right"></div>
+    </div>
+    <div class="loan-product margin-top19 pf500 fs14 fc333333">
+      请选择借贷产品
+      <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+    </div>
+    <div class="loan-time margin-top10 pf500 fs14 fc333333">
+      <div>还款周期</div>
+      <div>15 天</div>
+    </div>
+    <div class="loan-price margin-top10">
+      <input type="text" class="input pf500 fs14 fc333333" placeholder="借贷金额" />
+      <div class="pf500 fs14 fc333333">USDT</div>
+    </div>
+    <div class="loan-range pf400 fs12 fc999999">借贷金额范围 10 USDT - 10000 USDT</div>
+    <div class="loan-desc margin-top16 pf500 fs14 fc666666">
+      <div>日利率</div>
+      <div>0.16%</div>
+    </div>
+    <div class="loan-desc margin-top26 pf500 fs14 fc666666">
+      <div>利息</div>
+      <div>100 USDT</div>
+    </div>
+    <div class="loan-desc margin-top26 pf500 fs14 fc666666">
+      <div>还款方式</div>
+      <div>到期一次性还清</div>
+    </div>
+    <div class="loan-desc margin-top26 pf500 fs14 fc666666">
+      <div>放款机构</div>
+      <div>SDFFG508020</div>
+    </div>
+    <div class="loan-btn pf600 fs14 fcFFFFFF">贷款</div>
+    <div class="loan-rules pf600 fs14 fcDF384C" @click="goRules">贷款规则</div>
+  </div>
+</template>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const goRules = () => {
+    router.push("/loanRules");
+  };
+</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: 15px;
+        width: 9px;
+        height: 16px;
+      }
+
+      .save {
+        position: absolute;
+        top: 10px;
+        right: 16px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .loan-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: calc(48px + 15px);
+    width: 100%;
+
+    .margin-top19 {
+      margin-top: 19px;
+    }
+
+    .margin-top10 {
+      margin-top: 10px;
+    }
+
+    .margin-top16 {
+      margin-top: 16px;
+    }
+
+    .margin-top26 {
+      margin-top: 26px;
+    }
+
+    .loan-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: calc(349px - 22px);
+      height: 90px;
+
+      .info-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        height: 56px;
+
+        img {
+          width: 56px;
+          height: 56px;
+        }
+
+        .info-name {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-evenly;
+          margin-left: 16px;
+          height: 56px;
+        }
+      }
+
+      .info-right {
+        width: 90px;
+        height: 90px;
+        background: pink;
+      }
+    }
+
+    .loan-product,
+    .loan-time {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 11px;
+      width: 349px;
+      height: 45px;
+      border-radius: 6px;
+      background: #f5f5f5;
+      box-sizing: border-box;
+
+      img {
+        width: 12px;
+        height: 8px;
+      }
+    }
+
+    .loan-price {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding-right: 11px;
+      width: 349px;
+      height: 45px;
+      background: #f5f5f5;
+      box-sizing: border-box;
+
+      .input {
+        padding-left: 11px;
+        width: 80%;
+        height: 100%;
+        box-sizing: border-box;
+        outline: none;
+        border: none;
+        border-radius: 6px;
+        background: #f5f5f5;
+      }
+    }
+
+    .loan-range {
+      margin-top: 7px;
+      width: 349px;
+      height: 18px;
+      line-height: 18px;
+    }
+
+    .loan-desc {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 349px;
+      height: 20px;
+    }
+
+    .loan-btn {
+      margin-top: 76px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c;
+    }
+
+    .loan-rules {
+      margin-top: 38px;
+    }
+  }
+</style>

src/views/index/loan/Rules.vue

@@ -0,0 +1,23 @@
+<template>
+  <HeaderNav headerText="规则"></HeaderNav>
+  <div class="loan-rules pf400 fs14 fc666666">
+    贷款审查应对贷款调查内容的合法性、合理性、准确性进行全面审查，重点关注调查人的尽职情况和借款人的偿还能力、信用状况、担保情况、抵（质）押比率、风险程度等。<br />
+    第二十条　贷款人应建立和完善风险评价机制，落实风险评价的责任部门和岗位。贷款风险评价应全面分析借款人的信用状况和还款能力，关注其收入与支出情况、偿债情况等，用于生产经营的还应对借款人经营情况和风险情况进行分析，采取定量和定性分析方法，全面、动态、审慎地进行贷款风险评价。对于提供担保的贷款，贷款人应当以全面评价借款人的偿债能力为前提，不得直接通过担保方式确定贷款金额和期限等要素。<br />
+    贷款人应建立和完善借款人信用风险评价体系，关注借款人各类融资情况，建立健全个人客户统一授信管理体系，并根据业务发展情况和风险控制需要，适时予以调整。<br />
+    第二十一条　贷款人应根据审慎性原则，完善授权管理制度，规范审批操作流程，明确贷款审批权限，实行审贷分离和授权审批，确保贷款审批按照授权独立审批贷款。<br />
+    贷款人通过线上方式进行自动化审批的，应当建立人工复审机制，作为对自动化审批的补充，并设定人工复审的触发条件。对贷后管理中发现自动化审批不能有效识别风险的，贷款人应当停止自动化审批流程。<br />
+    第二十二条　贷款人通过全线上方式开展的业务，应当符合互联网贷款相关规定。<br />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .loan-rules {
+    margin: 0 auto;
+    margin-top: 48px;
+    width: 345px;
+    line-height: 24px;
+    letter-spacing: 0.2px;
+  }
+</style>

src/views/user/loan/Index.vue

@@ -0,0 +1,144 @@
+<template>
+  <!-- 我的-贷款 -->
+  <HeaderNav headerText="我的贷款"></HeaderNav>
+  <div class="user-loan-index">
+    <div class="loan-money-text pf400 fs16 fc1F2937">
+      贷款金额(USDT)
+      <img src="../../../assets/icon/user/Eye.svg" alt="" />
+    </div>
+    <div class="loan-money-number pf600 fs32 fc1F2937">1,125,158.00</div>
+    <div class="loan-money-about pf500 fs16 fcDF384C">≈35,458.00</div>
+    <div class="repayment">
+      <div class="repayment-left">
+        <div class="title pf400 fs12 fc6A7187">已还款(USDT)</div>
+        <div class="number pf500 fs16 fc061237">5,678.00</div>
+      </div>
+      <div class="repayment-right">
+        <div class="title pf400 fs12 fc6A7187">已还款(USDT)</div>
+        <div class="number pf500 fs16 fc061237">5,678.00</div>
+      </div>
+    </div>
+    <img src="../../../assets/img/user/guanggao.svg" class="guanggao" alt="" />
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212" @click="messageChange('repaymenting')">还款中</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('repaid')">
+        已还款
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../index/components/HeaderNav.vue";
+  import Repaid from "./Repaid.vue";
+  import Repaymenting from "./Repaymenting.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("repaymenting");
+  const componentsMap = {
+    repaid: Repaid,
+    repaymenting: Repaymenting,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .user-loan-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+
+    .loan-money-text {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: calc(48px + 12px);
+      width: 345px;
+      height: 22px;
+      line-height: 22px;
+
+      img {
+        margin-left: 5px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .loan-money-number {
+      margin-top: 3px;
+      width: 345px;
+      height: 44px;
+      line-height: 44px;
+    }
+
+    .loan-money-about {
+      margin-top: 1px;
+      width: 345px;
+      height: 22px;
+      line-height: 22px;
+    }
+
+    .repayment {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 6px;
+      width: 345px;
+      height: 47px;
+
+      .repayment-left {
+        height: 47px;
+
+        .title {
+          height: 20px;
+          line-height: 20px;
+        }
+
+        .number {
+          height: 24px;
+          line-height: 24px;
+        }
+      }
+
+      .repayment-right {
+        height: 47px;
+
+        .title {
+          height: 20px;
+          line-height: 20px;
+        }
+
+        .number {
+          height: 24px;
+          line-height: 24px;
+        }
+      }
+    }
+
+    .guanggao {
+      margin-top: 10px;
+      width: 345px;
+      height: 85px;
+    }
+
+    .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: 42px;
+      }
+    }
+  }
+</style>

src/views/user/loan/Repaid.vue

@@ -0,0 +1,9 @@
+<template>
+  <!-- 已还款 -->
+  <div class="repaid">2</div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .repaid {
+  }
+</style>

src/views/user/loan/Repaymenting.vue

@@ -0,0 +1,104 @@
+<template>
+  <!-- 还款中 -->
+  <div class="repaymenting">
+    <div class="repaymenting-item">
+      <div class="item-name">
+        <div class="pf400 fs14 fc1F2937">贷款金额(USDT)</div>
+        <div class="pf500 fs14 fcDF384C">借贷产品名称</div>
+      </div>
+      <div class="item-number pf600 fs24 fc1F2937">1,125,158.00</div>
+      <div class="item-line"></div>
+      <div class="item-first margin-top11">
+        <div class="pf500 fs12 fcA8A8A8">还款周期</div>
+        <div class="pf500 fs12 fcDF384C">15 天</div>
+      </div>
+      <div class="item-first margin-top4">
+        <div class="pf500 fs12 fcA8A8A8">贷款时间</div>
+        <div class="pf500 fs12 fc767676">2025-11-04, 16:30</div>
+      </div>
+      <div class="item-first margin-top4">
+        <div class="pf500 fs12 fcA8A8A8">利息</div>
+        <div class="pf500 fs12 fc767676">5.45 USDT</div>
+      </div>
+      <div class="item-first margin-top4">
+        <div class="pf500 fs12 fcA8A8A8">日利率</div>
+        <div class="pf500 fs12 fc767676">0.16%</div>
+      </div>
+      <div class="item-first margin-top4">
+        <div class="pf500 fs12 fcA8A8A8">还款方式</div>
+        <div class="pf500 fs12 fc767676">到期一次性还清</div>
+      </div>
+      <div class="item-first margin-top4">
+        <div class="pf500 fs12 fcA8A8A8">放款机构</div>
+        <div class="pf500 fs12 fc767676">SDFFG508020</div>
+      </div>
+      <div class="item-kuan pf600 fs14 fcFFFFFF">还款</div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .repaymenting {
+    width: 345px;
+
+    .repaymenting-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 10px;
+      width: 345px;
+      height: 272px;
+      border-radius: 8px;
+      border: 1px solid #ebebeb;
+
+      .margin-top4 {
+        margin-top: 4px;
+      }
+
+      .margin-top11 {
+        margin-top: 11px;
+      }
+
+      .item-name {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 11px;
+        width: 311px;
+        height: 24px;
+      }
+
+      .item-number {
+        width: 311px;
+      }
+
+      .item-line {
+        margin-top: 7px;
+        width: 310px;
+        height: 1px;
+        background: #e9e9e9;
+      }
+
+      .item-first {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 311px;
+        height: 18px;
+      }
+
+      .item-kuan {
+        margin-top: 7px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        background: #df384c;
+        border-radius: 100px;
+      }
+    }
+  }
+</style>