所有页面完成

src/assets/img/index/default-img.svg

@@ -1,15 +0,0 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_5_480" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="38" height="38">
-<rect width="38" height="38" rx="12" fill="white"/>
-</mask>
-<g mask="url(#mask0_5_480)">
-<rect width="38" height="38" fill="#F5F5F5"/>
-</g>
-<path d="M19 20C21.67 20 27 21.33 27 24V27H11V24C11 21.33 16.33 20 19 20ZM19 21.9004C16.03 21.9004 12.9004 23.36 12.9004 24V25.0996H25.0996V24C25.0996 23.36 21.97 21.9004 19 21.9004ZM19 11C21.2091 11 23 12.7909 23 15C23 17.2091 21.2091 19 19 19C16.7909 19 15 17.2091 15 15C15 12.7909 16.7909 11 19 11ZM19 13C17.8954 13 17 13.8954 17 15C17 16.1046 17.8954 17 19 17C20.1046 17 21 16.1046 21 15C21 13.8954 20.1046 13 19 13Z" fill="black"/>
-<mask id="mask1_5_480" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="11" y="11" width="16" height="16">
-<path d="M19 20C21.67 20 27 21.33 27 24V27H11V24C11 21.33 16.33 20 19 20ZM19 21.9004C16.03 21.9004 12.9004 23.36 12.9004 24V25.0996H25.0996V24C25.0996 23.36 21.97 21.9004 19 21.9004ZM19 11C21.2091 11 23 12.7909 23 15C23 17.2091 21.2091 19 19 19C16.7909 19 15 17.2091 15 15C15 12.7909 16.7909 11 19 11ZM19 13C17.8954 13 17 13.8954 17 15C17 16.1046 17.8954 17 19 17C20.1046 17 21 16.1046 21 15C21 13.8954 20.1046 13 19 13Z" fill="white"/>
-</mask>
-<g mask="url(#mask1_5_480)">
-<rect x="10" y="10" width="18" height="18" fill="#A8A8A8"/>
-</g>
-</svg>

src/components/ui/CheckBox.vue.vue → src/components/ui/CheckBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="checkbox" :class="{ checked: modelValue }" @click="toggle">
-    <span v-if="modelValue" class="checkmark">✔</span>
+    <img src="@/assets/icon/asset/duihao.png" v-if="modelValue" alt="" />
   </div>
 </template>
 
@@ -34,9 +34,8 @@
     background: #df384c; /* 选中仍为红色背景 */
   }
 
