今日工作11.29 1，质押申购 完成 2，质押赎回 完成 3，质押记录 完成 4，质押-无法赎回 完成 5，OTC-Tabbar及路由切换 完成 6，OTC-C2C 40% 7，OTC-发消息 30% 8，OTC-消息 完成

src/assets/icon/asset/otcTabbar/fourth-clicked.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#DF384C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#DF384C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/asset/otcTabbar/fourth.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="#A8A8A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="#A8A8A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/asset/otcTabbar/second-clicked.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C3.95344 0 0 2.30625 0 5.25V14.25C0 17.1938 3.95344 19.5 9 19.5C14.0466 19.5 18 17.1938 18 14.25V5.25C18 2.30625 14.0466 0 9 0ZM16.5 9.75C16.5 10.6519 15.7612 11.5716 14.4741 12.2738C13.0247 13.0641 11.0803 13.5 9 13.5C6.91969 13.5 4.97531 13.0641 3.52594 12.2738C2.23875 11.5716 1.5 10.6519 1.5 9.75V8.19C3.09938 9.59625 5.83406 10.5 9 10.5C12.1659 10.5 14.9006 9.5925 16.5 8.19V9.75ZM3.52594 2.72625C4.97531 1.93594 6.91969 1.5 9 1.5C11.0803 1.5 13.0247 1.93594 14.4741 2.72625C15.7612 3.42844 16.5 4.34812 16.5 5.25C16.5 6.15188 15.7612 7.07156 14.4741 7.77375C13.0247 8.56406 11.0803 9 9 9C6.91969 9 4.97531 8.56406 3.52594 7.77375C2.23875 7.07156 1.5 6.15188 1.5 5.25C1.5 4.34812 2.23875 3.42844 3.52594 2.72625ZM14.4741 16.7738C13.0247 17.5641 11.0803 18 9 18C6.91969 18 4.97531 17.5641 3.52594 16.7738C2.23875 16.0716 1.5 15.1519 1.5 14.25V12.69C3.09938 14.0963 5.83406 15 9 15C12.1659 15 14.9006 14.0925 16.5 12.69V14.25C16.5 15.1519 15.7612 16.0716 14.4741 16.7738Z" fill="#DF384C"/>
+</svg>

src/assets/icon/asset/otcTabbar/second.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C3.95344 0 0 2.30625 0 5.25V14.25C0 17.1938 3.95344 19.5 9 19.5C14.0466 19.5 18 17.1938 18 14.25V5.25C18 2.30625 14.0466 0 9 0ZM16.5 9.75C16.5 10.6519 15.7612 11.5716 14.4741 12.2738C13.0247 13.0641 11.0803 13.5 9 13.5C6.91969 13.5 4.97531 13.0641 3.52594 12.2738C2.23875 11.5716 1.5 10.6519 1.5 9.75V8.19C3.09938 9.59625 5.83406 10.5 9 10.5C12.1659 10.5 14.9006 9.5925 16.5 8.19V9.75ZM3.52594 2.72625C4.97531 1.93594 6.91969 1.5 9 1.5C11.0803 1.5 13.0247 1.93594 14.4741 2.72625C15.7612 3.42844 16.5 4.34812 16.5 5.25C16.5 6.15188 15.7612 7.07156 14.4741 7.77375C13.0247 8.56406 11.0803 9 9 9C6.91969 9 4.97531 8.56406 3.52594 7.77375C2.23875 7.07156 1.5 6.15188 1.5 5.25C1.5 4.34812 2.23875 3.42844 3.52594 2.72625ZM14.4741 16.7738C13.0247 17.5641 11.0803 18 9 18C6.91969 18 4.97531 17.5641 3.52594 16.7738C2.23875 16.0716 1.5 15.1519 1.5 14.25V12.69C3.09938 14.0963 5.83406 15 9 15C12.1659 15 14.9006 14.0925 16.5 12.69V14.25C16.5 15.1519 15.7612 16.0716 14.4741 16.7738Z" fill="#A8A8A8"/>
+</svg>

