postcss.config.js

@@ -1,16 +1,14 @@
-
-
 module.exports = {
   plugins: {
-    'postcss-pxtorem': {
+    "postcss-pxtorem": {
       // 关键点：因为你的设计稿是 375px
       // 这里的数值必须是 37.5 (即 1rem = 37.5px)
       // 如果你这里写的是 75，页面元素会缩小一半；如果写的是 16，页面会变得巨大。
       rootValue: 37.5,
 
-      propList: ['*'], // 所有属性都转 rem
-      selectorBlackList: ['.norem'], // 过滤掉 .norem- 开头的 class，不进行 rem 转换
-      exclude: /node_modules/i // 可选：忽略 node_modules 里的库（如果你发现组件库变小了就加上这行）
+      propList: ["*"], // 所有属性都转 rem
+      selectorBlackList: [".norem"], // 过滤掉 .norem- 开头的 class，不进行 rem 转换
+      exclude: /node_modules/i, // 可选：忽略 node_modules 里的库（如果你发现组件库变小了就加上这行）
     },
   },
-};
+};

src/utils/time.js

@@ -5,19 +5,20 @@
  * @returns '1970-01-01 08:00:00'
  */
 export function timestampToTime(time) {
-  var date = new Date(time * 1000)
-  let y = date.getFullYear()
-  let MM = date.getMonth() + 1
-  MM = MM < 10 ? ('0' + MM) : MM
-  let d = date.getDate()
-  d = d < 10 ? ('0' + d) : d
-  let h = date.getHours()
-  h = h < 10 ? ('0' + h) : h
-  let m = date.getMinutes()
-  m = m < 10 ? ('0' + m) : m
-  let s = date.getSeconds()
-  s = s < 10 ? ('0' + s) : s
-  return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
+  var date = new Date(time * 1000);
+  let y = date.getFullYear();
+  let MM = date.getMonth() + 1;
+  MM = MM < 10 ? "0" + MM : MM;
+  let d = date.getDate();
+  d = d < 10 ? "0" + d : d;
+  let h = date.getHours();
+  h = h < 10 ? "0" + h : h;
+  let m = date.getMinutes();
+  m = m < 10 ? "0" + m : m;
+  let s = date.getSeconds();
+  s = s < 10 ? "0" + s : s;
+  return h + ":" + m + ":" + s;
+  // return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
 }
 
 /**
@@ -26,29 +27,29 @@ export function timestampToTime(time) {
  * @returns Jan
  */
 export function monthChangeEnglish(month) {
-  if (month == '1' || month == '01') {
-    return 'Jan'
-  } else if (month == '2' || month == '02') {
-    return 'Feb'
-  } else if (month == '3' || month == '03') {
-    return 'Mar'
-  } else if (month == '4' || month == '04') {
-    return 'Apr'
-  } else if (month == '5' || month == '05') {
-    return 'May'
-  } else if (month == '6' || month == '06') {
-    return 'Jun'
-  } else if (month == '7' || month == '07') {
-    return 'Jul'
-  } else if (month == '8' || month == '08') {
-    return 'Aug'
-  } else if (month == '9' || month == '09') {
-    return 'Sept'
-  } else if (month == '10' || month == '10') {
-    return 'Oct'
-  } else if (month == '11') {
-    return 'Nov'
-  } else if (month == '12') {
-    return 'Dec'
+  if (month == "1" || month == "01") {
+    return "Jan";
+  } else if (month == "2" || month == "02") {
+    return "Feb";
+  } else if (month == "3" || month == "03") {
+    return "Mar";
+  } else if (month == "4" || month == "04") {
+    return "Apr";
+  } else if (month == "5" || month == "05") {
+    return "May";
+  } else if (month == "6" || month == "06") {
+    return "Jun";
+  } else if (month == "7" || month == "07") {
+    return "Jul";
+  } else if (month == "8" || month == "08") {
+    return "Aug";
+  } else if (month == "9" || month == "09") {
+    return "Sept";
+  } else if (month == "10" || month == "10") {
+    return "Oct";
+  } else if (month == "11") {
+    return "Nov";
+  } else if (month == "12") {
+    return "Dec";
   }
-}
+}

src/views/asset/Index.vue

@@ -50,8 +50,20 @@
     <div class="asset-details">
       <div class="details-title">
         <div class="notifi-classifi">
-          <div class="pf600 fs18 fc121212">持仓明细</div>
-          <div class="sys-notifi pf600 fs14 fcA8A8A8">ICO明细</div>
+          <div
+            class="classifi-item"
+            :class="current == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+            @click="current = 0">
+            持仓明细
+            <div class="active-line" v-if="current == 0"></div>
+          </div>
+          <div
+            class="classifi-item"
+            :class="current == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+            @click="current = 1">
+            ICO明细
+            <div class="active-line" v-if="current == 1"></div>
+          </div>
         </div>
         <div class="history pf600 fs14 fcA8A8A8" @click="goHistory">
           <img src="../../assets/icon/asset/clock-rewind.svg" alt="" />
@@ -118,9 +130,12 @@
 </template>
 <script setup>
   import { useRouter } from "vue-router";
+  import { ref } from "vue";
 
   const router = useRouter();
 
+  const current = ref(0);
+
   const goHistory = () => {
     router.push("/historyIndex");
   };
