Переглянути джерело

12/7完成工作
1.修复 K 线图向左滑动加载历史数据时,连接处出现重复 K 线的问题。
2.优化行情页面 WebSocket 与 HTTP 数据的拼接逻辑,解决图表闪烁。
3.完成 K 线图组件 (KLineChart) 的代码重构与清理。
4.移动端交易页面 UI 开发:基于 Vue 3 + Composition API,完成了加密货币交易币币页面的高保真还原。
严格遵循 375px 移动端设计规范,实现了头部导航、左侧盘口(Order Book)、右侧交易表单及底部当前委托的布局。
5.深度图动画性能优化(重点):针对盘口深度条的高频刷新需求,重构了动画实现方案。
弃用消耗 CPU 的 width 属性动画,改用 transform: scaleX 配合 will-change 属性。
启用了 GPU 硬件加速,避免了浏览器重排(Reflow),确保在数据频繁跳动时的动画流畅度。
6.交互与视觉细节调整:实现了特殊的“从左向右”深度条延伸动画效果。
7.优化了头部双行布局结构(币种信息与行情数据分离)。
8.完成了底部委托单卡片及空状态样式的开发。

Hexinkui 3 тижнів тому
батько
коміт
697abe4ebc

+ 4 - 4
src/views/market/details/EntrustingOrder.vue

@@ -26,10 +26,10 @@
         <div class="item-sell fs400 fs12 fcA8A8A8">{{ index + 1 }}</div>
       </div>
     </div>
-    <div class="buy-sell pf500 fs16 fcFFFFFF">
-      <div class="buy-btn">买入(做多)</div>
-      <div class="sell-btn">卖出(做空)</div>
-    </div>
+<!--    <div class="buy-sell pf500 fs16 fcFFFFFF">-->
+<!--      <div class="buy-btn">买入(做多)</div>-->
+<!--      <div class="sell-btn">卖出(做空)</div>-->
+<!--    </div>-->
   </div>
 </template>
 <script setup>

+ 4 - 4
src/views/market/details/LatestTransactions.vue

@@ -20,10 +20,10 @@
         <div class="item-number2 fs400 fs12 fc444444">{{ item.q }}</div>
       </div>
     </div>
-    <div class="buy-sell pf500 fs16 fcFFFFFF">
-      <div class="buy-btn">买入(做多)</div>
-      <div class="sell-btn">卖出(做空)</div>
-    </div>
+<!--    <div class="buy-sell pf500 fs16 fcFFFFFF">-->
+<!--      <div class="buy-btn">买入(做多)</div>-->
+<!--      <div class="sell-btn">卖出(做空)</div>-->
+<!--    </div>-->
   </div>
 </template>
 <script setup>

+ 13 - 2
src/views/market/details/MarketConditions.vue

@@ -106,14 +106,25 @@
     </div>
 
     <component :is="currentComponent" :symbol-id="symbolId" :latestTransactionData="latestTransactionData" :orderPlacement="orderPlacement" />
+
+    <div
+        style="
+    box-shadow: 0 -0.05333rem 0.26667rem rgba(109 109 109 / 5%);
+    box-sizing: border-box;margin-top: 20px;
+    width:100%;z-index: 99;position: sticky; bottom: 0;background-color: #FFFFFF;padding: 20px;">
+      <div @click="router.push('/bitcoin/CryptocurrencyTrading')"
+          style="font-size: 17px; margin:0 auto;border-radius:19px;color:#FFFFFF; text-align:center; width:80%; line-height: 38px; font-weight: 500; background-color: #F6465D; ">交易</div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute,useRouter } from "vue-router";
 import { GetCandlestickChart } from "@/api/index.js";
 
+const router = useRouter(); // 【新增】 实例化路由
+
 // 引入组件
 import KLineChart from "@/views/bitcoin/lever/components/KLineChart.vue";
 import EntrustingOrder from "./EntrustingOrder.vue";
@@ -347,6 +358,6 @@ const getUpDownClass = (c) => (c >= 0 ? "fc45B26B" : "fcF6465D");
     .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; } } } } }
 .k-line-main { height: 50vh; min-height: 350px; width: 100%; padding: 0 15px; }
 .notifi-classifi { display: flex; align-items: flex-end; margin-top: 140px;
-  width: 100%; padding: 0 15px 5px 15px; box-sizing: border-box; height: 24px;
+  width: 100%; padding: 0 15px 0 15px; box-sizing: border-box; height: 24px;
   border-bottom: 1px solid #f5f5f5; .sys-notifi { margin-left: 47px; } }
 </style>

+ 1 - 1
vue.config.js

@@ -13,7 +13,7 @@ module.exports = defineConfig({
         // 如果是线上测试服,可能是 http://47.100.xx.xx
           //'http://63.141.230.43:57676',
           // 'http://backend.66linknow.com'
-        target:'http://63.141.230.43:57676' , // ✅ 必须加上协议
+        target:'http://backend.66linknow.com', // ✅ 必须加上协议
         changeOrigin: true, // 允许跨域
 
       },