1，首页-个人中心-编辑资料完成 2，行情-自选，合约，秒合约完成 3，行情-委托挂单，最新成交完成

src/assets/icon/market/Star.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="M21.9646 10.7672L17.7459 14.4075L19.0312 19.8515C19.1021 20.1471 19.0838 20.457 18.9787 20.7422C18.8736 21.0273 18.6863 21.2749 18.4405 21.4537C18.1947 21.6325 17.9015 21.7344 17.5978 21.7466C17.2941 21.7588 16.9936 21.6807 16.7343 21.5222L11.9999 18.6084L7.26275 21.5222C7.00347 21.6798 6.70335 21.7571 6.4002 21.7445C6.09704 21.7318 5.8044 21.6298 5.55913 21.4512C5.31386 21.2725 5.12692 21.0253 5.02185 20.7407C4.91679 20.4561 4.89829 20.1467 4.96869 19.8515L6.25869 14.4075L2.03994 10.7672C1.81053 10.5689 1.64462 10.3074 1.56293 10.0154C1.48123 9.72343 1.48737 9.41383 1.58058 9.1253C1.67379 8.83677 1.84994 8.58209 2.08703 8.39307C2.32412 8.20405 2.61164 8.08907 2.91369 8.06248L8.44494 7.61623L10.5787 2.45248C10.6942 2.17106 10.8908 1.93034 11.1434 1.76093C11.3961 1.59151 11.6934 1.50105 11.9976 1.50105C12.3018 1.50105 12.5991 1.59151 12.8518 1.76093C13.1044 1.93034 13.301 2.17106 13.4165 2.45248L15.5493 7.61623L21.0806 8.06248C21.3832 8.08808 21.6716 8.20242 21.9095 8.39118C22.1475 8.57994 22.3244 8.83472 22.4182 9.1236C22.512 9.41248 22.5185 9.72262 22.4368 10.0152C22.3551 10.3077 22.1889 10.5696 21.959 10.7681L21.9646 10.7672Z" fill="#F59E0B"/>
+</svg>

src/assets/icon/market/bottom-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 0.75L4.75 4.75L8.75 0.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/market/btn_triangle_down_bk.svg

@@ -0,0 +1,5 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.402472">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6L8 2H0L4 6Z" fill="black"/>
+</g>
+</svg>

src/assets/icon/market/left-arrow.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="M15.0004 3.80618C15.1843 3.80628 15.3605 3.87923 15.4906 4.00931C15.6207 4.13939 15.6936 4.31559 15.6937 4.49954C15.6937 4.68365 15.6208 4.86057 15.4906 4.99075L8.52087 11.9605L8.48083 11.9995L15.4906 19.0093C15.5549 19.0737 15.6061 19.1499 15.641 19.2339C15.6758 19.318 15.6937 19.4085 15.6937 19.4995C15.6937 19.5906 15.6758 19.681 15.641 19.7652C15.6061 19.8494 15.5551 19.9263 15.4906 19.9908C15.4263 20.0551 15.35 20.1063 15.266 20.1411C15.1819 20.176 15.0914 20.1938 15.0004 20.1939C14.9093 20.1939 14.8189 20.1759 14.7347 20.1411C14.6505 20.1063 14.5736 20.0552 14.5092 19.9908L7.00916 12.4908C6.94465 12.4263 6.89368 12.3494 6.85876 12.2652C6.82393 12.181 6.80603 12.0906 6.80603 11.9995C6.80608 11.9085 6.82391 11.818 6.85876 11.7339C6.89366 11.6499 6.94479 11.5736 7.00916 11.5093L14.5092 4.00931C14.6393 3.87913 14.8163 3.80618 15.0004 3.80618Z" fill="#1F2937" stroke="#1F2937" stroke-width="0.1125"/>
+</svg>

