1.行情-切换币种 70% 2.行情-信息币种信息 完成 3.行情-信息币种规则 完成 4.行情-交易数据 完成 5.大户多空比按账户数统计，大户多空比按持仓量统计，多空人数比值，合约主动购买量，基差完成

src/assets/icon/market/question.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.25 9.75C7.25 9.89833 7.20601 10.0433 7.1236 10.1667C7.04119 10.29 6.92406 10.3861 6.78701 10.4429C6.64997 10.4997 6.49917 10.5145 6.35368 10.4856C6.2082 10.4566 6.07456 10.3852 5.96967 10.2803C5.86478 10.1754 5.79335 10.0418 5.76441 9.89632C5.73547 9.75083 5.75033 9.60003 5.80709 9.46299C5.86386 9.32594 5.95999 9.20881 6.08332 9.1264C6.20666 9.04399 6.35167 9 6.5 9C6.69891 9 6.88968 9.07902 7.03033 9.21967C7.17098 9.36032 7.25 9.55109 7.25 9.75ZM6.5 3C5.12125 3 4 4.00937 4 5.25V5.5C4 5.63261 4.05268 5.75978 4.14645 5.85355C4.24022 5.94732 4.36739 6 4.5 6C4.63261 6 4.75979 5.94732 4.85356 5.85355C4.94732 5.75978 5 5.63261 5 5.5V5.25C5 4.5625 5.67313 4 6.5 4C7.32688 4 8 4.5625 8 5.25C8 5.9375 7.32688 6.5 6.5 6.5C6.36739 6.5 6.24022 6.55268 6.14645 6.64644C6.05268 6.74021 6 6.86739 6 7V7.5C6 7.63261 6.05268 7.75978 6.14645 7.85355C6.24022 7.94732 6.36739 8 6.5 8C6.63261 8 6.75979 7.94732 6.85356 7.85355C6.94732 7.75978 7 7.63261 7 7.5V7.455C8.14 7.24562 9 6.33625 9 5.25C9 4.00937 7.87875 3 6.5 3ZM13 6.5C13 7.78558 12.6188 9.04228 11.9046 10.1112C11.1903 11.1801 10.1752 12.0132 8.98744 12.5052C7.79972 12.9972 6.49279 13.1259 5.23191 12.8751C3.97104 12.6243 2.81285 12.0052 1.90381 11.0962C0.994767 10.1872 0.375703 9.02896 0.124899 7.76809C-0.125905 6.50721 0.00281635 5.20028 0.494786 4.01256C0.986755 2.82484 1.81988 1.80968 2.8888 1.09545C3.95772 0.381218 5.21442 0 6.5 0C8.22335 0.00181989 9.87559 0.687223 11.0942 1.90582C12.3128 3.12441 12.9982 4.77665 13 6.5ZM12 6.5C12 5.4122 11.6774 4.34883 11.0731 3.44436C10.4687 2.53989 9.60975 1.83494 8.60476 1.41866C7.59977 1.00238 6.4939 0.893462 5.42701 1.10568C4.36011 1.3179 3.3801 1.84172 2.61092 2.61091C1.84173 3.3801 1.3179 4.36011 1.10568 5.427C0.893465 6.4939 1.00238 7.59976 1.41867 8.60476C1.83495 9.60975 2.5399 10.4687 3.44437 11.0731C4.34884 11.6774 5.4122 12 6.5 12C7.95818 11.9983 9.35617 11.4183 10.3873 10.3873C11.4184 9.35617 11.9983 7.95818 12 6.5Z" fill="#999999"/>
+</svg>