@@ -147,7 +162,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin-bottom: 100px;
     width: 100%;
 
     .asset-header {
@@ -275,6 +289,7 @@
 
     .asset-details {
       margin-top: 0.7px;
+      margin-bottom: 80px;
       width: 345px;
 
       .details-title {
@@ -292,8 +307,33 @@
           width: 345px;
           height: 24px;
 
-          .sys-notifi {
-            margin-left: 47px;
+          .classifi-item {
+            position: relative;
+            margin-left: 43px;
+
+            .active-line {
+              position: absolute;
+              bottom: -6px;
+              left: 50%;
+              transform: translateX(-50%);
+              width: 20px;
+              height: 3px;
+              background-color: #323233;
+              border-radius: 2px;
+            }
+
+            &:first-child {
+              margin-left: 0;
+            }
+          }
+
+          .current-classifi {
+            font-family: "PingFang SC";
+            font-style: normal;
+            font-weight: 600;
+            font-size: 18px;
+            color: #121212;
+            transition: color 0.3s, font-size 0.3s;
           }
         }
 
@@ -314,7 +354,7 @@
       }
 
       .details-main {
-        margin-top: 10px;
+        margin-top: 15px;
         width: 100%;
 
         .details-item {

src/views/asset/UserAsset.vue

@@ -2,14 +2,51 @@
   <!-- 我的资产 -->
   <HeaderNav headerText="资产"></HeaderNav>
   <div class="user-asset">
-    <div class="notifi-classifi pf600 fs14">
-      <div class="fc121212" @click="messageChange('overview')">总览</div>
-      <div class="fcA8A8A8" @click="messageChange('balance')">余额</div>
-      <div class="fcA8A8A8" @click="messageChange('contract')">合约</div>
-      <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="notifi-classifi">
+      <div
+        class="classifi-item"
+        :class="current == 'overview' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('overview')">
+        总览
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'balance' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('balance')">
+        余额
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'contract' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('contract')">
+        合约
+      </div>
+      <div
+        class="classifi-item"
+        :class="
+          current == 'financialManagement' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'
+        "
+        @click="messageChange('financialManagement')">
+        理财
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'option' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('option')">
+        期权
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'miaoContract' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('miaoContract')">
+        秒合约
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'lever' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('lever')">
+        币币
+      </div>
     </div>
     <component :is="currentComponent" />
   </div>
@@ -54,9 +91,37 @@
       flex-direction: row;
       justify-content: space-between;
       align-items: flex-end;
-      margin-top: calc(48px);
+      margin-top: 48px;
       width: 345px;
       height: 24px;
+
+      .classifi-item {
+        position: relative;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
+      }
     }
   }
 </style>

src/views/asset/history/Index.vue

@@ -2,31 +2,71 @@
   <HeaderNav headerText="交易历史"></HeaderNav>
   <div class="history-index">
     <div class="notifi-classifi">
-      <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="classifi-item"
+        :class="currentTitle == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 0">
+        币币
+        <div class="active-line" v-if="currentTitle == 0"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTitle == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 1">
+        合约
+        <div class="active-line" v-if="currentTitle == 1"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTitle == 2 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 2">
+        秒合约
+        <div class="active-line" v-if="currentTitle == 2"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTitle == 3 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTitle = 3">
+        期权
+        <div class="active-line" v-if="currentTitle == 3"></div>
+      </div>
     </div>
     <div class="history-menu">
-      <div class="pf600 fs14 fc121212" @click="messageChange('currentEntrustment')">
+      <div
+        :class="
+          current == 'currentEntrustment' ? 'pf600 fs14 #121212' : 'pf600 fs14 fcA8A8A8'
+        "
+        @click="messageChange('currentEntrustment')">
         当前委托
       </div>
       <div
-        class="sys-notifi pf600 fs14 fcA8A8A8"
+        :class="
+          current == 'historicalEntrustment'
+            ? 'pf600 fs14 #121212'
+            : 'pf600 fs14 fcA8A8A8'
+        "
         @click="messageChange('historicalEntrustment')">
         历史委托
       </div>
       <div
-        class="sys-notifi pf600 fs14 fcA8A8A8"
+        :class="
+          current == 'positionHistory' ? 'pf600 fs14 #121212' : 'pf600 fs14 fcA8A8A8'
+        "
         @click="messageChange('positionHistory')">
         仓位历史
       </div>
       <div
-        class="sys-notifi pf600 fs14 fcA8A8A8"
+        :class="
+          current == 'historicalTransactions'
+            ? 'pf600 fs14 #121212'
+            : 'pf600 fs14 fcA8A8A8'
+        "
         @click="messageChange('historicalTransactions')">
         历史成交
       </div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('fundFlow')">
+      <div
+        :class="current == 'fundFlow' ? 'pf600 fs14 #121212' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('fundFlow')">
         资金流水
       </div>
     </div>
@@ -42,6 +82,7 @@
   import PositionHistory from "./PositionHistory.vue";
   import { ref, computed } from "vue";
 
+  const currentTitle = ref(0);
   const current = ref("currentEntrustment");
   const componentsMap = {
     currentEntrustment: CurrentEntrustment,
@@ -73,8 +114,33 @@
       width: 349px;
       height: 24px;
 
-      .sys-notifi {
-        margin-left: 31px;
+      .classifi-item {
+        position: relative;
+        margin-left: 43px;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
 

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

@@ -1,6 +1,6 @@
 <template>
   <!-- 消息-首页 -->
-  <HeaderNav headerText="消息"></HeaderNav>
+  <HeaderNav headerText="消息" headerRouter="/"></HeaderNav>
   <div class="message-index">
     <div class="platform-service">
       <div class="service-left">

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

@@ -5,16 +5,34 @@
         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
+      class="classifi-item"
+      :class="current == 'all' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+      @click="messageChange('all')">
+      全部
+      <div class="active-line" v-if="current == 'all'"></div>
+    </div>
+    <div
+      class="classifi-item"
+      :class="current == 'buy' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+      @click="messageChange('buy')">
+      购买
+      <div class="active-line" v-if="current == 'buy'"></div>
+    </div>
+    <div
+      class="classifi-item"
+      :class="current == 'sell' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+      @click="messageChange('sell')">
+      出售
+      <div class="active-line" v-if="current == 'sell'"></div>
+    </div>
   </div>
   <component :is="currentComponent" />
 </template>
@@ -40,7 +58,7 @@
   };
 
   const toPath = () => {
-    router.back();
+    router.push("/");
   };
 </script>
 <style lang="less" scoped>
@@ -94,8 +112,33 @@
     width: 345px;
     height: 24px;
 
-    .sys-notifi {
-      margin-left: 40px;
+    .classifi-item {
+      position: relative;
+      margin-left: 43px;
+
+      .active-line {
+        position: absolute;
+        bottom: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 20px;
+        height: 3px;
+        background-color: #323233;
+        border-radius: 2px;
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    .current-classifi {
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      color: #121212;
+      transition: color 0.3s, font-size 0.3s;
     }
   }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <img src="@/assets/icon/asset/dazong-sell-banner.svg" class="c2c" alt="" />
+  <!-- <img src="@/assets/icon/asset/dazong-sell-banner.svg" class="c2c" alt="" /> -->
   <div class="buy-sell">
     <div class="buy-left">
       <div class="buy-btn pf500 fs14 fcFFFFFF">购买</div>

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

@@ -1,5 +1,5 @@
 <template>
-  <img src="@/assets/icon/asset/c2c.svg" class="c2c" alt="" />
+  <!-- <img src="@/assets/icon/asset/c2c.svg" class="c2c" alt="" /> -->
   <div class="buy-sell">
     <div class="buy-left">
       <div class="buy-btn pf500 fs14 fcFFFFFF">购买</div>

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

@@ -41,7 +41,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    margin-top: 15px;
+    margin-top: 13px;
     width: 345px;
     height: 35px;
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="otc-header">
-    <div class="header-content pf600 fs18 fc1F2937">
+    <div class="header-content pf600 fs16 fc1F2937">
       <img
         class="left-arrow-image"
         src="@/assets/icon/index/left-arrow.svg"
@@ -14,12 +14,26 @@
   </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
+        class="classifi-item"
+        :class="current == 'c2c' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('c2c')">
+        C2C
+        <div class="active-line" v-if="current == 'c2c'"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'fast' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('fast')">
         快捷交易
+        <div class="active-line" v-if="current == 'fast'"></div>
       </div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('bulk')">
+      <div
+        class="classifi-item"
+        :class="current == 'bulk' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('bulk')">
         大宗交易
+        <div class="active-line" v-if="current == 'bulk'"></div>
       </div>
     </div>
     <component :is="currentComponent" />
@@ -47,7 +61,7 @@
   };
 
   const toPath = () => {
-    router.back();
+    router.push("/");
   };
 </script>
 <style lang="less" scoped>
@@ -118,8 +132,33 @@
       width: 349px;
       height: 24px;
 
-      .sys-notifi {
-        margin-left: 42px;
+      .classifi-item {
+        position: relative;
+        margin-left: 43px;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <HeaderNav headerText="我的"></HeaderNav>
+  <HeaderNav headerText="我的" headerRouter="/"></HeaderNav>
   <div class="otc-user">
     <div class="user-info">
       <img src="@/assets/img/index/user/default-head.png" alt="" />

src/views/bitcoin/lever/components/KLineChart.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { onMounted, onBeforeUnmount, ref, watch, nextTick, toRaw } from 'vue'
+import { onMounted, onBeforeUnmount, ref, watch, nextTick, toRaw, defineExpose } from 'vue'
 import * as klinecharts from 'klinecharts'
 
 const props = defineProps({
@@ -58,6 +58,8 @@ const initChart = () => {
     yAxis: { inside: true, axisLine: { show: false }, tickLine: { show: false }, tickText: { color: text, size: 10, paddingLeft: 8 } },
   })
 
+  // 默认加载 MA 和 VOL
+  chartInstance.createTechnicalIndicator('MA', false, { id: 'candle_pane' })
   chartInstance.createTechnicalIndicator('VOL', false, { id: 'pane_1', heightRatio: 0.2 })
 
   // 初始加载
@@ -66,27 +68,55 @@ const initChart = () => {
   }
 }
 
-// --- 🔥 核心修复：智能判断是“更新”还是“重置” ---
+// --- 🎯 新增：暴露给父组件的方法 ---
+
+// 1. 设置主图指标
+const setMainIndicator = (name) => {
+  if (!chartInstance) return
+  // 移除常见主图指标
+  chartInstance.removeTechnicalIndicator('candle_pane', 'MA')
+  chartInstance.removeTechnicalIndicator('candle_pane', 'BOLL')
+
+  if (name && name !== 'Hide') {
+    chartInstance.createTechnicalIndicator(name, false, { id: 'candle_pane' })
+  }
+}
+
+// 2. 设置副图指标
+const setSubIndicator = (name) => {
+  if (!chartInstance) return
+  // 移除常见副图指标
+  const subs = ['VOL', 'MACD', 'KDJ', 'RSI', 'WR']
+  subs.forEach(s => chartInstance.removeTechnicalIndicator('pane_1', s))
+
+  if (name && name !== 'Hide') {
+    chartInstance.createTechnicalIndicator(name, false, { id: 'pane_1', heightRatio: 0.2 })
+  }
+}
+
+defineExpose({
+  setMainIndicator,
+  setSubIndicator
+})
+
+// --- 原有逻辑保持不变 ---
+
 watch(() => props.data, (newData) => {
   if (!chartInstance) return
 
   const rawData = toRaw(newData)
   const currentList = chartInstance.getDataList()
 
-  // 1. 如果新数据为空，清空图表
   if (rawData.length === 0) {
     chartInstance.clearData()
     return
   }
 
-  // 2. 如果当前图表为空，直接加载
   if (currentList.length === 0) {
     chartInstance.applyNewData(rawData)
     return
   }
 
-  // 3. 🔥 关键判断：
-  // 如果第一根 K 线的时间戳变了，说明切换了周期或币种 -> 全量重置
   const firstOld = currentList[0]
   const firstNew = rawData[0]
   if (firstOld.timestamp !== firstNew.timestamp) {
@@ -94,14 +124,12 @@ watch(() => props.data, (newData) => {
     return
   }
 
-  // 4. 如果第一根时间没变，说明是实时跳动或追加 -> 增量更新
   if (rawData.length > 0) {
     const lastData = rawData[rawData.length - 1]
     chartInstance.updateData(lastData)
   }
 }, { deep: true })
 
-// 监听精度
 watch(() => props.precision, (val) => {
   if (chartInstance) {
     if (chartInstance.setPriceVolumePrecision) chartInstance.setPriceVolumePrecision(val.price, val.volume)

src/views/index/Index.vue

@@ -18,7 +18,7 @@
     <div class="asset-total">
       <div class="asset-title pf400 fs16 fc1F2937">
         理财总资产(USDT)
-        <img :src="isHide ? eyeOpen : eyeClose" class="eye-close" @click="toggleEye" />
+        <img :src="isHide ? eyeClose : eyeOpen" class="eye-close" @click="toggleEye" />
       </div>
       <div class="asset-number pf600 fs32 fc1F2937" :class="{ 'mask-style': isHide }">
         {{ isHide ? "···········" : "1,125,158.00" }}

src/views/index/User.vue

@@ -14,12 +14,16 @@
       </div>
     </div>
     <div class="unlock-vip">
-      <img src="../../assets/img/index/vip.svg" alt="" />
+      <img src="../../assets/img/index/vip.png" alt="" />
     </div>
     <div class="asset-management">
       <div class="asset-title pf600 fs18 fc333333">资产管理</div>
       <div class="index-menu">
-        <div class="menu-item" v-for="(item, index) in indexMenu" :key="index">
+        <div
+          class="menu-item"
+          v-for="(item, index) in indexMenu"
+          :key="index"
+          @click="goIndexMenu(index)">
           <img :src="item.image" alt="" />
           <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
         </div>
@@ -41,7 +45,11 @@
     <div class="common-functions">
       <div class="asset-title pf600 fs18 fc333333">常用功能</div>
       <div class="index-menu">
-        <div class="menu-item" v-for="(item, index) in commonFunctions" :key="index">
+        <div
+          class="menu-item"
+          v-for="(item, index) in commonFunctions"
+          :key="index"
+          @click="goCommonFunc(index)">
           <img :src="item.image" alt="" />
           <div class="item-text pf400 fs14 fc666666">{{ item.name }}</div>
         </div>
@@ -59,98 +67,143 @@
     router.push("/userCenter");
   };
 
+  const goIndexMenu = (index) => {
+    if (index == 0) {
+      router.push("/rechargeIndex");
+    } else if (index == 1) {
+      router.push("/withdrawIndex");
+    } else if (index == 2) {
+      router.push("/transfer");
+    } else if (index == 3) {
+      router.push("/loanIndex");
+    } else if (index == 4) {
+      router.push("/userAsset");
+    } else if (index == 5) {
+      router.push("/icoIndex");
+    }
+  };
+
   const goTransaction = (index) => {
-    if (index == 6) {
+    if (index == 0) {
+      router.push("/bitcoin/seconds");
+    } else if (index == 1) {
+      router.push("/bitcoin/contract");
+    } else if (index == 2) {
+      router.push("/bitcoin/options");
+    } else if (index == 3) {
+      router.push("/bitcoin/CryptocurrencyTrading");
+    } else if (index == 4) {
+      router.push("/financialIndex");
+    } else if (index == 5) {
+      router.push("/loanIndex");
+    } else if (index == 6) {
       router.push("/otcIndex");
     }
   };
 
+  const goCommonFunc = (index) => {
+    if (index == 0) {
+      router.push("/invite");
+    } else if (index == 1) {
+    } else if (index == 2) {
+      router.push("/kyc/step1");
+    } else if (index == 3) {
+      router.push("/language");
+    } else if (index == 4) {
+      router.push("/detail");
+    } else if (index == 5) {
+      router.push("/userCenter");
+    } else if (index == 6) {
+      router.push("/about");
+    }
+  };
+
   const indexMenu = [
-    {
-      name: "ICO功能",
-      image: require("@/assets/img/index/user/ico.svg"),
-    },
     {
       name: "充币",
-      image: require("@/assets/img/index/user/chongbi.svg"),
+      image: require("@/assets/icon/usercenter/chongbi.png"),
     },
     {
       name: "提币",
-      image: require("@/assets/img/index/user/tibi.svg"),
+      image: require("@/assets/icon/usercenter/tibi.png"),
     },
     {
       name: "划转",
-      image: require("@/assets/img/index/user/huazhuan.svg"),
+      image: require("@/assets/icon/usercenter/huazhuan.png"),
     },
     {
       name: "我的贷款",
-      image: require("@/assets/icon/index/Rectangle 4.png"),
+      image: require("@/assets/icon/usercenter/daikuan.png"),
     },
     {
       name: "我的资产",
-      image: require("@/assets/icon/index/zichan.png"),
+      image: require("@/assets/icon/usercenter/zichan.png"),
+    },
+    {
+      name: "ICO",
+      image: require("@/assets/icon/usercenter/ico.png"),
     },
   ];
 
   const transactionMenu = [
     {
       name: "秒合约",
-      image: require("@/assets/img/index/user/miaoheyue.svg"),
+      image: require("@/assets/icon/usercenter/chongbi.png"),
     },
     {
       name: "合约",
-      image: require("@/assets/img/index/user/heyue.svg"),
+      image: require("@/assets/icon/usercenter/heyue.png"),
     },
     {
       name: "期权",
-      image: require("@/assets/img/index/user/qiquan.svg"),
+      image: require("@/assets/icon/usercenter/qiquan.png"),
     },
     {
       name: "币币",
-      image: require("@/assets/icon/index/bibi.png"),
+      image: require("@/assets/icon/usercenter/bibi.png"),
     },
     {
       name: "质押理财",
-      image: require("@/assets/img/index/user/zhiya.svg"),
+      image: require("@/assets/icon/usercenter/licai.png"),
     },
     {
       name: "贷款",
-      image: require("@/assets/img/index/user/daikuan.svg"),
+      image: require("@/assets/icon/usercenter/daikuan2.png"),
     },
     {
-      name: "OTC交易",
-      image: require("@/assets/img/index/user/otc.svg"),
+      name: "OTC",
+      image: require("@/assets/icon/usercenter/otc.png"),
     },
   ];
 
   const commonFunctions = [
     {
       name: "邀请推广",
-      image: require("@/assets/img/index/user/tuiguang.svg"),
+      image: require("@/assets/icon/usercenter/tuiguang.png"),
     },
     {
       name: "客服",
-      image: require("@/assets/img/index/user/kefu.svg"),
+      image: require("@/assets/icon/usercenter/kefu.png"),
     },
     {
       name: "KYC认证",
-      image: require("@/assets/img/index/user/kyc.svg"),
+      image: require("@/assets/icon/usercenter/kyc.png"),
     },
     {
       name: "切换语言",
-      image: require("@/assets/icon/index/yuyan.png"),
+      image: require("@/assets/icon/usercenter/yuyan.png"),
     },
     {
       name: "帮助中心",
-      image: require("@/assets/img/index/user/help.svg"),
+      image: require("@/assets/icon/usercenter/bangzhu.png"),
     },
     {
       name: "安全设置",
-      image: require("@/assets/icon/index/anquanshezhi.png"),
+      image: require("@/assets/icon/usercenter/anquan.png"),
     },
     {
       name: "关于我们",
-      image: require("@/assets/icon/index/aboutus.png"),
+      image: require("@/assets/icon/usercenter/guanyu.png"),
     },
   ];
 </script>
@@ -348,6 +401,7 @@
       justify-content: flex-start;
       align-items: center;
       margin-top: 23px;
+      margin-bottom: 40px;
       width: 345px;
 
       .asset-title {

src/views/index/UserCenter.vue

@@ -12,18 +12,30 @@
         编辑
       </div>
     </div>
-    <div class="notifi-index">
-      <div class="notifi-classifi">
-        <div class="pf600 fs18 fc121212" @click="messageChange('userInfo')">个人资料</div>
-        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('safetySet')">
-          安全设置
-        </div>
-        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('hobbySet')">
-          偏好设置
-        </div>
+    <div class="notifi-classifi">
+      <div
+        class="classifi-item"
+        :class="current == 'userInfo' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('userInfo')">
+        个人资料
+        <div class="active-line" v-if="current == 'userInfo'"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'safetySet' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('safetySet')">
+        <div class="active-line" v-if="current == 'safetySet'"></div>
+        安全设置
+      </div>
+      <div
+        class="classifi-item"
+        :class="current == 'hobbySet' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('hobbySet')">
+        <div class="active-line" v-if="current == 'hobbySet'"></div>
+        偏好设置
       </div>
-      <component :is="currentComponent" />
     </div>
+    <component :is="currentComponent" />
   </div>
   <UpdateInfo v-show="updateInfoFlag" @updateInfoClose="updateInfoClose"></UpdateInfo>
 </template>
@@ -108,8 +120,33 @@
       width: 349px;
       height: 24px;
 
-      .sys-notifi {
+      .classifi-item {
+        position: relative;
         margin-left: 43px;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
   }

src/views/index/cloudComputingPower/ComboDetails.vue

@@ -273,6 +273,7 @@
 
     .sure-buy {
       margin-top: 26px;
+      margin-bottom: 50px;
       width: 311px;
       height: 40px;
       line-height: 40px;

src/views/index/cloudComputingPower/ElectricityRecharge.vue

@@ -77,7 +77,6 @@
 
       .number-input {
         position: relative;
-        margin-top: 5px;
         width: 345px;
         height: 45px;
 
@@ -94,7 +93,7 @@
 
         .all {
           position: absolute;
-          top: 13px;
+          top: 27px;
           right: 11px;
         }
       }
@@ -105,7 +104,7 @@
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
-      margin-top: 7px;
+      margin-top: 20px;
       width: 345px;
       height: 18px;
 

src/views/index/cloudComputingPower/ElectricitySetting.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 电费设置 -->
   <HeaderNav headerText="电费设置"></HeaderNav>
-  <div class="electricity-setting">
+  <div class="electricity-setting pf400 fs14 fc1F2937">
     电费自动续费
     <Switch v-model="electricityFlag"></Switch>
   </div>

src/views/index/cloudComputingPower/MyOrder.vue

@@ -10,7 +10,7 @@
             <div>0.0176/T/天</div>
           </div>
           <div class="info-bottom">
-            <div class="pf500 fs10 fc121212">
+            <div class="name pf500 fs10 fc121212">
               <img src="@/assets/icon/coin/bnb.svg" alt="" />
               BTC
             </div>
@@ -103,6 +103,17 @@
             width: 100%;
             height: 15px;
 
+            .name {
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+
+              img {
+                margin-right: 3px;
+              }
+            }
+
             .start-time {
               display: flex;
               flex-direction: row;

src/views/index/cloudComputingPower/MyPower.vue

@@ -25,8 +25,20 @@
       </div>
     </div>
     <div class="notifi-classifi">
-      <div class="pf600 fs14 fc121212" @click="currentTab = 0">BTC</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="currentTab = 1">USDT</div>
+      <div
+        class="classifi-item"
+        :class="currentTab == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTab = 0">
+        BTC
+        <div class="active-line" v-if="currentTab == 0"></div>
+      </div>
+      <div
+        class="classifi-item"
+        :class="currentTab == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="currentTab = 1">
+        USDT
+        <div class="active-line" v-if="currentTab == 1"></div>
+      </div>
     </div>
     <div class="class-first pf600 fs18 fc121212" v-if="currentTab == 0">
       <div class="title">
@@ -237,8 +249,33 @@
       width: 345px;
       height: 24px;
 
-      .sys-notifi {
-        margin-left: 33px;
+      .classifi-item {
+        position: relative;
+        margin-left: 43px;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
       }
     }
 
@@ -247,7 +284,7 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      margin-top: 11px;
+      margin-top: 15px;
       width: 345px;
 
       .title {

src/views/index/components/HeaderNav.vue

@@ -17,13 +17,17 @@
   import { useRouter } from "vue-router";
 
   const router = useRouter();
-  const props = defineProps(["headerText", "headerRight"]);
+  const props = defineProps(["headerText", "headerRight", "headerRouter"]);
 
   const toPath = (path) => {
-    if (path) {
-      router.push(path);
+    if (props.headerRouter) {
+      router.push(props.headerRouter);
     } else {
-      router.go(-1);
+      if (path) {
+        router.push(path);
+      } else {
+        router.go(-1);
+      }
     }
   };
 </script>

src/views/index/dialog/Subscription.vue

@@ -5,8 +5,20 @@
     <div class="apply-content">
       <div class="slide-line"></div>
       <div class="notifi-classifi">
-        <div class="pf600 fs18 fc121212" @click="currentTab = 0">申购</div>
-        <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="currentTab = 1">赎回</div>
+        <div
+          class="classifi-item"
+          :class="currentTab == 0 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+          @click="currentTab = 0">
+          申购
+          <div class="active-line" v-if="currentTab == 0"></div>
+        </div>
+        <div
+          class="classifi-item"
+          :class="currentTab == 1 ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+          @click="currentTab = 1">
+          赎回
+          <div class="active-line" v-if="currentTab == 1"></div>
+        </div>
       </div>
       <div class="subscription-area" v-if="currentTab == 0">
         <div class="from">
@@ -148,8 +160,33 @@
         width: 345px;
         height: 24px;
 
-        .sys-notifi {
-          margin-left: 34px;
+        .classifi-item {
+          position: relative;
+          margin-left: 43px;
+
+          .active-line {
+            position: absolute;
+            bottom: -6px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 20px;
+            height: 3px;
+            background-color: #323233;
+            border-radius: 2px;
+          }
+
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+
+        .current-classifi {
+          font-family: "PingFang SC";
+          font-style: normal;
+          font-weight: 600;
+          font-size: 18px;
+          color: #121212;
+          transition: color 0.3s, font-size 0.3s;
         }
       }
 

src/views/index/ico/Index.vue

@@ -3,18 +3,40 @@
   <HeaderNav headerText="ICO"></HeaderNav>
   <div class="ico-index">
     <div class="index-classifi">
-      <div class="pf600 fs18 fc121212" @click="messageChange('subscription')">认购</div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('placement')">
+      <div
+        class="classifi-item pf600 fs18 fc121212"
+        :class="current == 'subscription' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('subscription')">
+        认购
+        <div class="active-line" v-if="current == 'subscription'"></div>
+      </div>
+      <div
+        class="classifi-item pf600 fs14 fcA8A8A8"
+        :class="current == 'placement' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('placement')">
         配售
+        <div class="active-line" v-if="current == 'placement'"></div>
       </div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('lotteryResult')">
+      <div
+        class="classifi-item pf600 fs14 fcA8A8A8"
+        :class="current == 'lotteryResult' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('lotteryResult')">
         中签结果
+        <div class="active-line" v-if="current == 'lotteryResult'"></div>
       </div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('coinPreview')">
+      <div
+        class="classifi-item pf600 fs14 fcA8A8A8"
+        :class="current == 'coinPreview' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('coinPreview')">
         新币预览
+        <div class="active-line" v-if="current == 'coinPreview'"></div>
       </div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('relus')">
+      <div
+        class="classifi-item pf600 fs14 fcA8A8A8"
+        :class="current == 'relus' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
+        @click="messageChange('relus')">
         ICO规则
+        <div class="active-line" v-if="current == 'relus'"></div>
       </div>
     </div>
     <component :is="currentComponent" />
@@ -59,6 +81,34 @@
       margin-top: 48px;
       width: 349px;
       height: 24px;
+
+      .classifi-item {
+        position: relative;
+
+        .active-line {
+          position: absolute;
+          bottom: -6px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 20px;
+          height: 3px;
+          background-color: #323233;
+          border-radius: 2px;
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .current-classifi {
+        font-family: "PingFang SC";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 18px;
+        color: #121212;
+        transition: color 0.3s, font-size 0.3s;
+      }
     }
   }
 </style>

src/views/index/loan/CommitMessage.vue

@@ -93,7 +93,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin-bottom: 100px;
     margin-top: 48px;
     width: 100%;
 
@@ -133,7 +132,7 @@
     }
 
     .card-type {
-      margin-top: 10px;
+      margin-top: 20px;
       width: 345px;
 
       .type-select {
@@ -161,7 +160,7 @@
       width: 345px;
 
       .number-input {
-        margin-top: 5px;
+        margin-top: -10px;
         width: 345px;
         height: 45px;
 
@@ -268,6 +267,7 @@
 
     .submit {
       margin-top: 21px;
+      margin-bottom: 50px;
       width: 311px;
       height: 40px;
       line-height: 40px;

src/views/index/recharge/TransferHistory.vue

@@ -136,6 +136,10 @@
         height: 24px;
 
         .flag-left {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
           height: 24px;
 
           .coin-first {

src/views/index/recharge/WithdrawIndex.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
     <div class="card-number">
-      <div class="card-text pf500 fs14 fc333333">提现金额</div>
+      <div class="card-text1 pf500 fs14 fc333333">提现金额</div>
       <div class="number-input">
         <input
           type="text"
@@ -142,9 +142,13 @@
       margin-top: 10px;
       width: 345px;
 
+      .card-text1 {
+        margin-top: 10px;
+      }
+
       .number-input {
         position: relative;
-        margin-top: 5px;
+        margin-top: -5px;
         width: 345px;
         height: 45px;
 
@@ -161,14 +165,14 @@
 
         .all {
           position: absolute;
-          top: 13px;
+          top: 27px;
           right: 11px;
         }
       }
     }
 
     .use-money {
-      margin-top: 7px;
+      margin-top: 20px;
       width: 345px;
       height: 18px;
       line-height: 18px;

src/views/index/user/SafetySet.vue

@@ -140,6 +140,7 @@
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      margin: 0 auto;
       margin-top: 14px;
       width: 327px;
       height: 106px;

src/views/market/details/EntrustingOrder.vue

@@ -8,14 +8,21 @@
       <div class="header-sell">卖盘</div>
     </div>
     <div class="order-body">
-      <div class="order-item" v-for="(item, index) in 15" :key="index">
+      <!-- ⭐ 正确循环 newOrderPlacement -->
+      <div class="order-item" v-for="(item, index) in newOrderPlacement" :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-number fs400 fs12 fc444444">
+          {{ Number(item[0][0]).toFixed(2) }}
+        </div>
         <div class="item-price fs400 fs12">
-          <div class="fc45B26B">40,166.82</div>
-          <div class="price-second fcFF7171">39,962.74</div>
+          <div class="fc45B26B">{{ Number(item[0][1]).toFixed(2) }}</div>
+          <div class="price-second fcFF7171">{{ Number(item[1][1]).toFixed(2) }}</div>
+        </div>
+        <!-- 卖价 -->
+        <div class="item-number2 fs400 fs12 fc444444">
+          {{ Number(item[1][0]).toFixed(2) }}
         </div>
-        <div class="item-number2 fs400 fs12 fc444444">37.80K</div>
         <div class="item-sell fs400 fs12 fcA8A8A8">{{ index + 1 }}</div>
       </div>
     </div>
@@ -25,7 +32,35 @@
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  import { toRef, watch, defineProps, ref } from "vue";
+
+  const props = defineProps({
+    orderPlacement: {
+      type: [String, Number, Object, Array, Boolean],
+      default: null,
+    },
+  });
+
+  const valueFromParent = toRef(props, "orderPlacement");
+
+  // ⭐ 作为展示用的新数组
+  const newOrderPlacement = ref([]);
+
+  // ⭐ 监听父组件传来的 orderPlacement，自动转换
+  watch(
+    valueFromParent,
+    (newVal) => {
+      if (!newVal || !newVal.bids || !newVal.asks) return;
+
+      // ⭐ 正确转换 bids + asks → newOrderPlacement
+      newOrderPlacement.value = newVal.bids.map((bid, index) => {
+        return [bid, newVal.asks[index]];
+      });
+    },
+    { immediate: true }
+  );
+</script>
 <style lang="less" scoped>
   .entrusting-order {
     width: 100%;

src/views/market/details/Index.vue

@@ -5,7 +5,7 @@
         <img src="../../../assets/icon/market/left-arrow.svg" alt="" />
       </div>
       <div class="header-icon pf600 fs18 fc121212" @click="changeIconFlag = true">
-        BTCUSDT
+        {{ title }}
         <img src="../../../assets/icon/market/btn_triangle_down_bk.svg" alt="" />
       </div>
       <div class="header-func">
@@ -17,14 +17,14 @@
       <div class="pf600 fs18 fc121212" @click="messageChange('marketConditions')">
         行情
       </div>
-      <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('info')">
+      <!-- <div class="sys-notifi pf600 fs14 fcA8A8A8" @click="messageChange('info')">
         信息
       </div>
       <div
         class="sys-notifi pf600 fs14 fcA8A8A8"
         @click="messageChange('transactionData')">
         交易数据
-      </div>
+      </div> -->
     </div>
     <component :is="currentComponent" />
     <ChangeIcon v-show="changeIconFlag" @changeIconClose="changeIconClose"></ChangeIcon>
@@ -36,9 +36,12 @@
   import TransactionData from "./TransactionData.vue";
   import ChangeIcon from "../dialog/ChangeIcon.vue";
   import { ref, computed } from "vue";
-  import { useRouter } from "vue-router";
+  import { useRouter, useRoute } from "vue-router";
 
   const router = useRouter();
+  const route = useRoute();
+
+  const title = route.query.type ? route.query.type.toUpperCase() : "";
 
   const changeIconFlag = ref(false);
   const changeIconClose = () => {

src/views/market/details/LatestTransactions.vue

@@ -7,13 +7,17 @@
       <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="order-item" v-for="(item, index) in transactions" :key="index">
+        <div class="item-buy fs400 fs12 fcA8A8A8">{{ timestampToTime(item.T) }}</div>
+        <div
+          class="item-number fs400 fs12"
+          :class="item.m == true ? 'fcDF384C' : 'fc45B26B'">
+          {{ item.m == true ? "卖出" : "买入" }}
+        </div>
         <div class="item-price fs400 fs12">
-          <div class="fc444444">1.2505</div>
+          <div class="fc444444">{{ Number(item.p).toFixed(2) }}</div>
         </div>
-        <div class="item-number2 fs400 fs12 fc444444">40,166.82</div>
+        <div class="item-number2 fs400 fs12 fc444444">{{ item.q }}</div>
       </div>
     </div>
     <div class="buy-sell pf500 fs16 fcFFFFFF">
@@ -22,9 +26,43 @@
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+  import { toRef, watch, defineProps, ref } from "vue";
+  import { timestampToTime } from "../../../utils/time";
+
+  const props = defineProps({
+    latestTransactionData: {
+      type: [Object, Array],
+      default: () => [],
+    },
+  });
+
+  const transactions = ref([]);
+
+  // 处理最新交易数据，始终保留20条
+  watch(
+    () => props.latestTransactionData,
+    (newVal) => {
+      if (Array.isArray(newVal)) {
+        // 如果是数组，直接取最后20条
+        transactions.value = newVal.slice(-20);
+      } else if (newVal && typeof newVal === "object") {
+        // 如果是单条对象
+        transactions.value.push(newVal);
+        if (transactions.value.length > 20) {
+          transactions.value.shift();
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
+</script>
 <style lang="less" scoped>
   .latest-order {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     width: 100%;
 
     .order-header {
@@ -32,7 +70,7 @@
       flex-direction: row;
       justify-content: flex-start;
       margin-top: 6px;
-      width: 100%;
+      width: 345px;
       height: 24px;
 
       .header-buy {
@@ -68,6 +106,7 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
+      width: 345px;
 
       .order-item {
         display: flex;

src/views/market/details/MarketConditions.vue

@@ -1,21 +1,19 @@
 <template>
-  <div class="market-conditions">
+  <div class="market-conditions" @click="closePopups">
+    <!-- 1. 头部行情 -->
     <div class="market-price">
       <div class="price-left">
-        <div class="left-price pf400 fs14 fc333333">
-          实时价格
-        </div>
+        <div class="left-price pf400 fs14 fc333333">实时价格</div>
         <div class="left-number pf600 fs20 fc1F2937" :class="getPriceColor(marketInfo.change)">
           {{ formatNumber(marketInfo.price) }}
         </div>
         <div class="left-appro pf500 fs14 fcA8A8A8">
           ≈{{ formatNumber(marketInfo.fiatPrice) }}
           <span class="appro pf500 fs14" :class="getUpDownClass(marketInfo.change)">
-            {{ marketInfo.change > 0 ? '+' : '' }}{{ marketInfo.change }}%
+            {{ marketInfo.change > 0 ? "+" : "" }}{{ marketInfo.change }}%
           </span>
         </div>
       </div>
-
       <div class="price-right">
         <div class="right-number-top">
           <div class="right-number-top-price">
@@ -40,43 +38,86 @@
       </div>
     </div>
 
-    <!-- 周期切换 Tab -->
+    <!-- 2. 周期切换 Tab -->
     <nav class="time-tabs">
+      <!-- 常用周期 -->
       <div
-        v-for="tab in tabs"
+        v-for="tab in visibleTabs"
         :key="tab"
         class="tab-item"
         :style="currentTab === tab ? { backgroundColor: '#F6465D', color: '#fff' } : {}"
-        @click="switchPeriod(tab)"
-      >
-        {{ tab }}
+        @click.stop="switchPeriod(tab)">
+        {{ getTabLabel(tab) }}
       </div>
-      <div class="tab-item icon">更多 <span class="triangle">◢</span></div>
-      <div class="tab-item icon">
-        <img src="@/assets/icon/bitcoin/lishidingdan.svg" alt="">
+
+      <!-- 更多按钮 (下拉菜单) -->
+      <div class="tab-item icon-btn" @click.stop="toggleMore">
+        <span :class="{ 'active-text': isMoreActive }">更多</span>
+        <span class="triangle">◢</span>
+
+        <!-- 下拉菜单 -->
+        <div class="dropdown-menu" v-show="showMoreMenu">
+          <div
+            v-for="mt in moreTabs"
+            :key="mt"
+            class="drop-item"
+            :class="{ active: currentTab === mt }"
+            @click.stop="switchPeriod(mt)">
+            {{ getTabLabel(mt) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 指标按钮 -->
+      <div class="tab-item icon-btn" @click.stop="toggleIndicators">
+        <img src="@/assets/icon/bitcoin/lishidingdan.svg" alt="" />
       </div>
     </nav>
 
+    <!-- 3. 指标设置面板 (点击指标图标弹出) -->
+    <div class="indicator-panel" v-show="showIndicatorMenu" @click.stop>
+      <div class="panel-section">
+        <div class="section-title">主图</div>
+        <div class="btn-group">
+          <div class="idx-btn" :class="{ active: mainIdx === 'MA' }" @click="changeMain('MA')">MA</div>
+          <div class="idx-btn" :class="{ active: mainIdx === 'BOLL' }" @click="changeMain('BOLL')">BOLL</div>
+          <div class="idx-btn" :class="{ active: mainIdx === 'Hide' }" @click="changeMain('Hide')">隐藏</div>
+        </div>
+      </div>
+      <div class="panel-section">
+        <div class="section-title">副图</div>
+        <div class="btn-group">
+          <div class="idx-btn" :class="{ active: subIdx === 'VOL' }" @click="changeSub('VOL')">VOL</div>
+          <div class="idx-btn" :class="{ active: subIdx === 'MACD' }" @click="changeSub('MACD')">MACD</div>
+          <div class="idx-btn" :class="{ active: subIdx === 'KDJ' }" @click="changeSub('KDJ')">KDJ</div>
+          <div class="idx-btn" :class="{ active: subIdx === 'RSI' }" @click="changeSub('RSI')">RSI</div>
+          <div class="idx-btn" :class="{ active: subIdx === 'WR' }" @click="changeSub('WR')">WR</div>
+          <div class="idx-btn" :class="{ active: subIdx === 'Hide' }" @click="changeSub('Hide')">隐藏</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 4. K线图组件 -->
     <div class="k-line-main">
       <KlineChart
         ref="klineRef"
         :data="kLineData"
         height="100%"
-        :precision="{ price: getPricePrecision(marketInfo.price), volume: 2 }"
-      />
+        :precision="{ price: getPricePrecision(marketInfo.price), volume: 2 }" />
     </div>
 
+    <!-- 5. 底部挂单/成交 -->
     <div class="notifi-classifi">
       <div class="pf600 fs14" :class="current === 'entrustingOrder' ? 'fc121212' : 'fcA8A8A8'" @click="messageChange('entrustingOrder')">委托挂单</div>
       <div class="sys-notifi pf600 fs14" :class="current === 'latestTransactions' ? 'fc121212' : 'fcA8A8A8'" @click="messageChange('latestTransactions')">最新成交</div>
     </div>
 
-    <component :is="currentComponent" :symbol-id="symbolId" />
+    <component :is="currentComponent" :symbol-id="symbolId" :latestTransactionData="latestTransactionData" :orderPlacement="orderPlacement" />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { useRoute } from "vue-router";
 import { GetCandlestickChart } from "@/api/index.js";
 import EntrustingOrder from "./EntrustingOrder.vue";
@@ -84,446 +125,269 @@ import LatestTransactions from "./LatestTransactions.vue";
 import KlineChart from "@/views/bitcoin/lever/components/KLineChart.vue";
 
 const route = useRoute();
-const symbolId = computed(() => route.query.id || '6');
-
-const currentTab = ref('1d');
-const tabs = ['1h', '6h', '1d', '1w', '1m'];
-const kLineData = ref([]);
-const socket = ref(null);
-const WS_BASE_URL = 'ws://backend.66linknow.com/ws/kline/';
+const symbolId = computed(() => route.query.id || "6");
+
+// --- 周期设置 ---
+const currentTab = ref("1d");
+// 外面显示的周期
+const visibleTabs = ["15m", "1h", "4h", "1d"];
+// 下拉菜单里的周期
+const moreTabs = ["1m", "5m", "30m", "1w", "1M"];
+const isMoreActive = computed(() => moreTabs.includes(currentTab.value));
+
+const getTabLabel = (t) => {
+  const map = { '1m':'1分', '5m':'5分', '15m':'15分', '30m':'30分', '1h':'1小时', '4h':'4小时', '1d':'日线', '1w':'周线', '1M':'月线' };
+  return map[t] || t;
+};
 
-// --- 生产级配置 ---
-const HEARTBEAT_INTERVAL = 15000; // 心跳间隔 15s
-const RECONNECT_DELAY = 3000;     // 重连延迟 3s
-let heartbeatTimer = null;
-let reconnectTimer = null;
-let isUnmounted = false;
+// --- UI 状态 ---
+const showMoreMenu = ref(false);
+const showIndicatorMenu = ref(false);
+const mainIdx = ref('MA');
+const subIdx = ref('VOL');
+const klineRef = ref(null); // 引用子组件
+
+// --- 交互方法 ---
+const toggleMore = () => {
+  showIndicatorMenu.value = false;
+  showMoreMenu.value = !showMoreMenu.value;
+};
 
-const marketInfo = ref({
-  price: '0.00', fiatPrice: '0.00', change: 0.00, high: '0.00', low: '0.00', vol: '0', amount: '0'
-});
+const toggleIndicators = () => {
+  showMoreMenu.value = false;
+  showIndicatorMenu.value = !showIndicatorMenu.value;
+};
 
-const current = ref("entrustingOrder");
-const componentsMap = { entrustingOrder: EntrustingOrder, latestTransactions: LatestTransactions };
-const currentComponent = computed(() => componentsMap[current.value]);
+const closePopups = () => {
+  showMoreMenu.value = false;
+  showIndicatorMenu.value = false;
+};
 
-// --- 1. 切换周期 ---
 const switchPeriod = (period) => {
   if (currentTab.value === period) return;
-
   currentTab.value = period;
-
-  // 清空数据，触发子组件重置，并重新请求
+  showMoreMenu.value = false;
   kLineData.value = [];
   getKlineData();
 };
 
-// --- 2. HTTP 获取历史数据 ---
-const getKlineData = async () => {
-  if (typeof GetCandlestickChart !== 'function') return;
+const changeMain = (name) => {
+  mainIdx.value = name;
+  if (klineRef.value) klineRef.value.setMainIndicator(name);
+};
 
-  try {
-    const res = await GetCandlestickChart({
-      symbol: symbolId.value,
-      period: currentTab.value
-    });
+const changeSub = (name) => {
+  subIdx.value = name;
+  if (klineRef.value) klineRef.value.setSubIndicator(name);
+};
+
+// --- 下面是 WebSocket 和数据逻辑 (保持你原有的逻辑) ---
+const kLineData = ref([]);
+const socket = ref(null);
+const WS_BASE_URL = "ws://backend.66linknow.com/ws/kline/";
+const HEARTBEAT_INTERVAL = 15000;
+const RECONNECT_DELAY = 3000;
+let heartbeatTimer = null;
+let reconnectTimer = null;
+let isUnmounted = false;
 
-    let rawList = [];
-    if (Array.isArray(res)) rawList = res;
-    else if (res && Array.isArray(res.data)) rawList = res.data;
+const marketInfo = ref({ price: "0.00", fiatPrice: "0.00", change: 0.0, high: "0.00", low: "0.00", vol: "0", amount: "0" });
+const orderPlacement = ref();
+const latestTransactionData = ref();
+const current = ref("entrustingOrder");
+const componentsMap = { entrustingOrder: EntrustingOrder, latestTransactions: LatestTransactions };
+const currentComponent = computed(() => componentsMap[current.value]);
 
+const getKlineData = async () => {
+  if (typeof GetCandlestickChart !== "function") return;
+  try {
+    const res = await GetCandlestickChart({ symbol: symbolId.value, period: currentTab.value });
+    let rawList = Array.isArray(res) ? res : (res && res.data ? res.data : []);
     if (rawList.length > 0) {
-      const formattedData = rawList.map(item => ({
-        timestamp: Number(item[0]),
-        open: parseFloat(item[1]),
-        high: parseFloat(item[2]),
-        low: parseFloat(item[3]),
-        close: parseFloat(item[4]),
-        volume: parseFloat(item[5])
+      const formattedData = rawList.map((item) => ({
+        timestamp: Number(item[0]), open: parseFloat(item[1]), high: parseFloat(item[2]),
+        low: parseFloat(item[3]), close: parseFloat(item[4]), volume: parseFloat(item[5])
       }));
       formattedData.sort((a, b) => a.timestamp - b.timestamp);
       kLineData.value = formattedData;
 
-      // 同步合并：如果 WS 已经有最新价，立即修正历史数据最后一根，防止回跳
-      if (marketInfo.value.price !== '0.00') {
+      if (marketInfo.value.price === "0.00") {
         const lastBar = formattedData[formattedData.length - 1];
-        const realTimePrice = parseFloat(marketInfo.value.price);
-        lastBar.close = realTimePrice;
-        // 修正高低
-        if (realTimePrice > lastBar.high) lastBar.high = realTimePrice;
-        if (realTimePrice < lastBar.low) lastBar.low = realTimePrice;
+        let totalVol = 0;
+        formattedData.forEach(i => totalVol += i.volume);
+        marketInfo.value = {
+          price: lastBar.close, fiatPrice: lastBar.close, change: 0,
+          high: lastBar.high, low: lastBar.low, vol: totalVol, amount: totalVol * lastBar.close
+        };
       }
-
-      updateMarketInfoFromKline(formattedData);
     }
   } catch (error) { console.error("API Error", error); }
 };
 
-const updateMarketInfoFromKline = (data) => {
-  if (!data.length) return;
-  const lastBar = data[data.length - 1];
-
-  // 仅当没数据或 WS 未连接时使用历史数据兜底
-  if (marketInfo.value.price === '0.00' || !socket.value || socket.value.readyState !== 1) {
-    const firstBar = data[0];
-    let maxHigh = -Infinity, minLow = Infinity, totalVol = 0;
-    data.forEach(item => {
-      if (item.high > maxHigh) maxHigh = item.high;
-      if (item.low < minLow) minLow = item.low;
-      totalVol += item.volume;
-    });
-    const changeRate = firstBar.open ? ((lastBar.close - firstBar.open) / firstBar.open) * 100 : 0;
-
-    marketInfo.value = {
-      price: lastBar.close,
-      change: changeRate.toFixed(2),
-      high: maxHigh, low: minLow, vol: totalVol, amount: totalVol * lastBar.close,
-      fiatPrice: lastBar.close
-    };
-  }
-};
-
-// --- 3. WS 连接 (含心跳设计) ---
 const connectWebSocket = () => {
-  // 清理旧资源
   closeWebSocket();
-
-  const symbolStr = String(route.query.type || 'btcusdt').toLowerCase();
+  const symbolStr = String(route.query.type || "btcusdt").toLowerCase();
   const url = `${WS_BASE_URL}?symbol=${symbolStr}`;
-
-  console.log('WS 连接:', url);
-
   try {
     socket.value = new WebSocket(url);
-
-    socket.value.onopen = () => {
-      console.log('✅ WS Connected');
-      startHeartbeat(); // 启动心跳
-    };
-
-    socket.value.onmessage = (event) => {
-      handleSocketMessage(event.data);
-    };
-
+    socket.value.onopen = () => { startHeartbeat(); };
+    socket.value.onmessage = (event) => { handleSocketMessage(event.data); };
     socket.value.onclose = () => {
-      stopHeartbeat(); // 停止心跳
+      stopHeartbeat();
       if (!isUnmounted) {
-        console.log('⚠️ WS Closed, reconnecting...');
         clearTimeout(reconnectTimer);
         reconnectTimer = setTimeout(() => connectWebSocket(), RECONNECT_DELAY);
       }
     };
-
-    socket.value.onerror = (err) => {
-      // onerror 通常会触发 onclose，由 onclose 处理重连
-      console.error('❌ WS Error', err);
-    };
-  } catch (e) {
-    if (!isUnmounted) {
-      reconnectTimer = setTimeout(() => connectWebSocket(), RECONNECT_DELAY);
-    }
-  }
-};
-
-const closeWebSocket = () => {
-  if (socket.value) {
-    socket.value.close();
-    socket.value = null;
-  }
-  stopHeartbeat();
-  clearTimeout(reconnectTimer);
+  } catch (e) { if (!isUnmounted) reconnectTimer = setTimeout(() => connectWebSocket(), RECONNECT_DELAY); }
 };
 
-// --- 心跳逻辑 ---
-const startHeartbeat = () => {
-  stopHeartbeat();
-  heartbeatTimer = setInterval(() => {
-    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
-      // 发送 ping，具体格式看后端要求，一般是字符串 'ping' 或 JSON
-      socket.value.send("ping");
-    }
-  }, HEARTBEAT_INTERVAL);
-};
-
-const stopHeartbeat = () => {
-  if (heartbeatTimer) {
-    clearInterval(heartbeatTimer);
-    heartbeatTimer = null;
-  }
-};
-
-// --- 辅助：获取周期对应的毫秒数 ---
-const getPeriodMs = (period) => {
-  const map = {
-    '1m': 60 * 1000,
-    '5m': 5 * 60 * 1000,
-    '15m': 15 * 60 * 1000,
-    '30m': 30 * 60 * 1000,
-    '1h': 60 * 60 * 1000,
-    '4h': 4 * 60 * 60 * 1000,
-    '6h': 6 * 60 * 60 * 1000,
-    '1d': 24 * 60 * 60 * 1000,
-    '1w': 7 * 24 * 60 * 60 * 1000,
-    '1M': 30 * 24 * 60 * 60 * 1000
-  };
-  return map[period] || 60 * 60 * 1000;
-}
+const closeWebSocket = () => { if (socket.value) { socket.value.close(); socket.value = null; } stopHeartbeat(); clearTimeout(reconnectTimer); };
+const startHeartbeat = () => { stopHeartbeat(); heartbeatTimer = setInterval(() => { socket.value?.readyState === 1 && socket.value.send("ping"); }, HEARTBEAT_INTERVAL); };
+const stopHeartbeat = () => { clearInterval(heartbeatTimer); heartbeatTimer = null; };
 
-// --- 4. 核心：处理实时消息 (24hrTicker) ---
 const handleSocketMessage = (msgStr) => {
   try {
-    // 忽略心跳响应
-    if (msgStr === 'pong') return;
-
+    if (msgStr === "pong") return;
     const rawData = JSON.parse(msgStr);
     const msg = rawData.data || rawData;
 
-    if (msg.e === "24hrTicker") {
-      marketInfo.value = {
-        price: msg.c, change: parseFloat(msg.P), high: msg.h, low: msg.l, vol: msg.v, amount: msg.q, fiatPrice: msg.c
-      };
-
-      if (kLineData.value.length > 0) {
-        const lastIndex = kLineData.value.length - 1;
-        const lastBar = kLineData.value[lastIndex];
-        const newPrice = parseFloat(msg.c);
-        const currentTime = Number(msg.E); // 事件时间
-        const periodMs = getPeriodMs(currentTab.value);
-
-        // 标准时间戳对齐算法: (当前时间 / 周期) * 周期
-        const currentBarStart = Math.floor(currentTime / periodMs) * periodMs;
-
-        // 如果计算出的起始时间 > 最后一根的起始时间，说明跨周期了，生成新 K 线
-        if (currentBarStart > lastBar.timestamp) {
-          const newBar = {
-            timestamp: currentBarStart,
-            open: newPrice,
-            high: newPrice,
-            low: newPrice,
-            close: newPrice,
-            volume: 0
-          };
-          // 扩展运算符触发更新
-          kLineData.value = [...kLineData.value, newBar];
-
-        } else {
-          // 还在当前周期内，更新最后一根
-          const updatedBar = {
-            ...lastBar,
-            close: newPrice,
-            high: Math.max(lastBar.high, newPrice),
-            low: Math.min(lastBar.low, newPrice)
-          };
-          kLineData.value.splice(lastIndex, 1, updatedBar);
-        }
-      }
-    }
+    if (msg.e === "kline") {
+      const k = msg.k;
+      if (k.i !== currentTab.value) return;
+      const newBar = { timestamp: Number(k.t), open: parseFloat(k.o), high: parseFloat(k.h), low: parseFloat(k.l), close: parseFloat(k.c), volume: parseFloat(k.v) };
+      updateKlineData(newBar);
+      marketInfo.value.price = newBar.close;
+      marketInfo.value.fiatPrice = newBar.close;
+    } else if (msg.e === "24hrTicker") {
+      marketInfo.value.change = parseFloat(msg.P).toFixed(2);
+      marketInfo.value.high = msg.h; marketInfo.value.low = msg.l;
+      marketInfo.value.vol = msg.v; marketInfo.value.amount = msg.q;
+    } else if (rawData.stream?.includes("@depth20")) orderPlacement.value = rawData.data;
+    else if (rawData.stream?.includes("@aggTrade")) latestTransactionData.value = rawData.data;
   } catch (e) {}
 };
 
-// --- 页面可见性监听 (切屏回来自动重连) ---
-const handleVisibilityChange = () => {
-  if (document.visibilityState === 'visible') {
-    if (!socket.value || socket.value.readyState !== WebSocket.OPEN) {
-      console.log('👀 Page Visible, reconnecting...');
-      connectWebSocket();
-    }
-  }
+const updateKlineData = (newBar) => {
+  if (!kLineData.value?.length) return;
+  const lastIndex = kLineData.value.length - 1;
+  const lastBar = kLineData.value[lastIndex];
+  if (newBar.timestamp === lastBar.timestamp) kLineData.value.splice(lastIndex, 1, newBar);
+  else if (newBar.timestamp > lastBar.timestamp) kLineData.value.push(newBar);
 };
 
-onMounted(() => {
-  isUnmounted = false;
-  getKlineData();
-  connectWebSocket();
-  document.addEventListener('visibilitychange', handleVisibilityChange);
-});
-
-onBeforeUnmount(() => {
-  isUnmounted = true;
-  closeWebSocket();
-  document.removeEventListener('visibilitychange', handleVisibilityChange);
-});
-
-watch(symbolId, () => {
-  kLineData.value = [];
-  getKlineData();
-  connectWebSocket();
-}, { immediate: false });
-
-const messageChange = (key) => { current.value = key; };
-const formatNumber = (num) => {
-  if (!num) return '0.00';
-  const n = Number(num);
-  return n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 6 });
-};
-const abbreviateNumber = (value) => {
-  if (!value) return '0.00';
-  let num = parseFloat(value);
-  if (isNaN(num)) return '0.00';
-  if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
-  if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
-  if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K';
-  return num.toFixed(2);
-};
-const getPricePrecision = (price) => price < 1 ? 6 : (price < 10 ? 4 : 2);
-const getPriceColor = (change) => change >= 0 ? 'fc45B26B' : 'fcF6465D';
-const getUpDownClass = (change) => change >= 0 ? 'fc45B26B' : 'fcF6465D';
+const handleVisibilityChange = () => { if (document.visibilityState === "visible" && socket.value?.readyState !== 1) connectWebSocket(); };
+
+onMounted(() => { isUnmounted = false; getKlineData(); connectWebSocket(); document.addEventListener("visibilitychange", handleVisibilityChange); });
+onBeforeUnmount(() => { isUnmounted = true; closeWebSocket(); document.removeEventListener("visibilitychange", handleVisibilityChange); });
+watch(symbolId, () => { kLineData.value = []; getKlineData(); connectWebSocket(); });
+const messageChange = (key) => current.value = key;
+const formatNumber = (num) => num ? Number(num).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 6 }) : "0.00";
+const abbreviateNumber = (v) => { if (!v) return "0.00"; let n = parseFloat(v); if (n>=1e9) return (n/1e9).toFixed(2)+"B"; if (n>=1e6) return (n/1e6).toFixed(2)+"M"; if (n>=1e3) return (n/1e3).toFixed(2)+"K"; return n.toFixed(2); };
+const getPricePrecision = (p) => (p < 1 ? 6 : p < 10 ? 4 : 2);
+const getPriceColor = (c) => (c >= 0 ? "fc45B26B" : "fcF6465D");
+const getUpDownClass = (c) => (c >= 0 ? "fc45B26B" : "fcF6465D");
 </script>
 
 <style lang="less" scoped>
-.fc45B26B { color: #2EBD85 !important; }
-.fcF6465D { color: #F6465D !important; }
-.fc1F2937 { color: #1F2937; }
+.fc45B26B { color: #2ebd85 !important; }
+.fcF6465D { color: #f6465d !important; }
+.fc1F2937 { color: #1f2937; }
 
-/* 保持之前的样式布局 */
+/* 周期切换栏 */
 .time-tabs {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   box-sizing: border-box;
-  padding-top: 10px;
-  padding-bottom: 0px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding: 10px 15px 0 15px;
+  position: relative;
+  z-index: 20;
 }
 
 .tab-item {
   font-size: 14px;
-  color: #929AA5;
-  padding: 4px 10px;
-  border-radius: 6px;
+  color: #929aa5;
+  padding: 4px 8px;
+  border-radius: 4px;
   cursor: pointer;
   font-weight: 500;
-  transition: all 0.2s;
   display: flex;
   align-items: center;
-  justify-content: center;
+  position: relative;
 }
-
-.tab-item.icon {
-  color: #929AA5;
-  font-size: 12px;
-  padding: 4px 4px;
+.tab-item.icon-btn { padding: 4px 4px; }
+.active-text { color: #1F2937; font-weight: 600; }
+.triangle { font-size: 8px; margin-left: 2px; transform: scale(0.9); }
+.tab-item img { display: block; height: 16px; width: auto; }
+
+/* 更多周期下拉菜单 */
+.dropdown-menu {
+  position: absolute;
+  top: 30px;
+  left: -20px;
+  width: 80px;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  border-radius: 6px;
+  padding: 5px 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
 }
-
-.triangle {
-  font-size: 8px;
-  margin-left: 2px;
-  transform: scale(0.9);
+.drop-item {
+  padding: 8px 15px;
+  font-size: 13px;
+  color: #666;
+  text-align: center;
 }
-
-.tab-item img {
-  display: block;
-  height: 16px;
-  width: auto;
+.drop-item.active { color: #F6465D; background: #fff5f5; }
+
+/* 指标面板 */
+.indicator-panel {
+  position: absolute;
+  top: 155px; /* 调整此值以对齐 K 线图顶部 */
+  left: 15px;
+  right: 15px;
+  background: #fff;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+  border-radius: 8px;
+  padding: 15px;
+  z-index: 99;
+}
+.panel-section { margin-bottom: 15px; }
+.section-title { font-size: 12px; color: #999; margin-bottom: 8px; }
+.btn-group { display: flex; flex-wrap: wrap; gap: 10px; }
+.idx-btn {
+  padding: 4px 12px; border: 1px solid #eee; border-radius: 14px; font-size: 12px; color: #666; cursor: pointer;
 }
+.idx-btn.active { border-color: #F6465D; color: #F6465D; background-color: #fff5f5; }
 
+/* 容器布局 */
 .market-conditions {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-
-  .market-price {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-top: 8px;
-    width: 100%;
-    height: 73px;
-    padding: 0 15px;
-    box-sizing: border-box;
-
-    .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, .right-number-bottom {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        width: 100%;
-        height: 32px;
-
-        .right-number-top-price, .right-number-top-number {
-           margin-left: 10px;
-           text-align: right;
-            div {
-              height: 16px;
-              line-height: 16px;
-              text-align: end;
-            }
-        }
-      }
-      .right-number-bottom {
-        margin-top: 9px;
-      }
-    }
-  }
-
-  .k-line-main {
-    height: 50vh;
-    min-height: 350px;
-    width: 100%;
-    padding: 0 15px;
+  display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; width: 100%; position: relative;
+}
+.market-price {
+  display: flex; justify-content: space-between; margin-top: 8px; width: 100%; height: 73px; padding: 0 15px; box-sizing: border-box;
+  .price-left {
+    display: flex; flex-direction: column; width: 144px; height: 69px;
+    .left-price { display: flex; align-items: center; height: 18px; }
+    .left-number { margin-top: 5px; }
+    .left-appro { display: flex; align-items: center; margin-top: 3px; .appro { margin-left: 9px; } }
   }
-
-  .notifi-classifi {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-end;
-    margin-top: 15px;
-    width: 100%;
-    padding: 0 15px;
-    box-sizing: border-box;
-    height: 24px;
-
-    .sys-notifi {
-      margin-left: 47px;
+  .price-right {
+    display: flex; flex-direction: column; height: 100%;
+    .right-number-top, .right-number-bottom {
+      display: flex; justify-content: flex-end; width: 100%; height: 32px;
+      .right-number-top-price, .right-number-top-number { margin-left: 10px; text-align: right; div { height: 16px; line-height: 16px; text-align: end; } }
     }
+    .right-number-bottom { margin-top: 9px; }
   }
 }
+.k-line-main { height: 50vh; min-height: 350px; width: 100%; padding: 0 15px; margin-top: 10px; }
+.notifi-classifi {
+  display: flex; align-items: flex-end; margin-top: 15px; width: 100%; padding: 0 15px; box-sizing: border-box; height: 24px; border-bottom: 1px solid #f5f5f5; padding-bottom: 5px;
+  .sys-notifi { margin-left: 47px; }
+}
 </style>

src/views/market/dialog/ChangeIcon.vue

@@ -83,7 +83,7 @@
     position: fixed;
     left: 0;
     top: 0;
-    z-index: 1;
+    z-index: 10;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
@@ -151,7 +151,7 @@
 
         img {
           position: absolute;
-          top: 15px;
+          top: 26.5px;
           left: 14px;
           width: 17px;
           height: 17px;

src/views/notification/Index.vue

@@ -10,7 +10,7 @@
         <div class="active-line" v-if="current == 'insite'"></div>
       </div>
       <div
-        class="classifi-item pf600 fs14 fcA8A8A8"
+        class="classifi-item"
         :class="current == 'sys' ? 'current-classifi' : 'pf600 fs14 fcA8A8A8'"
         @click="messageChange('sys')">
         系统通知

vue.config.js

@@ -11,8 +11,8 @@ module.exports = defineConfig({
         // ⚠️【重要】这里必须改成你真实的后端地址！
         // 如果后端在本地，可能是 http://localhost:8000
         // 如果是线上测试服，可能是 http://47.100.xx.xx
-        target: 'http://63.141.230.43:57676',
-
+          //'http://63.141.230.43:57676',
+        target: 'http://backend.66linknow.com', // ✅ 必须加上协议
         changeOrigin: true, // 允许跨域
 
       },