src/assets/icon/market/search.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.1634 16.8367L14.4532 13.125C15.5657 11.6754 16.085 9.85688 15.906 8.0384C15.7269 6.21992 14.8628 4.53764 13.489 3.33281C12.1153 2.12798 10.3346 1.49083 8.50831 1.5506C6.68202 1.61037 4.94684 2.36259 3.65476 3.65466C2.36269 4.94674 1.61047 6.68192 1.5507 8.50821C1.49093 10.3345 2.12808 12.1152 3.33291 13.4889C4.53774 14.8627 6.22002 15.7268 8.0385 15.9059C9.85697 16.0849 11.6755 15.5656 13.1251 14.4531L16.8384 18.1672C16.9256 18.2544 17.0291 18.3236 17.1431 18.3708C17.257 18.418 17.3791 18.4423 17.5024 18.4423C17.6258 18.4423 17.7479 18.418 17.8618 18.3708C17.9758 18.3236 18.0793 18.2544 18.1665 18.1672C18.2537 18.08 18.3229 17.9765 18.3701 17.8625C18.4173 17.7486 18.4416 17.6265 18.4416 17.5031C18.4416 17.3798 18.4173 17.2577 18.3701 17.1437C18.3229 17.0298 18.2537 16.9263 18.1665 16.8391L18.1634 16.8367ZM3.43761 8.75001C3.43761 7.69929 3.74918 6.67218 4.33292 5.79854C4.91667 4.9249 5.74637 4.24399 6.7171 3.8419C7.68783 3.43981 8.756 3.3346 9.78652 3.53959C10.817 3.74457 11.7636 4.25054 12.5066 4.9935C13.2496 5.73647 13.7555 6.68307 13.9605 7.71359C14.1655 8.74411 14.0603 9.81228 13.6582 10.783C13.2561 11.7537 12.5752 12.5834 11.7016 13.1672C10.8279 13.7509 9.80082 14.0625 8.75011 14.0625C7.34159 14.0611 5.99117 13.5009 4.9952 12.5049C3.99923 11.5089 3.43905 10.1585 3.43761 8.75001Z" fill="#4B5563"/>
+</svg>

src/assets/less/color.less

@@ -51,3 +51,15 @@
 .fc999999 {
   color: #999999;
 }
+
+.fc45B26B {
+  color: #45b26b;
+}
+
+.fc444444 {
+  color: #444444;
+}
+
+.fcFF7171 {
+  color: #ff7171;
+}

src/router/index.js

@@ -7,6 +7,7 @@ import SearchIcon from "../views/index/SearchIcon.vue";
 import Notification from "../views/notification/Index.vue";
 import IndexUser from "../views/index/User.vue";
 import UserCenter from "../views/index/UserCenter.vue";