src/assets/icon/asset/search-black.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6165 15.29L12.9064 11.5783C14.0188 10.1286 14.5382 8.31013 14.3591 6.49165C14.1801 4.67318 13.316 2.99089 11.9422 1.78607C10.5684 0.581238 8.78776 -0.0559155 6.96147 0.00385482C5.13517 0.0636252 3.4 0.815844 2.10792 2.10792C0.815844 3.4 0.0636252 5.13517 0.00385482 6.96147C-0.0559155 8.78776 0.581238 10.5684 1.78607 11.9422C2.99089 13.316 4.67318 14.1801 6.49165 14.3591C8.31013 14.5382 10.1286 14.0188 11.5783 12.9064L15.2915 16.6204C15.3787 16.7077 15.4823 16.7768 15.5962 16.824C15.7102 16.8712 15.8323 16.8955 15.9556 16.8955C16.0789 16.8955 16.2011 16.8712 16.315 16.824C16.4289 16.7768 16.5325 16.7077 16.6197 16.6204C16.7069 16.5332 16.7761 16.4297 16.8232 16.3158C16.8704 16.2018 16.8947 16.0797 16.8947 15.9564C16.8947 15.8331 16.8704 15.7109 16.8232 15.597C16.7761 15.4831 16.7069 15.3795 16.6197 15.2923L16.6165 15.29ZM1.89076 7.20326C1.89076 6.15255 2.20233 5.12543 2.78608 4.2518C3.36982 3.37816 4.19952 2.69724 5.17026 2.29515C6.14099 1.89306 7.20916 1.78786 8.23968 1.99284C9.2702 2.19782 10.2168 2.70379 10.9598 3.44676C11.7027 4.18972 12.2087 5.13632 12.4137 6.16684C12.6187 7.19737 12.5135 8.26554 12.1114 9.23627C11.7093 10.207 11.0284 11.0367 10.1547 11.6204C9.28109 12.2042 8.25398 12.5158 7.20326 12.5158C5.79474 12.5143 4.44433 11.9541 3.44836 10.9582C2.45238 9.96219 1.89221 8.61178 1.89076 7.20326Z" fill="#333333"/>
+</svg>

src/router/index.js

@@ -47,6 +47,10 @@ import StakingIndex from "@/views/index/staking/Index.vue";
 import StakingRules from "@/views/index/staking/Rules.vue";
 import StakingRecord from "@/views/index/staking/Record.vue";
 import OTCIndex from "@/views/asset/otc/Index.vue";
+import OTCMessageIndex from "@/views/asset/otc/message/Index.vue";
+import OTCOrderIndex from "@/views/asset/otc/order/Index.vue";
+import OTCTransactionIndex from "@/views/asset/otc/transaction/Index.vue";
+import OTCUserIndex from "@/views/asset/otc/user/Index.vue";
 
 import CommonFunctionsPopup from "@/views/bitcoin/CommonFunctionsPopup/CommonFunctionsPopup.vue"; // 子组件路径
 import TradeRules from "@/views/bitcoin/CommonFunctionsPopup/GeneralLevel2/TradeRules.vue"; // 新建
@@ -149,6 +153,28 @@ const routes = [
     path: "/otcIndex",
     name: "otcIndex",
     component: OTCIndex,
+    children: [
+      {
+        path: "",
+        name: "otcTransactionIndex",
+        component: OTCTransactionIndex,
+      },
+      {
+        path: "/otcMessageIndex",
+        name: "otcMessageIndex",
+        component: OTCMessageIndex,
+      },
+      {
+        path: "/otcOrderIndex",
+        name: "otcOrderIndex",
+        component: OTCOrderIndex,
+      },
+      {
+        path: "/otcUserIndex",
+        name: "otcUserIndex",
+        component: OTCUserIndex,
+      },
+    ],
   },
   {
     path: "/applyPermission",

src/views/asset/otc/Index.vue

@@ -1,9 +1,91 @@
 <template>
   <!-- OTC-首页 -->
-  <div class="otc-index">1</div>
+  <div class="otc-index">
+    <router-view />
+    <div class="footer-tabbar">
+      <div
+        class="tabbar-item"
+        v-for="(item, index) in tabbarList"
+        :key="index"
+        @click="tabbarChange(item.key, item.path)">
+        <img
+          class="item-image"
+          :src="current === item.key ? item.selectedImage : item.image"
+          alt="" />
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+  import { useRoute, useRouter } from "vue-router";
+  import { ref } from "vue";
+
+  const router = useRouter();
+
+  const current = ref("otcIndex");
+
+  const tabbarChange = (key, path) => {
+    current.value = key;
+    router.push(path);
+  };
+
+  const tabbarList = [
+    {
+      key: "otcIndex",
+      path: "/otcIndex",
+      image: require("@/assets/icon/asset/otcTabbar/first.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/first-clicked.svg"),
+    },
+    {
+      key: "otcOrderIndex",
+      path: "/otcOrderIndex",
+      image: require("@/assets/icon/asset/otcTabbar/second.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/second-clicked.svg"),
+    },
+    {
+      key: "otcMessageIndex",
+      path: "/otcMessageIndex",
+      image: require("@/assets/icon/asset/otcTabbar/third.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/third-clicked.svg"),
+    },
+    {
+      key: "otcUserIndex",
+      path: "/otcUserIndex",
+      image: require("@/assets/icon/asset/otcTabbar/fourth.svg"),
+      selectedImage: require("@/assets/icon/asset/otcTabbar/fourth-clicked.svg"),
+    },
+  ];
+</script>
 <style lang="less" scoped>
   .otc-index {
+    width: 100%;
+
+    .footer-tabbar {
+      position: fixed;
+      left: 15px;
+      bottom: 37px;
+      z-index: 99;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: 345px;
+      height: 57px;
+      background: #fff;
+      border: 1px solid #ebebeb;
+      border-radius: 16px;
+
+      .tabbar-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+
+        .item-image {
+          width: 19px;
+          height: 19px;
+        }
+      }
+    }
   }
 </style>

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