src/views/market/details/CoinInfo.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="coin-info">
+    <div class="info-name pf500 fs16 fc2C3131">
+      <img src="../../../assets/icon/coin/bnb.svg" alt="" />BTC/USDT
+    </div>
+    <div class="info-rank">
+      <div class="pf400 fs14 fc666666">排名</div>
+      <div class="pf500 fs14 fcDF384C">NO.1</div>
+    </div>
+    <div class="info-first margin-top15">
+      <div class="pf400 fs14 fc666666">市值</div>
+      <div class="first-right">
+        <div class="pf500 fs12 fc666666">＄2.16兆</div>
+        <div class="about pf400 fs10 fcA8A8A8">≈15.8 兆</div>
+      </div>
+    </div>
+    <div class="info-first margin-top8">
+      <div class="pf400 fs14 fc666666">完全释稀市值</div>
+      <div class="first-right">
+        <div class="pf500 fs12 fc666666">＄2.27兆</div>
+        <div class="about pf400 fs10 fcA8A8A8">≈16.2 兆</div>
+      </div>
+    </div>
+    <div class="info-second margin-top3">
+      <div class="pf400 fs14 fc666666">市场占有率</div>
+      <div class="pf500 fs12 fc666666">59.0507%</div>
+    </div>
+    <div class="info-first margin-top3">
+      <div class="pf400 fs14 fc666666">成交量</div>
+      <div class="first-right">
+        <div class="pf500 fs12 fc666666">＄1036.15亿</div>
+        <div class="about pf400 fs10 fcA8A8A8">≈7382.51 亿</div>
+      </div>
+    </div>
+    <div class="info-second margin-top3">
+      <div class="pf400 fs14 fc666666">成交量/市值</div>
+      <div class="pf500 fs12 fc666666">4.80%</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">流通数量</div>
+      <div class="pf500 fs12 fc666666">1993.80万 BTC</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">最大供给量</div>
+      <div class="pf500 fs12 fc666666">2100万 BTC</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">总量</div>
+      <div class="pf500 fs12 fc666666">1993.80万 BTC</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">场内持仓集中度</div>
+      <div class="pf500 fs12 fc666666">0.55</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">发行日期</div>
+      <div class="pf500 fs12 fc666666">2009-01-03</div>
+    </div>
+    <div class="info-third margin-top8">
+      <div class="pf400 fs14 fc666666">历史最高价</div>
+      <div class="first-right">
+        <div class="pf500 fs12 fc666666">＄1251850.0696</div>
+        <div class="about pf400 fs10 fc666666">≈899786.3216</div>
+        <div class="about pf400 fs10 fcA8A8A8">2025-10-07</div>
+      </div>
+    </div>
+    <div class="info-third margin-top8">
+      <div class="pf400 fs14 fc666666">历史最低价</div>
+      <div class="first-right">
+        <div class="pf500 fs12 fc666666">＄1251850.0696</div>
+        <div class="about pf400 fs10 fc666666">≈899786.3216</div>
+        <div class="about pf400 fs10 fcA8A8A8">2025-10-07</div>
+      </div>
+    </div>
+    <div class="link-text margin-top8 pf600 fs14 fc121212">链接</div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">官方网站</div>
+      <div class="pf500 fs12 fc666666">Official Website</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">区块浏览器</div>
+      <div class="pf500 fs12 fc666666">blockchain.info</div>
+    </div>
+    <div class="book-text margin-top3 pf600 fs12 fc666666">白皮书</div>
+    <div class="link-text margin-top8 pf600 fs14 fc121212">介绍</div>
+    <div class="coin-desc pf400 fs12 fc666666">
+      比特币(BTC)是一种点对点加密货币，旨在充当独立于任何中央机构的一种交易手段。BTC可以安全，可验证和不变的方式进行电子现金转移。BTC于2009年推出，是通过在交易信息广播到比特币网络中的所有节点之前加盖交易时间戳的"第一种解决双重支出问题的虚拟数字货币”。比特币协议通过blockchain网络结构为拜占庭容错问题提供了解决方案，该概念最初由Stuart
+      Haber和W.Scott Stornetta创建1991年...
+    </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>
+  .coin-info {
+    width: 349px;
+
+    .margin-top15 {
+      margin-top: 15px;
+    }
+
+    .margin-top8 {
+      margin-top: 8px;
+    }
+
+    .margin-top3 {
+      margin-top: 3px;
+    }
+
+    .info-name {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 14px;
+      width: 100%;
+      height: 35px;
+
+      img {
+        margin-right: 7px;
+        width: 35px;
+        height: 35px;
+      }
+    }
+
+    .info-rank {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 16px;
+      width: 100%;
+      height: 20px;
+    }
+
+    .info-first {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 349px;
+      height: 37px;
+
+      .first-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-end;
+
+        .about {
+          margin-top: 3px;
+        }
+      }
+    }
+
+    .info-second {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 20px;
+    }
+
+    .info-third {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 54px;
+
+      .first-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-end;
+
+        .about {
+          margin-top: 3px;
+        }
+      }
+    }
+
+    .book-text {
+      width: 100%;
+      height: 24px;
+      line-height: 24px;
+      text-align: end;
+    }
+
+    .coin-desc {
+      margin-top: 4px;
+      width: 100%;
+      line-height: 24px;
+      letter-spacing: 0.2px;
+    }
+
+    .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/Info.vue