-  .checkmark {
-    font-size: 12px;
-    color: white;
-    line-height: 1;
+  img {
+    width: 10px;
+    height: 7px;
   }
 </style>

src/router/index.js

@@ -53,6 +53,10 @@ import FinancialBuy from "../views/index/financial/Buy.vue";
 import MyFinancial from "../views/index/financial/MyFinancial.vue";
 import AddzfbAccount from "@/views/asset/otc/transaction/AddzfbAccount.vue";
 import AddBankAccount from "@/views/asset/otc/transaction/AddBankAccount.vue";
+import OTCMerchantDetails from "@/views/asset/otc/user/MerchantDetails.vue";
+import MyFollow from "@/views/asset/otc/user/MyFollow.vue";
+import LevelLimit from "@/views/asset/otc/user/LevelLimit.vue";
+import TransactionGuide from "@/views/asset/otc/user/TransactionGuide.vue";
 
 import CommonFunctionsPopup from "@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue"; // 子组件路径
 import TradeRules from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeRules.vue"; // 新建
@@ -110,10 +114,10 @@ const routes = [
             meta: { title: "期权" },
           },
           {
-            path: 'CryptocurrencyTrading',
-            name: 'Cryptocurrency',
-            component: () =>import('@/views/bitcoin/lever/CryptocurrencyTrading.vue'),
-            meta: { title: '币币交易' },
+            path: "CryptocurrencyTrading",
+            name: "Cryptocurrency",
+            component: () => import("@/views/bitcoin/lever/CryptocurrencyTrading.vue"),
+            meta: { title: "币币交易" },
           },
 
           {
@@ -250,14 +254,14 @@ const routes = [
     component: () => import("@/views/user/SecuritySettings.vue"), // 核心页面
   },
   {
-    path: '/set-password',
-    name: 'SetPassword',
-    component: () => import('@/views/user/SetPassword.vue') // 新页面
+    path: "/set-password",
+    name: "SetPassword",
+    component: () => import("@/views/user/SetPassword.vue"), // 新页面
   },
   {
-    path: '/delete-account',
-    name: 'DeleteAccount',
-    component: () => import('@/views/user/DeleteAccount.vue') // 新页面
+    path: "/delete-account",
+    name: "DeleteAccount",
+    component: () => import("@/views/user/DeleteAccount.vue"), // 新页面
   },
   {
     // 地址认证：复用同一个组件，通过 query 参数 type 来区分是 "home" 还是 "work"
@@ -579,10 +583,30 @@ const routes = [
     name: "addBankAccount",
     component: AddBankAccount,
   },
+  {
+    path: "/OTCMerchantDetails",
+    name: "OTCMerchantDetails",
+    component: OTCMerchantDetails,
+  },
+  {
+    path: "/myFollow",
+    name: "myFollow",
+    component: MyFollow,
+  },
+  {
+    path: "/levelLimit",
+    name: "levelLimit",
+    component: LevelLimit,
+  },
+  {
+    path: "/transactionGuide",
+    name: "transactionGuide",
+    component: TransactionGuide,
+  },
 ];
 
 const router = createRouter({
-    history: createWebHashHistory(),
+  history: createWebHashHistory(),
   routes,
 });
 

src/views/asset/UserAsset.vue

@@ -9,7 +9,7 @@
       <div class="fcA8A8A8" @click="messageChange('financialManagement')">理财</div>
       <div class="fcA8A8A8" @click="messageChange('option')">期权</div>
       <div class="fcA8A8A8" @click="messageChange('miaoContract')">秒合约</div>
-      <div class="fcA8A8A8" @click="messageChange('lever')">杠杆</div>
+      <div class="fcA8A8A8" @click="messageChange('lever')">币币</div>
     </div>
     <component :is="currentComponent" />
   </div>

src/views/asset/dialog/CompletePayment.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="complete-payment">
+    <div class="apply-mask" @click="emits('completePaymentClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="order-title pf600 fs18 fc333333">您是否已完成付款？</div>
+      <img src="@/assets/img/asset/Bank_transfer_2_.png" alt="" />
+      <div class="text pf500 fs14 fc333333">
+        请确保您已向卖家付款 <br />
+        恶意操作不付款可能会被冻结账户
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">确认</div>
+      <div class="cancel pf500 fs14 fcDF384C">取消</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["completePaymentClose"]);
+</script>
+<style lang="less" scoped>
+  .complete-payment {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    min-height: 100vh;
+
+    .apply-mask {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      width: 100%;
+      min-height: 100vh;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+    .apply-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 375px;
+      height: 337px;
+      background: #ffffff;
+      border-radius: 24px 24px 0px 0px;
+
+      .slide-line {
+        margin-top: 12px;
+        width: 32px;
+        height: 4px;
+        border-radius: 2px;
+        opacity: 0.4;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .order-title {
+        margin-top: 20px;
+        height: 24px;
+        line-height: 24px;
+      }
+
+      img {
+        margin-top: 19px;
+        width: 72px;
+        height: 74.5px;
+      }
+
+      .text {
+        margin-top: 20px;
+        line-height: 25px;
+        text-align: center;
+      }
+
+      .sure-btn {
+        margin-top: 10px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+
+      .cancel {
+        margin-top: 11px;
+      }
+    }
+  }
+</style>

src/views/asset/history/Index.vue

@@ -2,10 +2,10 @@
   <HeaderNav headerText="交易历史"></HeaderNav>
   <div class="history-index">
     <div class="notifi-classifi">
-      <div class="pf600 fs18 fc121212">合约</div>
+      <div class="pf600 fs18 fc121212">币币</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8">合约</div>
       <div class="sys-notifi pf600 fs14 fcA8A8A8">秒合约</div>
       <div class="sys-notifi pf600 fs14 fcA8A8A8">期权</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8">杠杆</div>
     </div>
     <div class="history-menu">
       <div class="pf600 fs14 fc121212" @click="messageChange('currentEntrustment')">

src/views/asset/otc/order/All.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="order-all">
+    <div class="order-item">
+      <div class="user-info">
+        <div class="info-left">
+          <div class="info-shangjia">
+            <img src="@/assets/img/index/user/default-head.png" alt="" />
+            <div class="pf500 fs14 fc2C3131">商家昵称</div>
+            <div class="vip pf500 fs10 fcDF384C">V2</div>
+          </div>
+          <div class="number pf400 fs10 fc999999">成交量 12550 · 98.95% 成交率</div>
+        </div>
+        <div class="info-right pf500 fs12 fcFFFFFF">待放行</div>
+      </div>
+      <div class="pay-way pf500 fs12 fcA8A8A8">
+        <div>付款方式</div>
+        <div class="way-right">
+          <div class="color"></div>
+          银行卡
+        </div>
+      </div>
+      <div class="order-number pf500 fs12 fcA8A8A8">
+        <div>订单号</div>
+        <div class="number-right">
+          2508050505052008502060
+          <img src="@/assets/icon/index/CopySimple.svg" alt="" />
+        </div>
+      </div>
+      <div class="goods-info">
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买单价</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">6.95 USDT</div>
+        </div>
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买数量</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">0.215 USDT</div>
+        </div>
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买金额</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">1250 CNY</div>
+        </div>
+      </div>
+      <div class="order-func pf500 fs16 fcFFFFFF">
+        <div class="kefu">联系客服</div>
+        <div class="order">取消订单</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .order-all {
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 10px;
+    width: 345px;
+    border: 1px solid #ebebeb;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .user-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .info-left {
+        .info-shangjia {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          img {
+            margin-right: 4px;
+            width: 24px;
+            height: 24px;
+          }
+
+          .vip {
+            margin-left: 4px;
+            width: 18px;
+            height: 15px;
+            line-height: 15px;
+            text-align: center;
+            border-radius: 3px;
+            background: #df384c1a;
+          }
+        }
+
+        .number {
+          margin-top: 4px;
+        }
+      }
+
+      .info-right {
+        width: 76px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        border-radius: 5px;
+        background: #df384c;
+      }
+    }
+
+    .pay-way {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 7px;
+      height: 18px;
+
+      .way-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+      }
+
+      .color {
+        margin-right: 4px;
+        width: 3px;
+        height: 10px;
+        border-radius: 2px;
+        background: #df384c;
+      }
+    }
+
+    .order-number {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 3px;
+      height: 18px;
+
+      .number-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        img {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .goods-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 3px;
+      width: 345px;
+      height: 38px;
+
+      .info-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 30%;
+        height: 100%;
+
+        .item-top {
+          height: 18px;
+          line-height: 18px;
+        }
+
+        .item-bottom {
+          height: 20px;
+          line-height: 20px;
+        }
+      }
+    }
+
+    .order-func {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 10px;
+      width: 345px;
+      height: 38px;
+
+      .kefu {
+        width: 150px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        border-radius: 6px;
+        background: #45b26b;
+      }
+
+      .order {
+        width: 150px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        border-radius: 6px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/asset/otc/order/Buy.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="order-buy">
+    <div class="order-item">
+      <div class="user-info">
+        <div class="info-left">
+          <div class="info-shangjia">
+            <img src="@/assets/img/index/user/default-head.png" alt="" />
+            <div class="pf500 fs14 fc2C3131">商家昵称2</div>
+            <div class="vip pf500 fs10 fcDF384C">V2</div>
+          </div>
+          <div class="number pf400 fs10 fc999999">成交量 12550 · 98.95% 成交率</div>
+        </div>
+        <div class="info-right pf500 fs12 fcFFFFFF">待放行</div>
+      </div>
+      <div class="pay-way pf500 fs12 fcA8A8A8">
+        <div>付款方式</div>
+        <div class="way-right">
+          <div class="color"></div>
+          银行卡
+        </div>
+      </div>
+      <div class="order-number pf500 fs12 fcA8A8A8">
+        <div>订单号</div>
+        <div class="number-right">
+          2508050505052008502060
+          <img src="@/assets/icon/index/CopySimple.svg" alt="" />
+        </div>
+      </div>
+      <div class="goods-info">
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买单价</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">6.95 USDT</div>
+        </div>
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买数量</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">0.215 USDT</div>
+        </div>
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买金额</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">1250 CNY</div>
+        </div>
+      </div>
+      <div class="order-func pf500 fs16 fcFFFFFF">
+        <div class="kefu">联系客服</div>
+        <div class="order">取消订单</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .order-buy {
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 10px;
+    width: 345px;
+    border: 1px solid #ebebeb;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .user-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .info-left {
+        .info-shangjia {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          img {
+            margin-right: 4px;
+            width: 24px;
+            height: 24px;
+          }
+
+          .vip {
+            margin-left: 4px;
+            width: 18px;
+            height: 15px;
+            line-height: 15px;
+            text-align: center;
+            border-radius: 3px;
+            background: #df384c1a;
+          }
+        }
+
+        .number {
+          margin-top: 4px;
+        }
+      }
+
+      .info-right {
+        width: 76px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        border-radius: 5px;
+        background: #df384c;
+      }
+    }
+
+    .pay-way {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 7px;
+      height: 18px;
+
+      .way-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+      }
+
+      .color {
+        margin-right: 4px;
+        width: 3px;
+        height: 10px;
+        border-radius: 2px;
+        background: #df384c;
+      }
+    }
+
+    .order-number {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 3px;
+      height: 18px;
+
+      .number-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        img {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .goods-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 3px;
+      width: 345px;
+      height: 38px;
+
+      .info-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 30%;
+        height: 100%;
+
+        .item-top {
+          height: 18px;
+          line-height: 18px;
+        }
+
+        .item-bottom {
+          height: 20px;
+          line-height: 20px;
+        }
+      }
+    }
+
+    .order-func {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 10px;
+      width: 345px;
+      height: 38px;
+
+      .kefu {
+        width: 150px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        border-radius: 6px;
+        background: #45b26b;
+      }
+
+      .order {
+        width: 150px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        border-radius: 6px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/asset/otc/order/Index.vue

@@ -1,5 +1,94 @@
 <template>
-  <div>2</div>
+  <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">
+        <img src="@/assets/icon/asset/rili.png" alt="" />
+      </div>
+    </div>
+  </div>
+  <div class="notifi-classifi">
+    <div class="pf600 fs18 fc121212" @click="messageChange('all')">全部</div>
+    <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('buy')">购买</div>
+    <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('sell')">出售</div>
+  </div>
+  <component :is="currentComponent" />
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import All from "./All.vue";
+  import Buy from "./Buy.vue";
+  import Sell from "./Sell.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("all");
+  const componentsMap = {
+    all: All,
+    buy: Buy,
+    sell: Sell,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</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 {
+        position: absolute;
+        top: 15px;
+        right: 16px;
+
+        img {
+          width: 15px;
+          height: 16px;
+        }
+      }
+    }
+  }
+
+  .notifi-classifi {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-end;
+    margin: 0 auto;
+    margin-top: 48px;
+    width: 345px;
+    height: 24px;
+
+    .sys-notifi {
+      margin-left: 40px;
+    }
+  }
+</style>

src/views/asset/otc/order/Sell.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="order-sell">
+    <div class="order-item">
+      <div class="user-info">
+        <div class="info-left">
+          <div class="info-shangjia">
+            <img src="@/assets/img/index/user/default-head.png" alt="" />
+            <div class="pf500 fs14 fc2C3131">商家昵称3</div>
+            <div class="vip pf500 fs10 fcDF384C">V2</div>
+          </div>
+          <div class="number pf400 fs10 fc999999">成交量 12550 · 98.95% 成交率</div>
+        </div>
+        <div class="info-right pf500 fs12 fcFFFFFF">待放行</div>
+      </div>
+      <div class="pay-way pf500 fs12 fcA8A8A8">
+        <div>付款方式</div>
+        <div class="way-right">
+          <div class="color"></div>
+          银行卡
+        </div>
+      </div>
+      <div class="order-number pf500 fs12 fcA8A8A8">
+        <div>订单号</div>
+        <div class="number-right">
+          2508050505052008502060
+          <img src="@/assets/icon/index/CopySimple.svg" alt="" />
+        </div>
+      </div>
+      <div class="goods-info">
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买单价</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">6.95 USDT</div>
+        </div>
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买数量</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">0.215 USDT</div>
+        </div>
+        <div class="info-item">
+          <div class="item-top pf500 fs12 fcA8A8A8">购买金额</div>
+          <div class="item-bottom pf500 fs12 fc2C3131">1250 CNY</div>
+        </div>
+      </div>
+      <div class="order-func pf500 fs16 fcFFFFFF">
+        <div class="kefu">联系客服</div>
+        <div class="order">取消订单</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .order-sell {
+    margin: 0 auto;
+    margin-top: 15px;
+    padding: 15px 10px;
+    width: 345px;
+    border: 1px solid #ebebeb;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .user-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .info-left {
+        .info-shangjia {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          img {
+            margin-right: 4px;
+            width: 24px;
+            height: 24px;
+          }
+
+          .vip {
+            margin-left: 4px;
+            width: 18px;
+            height: 15px;
+            line-height: 15px;
+            text-align: center;
+            border-radius: 3px;
+            background: #df384c1a;
+          }
+        }
+
+        .number {
+          margin-top: 4px;
+        }
+      }
+
+      .info-right {
+        width: 76px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        border-radius: 5px;
+        background: #df384c;
+      }
+    }
+
+    .pay-way {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 7px;
+      height: 18px;
+
+      .way-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+      }
+
+      .color {
+        margin-right: 4px;
+        width: 3px;
+        height: 10px;
+        border-radius: 2px;
+        background: #df384c;
+      }
+    }
+
+    .order-number {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 3px;
+      height: 18px;
+
+      .number-right {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        img {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .goods-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 3px;
+      width: 345px;
+      height: 38px;
+
+      .info-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 30%;
+        height: 100%;
+
+        .item-top {
+          height: 18px;
+          line-height: 18px;
+        }
+
+        .item-bottom {
+          height: 20px;
+          line-height: 20px;
+        }
+      }
+    }
+
+    .order-func {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 10px;
+      width: 345px;
+      height: 38px;
+
+      .kefu {
+        width: 150px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        border-radius: 6px;
+        background: #45b26b;
+      }
+
+      .order {
+        width: 150px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        border-radius: 6px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/asset/otc/transaction/C2C.vue

@@ -33,7 +33,7 @@
   <div class="goods-area">
     <div class="goods-item" v-for="(item, index) in 2" :key="index">
       <div class="item-merchant">
-        <div class="merchant-left">
+        <div class="merchant-left" @click="goMerchantDetails">
           <img src="@/assets/img/index/user/default-head.png" alt="" />
           <div class="left-name pf500 fs14 fc2C3131">商家昵称</div>
           <div class="vip-flag pf500 fs10 fcDF384C">V2</div>
@@ -93,10 +93,15 @@
     <CancelOrder
       v-show="cancelOrderFlag"
       @cancelOrderClose="cancelOrderClose"></CancelOrder>
+    <!-- 是否完成付款，还没点击的地方 -->
+    <CompletePayment
+      v-show="completePaymentFlag"
+      @completePaymentClose="completePaymentClose"></CompletePayment>
   </div>
 </template>
 <script setup>
   import { ref } from "vue";
+  import { useRoute, useRouter } from "vue-router";
   import PaymentWay from "../../dialog/NotPaymentWay.vue";
   import Amount from "../../dialog/Amount.vue";
   import Filter from "../../dialog/Filter.vue";
@@ -104,6 +109,18 @@
   import NotPaymentWay from "../../dialog/NotPaymentWay.vue";
   import PaymentAccount from "../../dialog/PaymentAccount.vue";
   import CancelOrder from "../../dialog/CancelOrder.vue";
+  import CompletePayment from "../../dialog/CompletePayment.vue";
+
+  const router = useRouter();
+
+  const goMerchantDetails = () => {
+    router.push("/OTCMerchantDetails");
+  };
+
+  const completePaymentFlag = ref(false);
+  const completePaymentClose = () => {
+    completePaymentFlag.value = false;
+  };
 
   const cancelOrderFlag = ref(false);
   const cancelOrderClose = () => {

src/views/asset/otc/user/Index.vue

@@ -1,11 +1,117 @@
 <template>
   <HeaderNav headerText="我的"></HeaderNav>
   <div class="otc-user">
-    <div class="user-info"></div>
+    <div class="user-info">
+      <img src="@/assets/img/index/user/default-head.png" alt="" />
+      <div class="info-name">
+        <div class="pf500 fs18 fc2C3131">用户昵称</div>
+        <div class="time pf500 fs12 fc999999">注册时间: 2025-11-07</div>
+      </div>
+    </div>
+    <div class="chengjiao-number pf500 fs10 fc999999">成交量 12550 · 98.95% 成交率</div>
+    <div class="certification-center">
+      <div class="certification-item pf500 fs10 fcDF384C">
+        <CheckBox v-model="baseFlag"></CheckBox>
+        <div class="text">基础认证</div>
+      </div>
+      <div class="certification-item pf500 fs10 fcDF384C">
+        <CheckBox v-model="baseFlag"></CheckBox>
+        <div class="text">身份认证</div>
+      </div>
+      <div class="certification-item pf500 fs10 fcDF384C">
+        <CheckBox v-model="baseFlag"></CheckBox>
+        <div class="text">高级认证</div>
+      </div>
+    </div>
+    <div class="user-details">
+      <div class="details-title pf600 fs18 fc2C3131">详情</div>
+      <div class="details-item margin-top10">
+        <div class="pf500 fs14 fc2C3131">成交单数</div>
+        <div class="pf500 fs12 fc2C3131">15020</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">购买</div>
+        <div class="pf500 fs12 fc999999">520</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">出售</div>
+        <div class="pf500 fs12 fc999999">12500</div>
+      </div>
+      <div class="line"></div>
+      <div class="details-item margin-top10">
+        <div class="pf500 fs14 fc2C3131">成交率</div>
+        <div class="pf500 fs12 fc2C3131">100.00%</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">购买</div>
+        <div class="pf500 fs12 fc999999">50.20%</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">出售</div>
+        <div class="pf500 fs12 fc999999">25.05%</div>
+      </div>
+      <div class="details-item margin-top13">
+        <div class="pf500 fs14 fc2C3131">交易对手数</div>
+        <div class="pf500 fs12 fc2C3131">894820</div>
+      </div>
+      <div class="details-item margin-top13">
+        <div class="pf500 fs14 fc2C3131">平均付款时间</div>
+        <div class="pf500 fs12 fc2C3131">1m15s</div>
+      </div>
+    </div>
+    <div class="kongbai"></div>
+    <div class="user-func">
+      <div
+        class="func-item"
+        v-for="(item, index) in userMenu"
+        :key="index"
+        @click="goMenuRouter(index)">
+        <div class="item-left pf500 fs14 fc333333">
+          <img :src="item.img" class="anquan-set" alt="" />
+          <div class="text">{{ item.name }}</div>
+        </div>
+        <img src="@/assets/icon/user/right-arrow.svg" class="right-arrow" alt="" />
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
+  import { ref } from "vue";
+  import { useRoute, useRouter } from "vue-router";
   import HeaderNav from "../../../index/components/HeaderNav.vue";
+  import CheckBox from "../../../../components/ui/CheckBox.vue";
+
+  const router = useRouter();
+  const baseFlag = ref(true);
+
+  const userMenu = [
+    {
+      name: "我的关注",
+      img: require("@/assets/icon/asset/guanzhu.png"),
+    },
+    {
+      name: "联系客服",
+      img: require("@/assets/icon/asset/kefu.png"),
+    },
+    {
+      name: "交易指南",
+      img: require("@/assets/icon/asset/zhinan.png"),
+    },
+    {
+      name: "等级限额说明",
+      img: require("@/assets/icon/asset/dengji.png"),
+    },
+  ];
+
+  const goMenuRouter = (index) => {
+    if (index == 0) {
+      router.push("/myFollow");
+    } else if (index == 2) {
+      router.push("/transactionGuide");
+    } else if (index == 3) {
+      router.push("/levelLimit");
+    }
+  };
 </script>
 <style lang="less" scoped>
   .otc-user {
@@ -17,10 +123,139 @@
     width: 100%;
 
     .user-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
       margin-top: 10px;
       width: 345px;
       height: 56px;
-      background: pink;
+
+      img {
+        width: 56px;
+        height: 56px;
+      }
+
+      .info-name {
+        margin-left: 16px;
+
+        .time {
+          margin-top: 3px;
+        }
+      }
+    }
+
+    .chengjiao-number {
+      margin-top: 2px;
+      width: 345px;
+      height: 24px;
+      line-height: 24px;
+    }
+
+    .certification-center {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 2px;
+      width: 345px;
+      height: 16px;
+
+      .certification-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-left: 8px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        .text {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .user-details {
+      margin-top: 11px;
+      width: 345px;
+
+      .margin-top10 {
+        margin-top: 10px;
+      }
+
+      .margin-top7 {
+        margin-top: 7px;
+      }
+
+      .margin-top13 {
+        margin-top: 13px;
+      }
+
+      .details-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 345px;
+        height: 18px;
+      }
+    }
+
+    .line {
+      margin-top: 15px;
+      width: 335px;
+      height: 1px;
+      background: #f5f5f5;
+    }
+
+    .kongbai {
+      margin-top: 12px;
+      width: 375px;
+      height: 8px;
+      background: #f5f5f5;
+    }
+
+    .user-func {
+      width: 345px;
+
+      .func-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 26.5px;
+        width: 345px;
+        height: 24px;
+
+        &:first-child {
+          margin-top: 18px;
+        }
+
+        .item-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          height: 24px;
+
+          .anquan-set {
+            width: 19px;
+            height: 19px;
+          }
+
+          .text {
+            margin-left: 8px;
+          }
+        }
+
+        .right-arrow {
+          width: 7px;
+          height: 15px;
+        }
+      }
     }
   }
 </style>

src/views/asset/otc/user/LevelLimit.vue

@@ -0,0 +1,25 @@
+<template>
+  <HeaderNav headerText="等级限额消费说明"></HeaderNav>
+  <div class="level-limit pf500 fs14 fc666666">
+    随着区块链技术的不断发展和监管政策的逐步完善，交易限额的设定和调整不仅影响着投资者的交易策略，也预示着整个行业的未来走向。本文将深入探讨虚拟币交易所交易限额的现状、未来趋势以及其对投资者和行业的影响。<br />
+    虚拟币交易所交易限额的现状 <br />
+    目前，各大虚拟币交易所为了应对监管要求和市场风险，普遍设置了交易限额。这些限额通常包括单笔交易限额、每日交易限额和每月交易限额等。例如，某些交易所可能规定单笔交易不得超过10个比特币，每日交易总额不得超过100个比特币。这些限额的设定，一方面是为了防止市场操纵和洗钱等非法行为，另一方面也是为了保护投资者免受过度交易的风险。<br />
+    然而，随着虚拟货币市场的不断成熟和投资者需求的多样化，这些限额是否合理、是否能够满足市场需求，成为了业界和投资者关注的焦点。一些投资者认为，过低的交易限额限制了他们的投资策略，而一些交易所则担心过高的限额会增加市场风险<br />
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .level-limit {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 48px;
+    width: 345px;
+    line-height: 24px;
+    letter-spacing: 0.2px;
+  }
+</style>

src/views/asset/otc/user/MerchantDetails.vue

@@ -0,0 +1,419 @@
+<template>
+  <HeaderNav headerText="详情"></HeaderNav>
+  <div class="merchant-details">
+    <div class="user-info">
+      <div class="info-left">
+        <img src="@/assets/img/index/user/default-head.png" alt="" />
+        <div class="info-name">
+          <div class="name-area pf500 fs18 fc2C3131">
+            用户昵称
+            <div class="vip pf500 fs10 fcDF384C">V2</div>
+          </div>
+          <div class="time pf500 fs12 fc999999">入驻时间: 2025-11-07</div>
+        </div>
+      </div>
+      <div class="info-right pf500 fs12 fcFFFFFF">关注</div>
+    </div>
+    <div class="chengjiao-number pf500 fs10 fc999999">成交量 12550 · 98.95% 成交率</div>
+    <div class="money-item pf500 fs10 fcDF384C">
+      <div class="checkbox">
+        <img src="@/assets/icon/asset/duihao.png" alt="" />
+      </div>
+      <div class="text">保证金 1000.00 USDT</div>
+    </div>
+    <div class="certification-center">
+      <div class="certification-item pf500 fs10 fcDF384C">
+        <div class="checkbox">
+          <img src="@/assets/icon/asset/duihao.png" alt="" />
+        </div>
+        <div class="text">视频认证</div>
+      </div>
+      <div class="certification-item pf500 fs10 fcDF384C">
+        <div class="checkbox">
+          <img src="@/assets/icon/asset/duihao.png" alt="" />
+        </div>
+        <div class="text">身份认证</div>
+      </div>
+      <div class="certification-item pf500 fs10 fcDF384C">
+        <div class="checkbox">
+          <img src="@/assets/icon/asset/duihao.png" alt="" />
+        </div>
+        <div class="text">电子邮件</div>
+      </div>
+      <div class="certification-item pf500 fs10 fcDF384C">
+        <div class="checkbox">
+          <img src="@/assets/icon/asset/duihao.png" alt="" />
+        </div>
+        <div class="text">手机</div>
+      </div>
+    </div>
+    <div class="send-message pf600 fs14 fcDF384C">发消息</div>
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212" @click="current = 0">详情</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="current = 1">委托单</div>
+    </div>
+    <div class="user-details" v-if="current == 0">
+      <div class="details-item margin-top10">
+        <div class="pf500 fs14 fc2C3131">成交单数</div>
+        <div class="pf500 fs12 fc2C3131">15020</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">购买</div>
+        <div class="pf500 fs12 fc999999">520</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">出售</div>
+        <div class="pf500 fs12 fc999999">12500</div>
+      </div>
+      <div class="line"></div>
+      <div class="details-item margin-top10">
+        <div class="pf500 fs14 fc2C3131">成交率</div>
+        <div class="pf500 fs12 fc2C3131">100.00%</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">购买</div>
+        <div class="pf500 fs12 fc999999">50.20%</div>
+      </div>
+      <div class="details-item margin-top7">
+        <div class="pf500 fs14 fc999999">出售</div>
+        <div class="pf500 fs12 fc999999">25.05%</div>
+      </div>
+      <div class="details-item margin-top13">
+        <div class="pf500 fs14 fc2C3131">交易对手数</div>
+        <div class="pf500 fs12 fc2C3131">894820</div>
+      </div>
+      <div class="details-item margin-top13">
+        <div class="pf500 fs14 fc2C3131">平均放币时间</div>
+        <div class="pf500 fs12 fc2C3131">1m15s</div>
+      </div>
+    </div>
+    <div class="user-order" v-else>
+      <div class="order-item" v-for="(item, index) in 2" :key="index">
+        <div class="price-area">
+          <div class="text pf400 fs10 fc999999">单价</div>
+          <div class="price-number pf400 fs10 fc999999">
+            ￥
+            <span class="pf500 fs16 fc333333">6.58</span>
+            /USDT
+          </div>
+          <div class="number pf400 fs10 fc999999">
+            数量 <span class="pf400 fs12 fc666666">1000.05 USDT</span>
+          </div>
+          <div class="number pf400 fs10 fc999999">
+            限额 <span class="pf400 fs12 fc666666">20000 - 1000.05 CNY</span>
+          </div>
+        </div>
+        <div class="price-func">
+          <div class="func-time pf400 fs10 fc999999">
+            <img src="@/assets/icon/asset/clock-gray.svg" alt="" />0m 45s
+          </div>
+          <div class="func-pay-way pf400 fs10 fc999999">
+            <div class="color"></div>
+            银行卡
+          </div>
+          <div class="func-main">
+            <div class="func-buy pf500 fs12 fcFFFFFF">购买</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from "vue";
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+
+  const baseFlag = ref(true);
+  const current = ref(1);
+</script>
+<style lang="less" scoped>
+  .merchant-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .user-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 10px;
+      width: 345px;
+      height: 56px;
+
+      .info-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        img {
+          width: 56px;
+          height: 56px;
+        }
+
+        .info-name {
+          margin-left: 16px;
+
+          .name-area {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+          }
+
+          .vip {
+            margin-left: 5px;
+            width: 18px;
+            height: 15px;
+            line-height: 15px;
+            text-align: center;
+            border-radius: 3px;
+            background: #df384c1a;
+          }
+
+          .time {
+            margin-top: 3px;
+          }
+        }
+      }
+
+      .info-right {
+        width: 60px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        border-radius: 5px;
+        background: #df384c;
+      }
+    }
+
+    .chengjiao-number {
+      margin-top: 2px;
+      width: 345px;
+      height: 24px;
+      line-height: 24px;
+    }
+
+    .checkbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      background: #df384c; /* 红色背景 */
+
+      img {
+        width: 10px;
+        height: 7px;
+      }
+    }
+
+    .money-item {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      width: 345px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      .text {
+        margin-left: 4px;
+      }
+    }
+
+    .certification-center {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 7px;
+      width: 345px;
+      height: 16px;
+
+      .certification-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-left: 8px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        .text {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .send-message {
+      margin-top: 21px;
+      width: 311px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border-radius: 100px;
+      background: #df384c1a;
+    }
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 14px;
+      width: 349px;
+      height: 24px;
+
+      .sys-notifi {
+        margin-left: 67px;
+      }
+    }
+
+    .user-details {
+      width: 345px;
+
+      .margin-top10 {
+        margin-top: 10px;
+      }
+
+      .margin-top7 {
+        margin-top: 7px;
+      }
+
+      .margin-top13 {
+        margin-top: 13px;
+      }
+
+      .line {
+        margin-top: 15px;
+        width: 335px;
+        height: 1px;
+        background: #f5f5f5;
+      }
+
+      .details-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 345px;
+        height: 18px;
+      }
+    }
+
+    .user-order {
+      margin-top: 10px;
+
+      .order-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 10px;
+        padding: 0 10px;
+        width: 345px;
+        height: 92px;
+        border-radius: 8px;
+        border: 1px solid #ebebeb;
+        box-sizing: border-box;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        .price-area {
+          margin-top: 10px;
+
+          .price-number {
+            margin-top: 3px;
+          }
+
+          .number {
+            margin-top: 5px;
+            height: 13px;
+            line-height: 13px;
+
+            span {
+              margin-left: 1px;
+            }
+          }
+        }
+
+        .price-func {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-end;
+          margin-top: 10px;
+
+          .func-time {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            height: 12px;
+
+            img {
+              margin-right: 3px;
+              width: 9px;
+              height: 9px;
+            }
+          }
+
+          .func-pay-way {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 5px;
+            height: 12px;
+
+            .color {
+              margin-right: 3px;
+              width: 3px;
+              height: 10px;
+              border-radius: 2px;
+              background: #df384c;
+            }
+          }
+
+          .func-main {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            margin-top: 15px;
+            height: 24px;
+
+            .func-chat {
+              width: 58px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              border-radius: 5px;
+              background: #df384c1a;
+            }
+
+            .func-buy {
+              margin-left: 8px;
+              width: 58px;
+              height: 24px;
+              line-height: 24px;
+              text-align: center;
+              border-radius: 5px;
+              background: #45b26b;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/asset/otc/user/MyFollow.vue

@@ -0,0 +1,90 @@
+<template>
+  <HeaderNav headerText="我的关注"></HeaderNav>
+  <div class="user-area">
+    <div class="user-info" v-for="(item, index) in 3" :key="index">
+      <div class="info-left">
+        <img src="@/assets/img/index/user/default-head.png" alt="" />
+        <div class="info-name">
+          <div class="name-area pf500 fs18 fc2C3131">
+            用户昵称
+            <div class="vip pf500 fs10 fcDF384C">V2</div>
+          </div>
+          <div class="time pf500 fs12 fc999999">入驻时间: 2025-11-07</div>
+        </div>
+      </div>
+      <div class="info-right pf500 fs12 fcFFFFFF">关注</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .user-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+  }
+
+  .user-info {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20px;
+    width: 345px;
+    height: 56px;
+
+    &:first-child {
+      margin-top: 0px;
+    }
+
+    .info-left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+
+      img {
+        width: 56px;
+        height: 56px;
+      }
+
+      .info-name {
+        margin-left: 16px;
+
+        .name-area {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        .vip {
+          margin-left: 5px;
+          width: 18px;
+          height: 15px;
+          line-height: 15px;
+          text-align: center;
+          border-radius: 3px;
+          background: #df384c1a;
+        }
+
+        .time {
+          margin-top: 3px;
+        }
+      }
+    }
+
+    .info-right {
+      width: 60px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      border-radius: 5px;
+      background: #df384c;
+    }
+  }
+</style>

src/views/asset/otc/user/TransactionGuide.vue

@@ -0,0 +1,49 @@
+<template>
+  <HeaderNav headerText="交易指南"></HeaderNav>
+  <div class="transaction-guide">
+    <div class="guide-title pf500 fs18 fc333333">交易指南</div>
+    <div class="guide-desc">
+      <div class="desc-item" v-for="(item, index) in 4" :key="index">
+        <img src="@/assets/icon/asset/right-arrow-black.svg" alt="" />
+        <div class="item-text pf500 fs14 fc666666">
+          交易指南文本内容标题交易指南文本内容标题交易指南文本内容标题交易指南文本内容标题
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .transaction-guide {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .guide-title {
+      width: 345px;
+    }
+
+    .guide-desc {
+      width: 327px;
+
+      .desc-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 16px 0;
+        width: 100%;
+        border-bottom: 1px solid #f5f5f5;
+
+        .item-text {
+          margin-left: 14px;
+        }
+      }
+    }
+  }
+</style>

src/views/index/ApplyPermission.vue

@@ -39,7 +39,7 @@
       z-index: -1;
       width: 100%;
       min-height: 100vh;
-      background: #b3b3b3;
+      background: rgba(0, 0, 0, 0.5);
     }
 
     .apply-content {

src/views/index/Index.vue

@@ -2,13 +2,13 @@
   <div class="index">
     <div class="index-func">
       <div class="func-head">
-        <img src="../../assets/img/index/default-img.svg" alt="" @click="goUser" />
+        <img src="@/assets/img/index/default-img.png" alt="" @click="goUser" />
       </div>
       <div class="search-currency pf400 fs14 fcA9A9A9" @click="goSearch">
         <img src="../../assets/icon/index/search-gray.svg" class="search-img" alt="" />
         搜索您关心的币种
       </div>
-      <div class="qr-code">
+      <div class="qr-code" @click="goQrCode">
         <img src="../../assets/icon/index/ic_qrcode_bk.svg" alt="" />
       </div>
       <div class="notification" @click="goNotifi">
@@ -59,8 +59,12 @@
 
   const indexMenu = [
     {
-      name: "ICO功能",
-      image: require("@/assets/icon/index/Rectangle 2.png"),
+      name: "秒合约",
+      image: require("@/assets/icon/index/Rectangle 6.png"),
+    },
+    {
+      name: "充币",
+      image: require("@/assets/icon/index/Rectangle 8.png"),
     },
     {
       name: "质押理财",
@@ -71,38 +75,39 @@
       image: require("@/assets/icon/index/Rectangle 4.png"),
     },
     {
-      name: "邀请推广",
-      image: require("@/assets/icon/index/Rectangle 5.png"),
-    },
-    {
-      name: "秒合约",
-      image: require("@/assets/icon/index/Rectangle 6.png"),
+      name: "OTC",
+      image: require("@/assets/icon/index/Rectangle 9.png"),
     },
     {
-      name: "客服",
-      image: require("@/assets/icon/index/Rectangle 7.png"),
+      name: "ICO",
+      image: require("@/assets/icon/index/Rectangle 2.png"),
     },
     {
-      name: "充币",
-      image: require("@/assets/icon/index/Rectangle 8.png"),
+      name: "邀请推广",
+      image: require("@/assets/icon/index/Rectangle 5.png"),
     },
     {
-      name: "OTC交易",
-      image: require("@/assets/icon/index/Rectangle 9.png"),
+      name: "客服",
+      image: require("@/assets/icon/index/Rectangle 7.png"),
     },
   ];
 
   const goMenu = (index) => {
     if (index == 0) {
-      router.push("/icoIndex");
+      router.push("/bitcoin/seconds");
     } else if (index == 1) {
-      router.push("/financialIndex");
+      router.push("/rechargeIndex");
     } else if (index == 2) {
+      router.push("/financialIndex");
+    } else if (index == 3) {
       router.push("/loanIndex");
+    } else if (index == 4) {
+      router.push("/otcIndex");
+    } else if (index == 5) {
+      router.push("/icoIndex");
     } else if (index == 6) {
-      router.push("/rechargeIndex");
+      router.push("/invite");
     } else if (index == 7) {
-      router.push("/otcIndex");
     }
   };
 
@@ -117,6 +122,10 @@
   const goUser = () => {
     router.push("/indexUser");
   };
+
+  const goQrCode = () => {
+    // router.push("/splashScreen");
+  };
 </script>
 <style lang="less" scoped>
   .index {
@@ -128,21 +137,32 @@
     width: 100%;
 
     .index-func {
+      position: fixed;
+      left: 0px;
+      top: 0px;
+      z-index: 10;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      margin-top: 21px;
-      width: 345px;
-      height: 38px;
+      padding: 20px 15px 0 15px;
+      width: 100%;
+      background: #ffffff;
+      box-sizing: border-box;
 
       .func-head {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
         width: 38px;
         height: 38px;
+        border-radius: 12px;
+        background: #f5f5f5;
 
         img {
-          width: 38px;
-          height: 38px;
+          width: 18px;
+          height: 18px;
         }
       }
 
@@ -200,7 +220,7 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      margin-top: 17px;
+      margin-top: 70px;
       width: 343px;
 
       .asset-title {

src/views/index/RiskTips.vue

@@ -29,7 +29,7 @@
   </div>
 </template>
 <script setup>
-  import CheckBox from "../../components/ui/CheckBox.vue.vue";
+  import CheckBox from "../../components/ui/CheckBox.vue";
   import { ref } from "vue";
 
   const tipsFlag = ref(false);

src/views/index/SearchIcon.vue

@@ -9,11 +9,11 @@
       <img src="../../assets/icon/index/search-input.svg" alt="" />
     </div>
     <div class="icon-list">
-      <div class="icon-item" v-for="(item, index) in 5" :key="index">
-        <img src="../../assets/img/index/Frame 7.svg" class="icon-img" alt="" />
+      <div class="icon-item" v-for="(item, index) in iconData" :key="index">
+        <img :src="item.img" class="icon-img" alt="" />
         <div class="icon-name">
-          <div class="upper-name pc600 fs16 fc1F2937">Ethereum</div>
-          <div class="letter-name pc400 fs14 fc4B5563">ETH</div>
+          <div class="upper-name pc600 fs16 fc1F2937">{{ item.fullName }}</div>
+          <div class="letter-name pc400 fs14 fc4B5563">{{ item.abbreviation }}</div>
         </div>
         <div class="icon-love">
           <img src="../../assets/icon/index/Star.svg" alt="" />
@@ -24,6 +24,29 @@
 </template>
 <script setup>
   import HeaderNav from "./components/HeaderNav.vue";
+
+  const iconData = [
+    {
+      img: require("@/assets/icon/coin/Ethereum.png"),
+      fullName: "Ethereum",
+      abbreviation: "ETH",
+    },
+    {
+      img: require("@/assets/icon/coin/CardanoBadge.svg"),
+      fullName: "Cardano",
+      abbreviation: "CAR",
+    },
+    {
+      img: require("@/assets/icon/coin/Dogecoin.png"),
+      fullName: "Dogecoin",
+      abbreviation: "DOGE",
+    },
+    {
+      img: require("@/assets/icon/coin/Solana.png"),
+      fullName: "Solana",
+      abbreviation: "SOL",
+    },
+  ];
 </script>
 <style lang="less" scoped>
   .search-icon {
@@ -35,7 +58,7 @@
 
     .search-input {
       position: relative;
-      margin-top: 72px;
+      margin-top: 50px;
       width: 343px;
       height: 48px;
 
@@ -51,7 +74,7 @@
 
       img {
         position: absolute;
-        top: 15px;
+        top: 26px;
         left: 14px;
         width: 17px;
         height: 17px;

src/views/index/SplashScreen.vue

@@ -2,8 +2,11 @@
   <div class="splash-screen">
     <img src="../../assets/img/index/SplashScreen.png" alt="" />
   </div>
+  <ApplyPermission></ApplyPermission>
 </template>
-<script setup></script>
+<script setup>
+  import ApplyPermission from "./ApplyPermission.vue";
+</script>
 <style lang="less" scoped>
   .splash-screen {
     width: 100%;

src/views/index/User.vue

@@ -82,6 +82,14 @@
       name: "划转",
       image: require("@/assets/img/index/user/huazhuan.svg"),
     },
+    {
+      name: "我的贷款",
+      image: require("@/assets/icon/index/Rectangle 4.png"),
+    },
+    {
+      name: "我的资产",
+      image: require("@/assets/icon/index/zichan.png"),
+    },
   ];
 
   const transactionMenu = [
@@ -98,8 +106,8 @@
       image: require("@/assets/img/index/user/qiquan.svg"),
     },
     {
-      name: "杠杆",
-      image: require("@/assets/img/index/user/ganggan.svg"),
+      name: "币币",
+      image: require("@/assets/icon/index/bibi.png"),
     },
     {
       name: "质押理财",
@@ -128,10 +136,22 @@
       name: "KYC认证",
       image: require("@/assets/img/index/user/kyc.svg"),
     },
+    {
+      name: "切换语言",
+      image: require("@/assets/icon/index/yuyan.png"),
+    },
     {
       name: "帮助中心",
       image: require("@/assets/img/index/user/help.svg"),
     },
+    {
+      name: "安全设置",
+      image: require("@/assets/icon/index/anquanshezhi.png"),
+    },
+    {
+      name: "关于我们",
+      image: require("@/assets/icon/index/aboutus.png"),
+    },
   ];
 </script>
 <style lang="less" scoped>
@@ -209,9 +229,8 @@
       flex-direction: column;
       justify-content: flex-start;
       align-items: center;
-      margin-top: 25px;
+      margin-top: 23px;
       width: 345px;
-      height: 96px;
 
       .asset-title {
         width: 345px;
@@ -223,19 +242,32 @@
       .index-menu {
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
+        justify-content: flex-start;
+        flex-wrap: wrap;
         margin-top: 15px;
         width: 317px;
-        height: 139px;
 
         .menu-item {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
           align-items: center;
+          margin-left: 29.6px;
           width: 57px;
           height: 57px;
 
+          &:nth-child(1),
+          &:nth-child(5) {
+            margin-left: 0px;
+          }
+
+          &:nth-child(5),
+          &:nth-child(6),
+          &:nth-child(7),
+          &:nth-child(8) {
+            margin-top: 25px;
+          }
+
           img {
             width: 32px;
             height: 32px;
@@ -328,19 +360,32 @@
       .index-menu {
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
+        justify-content: flex-start;
+        flex-wrap: wrap;
         margin-top: 15px;
         width: 317px;
-        height: 139px;
 
         .menu-item {
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
           align-items: center;
+          margin-left: 29.6px;
           width: 57px;
           height: 57px;
 
+          &:nth-child(1),
+          &:nth-child(5) {
+            margin-left: 0px;
+          }
+
+          &:nth-child(5),
+          &:nth-child(6),
+          &:nth-child(7),
+          &:nth-child(8) {
+            margin-top: 25px;
+          }
+
           img {
             width: 32px;
             height: 32px;

src/views/index/financial/Buy.vue

@@ -57,7 +57,7 @@
 </template>
 <script setup>
   import HeaderNav from "../components/HeaderNav.vue";
-  import CheckBox from "../../../components/ui/CheckBox.vue.vue";
+  import CheckBox from "../../../components/ui/CheckBox.vue";
   import { ref } from "vue";
 
   const autoBuyFlag = ref(true);

src/views/index/loan/Index.vue

@@ -4,11 +4,11 @@
     <div class="header-content pf600 fs16 fc1F2937">
       <img
         class="left-arrow-image"
-        src="../../../assets/icon/index/left-arrow.svg"
+        src="@/assets/icon/index/left-arrow.svg"
         @click="toPath()" />
       贷款
       <div class="save pf500 fs14 fcDF384C">
-        <img src="../../../assets/icon/index/Headphones.svg" alt="" />
+        <img src="@/assets/icon/index/Headphones.svg" alt="" />
       </div>
     </div>
   </div>

src/views/index/user/UserInfo.vue

@@ -32,7 +32,6 @@
         </div>
       </div>
     </div>
-    <div class="logout pf600 fs14 fcFFFFFF">退出登录</div>
   </div>
 </template>
 <script setup></script>
@@ -140,17 +139,5 @@
         box-sizing: border-box;
       }
     }
-
-    .logout {
-      margin: 0 auto;
-      margin-top: 55px;
-      width: 311px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      border-radius: 100px;
-      background: #df384c;
-      letter-spacing: 0.2px;
-    }
   }
 </style>

src/views/market/Bibi.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="contract">
+    <div class="coin-head">
+      <div class="name">
+        <div class="name-text pf400 fs12 fc666666">交易对</div>
+        <div class="list-sort">
+          <div class="sort-up">
+            <img src="../../assets/icon/index/Triangle.svg" alt="" />
+          </div>
+          <div class="sort-bottom">
+            <img src="../../assets/icon/index/Triangle 2.svg" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="name price">
+        <div class="name-text pf400 fs12 fc666666">最新价</div>
+        <div class="list-sort">
+          <div class="sort-up">
+            <img src="../../assets/icon/index/Triangle.svg" alt="" />
+          </div>
+          <div class="sort-bottom">
+            <img src="../../assets/icon/index/Triangle 2.svg" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="name today">
+        <div class="name-text pf400 fs12 fc666666">今日涨跌幅</div>
+        <div class="list-sort">
+          <div class="sort-up">
+            <img src="../../assets/icon/index/Triangle.svg" alt="" />
+          </div>
+          <div class="sort-bottom">
+            <img src="../../assets/icon/index/Triangle 2.svg" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="coin-body">
+      <div class="body-item" v-for="(item, index) in 10" :key="index">
+        <div class="item-left">
+          <div class="coin-img">
+            <img src="../../assets/img/index/Frame 7.svg" alt="" />
+          </div>
+          <div class="coin-name">
+            <div class="upper-name pf500 fs14 fc2C3131">Bitcoin</div>
+            <div class="letter-name pf400 fs10 fcA9A9A9">BTC</div>
+          </div>
+          <div class="coin-echars"></div>
+          <div class="coin-price">
+            <div class="upper-price pf500 fs14 fc2C3131">48.503.12</div>
+            <div class="letter-price pf400 fs10 fcA9A9A9">￥ 4250.00</div>
+          </div>
+        </div>
+        <div class="item-right pf500 fs12 fcFFFFFF">+2.18%</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .contract {
+    margin-top: 11px;
+
+    .coin-head {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 6px;
+      width: 100%;
+      height: 24px;
+
+      .name {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 24px;
+
+        .list-sort {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          margin-left: 4px;
+          width: 8px;
+          height: 16px;
+
+          .sort-up,
+          .sort-bottom {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            width: 8px;
+            height: 8px;
+
+            img {
+              width: 8px;
+              height: 4px;
+            }
+          }
+        }
+      }
+
+      .price {
+        margin-left: 128px;
+      }
+
+      .today {
+        margin-left: 47px;
+      }
+    }
+
+    .coin-body {
+      margin-top: 9px;
+      width: 100%;
+
+      .body-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: 23.5px;
+        width: 100%;
+        height: 38px;
+
+        &:nth-child(1) {
+          margin-top: 0;
+        }
+
+        .item-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          width: 276px;
+          height: 100%;
+
+          .coin-img {
+            width: 32px;
+            height: 32px;
+
+            img {
+              width: 32px;
+              height: 32px;
+            }
+          }
+
+          .coin-name {
+            margin-left: 10px;
+            width: 85px;
+            height: 34px;
+
+            .upper-name {
+              height: 20px;
+              line-height: 20px;
+            }
+
+            .letter-name {
+              height: 14px;
+              line-height: 14px;
+            }
+          }
+
+          .coin-echars {
+            width: 60px;
+            height: 35px;
+          }
+
+          .coin-price {
+            margin-left: 13px;
+            width: 75px;
+            height: 38px;
+
+            .upper-price {
+              height: 20px;
+              line-height: 20px;
+              text-align: right;
+            }
+
+            .letter-price {
+              height: 16px;
+              line-height: 16px;
+              text-align: right;
+            }
+          }
+        }
+
+        .item-right {
+          margin-left: 8px;
+          width: 61px;
+          height: 25px;
+          line-height: 25px;
+          text-align: center;
+          background: #45b26b;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+</style>

src/views/market/Index.vue

@@ -3,6 +3,9 @@
     <div class="market-nav">
       <div class="nav-left">
         <div class="pf600 fs18 fc121212" @click="messageChange('selfSelected')">自选</div>
+        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('bibi')">
+          币币
+        </div>
         <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('contract')">
           合约
         </div>
@@ -23,11 +26,13 @@
   import Contract from "./Contract.vue";
   import SecondContract from "./SecondContract.vue";
   import SelfSelected from "./SelfSelected.vue";
+  import Bibi from "./Bibi.vue";
   import { ref, computed } from "vue";
 
   const current = ref("selfSelected");
   const componentsMap = {
     contract: Contract,
+    bibi: Bibi,
     secondContract: SecondContract,
     selfSelected: SelfSelected,
   };
@@ -63,7 +68,6 @@
         width: 345px;
         height: 24px;
 
-
         .sys-notifi {
           margin-left: 35px;
         }