@@ -0,0 +1,74 @@
+<template>
+  <!-- 消息-首页 -->
+  <HeaderNav headerText="消息"></HeaderNav>
+  <div class="message-index">
+    <div class="platform-service">
+      <div class="service-left">
+        <img src="@/assets/img/asset/platform-service.svg" class="platform-head" alt="" />
+        <div class="left-info">
+          <div class="info-name pf500 fs18 fc061237">平台客服</div>
+          <div class="info-message pf500 fs12 fc999999">消息内容文本显示</div>
+        </div>
+      </div>
+      <div class="service-right pf500 fs12 fc999999">11/07 22:55:50</div>
+    </div>
+    <div class="merchant-service margin-top17" v-for="(item, index) in 3" :key="index">
+      <div class="service-left">
+        <img src="@/assets/img/asset/Avatar.svg" class="platform-head" alt="" />
+        <div class="left-info">
+          <div class="info-name pf500 fs18 fc061237">商家昵称</div>
+          <div class="info-message pf500 fs12 fc999999">消息内容文本显示</div>
+        </div>
+      </div>
+      <div class="service-right pf500 fs12 fc999999">11/07 22:55:50</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import HeaderNav from "../../../index/components/HeaderNav.vue";
+</script>
+<style lang="less" scoped>
+  .message-index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .margin-top17 {
+      margin-top: 17px;
+    }
+
+    .platform-service,
+    .merchant-service {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 345px;
+      height: 56px;
+
+      .service-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 56px;
+
+        .platform-head {
+          width: 56px;
+          height: 56px;
+        }
+
+        .left-info {
+          margin-left: 15px;
+
+          .info-message {
+            margin-top: 3px;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>2</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>3</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,11 @@
+<template>
+  <img src="@/assets/icon/asset/c2c.svg" class="c2c" alt="" />
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .c2c {
+    margin-top: 13px;
+    width: 345px;
+    height: 100px;
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>2</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

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

@@ -0,0 +1,119 @@
+<template>
+  <div class="otc-header">
+    <div class="header-content pf600 fs18 fc1F2937">
+      <img
+        class="left-arrow-image"
+        src="@/assets/icon/index/left-arrow.svg"
+        @click="toPath()" />
+      OTC交易
+      <div class="save pf500 fs14 fcDF384C">
+        <img src="@/assets/icon/index/Headphones.svg" class="service" alt="" />
+        <img src="@/assets/icon/asset/search-black.svg" class="search" alt="" />
+      </div>
+    </div>
+  </div>
+  <div class="index">
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212" @click="messageChange('c2c')">C2C</div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('fast')">
+        快捷交易
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('bulk')">
+        大宗交易
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import { ref, computed } from "vue";
+  import C2C from "./C2C.vue";
+  import Fast from "./Fast.vue";
+  import Bulk from "./Bulk.vue";
+
+  const current = ref("c2c");
+  const componentsMap = {
+    c2c: C2C,
+    fast: Fast,
+    bulk: Bulk,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .otc-header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 48px;
+    background: #ffffff;
+    overflow: hidden;
+
+    .header-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 48px;
+
+      .left-arrow-image {
+        position: absolute;
+        left: 14px;
+        top: 16px;
+        width: 9px;
+        height: 16px;
+      }
+
+      .save {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        position: absolute;
+        top: 12px;
+        right: 16px;
+        height: 24px;
+
+        .search {
+          margin-left: 20px;
+          width: 17px;
+          height: 17px;
+        }
+
+        .service {
+          margin-top: 2px;
+        }
+      }
+    }
+  }
+
+  .index {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 48px;
+    width: 100%;
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 10px;
+      width: 349px;
+      height: 24px;
+
+      .sys-notifi {
+        margin-left: 42px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>4</div>
+</template>
+<script setup></script>
+<style lang="less" scoped></style>

src/views/index/Index.vue

@@ -87,8 +87,8 @@
       image: require("@/assets/img/index/Rectangle 8.svg"),
     },
     {
-      name: "提币",
-      image: require("@/assets/img/index/Rectangle 9.svg"),
+      name: "OTC交易",
+      image: require("@/assets/img/index/user/otc.svg"),
     },
   ];
 
@@ -102,7 +102,7 @@
     } else if (index == 6) {
       router.push("/rechargeIndex");
     } else if (index == 7) {
-      router.push("/withdrawIndex");
+      router.push("/otcIndex");
     }
   };