@@ -1,3 +1,48 @@
-<template>2</template>
-<script setup></script>
-<style lang="less" scoped></style>
+<template>
+  <div class="info">
+    <div class="notifi-classifi">
+      <div class="pf600 fs18 fc121212" @click="messageChange('coinInfo')">币种信息</div>
+      <div
+        class="sys-notifi pf600 fs14 fcA8A8A8"
+        @click="messageChange('transactionRelu')">
+        交易规则
+      </div>
+    </div>
+    <component :is="currentComponent" />
+  </div>
+</template>
+<script setup>
+  import CoinInfo from "./CoinInfo.vue";
+  import TransactionRelu from "./TransactionRelu.vue";
+  import { ref, computed } from "vue";
+
+  const current = ref("coinInfo");
+  const componentsMap = {
+    coinInfo: CoinInfo,
+    transactionRelu: TransactionRelu,
+  };
+  const currentComponent = computed(() => componentsMap[current.value]);
+
+  const messageChange = (key) => {
+    current.value = key;
+  };
+</script>
+<style lang="less" scoped>
+  .info {
+    width: 349px;
+
+    .notifi-classifi {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-end;
+      margin-top: 15px;
+      width: 349px;
+      height: 24px;
+
+      .sys-notifi {
+        margin-left: 47px;
+      }
+    }
+  }
+</style>

src/views/market/details/TransactionData.vue