+import MarketDetails from "../views/market/details/Index.vue";
 
 const routes = [
   {
@@ -49,6 +50,11 @@ const routes = [
     name: "userCenter",
     component: UserCenter,
   },
+  {
+    path: "/marketDetails",
+    name: "marketDetails",
+    component: MarketDetails,
+  },
 ];
 
 const router = createRouter({

src/views/index/UserCenter.vue

@@ -8,7 +8,9 @@
           <div class="name pf500 fs18 fc061237">用户昵称</div>
         </div>
       </div>
-      <div class="info-right pf400 fs12 fcFFFFFF">编辑</div>
+      <div class="info-right pf400 fs12 fcFFFFFF" @click="updateInfoFlag = true">
+        编辑
+      </div>
     </div>
     <div class="notifi-index">
       <div class="notifi-classifi">
@@ -23,14 +25,21 @@
       <component :is="currentComponent" />
     </div>
   </div>
+  <UpdateInfo v-show="updateInfoFlag" @updateInfoClose="updateInfoClose"></UpdateInfo>
 </template>
 <script setup>
   import HeaderNav from "./components/HeaderNav.vue";
   import HobbySet from "./user/HobbySet.vue";
   import SafetySet from "./user/SafetySet.vue";
   import UserInfo from "./user/UserInfo.vue";
+  import UpdateInfo from "./dialog/UpdateInfo.vue";
   import { ref, computed } from "vue";
 
+  const updateInfoFlag = ref(false);
+  const updateInfoClose = () => {
+    updateInfoFlag.value = false;
+  };
+
   const current = ref("userInfo");
   const componentsMap = {
     hobbySet: HobbySet,

src/views/index/dialog/UpdateInfo.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="update-info">
+    <div class="apply-mask" @click="emits('updateInfoClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">编辑资料</div>
+      <img
+        src="../../../assets/img/index/user/default-head.png"
+        class="apply-img"
+        alt="" />
+      <div class="update-btn pf500 fs12 fcFFFFFF">编辑</div>
+      <div class="info-name">
+        <div class="name-text pf500 fs14 fc333333">
+          昵称
+          <input type="text" class="input pf400 fs16 fc4B5563" placeholder="昵称内容" />
+        </div>
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF">保存</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const props = defineProps(["updateInfoFlag"]);
+  const emits = defineEmits(["updateInfoClose"]);
+</script>
+<style lang="less" scoped>
+  .update-info {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    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: 432px;
+      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);
+      }
+
+      .apply-text {
+        margin-top: 21px;
+        width: 345px;
+        height: 24px;
+        line-height: 24px;
+        letter-spacing: 0.2px;
+      }
+
+      .apply-img {
+        margin-top: 28px;
+        width: 100px;
+        height: 100px;
+      }
+
+      .update-btn {
+        margin-top: 8px;
+        width: 60px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        background: #df384c;
+        border-radius: 5px;
+      }
+
+      .info-name {
+        margin-top: 12px;
+        width: 345px;
+
+        .input {
+          margin-top: 5px;
+          padding-left: 11px;
+          width: 345px;
+          height: 45px;
+          border-radius: 6px;
+          box-sizing: border-box;
+          background: #f5f5f5;
+          outline: none;
+          border: none;
+        }
+      }
+
+      .sure-btn {
+        margin-top: 35px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/market/Contract.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

@@ -1,5 +1,77 @@
 <template>
-  <div>market</div>
+  <div class="market">
+    <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('contract')">
+          合约
+        </div>
+        <div
+          class="sys-notifi pf600 fs14 fcA8A8A8"
+          @click="messageChange('secondContract')">
+          秒合约
+        </div>
+      </div>
+      <div class="nav-right">
+        <img src="../../assets/icon/market/search.svg" alt="" />
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import Contract from "./Contract.vue";
+  import SecondContract from "./SecondContract.vue";
+  import SelfSelected from "./SelfSelected.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("selfSelected");
+  const componentsMap = {
+    contract: Contract,
+    secondContract: SecondContract,
+    selfSelected: SelfSelected,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .market {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 100px;
+    width: 100%;
+
+    .market-nav {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 21px;
+      width: 345px;
+      height: 24px;
+
+      .nav-left {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-end;
+        width: 349px;
+        height: 24px;
+
+        .sys-notifi {
+          margin-left: 35px;
+        }
+      }
+
+      .nav-right {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+</style>

src/views/market/SecondContract.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="second-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">Binance</div>
+            <div class="letter-name pf400 fs10 fcA9A9A9">BNB</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>
+  .second-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/SelfSelected.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="self-selected">
+    <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"
+        @click="goCoinDetails">
+        <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">Ethereum</div>
+            <div class="letter-name pf400 fs10 fcA9A9A9">ETH</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>
+  import { useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const goCoinDetails = () => {
+    router.push("/marketDetails");
+  };
+</script>
+<style lang="less" scoped>
+  .self-selected {
+    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/details/EntrustingOrder.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="entrusting-order">
+    <div class="order-header pf400 fs12 fc666666">
+      <div class="header-buy">买盘</div>
+      <div class="header-number">数量(AVAX)</div>
+      <div class="header-price">价格(AVAX)</div>
+      <div class="header-number2">数量(AVAX)</div>
+      <div class="header-sell">卖盘</div>
+    </div>
+    <div class="order-body">
+      <div class="order-item" v-for="(item, index) in 15" :key="index">
+        <div class="item-buy fs400 fs12 fcA8A8A8">{{ index + 1 }}</div>
+        <div class="item-number fs400 fs12 fc444444">37.80K</div>
+        <div class="item-price fs400 fs12">
+          <div class="fc45B26B">40,166.82</div>
+          <div class="price-second fcFF7171">39,962.74</div>
+        </div>
+        <div class="item-number2 fs400 fs12 fc444444">37.80K</div>
+        <div class="item-sell fs400 fs12 fcA8A8A8">{{ index + 1 }}</div>
+      </div>
+    </div>
+    <div class="buy-sell pf500 fs16 fcFFFFFF">
+      <div class="buy-btn">买入(做多)</div>
+      <div class="sell-btn">卖出(做空)</div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .entrusting-order {
+    width: 100%;
+
+    .order-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      margin-top: 6px;
+      width: 100%;
+      height: 24px;
+
+      .header-buy {
+        width: 46px;
+        height: 24px;
+        line-height: 24px;
+        text-align: left;
+      }
+
+      .header-number {
+        width: 65px;
+        height: 24px;
+        line-height: 24px;
+        text-align: left;
+      }
+
+      .header-price {
+        width: 133px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+      }
+
+      .header-number2 {
+        width: 65px;
+        height: 24px;
+        line-height: 24px;
+        text-align: right;
+      }
+
+      .header-sell {
+        width: 40px;
+        height: 24px;
+        line-height: 24px;
+        text-align: right;
+      }
+    }
+
+    .order-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+
+      .order-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+
+        .item-buy {
+          width: 46px;
+          height: 21px;
+          line-height: 21px;
+          text-align: left;
+        }
+
+        .item-number {
+          width: 50px;
+          height: 21px;
+          line-height: 21px;
+          text-align: left;
+        }
+
+        .item-price {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          width: 163px;
+          height: 21px;
+          text-align: center;
+
+          .price-second {
+            margin-left: 9px;
+          }
+        }
+
+        .item-number2 {
+          width: 50px;
+          height: 21px;
+          line-height: 21px;
+          text-align: right;
+        }
+
+        .item-sell {
+          width: 40px;
+          height: 21px;
+          line-height: 21px;
+          text-align: right;
+        }
+      }
+    }
+
+    .buy-sell {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 15px;
+      width: 345px;
+      height: 38px;
+
+      .buy-btn {
+        width: 164px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        background: #45b26b;
+        border-radius: 6px;
+      }
+
+      .sell-btn {
+        width: 164px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        background: #df384c;
+        border-radius: 6px;
+      }
+    }
+  }
+</style>

src/views/market/details/Index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="market-details">
+    <div class="market-header">
+      <div class="header-back" @click="goBack">
+        <img src="../../../assets/icon/market/left-arrow.svg" alt="" />
+      </div>
+      <div class="header-icon pf600 fs18 fc121212">
+        BTCUSDT
+        <img src="../../../assets/icon/market/btn_triangle_down_bk.svg" alt="" />
+      </div>
+      <div class="header-func">
+        <img src="../../../assets/icon/market/ic_share_bk.svg" alt="" class="share" />
+        <img src="../../../assets/icon/market/Star.svg" alt="" class="star" />
+      </div>
+    </div>
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212" @click="messageChange('marketConditions')">
+        行情
+      </div>
+      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('info')">
+        信息
+      </div>
+      <div
+        class="sys-notifi pf600 fs14 fcA8A8A8"
+        @click="messageChange('transactionData')">
+        交易数据
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import Info from "./Info.vue";
+  import MarketConditions from "./MarketConditions.vue";
+  import TransactionData from "./TransactionData.vue";
+  import { ref, computed } from "vue";
+  import { useRouter } from "vue-router";
+
+  const router = useRouter();
+
+  const current = ref("marketConditions");
+  const componentsMap = {
+    info: Info,
+    marketConditions: MarketConditions,
+    transactionData: TransactionData,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+
+  const goBack = () => {
+    router.back();
+  };
+</script>
+<style lang="less" scoped>
+  .market-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 40px;
+    width: 100%;
+
+    .market-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 15px;
+      width: 349px;
+      height: 24px;
+
+      .header-back {
+        width: 24px;
+        height: 24px;
+
+        img {
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+      .header-icon {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        margin-left: 40px;
+        height: 24px;
+
+        img {
+          margin-left: 4px;
+          width: 8px;
+          height: 8px;
+        }
+      }
+
+      .header-func {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        height: 24px;
+
+        .share {
+          margin-top: 3px;
+          width: 24px;
+          height: 24px;
+        }
+
+        .star {
+          margin-left: 10px;
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+
+    .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: 35px;
+      }
+    }
+  }
+</style>

src/views/market/details/Info.vue

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

src/views/market/details/LatestTransactions.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="latest-order">
+    <div class="order-header pf400 fs12 fc666666">
+      <div class="header-buy">时间</div>
+      <div class="header-number">方向</div>
+      <div class="header-price">价格(AVAX)</div>
+      <div class="header-number2">数量(AVAX)</div>
+    </div>
+    <div class="order-body">
+      <div class="order-item" v-for="(item, index) in 15" :key="index">
+        <div class="item-buy fs400 fs12 fcA8A8A8">13:44:25</div>
+        <div class="item-number fs400 fs12 fc45B26B">买入</div>
+        <div class="item-price fs400 fs12">
+          <div class="fc444444">1.2505</div>
+        </div>
+        <div class="item-number2 fs400 fs12 fc444444">40,166.82</div>
+      </div>
+    </div>
+    <div class="buy-sell pf500 fs16 fcFFFFFF">
+      <div class="buy-btn">买入(做多)</div>
+      <div class="sell-btn">卖出(做空)</div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="less" scoped>
+  .latest-order {
+    width: 100%;
+
+    .order-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      margin-top: 6px;
+      width: 100%;
+      height: 24px;
+
+      .header-buy {
+        width: 25%;
+        height: 24px;
+        line-height: 24px;
+        text-align: left;
+      }
+
+      .header-number {
+        width: 25%;
+        height: 24px;
+        line-height: 24px;
+        text-align: left;
+      }
+
+      .header-price {
+        width: 25%;
+        height: 24px;
+        line-height: 24px;
+        text-align: left;
+      }
+
+      .header-number2 {
+        width: 25%;
+        height: 24px;
+        line-height: 24px;
+        text-align: right;
+      }
+    }
+
+    .order-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+
+      .order-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+
+        .item-buy {
+          width: 25%;
+          height: 21px;
+          line-height: 21px;
+          text-align: left;
+        }
+
+        .item-number {
+          width: 25%;
+          height: 21px;
+          line-height: 21px;
+          text-align: left;
+        }
+
+        .item-price {
+          width: 25%;
+          height: 21px;
+          text-align: left;
+        }
+
+        .item-number2 {
+          width: 25%;
+          height: 21px;
+          line-height: 21px;
+          text-align: right;
+        }
+      }
+    }
+
+    .buy-sell {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 15px;
+      width: 345px;
+      height: 38px;
+
+      .buy-btn {
+        width: 164px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        background: #45b26b;
+        border-radius: 6px;
+      }
+
+      .sell-btn {
+        width: 164px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        background: #df384c;
+        border-radius: 6px;
+      }
+    }
+  }
+</style>

src/views/market/details/MarketConditions.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="market-conditions">
+    <div class="market-price">
+      <div class="price-left">
+        <div class="left-price pf400 fs14 fc333333">
+          实时价格
+          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+        </div>
+        <div class="left-number pf600 fs20 fc1F2937">1,125,158.00</div>
+        <div class="left-appro pf500 fs14 fcA8A8A8">
+          ≈35,458.00
+          <div class="appro pf500 fs14 fc45B26B">+1.42%</div>
+        </div>
+      </div>
+      <div class="price-right">
+        <div class="right-number-top">
+          <div class="right-number-top-price">
+            <div class="pf400 fs10 fcA8A8A8">24h 最高价</div>
+            <div class="pf400 fs10 fc2C3131">78,776.76</div>
+          </div>
+          <div class="right-number-top-number">
+            <div class="pf400 fs10 fcA8A8A8">24h 成交量 (BTC)</div>
+            <div class="pf400 fs10 fc2C3131">78,776.76</div>
+          </div>
+        </div>
+        <div class="right-number-bottom">
+          <div class="right-number-top-price">
+            <div class="pf400 fs10 fcA8A8A8">24h 最高价</div>
+            <div class="pf400 fs10 fc2C3131">78,776.76</div>
+          </div>
+          <div class="right-number-top-number">
+            <div class="pf400 fs10 fcA8A8A8">24h 成交量 (BTC)</div>
+            <div class="pf400 fs10 fc2C3131">78,776.76</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="k-line-main"></div>
+    <div class="notifi-classifi">
+      <div class="pf600 fs14 fc121212" @click="messageChange('entrustingOrder')">
+        委托挂单
+      </div>
+      <div
+        class="sys-notifi pf600 fs14 fcA8A8A8"
+        @click="messageChange('latestTransactions')">
+        最新成交
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import EntrustingOrder from "./EntrustingOrder.vue";
+  import LatestTransactions from "./LatestTransactions.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("entrustingOrder");
+  const componentsMap = {
+    entrustingOrder: EntrustingOrder,
+    latestTransactions: LatestTransactions,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .market-conditions {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 349px;
+
+    .market-price {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 8px;
+      width: 100%;
+      height: 73px;
+
+      .price-left {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        width: 144px;
+        height: 69px;
+
+        .left-price {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          height: 18px;
+
+          img {
+            margin-left: 5px;
+            width: 8px;
+            height: 4px;
+          }
+        }
+
+        .left-number {
+          margin-top: 5px;
+        }
+
+        .left-appro {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          margin-top: 3px;
+
+          .appro {
+            margin-left: 9px;
+          }
+        }
+      }
+
+      .price-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        height: 100%;
+
+        .right-number-top {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          width: 189px;
+          height: 32px;
+
+          .right-number-top-price {
+            width: 93px;
+            height: 32px;
+
+            div {
+              height: 16px;
+              line-height: 16px;
+              text-align: end;
+            }
+          }
+
+          .right-number-top-number {
+            width: 93px;
+            height: 32px;
+
+            div {
+              height: 16px;
+              line-height: 16px;
+              text-align: end;
+            }
+          }
+        }
+
+        .right-number-bottom {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          margin-top: 9px;
+          width: 189px;
+          height: 32px;
+
+          .right-number-top-price {
+            width: 93px;
+            height: 32px;
+
+            div {
+              height: 16px;
+              line-height: 16px;
+              text-align: end;
+            }
+          }
+
+          .right-number-top-number {
+            width: 93px;
+            height: 32px;
+
+            div {
+              height: 16px;
+              line-height: 16px;
+              text-align: end;
+            }
+          }
+        }
+      }
+    }
+
+    .k-line-main {
+      margin-top: 15px;
+      width: 100%;
+      height: 283px;
+      background: pink;
+    }
+
+    .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: 47px;
+      }
+    }
+  }
+</style>

src/views/market/details/TransactionData.vue

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