@@ -1,4 +1,185 @@
-<template>3</template>
-<script setup></script>
-<style lang="less" scoped></style>
-3
+<template>
+  <div class="trans-data">
+    <div class="data-first">
+      <div class="pf600 fs16 fc333333">合约持仓量</div>
+    </div>
+    <div class="data-first">
+      <div class="first-title">
+        <div class="first-left pf600 fs16 fc333333" @click="kongbi1Flag = true">
+          大户多空比
+          <img src="../../../assets/icon/market/question.svg" alt="" />
+        </div>
+        <div class="first-right pf400 fs14 fc333333">
+          5分钟
+          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="data-first">
+      <div class="first-title">
+        <div class="first-left pf600 fs16 fc333333" @click="kongbi2Flag = true">
+          大户多空比
+          <img src="../../../assets/icon/market/question.svg" alt="" />
+        </div>
+        <div class="first-right pf400 fs14 fc333333">
+          5分钟
+          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="data-first">
+      <div class="first-title">
+        <div class="first-left pf600 fs16 fc333333" @click="bizhiFlag = true">
+          多空人数比值
+          <img src="../../../assets/icon/market/question.svg" alt="" />
+        </div>
+        <div class="first-right pf400 fs14 fc333333">
+          5分钟
+          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="data-first">
+      <div class="first-title">
+        <div class="first-left pf600 fs16 fc333333" @click="buySellFlag = true">
+          合约主动买卖量
+          <img src="../../../assets/icon/market/question.svg" alt="" />
+        </div>
+        <div class="first-right pf400 fs14 fc333333">
+          5分钟
+          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="data-first">
+      <div class="first-title" @click="jichaFlag = true">
+        <div class="first-left pf600 fs16 fc333333">
+          基差
+          <img src="../../../assets/icon/market/question.svg" alt="" />
+        </div>
+        <div class="first-right pf400 fs14 fc333333">
+          5分钟
+          <img src="../../../assets/icon/market/bottom-arrow.svg" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="buy-sell pf500 fs16 fcFFFFFF">
+      <div class="buy-btn">买入(做多)</div>
+      <div class="sell-btn">卖出(做空)</div>
+    </div>
+  </div>
+  <Kongbi1 v-show="kongbi1Flag" @kongbi1Close="kongbi1Close"></Kongbi1>
+  <Kongbi2 v-show="kongbi2Flag" @kongbi2Close="kongbi2Close"></Kongbi2>
+  <Bizhi v-show="bizhiFlag" @bizhiClose="bizhiClose"></Bizhi>
+  <BuySellNumber v-show="buySellFlag" @buySellClose="buySellClose"></BuySellNumber>
+  <Jicha v-show="jichaFlag" @jichaClose="jichaClose"></Jicha>
+</template>
+<script setup>
+  import { ref } from "vue";
+  import Kongbi1 from "../dialog/Kongbi1.vue";
+  import Kongbi2 from "../dialog/Kongbi2.vue";
+  import Bizhi from "../dialog/Bizhi.vue";
+  import BuySellNumber from "../dialog/BuySellNumber.vue";
+  import Jicha from "../dialog/Jicha.vue";
+
+  const kongbi1Flag = ref(false);
+  const kongbi1Close = () => {
+    kongbi1Flag.value = false;
+  };
+
+  const kongbi2Flag = ref(false);
+  const kongbi2Close = () => {
+    kongbi2Flag.value = false;
+  };
+
+  const bizhiFlag = ref(false);
+  const bizhiClose = () => {
+    bizhiFlag.value = false;
+  };
+
+  const buySellFlag = ref(false);
+  const buySellClose = () => {
+    buySellFlag.value = false;
+  };
+
+  const jichaFlag = ref(false);
+  const jichaClose = () => {
+    jichaFlag.value = false;
+  };
+</script>
+<style lang="less" scoped>
+  .trans-data {
+    width: 349px;
+
+    .data-first {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 20px;
+      width: 100%;
+      height: 216px;
+
+      .first-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 22px;
+
+        .first-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          img {
+            margin-left: 4px;
+            width: 13px;
+            height: 13px;
+          }
+        }
+
+        .first-right {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          img {
+            margin-left: 4px;
+            width: 7px;
+            height: 3.5px;
+          }
+        }
+      }
+    }
+
+    .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/TransactionRelu.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="trans-relu">
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">资金费率/倒计时</div>
+      <div class="pf500 fs12 fc666666">59.0507%/02:24:27</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">最小下单数量</div>
+      <div class="pf500 fs12 fc666666">0.001 BTC</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">最小下单名义价值</div>
+      <div class="pf500 fs12 fc666666">100 USDT</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">市价单单笔最大数量</div>
+      <div class="pf500 fs12 fc666666">210 BTC</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">限价单单笔最大数量</div>
+      <div class="pf500 fs12 fc666666">200</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">最大挂单数量</div>
+      <div class="pf500 fs12 fc666666">10</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">最大条件单挂单数量</div>
+      <div class="pf500 fs12 fc666666">0.30 USDT</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">最小价格波动</div>
+      <div class="pf500 fs12 fc666666">556.80 USDT</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">最小下单价格</div>
+      <div class="pf500 fs12 fc666666">5%</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">限价订单价格上限比率</div>
+      <div class="pf500 fs12 fc666666">5%</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">限价订单价格下限比率</div>
+      <div class="pf500 fs12 fc666666">5%</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">价差保护阈值</div>
+      <div class="pf500 fs12 fc666666">5%</div>
+    </div>
+    <div class="info-second margin-top8">
+      <div class="pf400 fs14 fc666666">强平清算费</div>
+      <div class="pf500 fs12 fc666666">5%</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>
+  .trans-relu {
+    width: 349px;
+
+    .margin-top15 {
+      margin-top: 15px;
+    }
+
+    .margin-top8 {
+      margin-top: 8px;
+    }
+
+    .margin-top3 {
+      margin-top: 3px;
+    }
+
+    .info-second {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 20px;
+    }
+
+    .buy-sell {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 138px;
+      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/dialog/Bizhi.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="bizhi">
+    <div class="apply-mask" @click="emits('bizhiClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">多空人数比值</div>
+      <div class="apply-desc pf500 fs14 fc333333">
+        所有持仓用户的净持仓多头和空头账户数占比，一个 账户记一次。
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        多仓人数比例 <br />
+        =持多仓用户数/总持仓用户数
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        空仓人数比例 <br />
+        =持空仓用户数/总持仓用户数
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        多空人数比值 <br />
+        =多仓人数比例/空仓人数比例
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF" @click="emits('bizhiClose')">确认</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["bizhiClose"]);
+</script>
+<style lang="less" scoped>
+  .bizhi {
+    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: 390px;
+      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-desc {
+        margin-top: 5px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .computed-way1 {
+        margin-top: 10px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .sure-btn {
+        margin-top: 21px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/market/dialog/BuySellNumber.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="buy-sell-number">
+    <div class="apply-mask" @click="emits('buySellClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">合约主动买卖量</div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        主动买入量 <br />
+        展示单位时间内主动买盘（Taker吃单买入）的成交量
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        主动卖出量 <br />
+        展示单位时间内主动卖盘（Taker吃单卖出）的成交量
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF" @click="emits('buySellClose')">确认</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["buySellClose"]);
+</script>
+<style lang="less" scoped>
+  .buy-sell-number {
+    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: 390px;
+      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-desc {
+        margin-top: 5px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .computed-way1 {
+        margin-top: 31px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .sure-btn {
+        margin-top: 58px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/market/dialog/Jicha.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="jicha">
+    <div class="apply-mask" @click="emits('jichaClose')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">基差</div>
+      <div class="apply-desc pf500 fs14 fc333333">某一时刻合约价格与价格指数的差值。</div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        基差 <br />
+        ＝合约价格-价格指数
+      </div>
+      <div class="computed-way2 pf500 fs14 fc333333">
+        基差率 <br />
+        =（合约价格-价格指数）/价格指数
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF" @click="emits('jichaClose')">确认</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["jichaClose"]);
+</script>
+<style lang="less" scoped>
+  .jicha {
+    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: 340px;
+      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-desc {
+        margin-top: 12px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .computed-way1 {
+        margin-top: 12px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .computed-way2 {
+        margin-top: 21px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .sure-btn {
+        margin-top: 25px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/market/dialog/Kongbi1.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="kongbi">
+    <div class="apply-mask" @click="emits('kongbi1Close')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">大户多空比</div>
+      <div class="apply-desc pf500 fs14 fc333333">
+        持仓大户的净持仓多头和空头账户数占比，大户指保
+        证金余额排名前20%的用户。一个账户记一次。
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        多仓账户数比例 <br />
+        =持多仓大户数/总持仓大户数
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        空仓大户数比例 <br />
+        =持空仓大户数/总持仓大户数
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        多空账户数比值 <br />
+        ＝多仓账户数比例/空仓账户数比例
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF" @click="emits('kongbi1Close')">确认</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["kongbi1Close"]);
+</script>
+<style lang="less" scoped>
+  .kongbi {
+    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: 390px;
+      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-desc {
+        margin-top: 5px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .computed-way1 {
+        margin-top: 10px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .sure-btn {
+        margin-top: 21px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>

src/views/market/dialog/Kongbi2.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="kongbi">
+    <div class="apply-mask" @click="emits('kongbi2Close')"></div>
+    <div class="apply-content">
+      <div class="slide-line"></div>
+      <div class="apply-text pf600 fs18 fc121212">大户多空比</div>
+      <div class="apply-desc pf500 fs14 fc333333">
+        大户的多头和空头总持仓量占比，大户指保证金余额 排名前20%的用户。
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        多仓持仓量比例 <br />
+        =大户多仓持仓量/大户总持仓量
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        空仓持仓量比例 <br />
+        =大户空仓持仓量/大户总持仓量
+      </div>
+      <div class="computed-way1 pf500 fs14 fc333333">
+        多空持仓量比值 <br />
+        =多仓持仓量比例/空仓持仓量比例
+      </div>
+      <div class="sure-btn pf600 fs14 fcFFFFFF" @click="emits('kongbi2Close')">确认</div>
+    </div>
+  </div>
+</template>
+<script setup>
+  const emits = defineEmits(["kongbi2Close"]);
+</script>
+<style lang="less" scoped>
+  .kongbi {
+    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: 390px;
+      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-desc {
+        margin-top: 5px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .computed-way1 {
+        margin-top: 10px;
+        width: 345px;
+        line-height: 25px;
+        letter-spacing: 0.2px;
+      }
+
+      .sure-btn {
+        margin-top: 21px;
+        width: 311px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 100px;
+        background: #df384c;
+      }
+    }
+  }
+</style>