diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index 1b8d0f6..07b129c 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -2,7 +2,8 @@
     "version" : "1.0",
     "configurations" : [
         {
-            "playground" : "custom",
+            "customPlaygroundType" : "device",
+            "playground" : "standard",
             "type" : "uni-app:app-android"
         }
     ]
diff --git a/common/canvasMethod.js b/common/canvasMethod.js
new file mode 100644
index 0000000..b46cbea
--- /dev/null
+++ b/common/canvasMethod.js
@@ -0,0 +1,392 @@
+/**
+ * 功能：Canvas绘制方法。
+ * 作者：洪锡林
+ * 时间：2025年10月25日
+ *
+ * @format
+ */
+
+import { utils } from "./util.js";
+export const HCharts = {
+  // 清除画布
+  clearCanvas(ctx, width, height) {
+    ctx.clearRect(0, 0, width, height);
+    ctx.setFillStyle("#ffffff");
+    ctx.fillRect(0, 0, width, height);
+  },
+  //   设置画布颜色
+  setCanvasColor(ctx, width, height, color) {
+    ctx.clearRect(0, 0, width, height);
+    ctx.setFillStyle(color);
+    ctx.fillRect(0, 0, width, height);
+  },
+  // 绘制文本工具函数
+  drawText(ctx, text, x, y, fontSize = 12, color = "#333", align = "left") {
+    ctx.setFontSize(fontSize);
+    ctx.setFillStyle(color);
+    ctx.setTextAlign(align);
+    ctx.fillText(text, x, y);
+  },
+  /**
+   * 功能：绘制网格系统。
+   * 作者：洪锡林
+   * 时间：2025年10月25日
+   *
+   * grid:[{
+   *  top:顶部距离
+   *  bottom:底部距离
+   *  left:左侧距离
+   *  right:右侧距离
+   *  lineColor:网格线颜色
+   *  lineWidth:网格线宽度
+   *  horizontalLineNum:水平网格线数量
+   *  verticalLineNum:垂直网格线数量
+   * label:{
+   *  fontSize:字体大小
+   *  color:字体颜色
+   *  onlyTwo:是否只有两个标签
+   *  text:[{
+   *    value:值标签
+   *    ratio:比例标签
+   *  },{
+   *    value:值标签
+   *    ratio:比例标签
+   *  },...]
+   * },...]
+   */
+  // 绘制网格系统
+  drawGrid(ctx, width, height, grid, openTime, closeTime) {
+    //   测试数据
+    // const preClosePrice = prevClosePrice;
+    for (let i = 0; i < grid.length; ++i) {
+      const top = grid[i].top;
+      const bottom = grid[i].bottom;
+      const left = grid[i].left;
+      const right = grid[i].right;
+      const lineColor = grid[i].lineColor;
+      const lineWidth = grid[i].lineWidth;
+      const horizontalLineNum = grid[i].horizontalLineNum - 1;
+      const verticalLineNum = grid[i].verticalLineNum - 1;
+      let label;
+      if (grid[i].label) {
+        label = grid[i].label;
+      }
+      ctx.setStrokeStyle(lineColor);
+      ctx.setLineWidth(lineWidth);
+
+      //   画图底的开盘收盘时间
+      if (i == 0 && openTime && closeTime) {
+        HCharts.drawText(ctx, openTime, 6, height - bottom + 12, 14, "#686868", "left");
+        HCharts.drawText(ctx, closeTime, width - 6, height - bottom + 12, 14, "#686868", "right");
+      }
+      // 绘制水平网格线
+      for (let j = 0; j <= horizontalLineNum; j++) {
+        const y = top + (j * (height - bottom - top)) / horizontalLineNum;
+        ctx.beginPath();
+        if (label.lineStyle[j] == "dash") {
+          ctx.setLineDash([5, 5]);
+        }
+        ctx.moveTo(left, y);
+        ctx.lineTo(width - right, y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+      // 绘制垂直网格线
+      for (let i = 0; i <= verticalLineNum; i++) {
+        const x = ((width - left - right) * i) / verticalLineNum;
+        ctx.beginPath();
+        ctx.moveTo(x + left, top);
+        ctx.lineTo(x + left, height - bottom);
+        ctx.stroke();
+      }
+    }
+  },
+  // 绘制价格标签
+  drawAxisLabels(ctx, width, height, grid) {
+    for (let i = 0; i < grid.length; ++i) {
+      const top = grid[i].top;
+      const bottom = grid[i].bottom;
+      const left = grid[i].left;
+      const right = grid[i].right;
+      const horizontalLineNum = grid[i].horizontalLineNum - 1;
+      let label;
+      if (grid[i].label) {
+        label = grid[i].label;
+      }
+      // 绘制水平网格线
+      for (let j = 0; j <= horizontalLineNum; j++) {
+        const y = top + (j * (height - bottom - top)) / horizontalLineNum;
+        // 价格标签
+        if (label) {
+          let valueXText = left + 1;
+          let ratioXText = width - right - 1;
+          let yText = y + 10;
+          if (j == horizontalLineNum) {
+            yText = y - 1;
+          }
+          let valueAlign = "left";
+          let ratioAlign = "right";
+          let fontSize = label.fontSize;
+          let textColor = label.color[j];
+          if (label.onlyTwo) {
+            if (j == 0) {
+              HCharts.drawText(ctx, label.text[0].value, valueXText, yText, fontSize, label.color[0], valueAlign);
+            } else if (j == horizontalLineNum) {
+              HCharts.drawText(ctx, label.text[1].value, valueXText, yText, fontSize, label.color[1], valueAlign);
+            }
+          } else {
+            HCharts.drawText(ctx, label.text[j].value, valueXText, yText, fontSize, textColor, valueAlign);
+          }
+
+          if (typeof label.text[j]?.ratio !== "undefined") {
+            HCharts.drawText(ctx, label.text[j].ratio, ratioXText, yText, fontSize, textColor, ratioAlign);
+          }
+        }
+      }
+    }
+  },
+  // 绘制价格曲线
+  drawPriceLine(ctx, width, height, data, grid, priceRange) {
+    if (!data.length) return;
+    // 上下边距1
+    const top = grid[0].top;
+    const bottom = grid[0].bottom;
+    const left = grid[0].left;
+    const right = grid[0].right;
+    const pointLen = 240;
+    const priceDiff = priceRange.max - priceRange.min;
+    // 绘制价格曲线
+    ctx.setStrokeStyle("#000");
+    ctx.setLineWidth(1);
+    ctx.beginPath();
+
+    data.forEach((item, index) => {
+      const x = left + (index * (width - left - right)) / pointLen;
+      const y = top + (height - top - bottom) * (1 - (item.price - priceRange.min) / priceDiff);
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        // 使用贝塞尔曲线平滑连接
+        const prevPoint = data[index - 1];
+        const prevX = left + ((index - 1) * (width - left - right)) / pointLen;
+        const prevY = top + (height - top + -bottom) * (1 - (prevPoint.price - priceRange.min) / priceDiff);
+        const cp1x = (prevX + x) / 2;
+        const cp1y = prevY;
+        const cp2x = (prevX + x) / 2;
+        const cp2y = y;
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+      }
+    });
+    ctx.stroke();
+    // 绘制渐变背景
+    HCharts.drawGradientBackground(ctx, width, height, data, grid, priceRange);
+  },
+
+  // 绘制渐变背景
+  drawGradientBackground(ctx, width, height, data, grid, priceRange) {
+    // 上下边距1
+    const top = grid[0].top;
+    const bottom = grid[0].bottom;
+    const left = grid[0].left;
+    const right = grid[0].right;
+    const pointLen = 240;
+    const priceDiff = priceRange.max - priceRange.min;
+
+    const gradient = ctx.createLinearGradient(0, left, 0, height - top);
+    gradient.addColorStop(0, "rgba(0, 0, 0, 0.3)");
+    gradient.addColorStop(1, "rgba(0, 0, 0, 0.05)");
+
+    ctx.beginPath();
+
+    // 绘制价格曲线路径
+    data.forEach((item, index) => {
+      const x = left + (index * (width - left - right)) / pointLen;
+      const y = top + (height - top - bottom) * (1 - (item.price - priceRange.min) / priceDiff);
+
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        const prevPoint = data[index - 1];
+        const prevX = left + ((index - 1) * (width - left - right)) / pointLen;
+        const prevY = top + (height - top - bottom) * (1 - (prevPoint.price - priceRange.min) / priceDiff);
+
+        const cp1x = (prevX + x) / 2;
+        const cp1y = prevY;
+        const cp2x = (prevX + x) / 2;
+        const cp2y = y;
+
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+      }
+    });
+
+    // 闭合路径
+    const lastX = left + ((data.length - 1) * (width - left - right)) / pointLen;
+    ctx.lineTo(lastX, height - bottom);
+    ctx.lineTo(left, height - bottom);
+    ctx.closePath();
+
+    ctx.setFillStyle(gradient);
+    ctx.fill();
+  },
+  // 绘制成交量
+  drawVolume(ctx, width, height, data, index, pointLen, grid, volumeRange, offset) {
+    if (!data.length) return;
+
+    const top = grid[index - 1].top;
+    const bottom = grid[index - 1].bottom;
+    const left = grid[index - 1].left;
+    const right = grid[index - 1].right;
+
+    data.forEach((item, index) => {
+      const x = offset + left + (index * (width - left - right)) / pointLen;
+      const barWidth = (width - left - right) / pointLen - 0.5;
+      const barHeight = (item.volume / volumeRange.max) * (height - bottom - top);
+      // 根据涨跌设置颜色
+      const isRise = index === 0 || item.price >= data[index - 1].price || item.close >= data[index - 1].close;
+      ctx.setFillStyle(isRise ? "green" : "red");
+
+      ctx.fillRect(x - barWidth / 2, height - bottom - barHeight, barWidth, barHeight);
+    });
+  },
+  // 字符宽度近似计算（避免使用 measureText）
+  getApproximateTextWidth(text, fontSize = 10) {
+    // 中文字符约等于 fontSize，英文字符约等于 fontSize * 0.6
+    let width = 0;
+    for (let char of text) {
+      // 判断是否为中文字符
+      if (char.match(/[\u4e00-\u9fa5]/)) {
+        width += fontSize;
+      } else {
+        width += fontSize * 0.6;
+      }
+    }
+    return width;
+  },
+  // 绘制顶部价格显示
+  drawTopPriceDisplay(ctx, grid, text) {
+    for (let i = 0; i < text.length; i++) {
+      let x = grid[i].left;
+      let y = grid[i].top - 4;
+      for (let j = 0; j < text[i].length; j++) {
+        ctx.setFillStyle(text[i][j].color);
+        ctx.setFontSize(10);
+        ctx.setTextAlign("left");
+        ctx.fillText(text[i][j].name + ":" + text[i][j].value, x, y);
+        x += HCharts.getApproximateTextWidth(text[i][j].name + ":" + text[i][j].value) + 5;
+      }
+    }
+  },
+  // 绘制坐标轴标签
+  drawCrosshairAxisLabels(ctx, width, height, grid, crosshair) {
+    const { x, y } = crosshair;
+    // X轴时间标签
+    if (crosshair.currentData && (crosshair.currentData.time || crosshair.currentData.date)) {
+      const timeText = crosshair.currentData.time || crosshair.currentData.date;
+      const xBoxWidth = crosshair.currentData.time ? 40 : 70;
+      const xBoxHeight = 15;
+      ctx.setFillStyle("#629AF5");
+
+      if (x - xBoxWidth / 2 <= grid[0].left) {
+        ctx.fillRect(grid[0].left, height - grid[0].bottom, xBoxWidth, xBoxHeight);
+      } else if (x + xBoxWidth / 2 < width - grid[0].right) {
+        ctx.fillRect(x - xBoxWidth / 2, height - grid[0].bottom, xBoxWidth, xBoxHeight);
+      } else {
+        ctx.fillRect(width - grid[0].right - xBoxWidth, height - grid[0].bottom, xBoxWidth, xBoxHeight);
+      }
+
+      ctx.setFillStyle("#fff");
+      ctx.setFontSize(12);
+      ctx.setTextAlign("center");
+
+      if (x - xBoxWidth / 2 <= grid[0].left) {
+        ctx.fillText(timeText, grid[0].left + xBoxWidth / 2, height - grid[0].bottom + 12);
+      } else if (x + xBoxWidth / 2 < width - grid[0].right) {
+        ctx.fillText(timeText, x, height - grid[0].bottom + 12);
+      } else {
+        ctx.fillText(timeText, width - grid[0].right - xBoxWidth / 2, height - grid[0].bottom + 12);
+      }
+    }
+
+    // Y轴价格标签
+    if (crosshair.currentData) {
+      const priceText = utils.formatPrice(crosshair.currentData.price);
+      const yBoxWidth = 50;
+      const yBoxHeight = 14;
+      ctx.setFillStyle("#629AF5");
+      if (x < grid[0].left + yBoxWidth + 5) {
+        ctx.fillRect(width - grid[0].right - yBoxWidth, y - yBoxHeight / 2, yBoxWidth, yBoxHeight);
+      } else {
+        ctx.fillRect(grid[0].left, y - yBoxHeight / 2, yBoxWidth, yBoxHeight);
+      }
+
+      ctx.setFillStyle("#fff");
+      ctx.setFontSize(11);
+      ctx.setTextAlign("center");
+      if (x < grid[0].left + yBoxWidth + 5) {
+        ctx.fillText(priceText, width - grid[0].right - yBoxWidth / 2, y + 3);
+      } else {
+        ctx.fillText(priceText, grid[0].left + yBoxWidth / 2, y + 3);
+      }
+    }
+  },
+  // 绘制十字准线
+  drawCrosshair(ctx, width, height, grid, crosshair, text) {
+    if (!ctx) return;
+    const { x, y } = crosshair;
+    if (crosshair.show) {
+      // 每次绘制前先清除整个画布
+      ctx.clearRect(0, 0, width, height);
+
+      // 绘制垂直准线1
+      ctx.setStrokeStyle("#000");
+      ctx.setLineWidth(1);
+      // ctx.setLineDash([5, 5]);
+
+      for (let i = 0; i < grid.length; i++) {
+        ctx.beginPath();
+        ctx.moveTo(x, grid[i].top);
+        ctx.lineTo(x, height - grid[i].bottom);
+        ctx.stroke();
+      }
+      //   ctx.beginPath();
+      //   ctx.moveTo(x, grid[0].top);
+      //   ctx.lineTo(x, height - grid[0].bottom);
+      //   ctx.stroke();
+
+      //   // 绘制垂直准线2
+      //   ctx.beginPath();
+      //   ctx.moveTo(x, grid[1].top);
+      //   ctx.lineTo(x, height - grid[1].bottom);
+      //   ctx.stroke();
+
+      // 绘制水平准线
+      ctx.beginPath();
+      ctx.moveTo(grid[0].left, y);
+      ctx.lineTo(width - grid[0].right, y);
+      ctx.stroke();
+
+      ctx.setLineDash([]);
+
+      // 绘制焦点圆点 - 黑边白心（更小）
+      // 先绘制白色填充
+      ctx.setFillStyle("#ffffff");
+      ctx.beginPath();
+      ctx.arc(x, y, 2, 0, Math.PI * 2);
+      ctx.fill();
+
+      // 再绘制黑色边框
+      ctx.setStrokeStyle("#000000");
+      ctx.setLineWidth(1);
+      ctx.setLineDash([]);
+      ctx.beginPath();
+      ctx.arc(x, y, 2, 0, Math.PI * 2);
+      ctx.stroke();
+
+      // 绘制坐标轴标签
+      HCharts.drawCrosshairAxisLabels(ctx, width, height, grid, crosshair);
+    }
+    // 绘制顶部价格显示
+    HCharts.drawTopPriceDisplay(ctx, grid, text);
+    ctx.draw(false);
+  },
+};
diff --git a/common/stockTimeInformation.js b/common/stockTimeInformation.js
new file mode 100644
index 0000000..9302d27
--- /dev/null
+++ b/common/stockTimeInformation.js
@@ -0,0 +1,354 @@
+/** @format */
+
+export const prevClosePrice = 14.95; // 前一日收盘价（元）
+export const timeData = [
+  // 上午时段：9:30-11:30（共120个数据点）
+  { time: "09:30", price: 15.0, volume: 28500 }, // 开盘价15.00元，开盘放量
+  { time: "09:31", price: 15.08, volume: 25300 },
+  { time: "09:32", price: 15.12, volume: 22800 },
+  { time: "09:33", price: 15.09, volume: 19600 },
+  { time: "09:34", price: 15.15, volume: 17200 },
+  { time: "09:35", price: 15.18, volume: 15800 },
+  { time: "09:36", price: 15.16, volume: 14300 },
+  { time: "09:37", price: 15.2, volume: 13500 },
+  { time: "09:38", price: 15.17, volume: 12800 },
+  { time: "09:39", price: 15.22, volume: 12100 },
+  { time: "09:40", price: 15.25, volume: 11500 },
+  { time: "09:41", price: 15.23, volume: 10800 },
+  { time: "09:42", price: 15.26, volume: 10200 },
+  { time: "09:43", price: 15.24, volume: 9800 },
+  { time: "09:44", price: 15.28, volume: 9500 },
+  { time: "09:45", price: 15.3, volume: 9200 },
+  { time: "09:46", price: 15.27, volume: 8800 },
+  { time: "09:47", price: 15.29, volume: 8500 },
+  { time: "09:48", price: 15.32, volume: 8200 },
+  { time: "09:49", price: 15.3, volume: 7900 },
+  { time: "09:50", price: 15.33, volume: 7600 },
+  { time: "09:51", price: 15.31, volume: 7400 },
+  { time: "09:52", price: 15.34, volume: 7200 },
+  { time: "09:53", price: 15.32, volume: 7000 },
+  { time: "09:54", price: 15.35, volume: 6800 },
+  { time: "09:55", price: 15.33, volume: 6600 },
+  { time: "09:56", price: 15.36, volume: 6500 },
+  { time: "09:57", price: 15.34, volume: 6300 },
+  { time: "09:58", price: 15.37, volume: 6200 },
+  { time: "09:59", price: 15.35, volume: 6100 },
+  { time: "10:00", price: 15.38, volume: 6000 },
+  { time: "10:01", price: 15.36, volume: 5900 },
+  { time: "10:02", price: 15.39, volume: 5800 },
+  { time: "10:03", price: 15.37, volume: 5700 },
+  { time: "10:04", price: 15.4, volume: 5600 },
+  { time: "10:05", price: 15.38, volume: 5500 },
+  { time: "10:06", price: 15.41, volume: 15400 },
+  { time: "10:07", price: 15.39, volume: 5300 },
+  { time: "10:08", price: 15.42, volume: 5200 },
+  { time: "10:09", price: 15.4, volume: 5100 },
+  { time: "10:10", price: 15.43, volume: 5000 },
+  { time: "10:11", price: 15.41, volume: 5100 },
+  { time: "10:12", price: 15.44, volume: 5200 },
+  { time: "10:13", price: 15.42, volume: 5300 },
+  { time: "10:14", price: 15.45, volume: 5400 },
+  { time: "10:15", price: 15.43, volume: 5500 },
+  { time: "10:16", price: 15.46, volume: 5600 },
+  { time: "10:17", price: 15.44, volume: 5700 },
+  { time: "10:18", price: 15.47, volume: 5800 },
+  { time: "10:19", price: 15.45, volume: 5900 },
+  { time: "10:20", price: 15.48, volume: 6000 },
+  { time: "10:21", price: 15.46, volume: 6100 },
+  { time: "10:22", price: 15.49, volume: 6200 },
+  { time: "10:23", price: 15.47, volume: 6300 },
+  { time: "10:24", price: 15.5, volume: 6400 },
+  { time: "10:25", price: 15.48, volume: 6500 },
+  { time: "10:26", price: 15.51, volume: 6600 },
+  { time: "10:27", price: 15.49, volume: 6700 },
+  { time: "10:28", price: 15.52, volume: 6800 },
+  { time: "10:29", price: 15.5, volume: 6900 },
+  { time: "10:30", price: 15.53, volume: 7000 },
+  { time: "10:31", price: 15.51, volume: 7100 },
+  { time: "10:32", price: 15.54, volume: 7200 },
+  { time: "10:33", price: 15.52, volume: 7300 },
+  { time: "10:34", price: 15.55, volume: 7400 },
+  { time: "10:35", price: 15.53, volume: 7500 },
+  { time: "10:36", price: 15.56, volume: 7600 },
+  { time: "10:37", price: 15.54, volume: 7700 },
+  { time: "10:38", price: 15.57, volume: 7800 },
+  { time: "10:39", price: 15.55, volume: 7900 },
+  { time: "10:40", price: 15.58, volume: 8000 },
+  { time: "10:41", price: 15.56, volume: 8100 },
+  { time: "10:42", price: 15.59, volume: 8200 },
+  { time: "10:43", price: 15.57, volume: 8300 },
+  { time: "10:44", price: 15.6, volume: 8400 }, // 全天最高价15.60元
+  { time: "10:45", price: 15.58, volume: 8300 },
+  { time: "10:46", price: 15.56, volume: 8200 },
+  { time: "10:47", price: 15.54, volume: 8100 },
+  { time: "10:48", price: 15.52, volume: 8000 },
+  { time: "10:49", price: 15.5, volume: 7900 },
+  { time: "10:50", price: 15.48, volume: 7800 },
+  { time: "10:51", price: 15.46, volume: 7700 },
+  { time: "10:52", price: 15.44, volume: 7600 },
+  { time: "10:53", price: 15.42, volume: 7500 },
+  { time: "10:54", price: 15.4, volume: 7400 },
+  { time: "10:55", price: 15.38, volume: 7300 },
+  { time: "10:56", price: 15.36, volume: 7200 },
+  { time: "10:57", price: 15.34, volume: 7100 },
+  { time: "10:58", price: 15.32, volume: 7000 },
+  { time: "10:59", price: 15.3, volume: 6900 },
+  { time: "11:00", price: 15.28, volume: 6800 },
+  { time: "11:01", price: 15.26, volume: 6700 },
+  { time: "11:02", price: 15.24, volume: 6600 },
+  { time: "11:03", price: 15.22, volume: 6500 },
+  { time: "11:04", price: 15.2, volume: 6400 }, // 全天最低价15.20元
+  { time: "11:05", price: 15.22, volume: 6500 },
+  { time: "11:06", price: 15.24, volume: 6600 },
+  { time: "11:07", price: 15.26, volume: 6700 },
+  { time: "11:08", price: 15.28, volume: 6800 },
+  { time: "11:09", price: 15.3, volume: 6900 },
+  { time: "11:10", price: 15.32, volume: 7000 },
+  { time: "11:11", price: 15.34, volume: 7100 },
+  { time: "11:12", price: 15.36, volume: 7200 },
+  { time: "11:13", price: 15.38, volume: 7300 },
+  { time: "11:14", price: 15.4, volume: 7400 },
+  { time: "11:15", price: 15.42, volume: 7500 },
+  { time: "11:16", price: 15.44, volume: 7600 },
+  { time: "11:17", price: 15.46, volume: 7700 },
+  { time: "11:18", price: 15.48, volume: 7800 },
+  { time: "11:19", price: 15.5, volume: 7900 },
+  { time: "11:20", price: 15.45, volume: 8300 },
+  { time: "11:21", price: 15.47, volume: 8600 },
+  { time: "11:22", price: 15.43, volume: 9100 },
+  { time: "11:23", price: 15.46, volume: 9500 },
+  { time: "11:24", price: 15.49, volume: 10200 },
+  { time: "11:25", price: 15.5, volume: 11500 },
+  { time: "11:26", price: 15.48, volume: 12800 },
+  { time: "11:27", price: 15.52, volume: 14300 },
+  { time: "11:28", price: 15.5, volume: 16500 },
+  { time: "11:29", price: 15.53, volume: 19800 }, // 午盘收盘价15.53元
+
+  // 下午时段：13:00-15:00（共120个数据点）
+  { time: "13:00", price: 15.55, volume: 24600 }, // 午后开盘冲高
+  { time: "13:01", price: 15.58, volume: 21300 },
+  { time: "13:02", price: 15.6, volume: 18700 }, // 再次触及全天最高价
+  { time: "13:03", price: 15.57, volume: 16200 },
+  { time: "13:04", price: 15.55, volume: 14500 },
+  { time: "13:05", price: 15.52, volume: 12800 },
+  { time: "13:06", price: 15.5, volume: 11300 },
+  { time: "13:07", price: 15.48, volume: 10100 },
+  { time: "13:08", price: 15.5, volume: 9500 },
+  { time: "13:09", price: 15.47, volume: 8900 },
+  { time: "13:10", price: 15.45, volume: 8300 },
+  { time: "13:11", price: 15.43, volume: 7800 },
+  { time: "13:12", price: 15.46, volume: 7500 },
+  { time: "13:13", price: 15.44, volume: 7200 },
+  { time: "13:14", price: 15.42, volume: 6900 },
+  { time: "13:15", price: 15.45, volume: 6700 },
+  { time: "13:16", price: 15.43, volume: 6500 },
+  { time: "13:17", price: 15.4, volume: 6300 },
+  { time: "13:18", price: 15.42, volume: 6100 },
+  { time: "13:19", price: 15.39, volume: 5900 },
+  { time: "13:20", price: 15.41, volume: 5800 },
+  { time: "13:21", price: 15.39, volume: 5700 },
+  { time: "13:22", price: 15.42, volume: 5600 },
+  { time: "13:23", price: 15.4, volume: 5500 },
+  { time: "13:24", price: 15.43, volume: 5400 },
+  { time: "13:25", price: 15.41, volume: 5300 },
+  { time: "13:26", price: 15.44, volume: 5200 },
+  { time: "13:27", price: 15.42, volume: 5100 },
+  { time: "13:28", price: 15.45, volume: 5000 },
+  { time: "13:29", price: 15.43, volume: 5100 },
+  { time: "13:30", price: 15.46, volume: 5200 },
+  { time: "13:31", price: 15.44, volume: 5300 },
+  { time: "13:32", price: 15.47, volume: 5400 },
+  { time: "13:33", price: 15.45, volume: 5500 },
+  { time: "13:34", price: 15.48, volume: 5600 },
+  { time: "13:35", price: 15.46, volume: 5700 },
+  { time: "13:36", price: 15.49, volume: 5800 },
+  { time: "13:37", price: 15.47, volume: 5900 },
+  { time: "13:38", price: 15.5, volume: 6000 },
+  { time: "13:39", price: 15.48, volume: 6100 },
+  { time: "13:40", price: 15.51, volume: 6200 },
+  { time: "13:41", price: 15.49, volume: 6300 },
+  { time: "13:42", price: 15.52, volume: 6400 },
+  { time: "13:43", price: 15.5, volume: 6500 },
+  { time: "13:44", price: 15.53, volume: 6600 },
+  { time: "13:45", price: 15.51, volume: 6700 },
+  { time: "13:46", price: 15.54, volume: 6800 },
+  { time: "13:47", price: 15.52, volume: 6900 },
+  { time: "13:48", price: 15.55, volume: 7000 },
+  { time: "13:49", price: 15.53, volume: 7100 },
+  { time: "13:50", price: 15.56, volume: 7200 },
+  { time: "13:51", price: 15.54, volume: 7300 },
+  { time: "13:52", price: 15.57, volume: 7400 },
+  { time: "13:53", price: 15.55, volume: 7500 },
+  { time: "13:54", price: 15.58, volume: 7600 },
+  { time: "13:55", price: 15.56, volume: 7700 },
+  { time: "13:56", price: 15.59, volume: 7800 },
+  { time: "13:57", price: 15.57, volume: 7900 },
+  { time: "13:58", price: 15.6, volume: 8000 }, // 第三次触及全天最高价
+  { time: "13:59", price: 15.58, volume: 8100 },
+  { time: "14:00", price: 15.56, volume: 8200 },
+  { time: "14:01", price: 15.54, volume: 8300 },
+  { time: "14:02", price: 15.52, volume: 8400 },
+  { time: "14:03", price: 15.5, volume: 8300 },
+  { time: "14:04", price: 15.48, volume: 8200 },
+  { time: "14:05", price: 15.46, volume: 8100 },
+  { time: "14:06", price: 15.44, volume: 8000 },
+  { time: "14:07", price: 15.42, volume: 7900 },
+  { time: "14:08", price: 15.4, volume: 7800 },
+  { time: "14:09", price: 15.38, volume: 7700 },
+  { time: "14:10", price: 15.36, volume: 7600 },
+  { time: "14:11", price: 15.34, volume: 7500 },
+  { time: "14:12", price: 15.32, volume: 7400 },
+  { time: "14:13", price: 15.3, volume: 7300 },
+  { time: "14:14", price: 15.28, volume: 7200 },
+  { time: "14:15", price: 15.26, volume: 7100 },
+  { time: "14:16", price: 15.24, volume: 7000 },
+  { time: "14:17", price: 15.22, volume: 6900 },
+  { time: "14:18", price: 15.2, volume: 6800 }, // 再次触及全天最低价
+  { time: "14:19", price: 15.22, volume: 6700 },
+  { time: "14:20", price: 15.24, volume: 6600 },
+  { time: "14:21", price: 15.26, volume: 6500 },
+  { time: "14:22", price: 15.28, volume: 6400 },
+  { time: "14:23", price: 15.3, volume: 6300 },
+  { time: "14:24", price: 15.32, volume: 6200 },
+  { time: "14:25", price: 15.34, volume: 6100 },
+  { time: "14:26", price: 15.36, volume: 6000 },
+  { time: "14:27", price: 15.38, volume: 5900 },
+  { time: "14:28", price: 15.4, volume: 5800 },
+  { time: "14:29", price: 15.42, volume: 5700 },
+  { time: "14:30", price: 15.44, volume: 5600 },
+  { time: "14:31", price: 15.46, volume: 5500 },
+  { time: "14:32", price: 15.48, volume: 5400 },
+  { time: "14:33", price: 15.5, volume: 5300 },
+  { time: "14:34", price: 15.52, volume: 5200 },
+  { time: "14:35", price: 15.54, volume: 5100 },
+  { time: "14:36", price: 15.56, volume: 5000 },
+  { time: "14:37", price: 15.54, volume: 5100 },
+  { time: "14:38", price: 15.52, volume: 5200 },
+  { time: "14:39", price: 15.5, volume: 5300 },
+  { time: "14:40", price: 15.48, volume: 5400 },
+  { time: "14:41", price: 15.46, volume: 5500 },
+  { time: "14:42", price: 15.44, volume: 5600 },
+  { time: "14:43", price: 15.42, volume: 5700 },
+  { time: "14:44", price: 15.4, volume: 5800 },
+  { time: "14:45", price: 15.38, volume: 5900 },
+  { time: "14:46", price: 15.36, volume: 6000 },
+  { time: "14:47", price: 15.34, volume: 6100 },
+  { time: "14:48", price: 15.32, volume: 6200 },
+  { time: "14:49", price: 15.3, volume: 6300 },
+  { time: "14:50", price: 15.42, volume: 9800 }, // 尾盘开始放量
+  { time: "14:51", price: 15.45, volume: 11500 },
+  { time: "14:52", price: 15.43, volume: 13200 },
+  { time: "14:53", price: 15.46, volume: 15800 },
+  { time: "14:54", price: 15.44, volume: 18500 },
+  { time: "14:55", price: 15.47, volume: 21300 },
+  { time: "14:56", price: 15.45, volume: 24600 },
+  { time: "14:57", price: 15.48, volume: 27800 },
+  { time: "14:58", price: 15.46, volume: 31200 }, // 尾盘成交量峰值
+  { time: "14:59", price: 15.45, volume: 28500 }, // 当日收盘价15.45元
+];
+export const klineData = [
+  // 第1天（起始点，位于区间中部）
+  { date: "2015-10-11", open: 16.5, high: 16.8, low: 16.2, close: 16.6, volume: 185000 },
+  // 第2-90天（区间震荡：15.5-17.5元）
+  { date: "2015-10-12", open: 16.6, high: 16.9, low: 16.4, close: 16.7, volume: 192000 },
+  { date: "2015-10-13", open: 16.7, high: 17.0, low: 16.5, close: 16.6, volume: 188000 },
+  { date: "2015-10-14", open: 16.6, high: 16.8, low: 16.3, close: 16.4, volume: 175000 },
+  { date: "2015-10-15", open: 16.4, high: 16.7, low: 16.2, close: 16.5, volume: 181000 },
+  { date: "2015-10-16", open: 16.5, high: 16.9, low: 16.3, close: 16.8, volume: 195000 },
+  { date: "2015-10-17", open: 16.8, high: 17.1, low: 16.6, close: 16.7, volume: 202000 },
+  { date: "2015-10-18", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 183000 },
+  { date: "2015-10-19", open: 16.5, high: 16.7, low: 16.1, close: 16.3, volume: 172000 },
+  { date: "2015-10-20", open: 16.3, high: 16.6, low: 16.0, close: 16.4, volume: 178000 },
+  { date: "2015-10-21", open: 16.4, high: 16.8, low: 16.2, close: 16.6, volume: 189000 },
+  { date: "2015-10-22", open: 16.6, high: 17.0, low: 16.5, close: 16.9, volume: 205000 },
+  { date: "2015-10-23", open: 16.9, high: 17.2, low: 16.7, close: 16.8, volume: 212000 },
+  { date: "2015-10-24", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 193000 },
+  { date: "2015-10-25", open: 16.6, high: 16.8, low: 16.2, close: 16.3, volume: 176000 },
+  { date: "2015-10-26", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 184000 },
+  { date: "2015-10-27", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 196000 },
+  { date: "2015-10-28", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 208000 },
+  { date: "2015-10-29", open: 16.9, high: 17.3, low: 16.8, close: 17.0, volume: 215000 },
+  { date: "2015-10-30", open: 17.0, high: 17.2, low: 16.7, close: 16.8, volume: 201000 },
+  { date: "2015-10-31", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 189000 },
+  { date: "2015-11-01", open: 16.6, high: 16.8, low: 16.2, close: 16.4, volume: 175000 },
+  { date: "2015-11-02", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 171000 },
+  { date: "2015-11-03", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 182000 },
+  { date: "2015-11-04", open: 16.5, high: 16.9, low: 16.3, close: 16.7, volume: 194000 },
+  { date: "2015-11-05", open: 16.7, high: 17.1, low: 16.6, close: 16.8, volume: 203000 },
+  { date: "2015-11-06", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 190000 },
+  { date: "2015-11-07", open: 16.6, high: 16.8, low: 16.3, close: 16.4, volume: 178000 },
+  { date: "2015-11-08", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 173000 },
+  { date: "2015-11-09", open: 16.3, high: 16.6, low: 15.9, close: 16.2, volume: 168000 }, // 触及区间下沿
+  { date: "2015-11-10", open: 16.2, high: 16.5, low: 16.0, close: 16.4, volume: 176000 },
+  { date: "2015-11-11", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 187000 },
+  { date: "2015-11-12", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 198000 },
+  { date: "2015-11-13", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 206000 },
+  { date: "2015-11-14", open: 16.9, high: 17.3, low: 16.8, close: 17.1, volume: 218000 },
+  { date: "2015-11-15", open: 17.1, high: 17.4, low: 16.9, close: 17.0, volume: 212000 },
+  { date: "2015-11-16", open: 17.0, high: 17.2, low: 16.7, close: 16.8, volume: 197000 },
+  { date: "2015-11-17", open: 16.8, high: 17.0, low: 16.5, close: 16.6, volume: 185000 },
+  { date: "2015-11-18", open: 16.6, high: 16.8, low: 16.3, close: 16.4, volume: 177000 },
+  { date: "2015-11-19", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 172000 },
+  { date: "2015-11-20", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 183000 },
+  { date: "2015-11-21", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 195000 },
+  { date: "2015-11-22", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 204000 },
+  { date: "2015-11-23", open: 16.9, high: 17.2, low: 16.8, close: 17.0, volume: 213000 },
+  { date: "2015-11-24", open: 17.0, high: 17.3, low: 16.9, close: 17.1, volume: 221000 },
+  { date: "2015-11-25", open: 17.1, high: 17.4, low: 17.0, close: 17.2, volume: 228000 }, // 触及区间上沿
+  { date: "2015-11-26", open: 17.2, high: 17.3, low: 16.8, close: 16.9, volume: 215000 },
+  { date: "2015-11-27", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 199000 },
+  { date: "2015-11-28", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 186000 },
+  { date: "2015-11-29", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 175000 },
+  { date: "2015-11-30", open: 16.3, high: 16.6, low: 16.0, close: 16.4, volume: 179000 },
+  { date: "2015-12-01", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 188000 },
+  { date: "2015-12-02", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 199000 },
+  { date: "2015-12-03", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 207000 },
+  { date: "2015-12-04", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 193000 },
+  { date: "2015-12-05", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 182000 },
+  { date: "2015-12-06", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 173000 },
+  { date: "2015-12-07", open: 16.3, high: 16.6, low: 15.9, close: 16.1, volume: 167000 }, // 触及区间下沿
+  { date: "2015-12-08", open: 16.1, high: 16.4, low: 16.0, close: 16.3, volume: 174000 },
+  { date: "2015-12-09", open: 16.3, high: 16.7, low: 16.2, close: 16.5, volume: 185000 },
+  { date: "2015-12-10", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 196000 },
+  { date: "2015-12-11", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 205000 },
+  { date: "2015-12-12", open: 16.9, high: 17.3, low: 16.8, close: 17.0, volume: 214000 },
+  { date: "2015-12-13", open: 17.0, high: 17.2, low: 16.8, close: 16.9, volume: 203000 },
+  { date: "2015-12-14", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 191000 },
+  { date: "2015-12-15", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 180000 },
+  { date: "2015-12-16", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 172000 },
+  { date: "2015-12-17", open: 16.3, high: 16.6, low: 16.0, close: 16.4, volume: 178000 },
+  { date: "2015-12-18", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 189000 },
+  { date: "2015-12-19", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 200000 },
+  { date: "2015-12-20", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 208000 },
+  { date: "2015-12-21", open: 16.9, high: 17.3, low: 16.8, close: 17.1, volume: 219000 },
+  { date: "2015-12-22", open: 17.1, high: 17.4, low: 17.0, close: 17.2, volume: 226000 }, // 触及区间上沿
+  { date: "2015-12-23", open: 17.2, high: 17.3, low: 16.8, close: 16.9, volume: 213000 },
+  { date: "2015-12-24", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 198000 },
+  { date: "2015-12-25", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 185000 },
+  { date: "2015-12-26", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 174000 },
+  { date: "2015-12-27", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 183000 },
+  { date: "2015-12-28", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 195000 },
+  { date: "2015-12-29", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 204000 },
+  { date: "2015-12-30", open: 16.9, high: 17.2, low: 16.8, close: 17.0, volume: 212000 },
+  { date: "2015-12-31", open: 17.0, high: 17.3, low: 16.9, close: 17.1, volume: 220000 },
+  { date: "2016-01-01", open: 17.1, high: 17.2, low: 16.8, close: 16.9, volume: 207000 },
+  { date: "2016-01-02", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 193000 },
+  { date: "2016-01-03", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 181000 },
+  { date: "2016-01-04", open: 16.5, high: 16.7, low: 16.2, close: 16.3, volume: 172000 },
+  { date: "2016-01-05", open: 16.3, high: 16.6, low: 15.9, close: 16.2, volume: 168000 }, // 触及区间下沿
+  { date: "2016-01-06", open: 16.2, high: 16.5, low: 16.0, close: 16.4, volume: 175000 },
+  { date: "2016-01-07", open: 16.4, high: 16.8, low: 16.3, close: 16.6, volume: 186000 },
+  { date: "2016-01-08", open: 16.6, high: 17.0, low: 16.5, close: 16.8, volume: 197000 },
+  { date: "2016-01-09", open: 16.8, high: 17.2, low: 16.7, close: 16.9, volume: 206000 },
+  { date: "2016-01-10", open: 16.9, high: 17.3, low: 16.8, close: 17.1, volume: 217000 },
+  { date: "2016-01-11", open: 17.1, high: 17.4, low: 17.0, close: 17.2, volume: 225000 }, // 触及区间上沿
+  { date: "2016-01-12", open: 17.2, high: 17.3, low: 16.8, close: 16.9, volume: 212000 },
+  { date: "2016-01-13", open: 16.9, high: 17.1, low: 16.6, close: 16.7, volume: 197000 },
+  { date: "2016-01-14", open: 16.7, high: 16.9, low: 16.4, close: 16.5, volume: 184000 },
+  { date: "2016-01-15", open: 16.5, high: 16.7, low: 16.2, close: 16.4, volume: 175000 },
+  { date: "2016-01-16", open: 16.4, high: 16.7, low: 16.1, close: 16.3, volume: 171000 },
+  { date: "2016-01-17", open: 16.3, high: 16.6, low: 16.0, close: 16.5, volume: 182000 },
+  { date: "2016-01-18", open: 16.5, high: 16.9, low: 16.4, close: 16.7, volume: 194000 },
+  { date: "2016-01-19", open: 16.7, high: 17.1, low: 16.6, close: 16.9, volume: 203000 },
+  { date: "2016-01-20", open: 16.9, high: 17.2, low: 16.8, close: 17.0, volume: 212000 },
+];
diff --git a/common/util.js b/common/util.js
index 04d9853..0058c56 100644
--- a/common/util.js
+++ b/common/util.js
@@ -6,7 +6,7 @@ util.data.base_url = 'https://dbqb.nfdxy.net/devApi'
 // AJAX 请求方法
 util.request = (url, callback, data = {}, failCallback) => {
 	url = util.data.base_url + url
-	console.log('请求该接口->', url,'请求参数为->',data);
+	console.log('请求该接口->', url, '请求参数为->', data);
 	uni.request({
 		url: url, //仅为示例，并非真实接口地址。
 		data,
@@ -23,4 +23,120 @@ util.request = (url, callback, data = {}, failCallback) => {
 	});
 }
 
-export default util
\ No newline at end of file
+export default util
+
+// 画图需要用到的方法
+export const utils = {
+	// 格式化价格
+	formatPrice(price) {
+		return price.toFixed(2);
+	},
+	// 计算数据范围
+	calculateDataRange(data, key) {
+		if (!data || data.length === 0) {
+			return {
+				min: 0,
+				max: 0,
+			};
+		}
+		const values = data.map((item) => item[key]);
+		return {
+			min: Math.min(...values),
+			max: Math.max(...values),
+		};
+	},
+	// 计算标签
+	calculateLabel(data, type = 2, preClosePrice = 0, key, num) {
+		let label = [];
+		if (key === "price") {
+			// 分时价格区间
+			if (type == 1) {
+				const priceRange = utils.calculateDataRange(data, "price");
+				const theMost = Math.max(priceRange.max - preClosePrice, preClosePrice - priceRange.min);
+				const mid = (num - 1) / 2;
+				// 计算分时价格标签
+				label[mid] = {
+					value: utils.formatPrice(preClosePrice),
+					ratio: utils.formatPrice(0) + "%",
+				};
+				for (let i = 0; i < mid; i++) {
+					label[i] = {
+						value: utils.formatPrice(preClosePrice + (theMost * (mid - i)) / mid),
+						ratio: utils.formatPrice((100 * (theMost * (mid - i))) / mid / preClosePrice) + "%",
+					};
+
+					label[num - 1 - i] = {
+						value: utils.formatPrice(preClosePrice - (theMost * (mid - i)) / mid),
+						ratio: utils.formatPrice((-1 * 100 * (theMost * (mid - i))) / mid / preClosePrice) +
+							"%",
+					};
+				}
+				timeChartObject.value.max = preClosePrice + theMost;
+				timeChartObject.value.min = preClosePrice - theMost;
+				return label;
+			} else {
+				const highPriceRange = utils.calculateDataRange(data, "high");
+				const lowPriceRange = utils.calculateDataRange(data, "low");
+				const priceDiff = highPriceRange.max * 1.01 - lowPriceRange.min * 0.99;
+				for (let i = 0; i < num; ++i) {
+					label[i] = {
+						value: utils.formatPrice(highPriceRange.max - (i * priceDiff) / num),
+					};
+				}
+				return label;
+			}
+		} else if (key === "volume") {
+			const volumeRange = utils.calculateDataRange(data, "volume");
+			label[0] = {
+				value: utils.formatPrice(volumeRange.max),
+			};
+			label[1] = {
+				value: utils.formatPrice(0),
+			};
+			return label;
+		}
+		return null;
+	},
+	// 线性插值
+	lerp(start, end, factor) {
+		return start + (end - start) * factor;
+	},
+	// 股市数值格式化方法
+	formatStockNumber(value, decimalPlaces = 2) {
+		const num = Number(value);
+		if (isNaN(num)) return "0";
+
+		const absNum = Math.abs(num);
+		const sign = num < 0 ? "-" : "";
+
+		if (absNum >= 1000000000000) {
+			// 万亿级别
+			return sign + (absNum / 1000000000000).toFixed(decimalPlaces) + "万亿";
+		} else if (absNum >= 100000000) {
+			// 亿级别
+			return sign + (absNum / 100000000).toFixed(decimalPlaces) + "亿";
+		} else if (absNum >= 10000) {
+			// 万级别
+			return sign + (absNum / 10000).toFixed(decimalPlaces) + "万";
+		} else {
+			// 小于万的直接显示
+			return sign + absNum.toFixed(decimalPlaces);
+		}
+	},
+};
+
+// 防抖函数
+export const throttle = (fn, delay = 1000) => {
+	//距离上一次的执行时间
+	let lastTime = 0;
+	return function() {
+		let _this = this;
+		let _arguments = arguments;
+		let now = new Date().getTime();
+		//如果距离上一次执行超过了delay才能再次执行
+		if (now - lastTime > delay) {
+			fn.apply(_this, _arguments);
+			lastTime = now;
+		}
+	};
+};
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4558c9f..0988523 100644
--- a/pages.json
+++ b/pages.json
@@ -69,6 +69,14 @@
 				"titleNView": false,
 				"bounce": false
 			}
+		},
+		{
+			"path" : "pages/home/marketCondition",
+			"style" : 
+			{
+				"navigationBarTitleText" : "行情",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/home/globalIndex.vue b/pages/home/globalIndex.vue
index 065fc1d..287e36e 100644
--- a/pages/home/globalIndex.vue
+++ b/pages/home/globalIndex.vue
@@ -282,15 +282,15 @@ const viewMore = (market) => {
 // 方法：查看指数详情
 const viewIndexDetail = (item) => {
     console.log('查看指数详情:', item.indexName)
-    uni.showToast({
-        title: `查看 ${item.indexName} 详情`,
-        icon: 'none',
-        duration: 2000
-    })
-    // 这里可以跳转到具体的指数详情页面
-    // uni.navigateTo({
-    //     url: `/pages/detail/indexDetail?id=${item.id}`
+    // uni.showToast({
+    //     title: `查看 ${item.indexName} 详情`,
+    //     icon: 'none',
+    //     duration: 2000
     // })
+    // 这里可以跳转到具体的指数详情页面
+    uni.navigateTo({
+        url: `/pages/home/marketCondition`
+    })
 }
 
 // 生命周期：页面挂载
diff --git a/pages/home/marketCondition.vue b/pages/home/marketCondition.vue
new file mode 100644
index 0000000..70501ae
--- /dev/null
+++ b/pages/home/marketCondition.vue
@@ -0,0 +1,1980 @@
+<!-- @format -->
+
+<template>
+  <!-- 容器 -->
+  <view class="container">
+    <!-- 标题 -->
+    <view class="title-container">
+      <view class="title">
+        <image class="back-homepage-btn" src="/static/marketSituation-image/back.png" mode="返回按钮" @click="backToHomepage()"> </image>
+        <view class="mid-title">
+          <image class="left-page" src="/static/img/left-page.png" mode="向左翻页"></image>
+          <view class="stock-id">
+            <view class="stock-name"> {{ stockInformation.stockName }} </view>
+            <view class="stock-code"> {{ stockInformation.stockCode }} </view>
+          </view>
+          <image class="right-page" src="/static/img/right-page.png" mode="向右翻页"></image>
+        </view>
+        <image class="search" src="/static/marketSituation-image/search.png" mode="搜索" @click="startTcp()"> </image>
+        <view class="more" @click="disconnect()">···</view>
+      </view>
+    </view>
+
+    <view class="body">
+      <!-- 股票信息栏 -->
+      <view class="stock-information" @click="openStockDetail()">
+        <view v-if="isStockDetail" class="stock-detail-container" @click.stop @click="closeStockDetail()">
+          <view class="stock-detail" @click.stop>
+            <view class="first-column">
+              <view class="first-column-data" v-for="item in firstColumData" :key="item">
+                <view class="stock-detail-title">
+                  {{ item.title }}
+                </view>
+                <view class="stock-detail-value">
+                  {{ item.value }}
+                </view>
+              </view>
+            </view>
+            <view class="second-column">
+              <view class="second-column-data" v-for="item in secondColumnData" :key="item">
+                <view class="stock-detail-title">
+                  {{ item.title }}
+                </view>
+                <view class="stock-detail-value">
+                  {{ item.value }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="stock-current-data">
+          <view class="stock-current-price" :class="confirmStockColor(stockInformation.currentPrice, stockInformation.lastDayStockClosePrice)">
+            {{ Number(stockInformation.currentPrice).toFixed(2) }}
+          </view>
+          <view class="stock-current-other">
+            <view class="stock-current-value" :class="confirmStockColor(stockInformation.currentValue)">
+              {{ Number(stockInformation.currentValue).toFixed(2) }}
+            </view>
+            <view class="stock-current-ratio" :class="confirmStockColor(stockInformation.currentRatio)"> {{ Number(stockInformation.currentRatio).toFixed(2) }}% </view>
+          </view>
+        </view>
+        <view class="stock-other-data">
+          <view class="first-line">
+            <view class="high-price">
+              高
+              <view class="value" :class="confirmStockColor(stockInformation.highPrice, stockInformation.lastDayStockClosePrice)">
+                {{ Number(stockInformation.highPrice).toFixed(2) }}
+              </view>
+            </view>
+
+            <view class="volume">
+              量
+              <view class="value">
+                {{ utils.formatStockNumber(stockInformation.volume, 2) }}
+              </view>
+            </view>
+            <view class="volume-ratio">
+              量比
+              <view class="value">
+                {{ Number(stockInformation.volumeRatio).toFixed(2) }}
+              </view>
+            </view>
+          </view>
+          <view class="second-line">
+            <view class="low-price">
+              低
+              <view class="value" :class="confirmStockColor(stockInformation.lowPrice, stockInformation.lastDayStockClosePrice)">
+                {{ Number(stockInformation.lowPrice).toFixed(2) }}
+              </view>
+            </view>
+            <view class="amount">
+              额
+              <view class="value">
+                {{ utils.formatStockNumber(stockInformation.amount, 2) }}
+              </view>
+            </view>
+            <view class="market-earn">
+              市盈
+              <view class="value">
+                {{ Number(stockInformation.marketEarn).toFixed(2) }}
+              </view>
+            </view>
+          </view>
+          <view class="third-line">
+            <view class="open-price">
+              开
+              <view class="value" :class="confirmStockColor(stockInformation.openPrice, stockInformation.lastDayStockClosePrice)">
+                {{ Number(stockInformation.openPrice).toFixed(2) }}
+              </view>
+            </view>
+            <view class="turnover-ratio">
+              换
+              <view class="value"> {{ Number(stockInformation.turnoverRatio).toFixed(2) }}% </view>
+            </view>
+            <view class="market-value">
+              市值
+              <view class="value">
+                {{ utils.formatStockNumber(stockInformation.marketValue, 2) }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 股票图表 -->
+      <view class="stock-chart">
+        <view class="stock-kline-tab">
+          <!-- 1:分时 2:日K 3:周K 4:月K -->
+          <view class="tab-time" :class="{ 'tab-selected': klineTab == 1 }" @click="selectKlineTab(1)"> 分时 </view>
+          <view class="tab-day" :class="{ 'tab-selected': klineTab == 2 }" @click="selectKlineTab(2)"> 日K </view>
+          <view class="tab-week" :class="{ 'tab-selected': klineTab == 3 }" @click="selectKlineTab(3)"> 周K </view>
+          <view class="tab-month" :class="{ 'tab-selected': klineTab == 4 }" @click="selectKlineTab(4)"> 月K </view>
+          <view class="tab-more" :class="{ 'tab-selected': klineTab != 1 && klineTab != 2 && klineTab != 3 && klineTab != 4 }" @click="isMoreTabs ? closeMoreTabs() : openMoreTabs()">
+            <view class="more-no-choose" v-if="klineTab == 1 || klineTab == 2 || klineTab == 3 || klineTab == 4"> 更多 </view>
+            <view class="more-choose" v-else>
+              {{ chooseTabName(klineTab) }}
+            </view>
+            <view :class="[isMoreTabs ? 'arrow-down' : 'arrow-up']"> </view>
+          </view>
+          <view class="tab-setting">
+            <image class="tab-setting-img" src="/static/marketSituation-image/marketCondition-image/setting2.png" mode="设置"></image>
+          </view>
+        </view>
+        <view v-if="isMoreTabs" class="moreTabsContainer">
+          <view v-for="item in moreTabsData" :key="item" class="moreTabItem" :class="{ 'tab-selected': klineTab == item.value }" @click="selectMoreTab(item.value)">
+            {{ item.title }}
+          </view>
+        </view>
+        <view class="stock-kline">
+          <view v-if="klineTab === 1 || klineTab === 2" class="time-chart-container" style="position: relative">
+            <!-- 主图Canvas -->
+            <canvas
+              canvas-id="stockChart"
+              class="stock-chart"
+              :width="canvasWidth"
+              :height="canvasHeight"
+              :style="{
+                width: canvasWidth + 'px',
+                height: canvasHeight + 'px',
+                pointerEvents: 'none',
+              }"
+              will-read-frequently="true"
+            ></canvas>
+            <!-- 动态数据Canvas层 -->
+            <canvas
+              canvas-id="dynamicCanvas"
+              id="dynamicCanvas"
+              :width="canvasWidth"
+              :height="canvasHeight"
+              :style="{
+                width: canvasWidth + 'px',
+                height: canvasHeight + 'px',
+                pointerEvents: 'none',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+              }"
+              will-read-frequently="true"
+            ></canvas>
+            <!-- 十字准心Canvas层 -->
+            <canvas
+              canvas-id="crosshairCanvas"
+              id="crosshairCanvas"
+              :width="canvasWidth"
+              :height="canvasHeight"
+              :style="{
+                width: canvasWidth + 'px',
+                height: canvasHeight + 'px',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+              }"
+              will-read-frequently="true"
+              @touchstart="touchStart"
+              @touchmove="touchMove"
+              @touchend="touchEnd"
+            ></canvas>
+          </view>
+          <!-- K线图区域 -->
+          <view class="test" v-else-if="klineTab === 3">
+            <button @click="sendGetTimeData()">接收消息</button>
+            <button @click="sendStopTimeData()">停止消息</button>
+          </view>
+          <view v-else class="kline-chart-container">
+            <text>K线图开发中...</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="bottomTool">
+      <view class="index">
+        <image class="icon" src="/static/marketSituation-image/marketCondition-image/index.png" mode="指标仓库图标"> </image>
+        指标仓库
+      </view>
+      <view class="function">
+        <image class="icon" src="/static/marketSituation-image/marketCondition-image/function.png" mode="功能图标"> </image>
+        功能
+      </view>
+      <view class="favorites">
+        <image class="icon" src="/static/marketSituation-image/marketCondition-image/favorites.png" mode="加自选图标"></image>
+        加自选
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, watch, nextTick, onUnmounted, getCurrentInstance } from "vue";
+const instance = getCurrentInstance();
+import { prevClosePrice, timeData as testTimeData, klineData as testKlineData } from "@/common/stockTimeInformation.js";
+import { throttle } from "@/common/util.js";
+import { HCharts } from "@/common/canvasMethod.js";
+// const TCPSocket = uni.requireNativePlugin("Aimer-TCPPlugin");
+const tcpObject = {
+  ip: "192.168.1.9",
+  port: 8080,
+  reconnectInterval: 3000,
+  isConnected: false,
+};
+const TIME_OUT = 1000 * 5;
+const resultR = ref([]);
+
+// 股票信息栏变量
+const stockInformation = ref({
+  stockName: "----", //股票名称
+  stockCode: "------", //股票代码
+  lastDayStockClosePrice: 0.0, //前一日收盘价
+  currentPrice: 0.0, //当前股价
+  currentValue: 0.0, //涨跌额度
+  currentRatio: 0.0, //涨跌幅度
+  highPrice: 0.0, //最高价
+  lowPrice: 0.0, //最低价
+  openPrice: 0.0, //开盘价
+  closePrice: 0.0, //收盘价
+  volume: 0.0, //成交量
+  volumeRatio: 0.0, //成交量比
+  amount: 0.0, //成交额
+  marketEarn: 0.0, //市盈
+  turnoverRatio: 0.0, //换手率
+  marketValue: 0.0, //市值
+});
+
+// 是否展开股票信息细节栏的判断变量
+const isStockDetail = ref(false);
+
+// 股票信息细节内容变量
+const firstColumData = [
+  {
+    title: "振幅",
+    value: 0,
+  },
+  {
+    title: "现手",
+    value: 0,
+  },
+  {
+    title: "内盘",
+    value: 0,
+  },
+  {
+    title: "外盘",
+    value: 0,
+  },
+  {
+    title: "流通股",
+    value: 0,
+  },
+  {
+    title: "每股净资产",
+    value: 0,
+  },
+  {
+    title: "净资产收益率",
+    value: 0,
+  },
+  {
+    title: "总股本",
+    value: 0,
+  },
+  {
+    title: "总资本",
+    value: 0,
+  },
+  {
+    title: "总市值",
+    value: 0,
+  },
+  {
+    title: "一个月最高",
+    value: 0,
+  },
+  {
+    title: "一个月最低",
+    value: 0,
+  },
+];
+const secondColumnData = [
+  {
+    title: "均价",
+    value: 0,
+  },
+  {
+    title: "昨收",
+    value: 0,
+  },
+  {
+    title: "委比",
+    value: 0,
+  },
+  {
+    title: "委买",
+    value: 0,
+  },
+  {
+    title: "委卖",
+    value: 0,
+  },
+  {
+    title: "市盈利(静)",
+    value: 0,
+  },
+  {
+    title: "市盈利(动)",
+    value: 0,
+  },
+  {
+    title: "市净率",
+    value: 0,
+  },
+  {
+    title: "涨停价",
+    value: 0,
+  },
+  {
+    title: "跌停价",
+    value: 0,
+  },
+  {
+    title: "一年最高",
+    value: 0,
+  },
+  {
+    title: "一年最低",
+    value: 0,
+  },
+];
+
+// 是否展开更多Tab的判断变量
+const isMoreTabs = ref(false);
+
+const moreTabsData = ref([
+  {
+    title: "1分",
+    value: 5,
+  },
+  {
+    title: "5分",
+    value: 6,
+  },
+  {
+    title: "15分",
+    value: 7,
+  },
+  {
+    title: "30分",
+    value: 8,
+  },
+  {
+    title: "60分",
+    value: 9,
+  },
+  {
+    title: "季K",
+    value: 10,
+  },
+  {
+    title: "年K",
+    value: 11,
+  },
+]);
+
+// 股票当前选中的K线类型Tab
+// 1:分时 2:日K 3:周K 4:月K
+const klineTab = ref(2);
+
+const sendGetTimeData = () => {
+  console.log("执行发送消息的方法");
+  try {
+    TCPSocket.send({
+      channel: "1",
+      message: '{"command": "real_time", "stock_code": "SH.000001"}',
+    });
+  } catch (e) {
+    console.log("error", e);
+  }
+};
+
+const sendStopTimeData = () => {
+  try {
+    TCPSocket.send({
+      channel: "1",
+      message: '{"command": "stop_real_time"}',
+    });
+  } catch (e) {
+    console.log("error", e);
+  }
+};
+
+// 确定股票数据的颜色方法
+const confirmStockColor = (price, lastDayStockClosePrice) => {
+  if (typeof lastDayStockClosePrice === "undefined") {
+    if (price == 0) {
+      return "price-none";
+    } else if (price > 0) {
+      return "price-up";
+    } else {
+      return "price-down";
+    }
+  } else {
+    if (price == lastDayStockClosePrice) {
+      return "price-none";
+    } else if (price > lastDayStockClosePrice) {
+      return "price-up";
+    } else {
+      return "price-down";
+    }
+  }
+};
+
+// 股票K线类型方法
+const selectKlineTab = (tabId) => {
+  klineTab.value = tabId;
+  if (tabId === 1) {
+    stockInformation.value.lastDayStockClosePrice = prevClosePrice;
+  }
+  initCanvas();
+  //   startAddDataTimer();
+};
+// 返回按钮
+const backToHomepage = () => {
+  const pages = getCurrentPages();
+  if (pages.length > 1) {
+    uni.navigateBack();
+  } else {
+    // 如果没有上一页，跳转到首页
+    uni.reLaunch({
+      url: "/pages/home/home",
+    });
+  }
+};
+
+const openStockDetail = () => {
+  isStockDetail.value = true;
+};
+
+const closeStockDetail = () => {
+  isStockDetail.value = false;
+};
+
+const openMoreTabs = () => {
+  isMoreTabs.value = true;
+};
+
+const closeMoreTabs = () => {
+  isMoreTabs.value = false;
+};
+
+const selectMoreTab = (value) => {
+  selectKlineTab(value);
+};
+
+const chooseTabName = () => {
+  if (klineTab.value === 5) {
+    return "1分";
+  } else if (klineTab.value === 6) {
+    return "5分";
+  } else if (klineTab.value === 7) {
+    return "15分";
+  } else if (klineTab.value === 8) {
+    return "30分";
+  } else if (klineTab.value === 9) {
+    return "60分";
+  } else if (klineTab.value === 10) {
+    return "季K";
+  } else if (klineTab.value === 11) {
+    return "年K";
+  }
+};
+
+// 画布对象
+const canvasWidth = ref(100);
+const canvasHeight = ref(100);
+const CANVAS_BACKGROUND_COLOR = "#fff";
+const TEXT_COLOR1 = "#000";
+const TEXT_COLOR2 = "red";
+const LINE_COLOR = "#e5e5e5";
+const timeChartObject = ref({
+  min: 0,
+  max: 0,
+});
+const klineChartObject = ref({
+  min: 0,
+  max: 0,
+});
+
+const chartRange = ref();
+
+// 开盘时间
+const openTime = "09:30";
+// 收盘时间
+const closeTime = "15:00";
+
+const ctx = ref(null);
+const dynamicCtx = ref(null); // 动态Canvas上下文
+const crosshairCtx = ref(null); // 十字准心Canvas上下文
+const pixelRatio = ref(1);
+// 触屏对象
+const touchState = reactive({
+  startX: 0,
+  startY: 0,
+  isMoving: false,
+  moveDistance: 0,
+  moveThreshold: 10, //移动阈值(用于判断是否在点击)
+  scale: 1, // 当前缩放比例
+  minScale: 0.3, // 最小缩放比例
+  maxScale: 5, // 最大缩放比例
+  baseVisibleCount: 40, // 基准可见K线数量
+  offset: 0, // 数据偏移量
+  isZooming: false, // 是否正在缩放
+  initialDistance: 0, // 初始两指距离
+  initialScale: 1, // 初始缩放比例
+});
+// 计算当前可见的K线数量
+const visibleCount = computed(() => {
+  return Math.floor(touchState.baseVisibleCount / touchState.scale);
+});
+// 计算当前显示的数据范围
+const visibleDataRange = computed(() => {
+  const start = Math.max(0, klineData.value.length - visibleCount.value - touchState.offset);
+  const end = Math.min(klineData.value.length, start + visibleCount.value);
+  return {
+    start,
+    end,
+  };
+});
+// 获取当前可见的数据
+const visibleKlineData = computed(() => {
+  const { start, end } = visibleDataRange.value;
+  return klineData.value.slice(start, end);
+});
+// 计算两点之间的距离
+const getDistance = (touch1, touch2) => {
+  const dx = touch1.x - touch2.x;
+  const dy = touch1.y - touch2.y;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
+// 十字准线相关状态
+const crosshair = reactive({
+  show: false,
+  x: 0,
+  y: 0,
+  currentData: null,
+  snapToData: true,
+});
+// 绘制网格和坐标轴
+const grid = [
+  {
+    top: 20,
+    bottom: canvasHeight.value * 0.5,
+    left: 5,
+    right: 5,
+    lineColor: LINE_COLOR,
+    lineWidth: 1,
+    horizontalLineNum: 5,
+    verticalLineNum: 5,
+  },
+  {
+    top: canvasHeight.value * 0.5 + 20,
+    bottom: 20,
+    left: 5,
+    right: 5,
+    lineColor: LINE_COLOR,
+    lineWidth: 1,
+    horizontalLineNum: 3,
+    verticalLineNum: 5,
+  },
+];
+
+// 绘制网格和坐标轴
+const dayGrid = [
+  {
+    top: 20,
+    bottom: canvasHeight.value * 0.5,
+    left: 5,
+    right: 5,
+    lineColor: LINE_COLOR,
+    lineWidth: 1,
+    horizontalLineNum: 5,
+    verticalLineNum: 2,
+  },
+  {
+    top: canvasHeight.value * 0.5 + 20,
+    bottom: 20,
+    left: 5,
+    right: 5,
+    lineColor: LINE_COLOR,
+    lineWidth: 1,
+    horizontalLineNum: 3,
+    verticalLineNum: 2,
+  },
+  {
+    top: canvasHeight.value * 0.5 + 20,
+    bottom: 20,
+    left: 5,
+    right: 5,
+    lineColor: LINE_COLOR,
+    lineWidth: 1,
+    horizontalLineNum: 3,
+    verticalLineNum: 2,
+  },
+];
+// 工具函数
+const utils = {
+  // 格式化价格
+  formatPrice(price) {
+    return price.toFixed(2);
+  },
+
+  // 计算数据范围
+  calculateDataRange(data, key) {
+    if (!data || data.length === 0) {
+      return {
+        min: 0,
+        max: 0,
+      };
+    }
+    const values = data.map((item) => item[key]);
+    return {
+      min: Math.min(...values),
+      max: Math.max(...values),
+    };
+  },
+  // 计算标签
+  calculateLabel(data, type = 2, preClosePrice = 0, key, num) {
+    let label = [];
+    if (key === "price") {
+      // 分时价格区间
+      if (type == 1) {
+        const priceRange = utils.calculateDataRange(data, "price");
+        const theMost = Math.max(priceRange.max - preClosePrice, preClosePrice - priceRange.min);
+        const mid = (num - 1) / 2;
+        // 计算分时价格标签
+        label[mid] = {
+          value: utils.formatPrice(preClosePrice),
+          ratio: utils.formatPrice(0) + "%",
+        };
+        for (let i = 0; i < mid; i++) {
+          label[i] = {
+            value: utils.formatPrice(preClosePrice + (theMost * (mid - i)) / mid),
+            ratio: utils.formatPrice((100 * (theMost * (mid - i))) / mid / preClosePrice) + "%",
+          };
+
+          label[num - 1 - i] = {
+            value: utils.formatPrice(preClosePrice - (theMost * (mid - i)) / mid),
+            ratio: utils.formatPrice((-1 * 100 * (theMost * (mid - i))) / mid / preClosePrice) + "%",
+          };
+        }
+        chartRange.value.push({
+          max: preClosePrice + theMost,
+          min: preClosePrice - theMost,
+        });
+        // timeChartObject.value.max = preClosePrice + theMost;
+        // timeChartObject.value.min = preClosePrice - theMost;
+        return label;
+      } else {
+        const highPriceRange = utils.calculateDataRange(data, "high");
+        const lowPriceRange = utils.calculateDataRange(data, "low");
+        const priceRange = {
+          max: highPriceRange.max * 1.01,
+          min: lowPriceRange.min * 0.99,
+        };
+        const priceDiff = priceRange.max - priceRange.min;
+        for (let i = 0; i < num; ++i) {
+          label[i] = {
+            value: utils.formatPrice(priceRange.max - (i * priceDiff) / (num - 1)),
+          };
+        }
+        chartRange.value.push(priceRange);
+        // klineChartObject.value.max = highPriceRange.max * 1.01;
+        // klineChartObject.value.min = lowPriceRange.min * 0.99;
+        return label;
+      }
+    } else if (key === "volume") {
+      const volumeRange = utils.calculateDataRange(data, "volume");
+      chartRange.value.push({
+        max: volumeRange.max,
+        min: 0,
+      });
+      label[0] = {
+        value: utils.formatPrice(volumeRange.max),
+      };
+      label[1] = {
+        value: utils.formatPrice(0),
+      };
+      return label;
+    }
+    return null;
+  },
+  // 线性插值
+  lerp(start, end, factor) {
+    return start + (end - start) * factor;
+  },
+
+  // 根据X坐标找到最近的数据点
+  findNearestDataPoint(x, pointLen, data, grid, offset) {
+    if (!data.length) return null;
+    const width = canvasWidth.value;
+    const height = canvasHeight.value;
+    // 计算每个数据点的X坐标间隔
+    // 倒推 const x=5+(index*(width-10)/pointLen)  已知x求index
+    const xStep = width - grid[0].left - grid[0].right;
+
+    // 计算触摸点对应的数据索引
+    const touchX = (x - grid[0].left - offset) * pointLen;
+    let nearestIndex = Math.round(touchX / xStep);
+    let dataX;
+    // 确保索引在有效范围内
+    if (nearestIndex >= 0 && nearestIndex <= data.length - 1) {
+      dataX = offset + grid[0].left + (nearestIndex * (width - grid[0].left - grid[0].right)) / pointLen;
+    } else {
+      dataX = x;
+    }
+    nearestIndex = Math.max(0, Math.min(nearestIndex, data.length - 1));
+
+    return {
+      ...data[nearestIndex],
+      index: nearestIndex,
+      x: dataX,
+    };
+  },
+
+  // 根据Y坐标计算价格
+  calculatePriceFromY(y, data, grid) {
+    if (!data.length) return 0;
+
+    const width = canvasWidth.value;
+    const height = canvasHeight.value;
+    // 上下边距1
+    const topPadding1 = 20;
+    const bottomPadding1 = height * 0.4;
+    //   上下边距2
+    const topPadding2 = height - bottomPadding1 + 40;
+    const bottomPadding2 = 5;
+    // 左右边距
+    const verticalPadding = 5;
+
+    let chartY;
+    let price;
+
+    for (let i = 0; i < grid.length; i++) {
+      if (y >= grid[i].top && y <= height - grid[i].bottom) {
+        const chartDiff = chartRange.value[i].max - chartRange.value[i].min;
+        chartY = y - grid[i].top;
+        price = chartRange.value[i].max - (chartY / (height - grid[i].bottom - grid[i].top)) * chartDiff;
+        break;
+      }
+    }
+
+    // if (y >= topPadding1 && y <= height - bottomPadding1) {
+    //   const priceDiff = priceRange.max - priceRange.min;
+    //   chartY = y - topPadding1;
+    //   price = priceRange.max - (chartY / (height - topPadding1 - bottomPadding1)) * priceDiff;
+    // } else if (y >= topPadding2 && y <= height - bottomPadding2) {
+    //   const volumeRange = utils.calculateDataRange(data, "volume");
+    //   const volumeDiff = volumeRange.max - 0;
+    //   chartY = y - topPadding2;
+    //   price = volumeRange.max - (chartY / (height - topPadding2 - bottomPadding2)) * volumeDiff;
+    // }
+
+    return price;
+  },
+  // 股市数值格式化方法
+  formatStockNumber(value, decimalPlaces = 2) {
+    const num = Number(value);
+    if (isNaN(num)) return "0";
+
+    const absNum = Math.abs(num);
+    const sign = num < 0 ? "-" : "";
+
+    if (absNum >= 1000000000000) {
+      // 万亿级别
+      return sign + (absNum / 1000000000000).toFixed(decimalPlaces) + "万亿";
+    } else if (absNum >= 100000000) {
+      // 亿级别
+      return sign + (absNum / 100000000).toFixed(decimalPlaces) + "亿";
+    } else if (absNum >= 10000) {
+      // 万级别
+      return sign + (absNum / 10000).toFixed(decimalPlaces) + "万";
+    } else {
+      // 小于万的直接显示
+      return sign + absNum.toFixed(decimalPlaces);
+    }
+  },
+};
+
+let text = [
+  [
+    {
+      name: "领先",
+      value: "暂无数据",
+      color: "red",
+    },
+    {
+      name: "价",
+      value: utils.formatPrice(stockInformation.value.currentPrice),
+      color: "black",
+    },
+  ],
+  [
+    {
+      name: "量",
+      value: utils.formatStockNumber(stockInformation.value.volume),
+      color: "green",
+    },
+    {
+      name: "额",
+      value: "暂无数据",
+      color: "black",
+    },
+  ],
+];
+// 示例数据
+const timeData = ref([]);
+
+const klineData = ref([]);
+
+const initCanvas = async () => {
+  try {
+    crosshair.show = false;
+
+    grid[0].bottom = canvasHeight.value * 0.4;
+    grid[1].top = canvasHeight.value * 0.6 + 30;
+
+    dayGrid[0].top = 20;
+    dayGrid[0].bottom = canvasHeight.value * 0.6;
+    dayGrid[1].top = canvasHeight.value * 0.4 + 30;
+    dayGrid[1].bottom = canvasHeight.value * 0.3;
+    dayGrid[2].top = canvasHeight.value * 0.7 + 20;
+    dayGrid[2].bottom = 20;
+
+    // 等待DOM更新
+    await nextTick();
+    ctx.value = uni.createCanvasContext("stockChart", instance.proxy);
+    // 初始化动态数据Canvas上下文
+    dynamicCtx.value = uni.createCanvasContext("dynamicCanvas", instance.proxy);
+    // 初始化十字准心Canvas上下文
+    crosshairCtx.value = uni.createCanvasContext("crosshairCanvas", instance.proxy);
+
+    if (ctx.value) {
+      // 设置Canvas的内部绘图区域尺寸
+      ctx.value.canvas = {
+        width: canvasWidth.value,
+        height: canvasHeight.value,
+      };
+    } else {
+      console.warn("Canvas上下文未初始化，跳过绘制");
+    }
+    // 确保Canvas上下文知道正确的尺寸
+    if (dynamicCtx.value) {
+      // 设置Canvas的内部绘图区域尺寸
+      dynamicCtx.value.canvas = {
+        width: canvasWidth.value,
+        height: canvasHeight.value,
+      };
+    } else {
+      console.warn("动态Canvas上下文未初始化，跳过绘制");
+    }
+    if (crosshairCtx.value) {
+      // 设置Canvas的内部绘图区域尺寸
+      crosshairCtx.value.canvas = {
+        width: canvasWidth.value,
+        height: canvasHeight.value,
+      };
+    } else {
+      console.warn("十字准心Canvas上下文未初始化，跳过绘制");
+    }
+    // 等待DOM更新
+    await nextTick();
+    console.log("ctx", ctx.value);
+    drawChart();
+  } catch (error) {
+    console.error("初始化Canvas失败:", error);
+  }
+};
+
+// 绘制图表主函数-设置基础数据
+const drawChart = () => {
+  if (!ctx.value || !dynamicCtx.value || !crosshairCtx.value) {
+    console.warn("Canvas上下文未初始化，跳过绘制");
+    return;
+  }
+  const data = klineTab.value == 1 ? timeData.value : klineData.value;
+  chartRange.value = [];
+  // 清除画布
+  // HCharts.setCanvasColor(ctx.value, width, height, CANVAS_BACKGROUND_COLOR);
+  // HCharts.setCanvasColor(dynamicCtx.value, width, height, CANVAS_BACKGROUND_COLOR);
+  // HCharts.setCanvasColor(crosshairCtx.value, width, height, CANVAS_BACKGROUND_COLOR);
+
+  // 根据当前标签绘制对应图表
+  if (klineTab.value == 1) {
+    //   设置标签样式
+    const label = [
+      {
+        text: utils.calculateLabel(data, 1, stockInformation.value.lastDayStockClosePrice, "price", grid[0].horizontalLineNum),
+        color: [TEXT_COLOR1, TEXT_COLOR1, TEXT_COLOR1, TEXT_COLOR1, TEXT_COLOR2],
+        fontSize: 12,
+        lineStyle: ["solid", "solid", "solid", "solid", "solid"],
+        onlyTwo: false,
+      },
+      {
+        text: utils.calculateLabel(data, 2, stockInformation.value.lastDayStockClosePrice, "volume", grid[1].horizontalLineNum),
+        color: [TEXT_COLOR1, TEXT_COLOR1],
+        lineStyle: ["solid", "solid", "solid"],
+        fontSize: 12,
+        onlyTwo: true,
+      },
+    ];
+    // 把label加进grid中
+    grid[0].label = label[0];
+    grid[1].label = label[1];
+
+    drawTimeChart();
+  } else {
+    //   设置标签样式
+    const label = [
+      {
+        text: utils.calculateLabel(data, 2, stockInformation.value.lastDayStockClosePrice, "price", grid[0].horizontalLineNum),
+        color: [TEXT_COLOR1, TEXT_COLOR1, TEXT_COLOR1, TEXT_COLOR1, TEXT_COLOR2],
+        lineStyle: ["solid", "dash", "dash", "dash", "solid"],
+        fontSize: 12,
+        onlyTwo: false,
+      },
+      {
+        text: utils.calculateLabel(data, 2, stockInformation.value.lastDayStockClosePrice, "volume", grid[1].horizontalLineNum),
+        color: [TEXT_COLOR1, TEXT_COLOR1],
+        lineStyle: ["solid", "dash", "solid"],
+        fontSize: 12,
+        onlyTwo: true,
+      },
+      {
+        text: utils.calculateLabel(data, 2, stockInformation.value.lastDayStockClosePrice, "volume", grid[1].horizontalLineNum),
+        color: [TEXT_COLOR1, TEXT_COLOR1],
+        lineStyle: ["solid", "dash", "solid"],
+        fontSize: 12,
+        onlyTwo: true,
+      },
+    ];
+    // 把label加进grid中
+    dayGrid[0].label = label[0];
+    dayGrid[1].label = label[1];
+    dayGrid[2].label = label[2];
+    // HCharts.drawGrid(ctx.value, canvasWidth.value, canvasHeight.value, dayGrid, data[0].date, data[data.length - 1].date);
+    drawKLineChart();
+  }
+
+  // crosshairCtx.value.draw();
+};
+const throttledDrawChart = throttle(drawChart, 50);
+
+// // 绘制分时图
+const drawTimeChart = () => {
+  drawCtxChart(grid);
+  drawDynamicCtxChart();
+};
+
+// // 绘制K线图
+const drawKLineChart = () => {
+  drawCtxChart(dayGrid);
+  drawDynamicCtxChart();
+};
+
+const drawCtxChart = (paramGrid) => {
+  // 检查Canvas上下文是否已初始化
+  if (!ctx.value) {
+    console.warn("Canvas上下文未初始化，跳过绘制");
+    return;
+  }
+  // 绘制网格
+  HCharts.drawGrid(ctx.value, canvasWidth.value, canvasHeight.value, paramGrid, openTime, closeTime);
+  //执行绘制
+  ctx.value.draw();
+};
+const drawDynamicCtxChart = () => {
+  if (klineTab.value == 1) {
+    //绘制价格曲线
+    HCharts.drawPriceLine(dynamicCtx.value, canvasWidth.value, canvasHeight.value, timeData.value, grid, chartRange.value[0]);
+    //绘制成交量
+    HCharts.drawVolume(
+      dynamicCtx.value,
+      canvasWidth.value,
+      canvasHeight.value,
+      timeData.value,
+      2,
+      240,
+      grid,
+      {
+        max: utils.calculateDataRange(timeData.value, "volume").max,
+        min: 0,
+      },
+      0
+    );
+    HCharts.drawAxisLabels(dynamicCtx.value, canvasWidth.value, canvasHeight.value, grid);
+    HCharts.drawTopPriceDisplay(crosshairCtx.value, grid, text);
+  } else {
+    drawKLine(dynamicCtx.value);
+    //绘制成交量
+    HCharts.drawVolume(
+      dynamicCtx.value,
+      canvasWidth.value,
+      canvasHeight.value,
+      klineData.value,
+      2,
+      klineData.value.length,
+      dayGrid,
+      {
+        max: utils.calculateDataRange(klineData.value, "volume").max,
+        min: 0,
+      },
+      touchState.offset
+    );
+    //绘制成交量
+    HCharts.drawVolume(
+      dynamicCtx.value,
+      canvasWidth.value,
+      canvasHeight.value,
+      klineData.value,
+      3,
+      klineData.value.length,
+      dayGrid,
+      {
+        max: utils.calculateDataRange(klineData.value, "volume").max,
+        min: 0,
+      },
+      touchState.offset
+    );
+    HCharts.drawAxisLabels(dynamicCtx.value, canvasWidth.value, canvasHeight.value, dayGrid);
+    // drawMovingAverage();
+    HCharts.drawTopPriceDisplay(crosshairCtx.value, dayGrid, []);
+  }
+  //执行绘制
+  dynamicCtx.value.draw(false);
+  crosshairCtx.value.draw();
+};
+
+const throttledDrawDynamicCtxChart = throttle(drawDynamicCtxChart, 50);
+// const throttledDrawKLineChart = throttle(drawKLineChart, 10);
+
+// 绘制K线
+const drawKLine = (ctx) => {
+  const data = klineData.value;
+  if (!data.length) return;
+
+  const width = canvasWidth.value;
+  const height = canvasHeight.value;
+
+  // 计算价格范围
+  const priceRange = chartRange.value[0];
+  const priceDiff = priceRange.max - priceRange.min;
+
+  const areaWidth = (width - dayGrid[0].left - dayGrid[0].right) / data.length;
+  const candleWidth = areaWidth * 0.6;
+
+  data.forEach((item, index) => {
+    const x = touchState.offset + dayGrid[0].left + (index * (width - dayGrid[0].left - dayGrid[0].right)) / data.length;
+
+    // 计算坐标
+    const highY = dayGrid[0].top + (height - dayGrid[0].top - dayGrid[0].bottom) * (1 - (item.high - priceRange.min) / priceDiff);
+    const lowY = dayGrid[0].top + (height - dayGrid[0].top - dayGrid[0].bottom) * (1 - (item.low - priceRange.min) / priceDiff);
+    const openY = dayGrid[0].top + (height - dayGrid[0].top - dayGrid[0].bottom) * (1 - (item.open - priceRange.min) / priceDiff);
+    const closeY = dayGrid[0].top + (height - dayGrid[0].top - dayGrid[0].bottom) * (1 - (item.close - priceRange.min) / priceDiff);
+
+    // 判断涨跌
+    const isRise = item.close >= item.open;
+    const color = isRise ? "green" : "red";
+
+    // 绘制上下影线
+    ctx.setStrokeStyle(color);
+    ctx.setLineWidth(1);
+    ctx.beginPath();
+    ctx.moveTo(x, highY);
+    ctx.lineTo(x, lowY);
+    ctx.stroke();
+
+    // 绘制K线实体
+    const entityTop = isRise ? closeY : openY;
+    const entityBottom = isRise ? openY : closeY;
+    const entityHeight = Math.max(Math.abs(entityBottom - entityTop), 1);
+
+    ctx.setFillStyle(color);
+    ctx.fillRect(x - candleWidth / 2, entityTop, candleWidth, entityHeight);
+  });
+};
+
+// 绘制移动平均线
+const drawMovingAverage = () => {
+  const data = klineData.value;
+  if (!data.length) return;
+
+  const ma5 = calculateMA(data, 5);
+  const ma10 = calculateMA(data, 10);
+
+  drawMALine(ma5, "#fadb14", "MA5"); // 黄色
+  drawMALine(ma10, "#eb2f96", "MA10"); // 粉色
+};
+
+// 计算移动平均线
+const calculateMA = (data, period) => {
+  const result = [];
+  for (let i = period - 1; i < data.length; i++) {
+    let sum = 0;
+    for (let j = 0; j < period; j++) {
+      sum += data[i - j].close;
+    }
+    result.push({
+      index: i,
+      value: sum / period,
+    });
+  }
+  return result;
+};
+
+// 绘制均线
+const drawMALine = (maData, color, label) => {
+  if (!maData.length) return;
+
+  const width = canvasWidth.value;
+  const height = canvasHeight.value;
+  const data = klineData.value;
+
+  // 计算价格范围
+  const highs = data.map((item) => item.high);
+  const lows = data.map((item) => item.low);
+  const priceRange = chartRange.value[0];
+  const priceDiff = priceRange.max - priceRange.min;
+
+  ctx.value.setStrokeStyle(color);
+  ctx.value.setLineWidth(1.5);
+  ctx.value.beginPath();
+
+  maData.forEach((point, idx) => {
+    const x = 40 + (point.index * (width - 60)) / (data.length - 1);
+    const y = 20 + (height - 60) * (1 - (point.value - priceRange.min) / priceDiff);
+
+    if (idx === 0) {
+      ctx.value.moveTo(x, y);
+    } else {
+      ctx.value.lineTo(x, y);
+    }
+  });
+
+  ctx.value.stroke();
+
+  // 绘制图例
+  if (maData.length > 0) {
+    const lastPoint = maData[maData.length - 1];
+    const x = 40 + (lastPoint.index * (width - 60)) / (data.length - 1);
+    const y = 20 + (height - 60) * (1 - (lastPoint.value - priceRange.min) / priceDiff);
+
+    HCharts.drawText(ctx.value`${label}: ${utils.formatPrice(lastPoint.value)}`, x + 10, y - 5, 12, color);
+  }
+};
+// 触摸事件处理
+const touchStart = (e) => {
+  e.preventDefault(); // 阻止页面滚动等默认行为
+
+  if (typeof e.touches[1] === "undefined") {
+    touchState.startX = e.touches[0].x;
+    touchState.startY = e.touches[0].y;
+    touchState.isMoving = false;
+  } else if (typeof e.touches[1] !== "undefined" && !crosshair.show) {
+    // touchState.startX1 = e.touches[0].x;
+    // touchState.startY1 = e.touches[0].y;
+    // touchState.startX2 = e.touches[1].x;
+    // touchState.startY2 = e.touches[1].y;
+    // touchState.isMoving = false;
+  }
+};
+
+const touchMove = (e) => {
+  touchState.isMoving = true;
+  // 计算移动距离
+  const currentX = e.touches[0].x;
+  const currentY = e.touches[0].y;
+  const deltaX = currentX - touchState.startX;
+  const deltaY = currentY - touchState.startY;
+  touchState.moveDistance = Math.max(touchState.moveDistance, Math.sqrt(deltaX * deltaX + deltaY * deltaY));
+  if (crosshair.show) {
+    if (isInChartArea(currentX, currentY, klineTab.value === 1 ? grid : dayGrid)) {
+      throttledUpdateCrosshair(currentX, currentY);
+    } else {
+      // 如果移出图表区域，隐藏十字准线
+      // crosshair.show = false;
+      if (klineTab.value === 1) {
+        HCharts.drawCrosshair(crosshairCtx.value, canvasWidth.value, canvasHeight.value, grid, crosshair, text);
+      } else {
+        HCharts.drawCrosshair(crosshairCtx.value, canvasWidth.value, canvasHeight.value, dayGrid, crosshair, []);
+      }
+    }
+  } else {
+    if (klineTab.value === 2) {
+      // if(currentY)
+      if (currentX < touchState.startX) {
+        touchState.offset += currentX - touchState.startX;
+        throttledDrawDynamicCtxChart();
+        touchState.startX = currentX;
+      } else {
+        touchState.offset += currentX - touchState.startX;
+        throttledDrawDynamicCtxChart();
+        touchState.startX = currentX;
+      }
+      if (canvasWidth.value + touchState.offset < 30) {
+        touchState.offset = 0;
+      }
+    }
+  }
+};
+
+const touchEnd = (e) => {
+  // 触摸结束，隐藏十字准线
+
+  if (touchState.moveDistance < touchState.moveThreshold) {
+    // 移动距离小于阈值，认为是点击事件
+    crosshair.show = !crosshair.show;
+  }
+
+  if (crosshair.show) {
+    const currentX = e.changedTouches[0].x;
+    const currentY = e.changedTouches[0].y;
+    if (isInChartArea(currentX, currentY, klineTab.value === 1 ? grid : dayGrid)) {
+      throttledUpdateCrosshair(currentX, currentY);
+    }
+  }
+  if (klineTab.value === 1) {
+    HCharts.drawCrosshair(crosshairCtx.value, canvasWidth.value, canvasHeight.value, grid, crosshair, text);
+  } else {
+    HCharts.drawCrosshair(crosshairCtx.value, canvasWidth.value, canvasHeight.value, dayGrid, crosshair, []);
+  }
+  // 重置移动距离
+  touchState.moveDistance = 0;
+};
+
+// 检查坐标是否在图表区域内
+const isInChartArea = (x, y, grid) => {
+  const width = canvasWidth.value;
+  const height = canvasHeight.value;
+
+  if (x < grid[0].left || x > width - grid[0].right) return false;
+
+  for (let i = 0; i < grid.length; i++) {
+    if (y >= grid[i].top && y <= height - grid[i].bottom) return true;
+  }
+  return false;
+};
+
+// 更新十字准线位置和数据
+const updateCrosshair = (x, y) => {
+  if (!crosshair.show) return;
+  // 更新Y坐标以匹配实际价格
+  const data = klineTab.value === 1 ? timeData.value : klineData.value;
+
+  const width = canvasWidth.value;
+  const height = canvasHeight.value;
+
+  crosshair.x = x;
+  crosshair.y = y;
+  const nearestData = utils.findNearestDataPoint(x, klineTab.value === 1 ? 240 : data.length, data, klineTab.value === 1 ? grid : dayGrid, klineTab.value === 1 ? 0 : touchState.offset);
+  crosshair.x = nearestData.x;
+  stockInformation.value.currentPrice = nearestData.price || nearestData.close;
+  stockInformation.value.volume = nearestData.volume;
+  // 涨跌额度
+  if (klineTab.value == 1) {
+    stockInformation.value.currentValue = stockInformation.value.currentPrice - stockInformation.value.lastDayStockClosePrice;
+    stockInformation.value.currentRatio = ((stockInformation.value.currentPrice - stockInformation.value.lastDayStockClosePrice) / stockInformation.value.lastDayStockClosePrice) * 100;
+  } else {
+    stockInformation.value.openPrice = nearestData.open;
+    stockInformation.value.highPrice = nearestData.high;
+    stockInformation.value.lowPrice = nearestData.low;
+    if (nearestData.index != 0) {
+      stockInformation.value.lastDayStockClosePrice = data[nearestData.index - 1].close;
+      stockInformation.value.currentValue = stockInformation.value.currentPrice - stockInformation.value.lastDayStockClosePrice;
+      stockInformation.value.currentRatio = ((stockInformation.value.currentPrice - stockInformation.value.lastDayStockClosePrice) / stockInformation.value.lastDayStockClosePrice) * 100;
+    }
+  }
+  if (klineTab.value === 1 && crosshair.snapToData) {
+    // 吸附到最近的数据点
+
+    if (nearestData) {
+      crosshair.currentData = nearestData;
+      const priceDiff = chartRange.value[0].max - chartRange.value[0].min;
+      crosshair.y = grid[0].top + (height - grid[0].bottom - grid[0].top) * (1 - (nearestData.price - chartRange.value[0].min) / priceDiff);
+    }
+  } else {
+    // 自由移动模式
+    const currentPrice = utils.calculatePriceFromY(y, data, klineTab.value === 1 ? grid : dayGrid);
+    crosshair.currentData = {
+      ...nearestData,
+      price: currentPrice,
+    };
+  }
+
+  if (crosshair?.currentData?.volume) {
+    text[0][1].value = crosshair.currentData.price;
+    text[1][0].value = crosshair.currentData.volume;
+  }
+  // 只重绘十字准心，不重绘整个图表
+  if (klineTab.value === 1) {
+    HCharts.drawCrosshair(crosshairCtx.value, canvasWidth.value, canvasHeight.value, grid, crosshair, text);
+  } else {
+    HCharts.drawCrosshair(crosshairCtx.value, canvasWidth.value, canvasHeight.value, dayGrid, crosshair, []);
+  }
+};
+
+const throttledUpdateCrosshair = throttle(updateCrosshair, 10);
+
+// 缩放控制函数
+const zoomIn = () => {
+  touchState.scale = Math.min(touchState.maxScale, touchState.scale * 1.2);
+  drawChart();
+};
+
+const zoomOut = () => {
+  touchState.scale = Math.max(touchState.minScale, touchState.scale / 1.2);
+  drawChart();
+};
+
+// 监听数据变化
+// watch([timeData, klineData], () => {
+//   console.log("数据变化");
+//   drawChart();
+// });
+
+watch(klineTab, () => {
+  console.log("标签页变化");
+  drawChart();
+});
+/*
+							const connectTcp = (ip, port) => {
+							  console.log(`🚀 正在连接TCP服务器 ${ip}:${port}...`);
+							  TCPSocket.connect(
+							    {
+							      channel: "1",
+							      ip: ip,
+							      port: port,
+							    },
+							    (result) => {
+							      console.log(result);
+							      if (result.status == 0) {
+							        tcpObject.isConnected = true;
+							        console.log("tcp连接成功");
+							      } else if (result.status == 1) {
+							        tcpObject.isConnected = false;
+							        console.log("tcp断开连接");
+							      }
+							      if (result.receivedMsg) {
+							        console.log("收到服务器发送的数据", result.receivedMsg);
+							        if (result.receivedMsg.length == 0 || result.receivedMsg.includes("欢迎")) {
+							          resultR.value = [];
+							        } else {
+							          const msgPacket = JSON.parse(result.receivedMsg);
+							          resultR.value.push(msgPacket);
+							          // 股票代码
+							          if (msgPacket.stock_code) {
+							            stockInformation.value.stockCode = msgPacket.stock_code;
+							          }
+							          // 股票名称
+							          if (msgPacket.stock_name) {
+							            stockInformation.value.stockName = msgPacket.stock_name;
+							          }
+							          // 前一日收盘价
+							          if (msgPacket.pre_close) {
+							            stockInformation.value.lastDayStockClosePrice = msgPacket.pre_close;
+							          }
+							          // 当前股价（收盘价）
+							          if (msgPacket.current_price) {
+							            stockInformation.value.currentPrice = msgPacket.current_price;
+							          }
+							          // 涨跌额度
+							          if (msgPacket.current_price && msgPacket.pre_close) {
+							            stockInformation.value.currentValue = msgPacket.current_price - msgPacket.pre_close;
+							            stockInformation.value.currentRatio = ((msgPacket.current_price - msgPacket.pre_close) / msgPacket.pre_close) * 100;
+							          }
+
+							          // 最高价
+							          if (msgPacket.high_price) {
+							            stockInformation.value.highPrice = msgPacket.high_price;
+							          }
+							          // 最低价
+							          if (msgPacket.close_price) {
+							            stockInformation.value.lowPrice = msgPacket.close_price;
+							          }
+							          // 开盘价
+							          if (msgPacket.open_price) {
+							            stockInformation.value.openPrice = msgPacket.open_price;
+							          }
+							          // 开盘价
+							          if (msgPacket.low_price) {
+							            stockInformation.value.lowPrice = msgPacket.low_price;
+							          }
+							          // 收盘价（当前股价）
+							          if (msgPacket.current_price) {
+							            stockInformation.value.closePrice = msgPacket.current_price;
+							          }
+							          // 成交量
+							          if (msgPacket.volume) {
+							            stockInformation.value.volume = msgPacket.volume;
+							          }
+							          // 成交量比
+							          if (msgPacket.volume_ratio) {
+							            stockInformation.value.volumeRatio = msgPacket.volume_ratio;
+							          }
+							          // 成交额
+							          if (msgPacket.amount) {
+							            stockInformation.value.amount = msgPacket.amount;
+							          }
+							          // 市盈
+							          if (msgPacket.market_earn) {
+							            stockInformation.value.marketEarn = msgPacket.market_earn;
+							          }
+							          // 换手率
+							          if (msgPacket.turnover_ratio) {
+							            stockInformation.value.turnoverRatio = msgPacket.turnover_ratio;
+							          }
+							          // 市值
+							          if (msgPacket.total_market_value) {
+							            stockInformation.value.marketValue = msgPacket.total_market_value;
+							          }
+							        }
+							      }
+							      // if (result.receivedHexMsg) {
+							      // 	//服务器返回16进制数据
+							      // 	console.log("📥 收到16进制数据:", result.receivedHexMsg);
+							      // 	let msg = result.receivedHexMsg;
+							      // 	let sum = msg.length / 2;
+							      // 	let arr = [];
+							      // 	for (let k = 0; k < sum; k++) {
+							      // 		let i = msg.substring(k * 2, k * 2 + 2);
+							      // 		arr.push(i);
+							      // 	}
+							      // 	console.log("转换成16进制数组:", arr);
+							      // 	if (tcpObject.responseCallback) {
+							      // 		tcpObject.responseCallback({
+							      // 			data: arr,
+							      // 		});
+							      // 	}
+							      // }
+
+							      // 设置连接超时
+							      setTimeout(() => {
+							        if (!tcpObject.isConnected) {
+							          throw new Error("连接超时");
+							          return;
+							        }
+							      }, TIME_OUT);
+							    }
+							  );
+							};
+							// 断开连接
+							const disconnect = () => {
+							  try {
+							    TCPSocket.disconnect({
+							      channel: "1",
+							    });
+							    tcpObject.isConnected = false;
+							    console.log("✅ 连接已关闭");
+							  } catch (e) {
+							    console.log("⚠️ 断开连接时发生错误:", e.message);
+							  }
+							};
+
+							const startTcp = async () => {
+							  console.log("🚀 TCP客户端启动");
+							  console.log(`目标服务器: ${tcpObject.ip}:${tcpObject.port}`);
+							  try {
+							    // 连接服务器
+							    await connectTcp(tcpObject.ip, tcpObject.port);
+							  } catch (e) {
+							    console.log("error", e);
+							  }
+							};
+							*/
+// 定时器标识（用于清除定时器）
+let timer = null;
+let index = 0;
+// 定时添加数据的函数
+const startAddDataTimer = () => {
+  if (timer) {
+    console.log("存在旧定时器，卸载旧定时器");
+    clearInterval(timer);
+  }
+  console.log("开始定时任务");
+  // 每隔5秒执行一次
+  timer = setInterval(() => {
+    if (index < testTimeData.length) {
+      timeData.value.push(testTimeData[index]);
+      console.log("新增数据：", testTimeData[index]);
+      // 触发图表重新绘制
+      drawChart();
+      index++;
+    } else {
+      clearInterval(timer);
+    }
+  }, 2000); // 5000毫秒 = 5秒
+};
+
+// 保存定时器，用于页面卸载时清理
+onUnmounted(() => {
+  // disconnect();
+  if (timer) {
+    console.log("卸载定时器");
+    clearInterval(timer);
+  }
+});
+
+onMounted(async () => {
+  // 获取系统信息，处理高清屏
+  const systemInfo = uni.getSystemInfoSync();
+  pixelRatio.value = systemInfo.pixelRatio;
+  // 设置Canvas实际像素（考虑pixelRatio以获得高清效果）
+  // 1rpx = 设备屏幕宽度 / 750
+  const rpxToPx = systemInfo.windowWidth / 750;
+  const offsetHeight = (150 + 200 + 80 + 150 + 30) * rpxToPx; // 350rpx转换为px
+  const calculatedHeight = systemInfo.windowHeight - offsetHeight;
+  canvasWidth.value = systemInfo.windowWidth;
+  canvasHeight.value = Math.max(calculatedHeight, canvasHeight.value);
+  // startTcp();
+  //   timeData.value = testTimeData;
+  timeData.value = testTimeData.slice(0, 100);
+  klineData.value = testKlineData;
+  // klineData.value = testKlineData.slice(-touchState.baseVisibleCount);
+  //   前一日收盘价
+  let prevClosePrice = timeData.value[timeData.value.length - 2].price || stockInformation.value.closePrice;
+  stockInformation.value.lastDayStockClosePrice = prevClosePrice;
+  // 当前股价
+  stockInformation.value.currentPrice = timeData.value[timeData.value.length - 1].price;
+  // 涨跌额度
+  stockInformation.value.currentValue = stockInformation.value.currentPrice - stockInformation.value.lastDayStockClosePrice;
+  // 涨跌幅度
+  stockInformation.value.currentRatio = ((stockInformation.value.currentPrice - stockInformation.value.lastDayStockClosePrice) / stockInformation.value.lastDayStockClosePrice) * 100;
+  // 成交量
+  stockInformation.value.volume = timeData.value[timeData.value.length - 1].volume;
+  text[0][1].value = utils.formatPrice(stockInformation.value.currentPrice);
+  text[1][0].value = utils.formatStockNumber(stockInformation.value.volume);
+
+  await nextTick();
+  setTimeout(() => {
+    initCanvas();
+  }, 200);
+});
+</script>
+
+<style>
+.container {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f6f6f6;
+}
+
+.title-container {
+  width: 100%;
+  height: 150rpx;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.title {
+  /* border: 1px solid #ff0000; */
+  position: relative;
+  /* 关键：作为绝对定位的父容器 */
+  width: 100%;
+  height: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.back-homepage-btn {
+  margin-left: 40rpx;
+  margin-right: auto;
+  height: 30rpx;
+  width: 20rpx;
+  z-index: 1;
+}
+
+.mid-title {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.left-page {
+  height: 40rpx;
+  width: 40rpx;
+}
+
+.right-page {
+  height: 40rpx;
+  width: 40rpx;
+}
+
+.stock-id {
+  margin: 0rpx 40rpx;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.stock-name {
+  font-weight: bold;
+}
+
+.stock-code {
+  font-size: 0.8rem;
+  font-weight: bold;
+  color: #a1a1a1;
+}
+
+.search {
+  height: 40rpx;
+  width: 40rpx;
+}
+
+.more {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 40rpx;
+  margin-left: 20rpx;
+}
+
+.body {
+  overflow: auto;
+  height: calc(100vh - 305rpx);
+  /* border: 1px solid red; */
+}
+
+.stock-information {
+  background-color: white;
+  width: 100%;
+  height: 200rpx;
+  margin: 10rpx 0rpx;
+  display: flex;
+  align-items: center;
+  position: relative;
+  /* 为伪元素定位做准备 */
+}
+
+/* 右下角黑色三角形 */
+.stock-information::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-left: 20rpx solid transparent;
+  border-bottom: 20rpx solid #6a6a6a;
+}
+
+.stock-detail-container {
+  position: absolute;
+  top: 100%;
+  /* 在父容器下方 */
+  left: 0;
+  /* 从左边开始 */
+  right: 0;
+  /* 到右边结束 */
+  width: 100%;
+  /* height: 300rpx; 使用固定高度替代calc，避免计算问题 */
+  height: calc(100vh - 515rpx);
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 100;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.stock-detail {
+  border: 1px solid #cacaca;
+  width: 100%;
+  display: flex;
+  background-color: white;
+  padding: 10rpx 0;
+}
+
+.first-column,
+.second-column {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #6a6a6a;
+  font-size: 0.8rem;
+}
+
+.first-column-data,
+.second-column-data {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10rpx 40rpx;
+}
+
+.stock-detail-title {
+  color: #6a6a6a;
+}
+
+.stock-detail-value {
+  color: black;
+}
+
+.price-up {
+  color: #10b981;
+}
+
+.price-down {
+  color: #ef4444;
+}
+
+.price-none {
+  color: black;
+}
+
+.stock-current-data {
+  width: 30%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+}
+
+.stock-current-price {
+  font-weight: bold;
+  font-size: 1.2rem;
+  width: 100%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stock-current-other {
+  width: 100%;
+  height: 50%;
+  display: flex;
+  font-weight: bold;
+  font-size: 0.6rem;
+}
+
+.stock-current-value {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stock-current-ratio {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stock-other-data {
+  height: 100%;
+  width: 70%;
+  display: flex;
+  flex-direction: column;
+}
+
+.first-line,
+.second-line,
+.third-line {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 33%;
+  /* font-weight: bold; */
+  font-size: 0.8rem;
+}
+
+.value {
+  margin-left: auto;
+  margin-right: 20rpx;
+}
+
+.high-price,
+.volume,
+.volume-ratio,
+.low-price,
+.amount,
+.market-earn,
+.open-price,
+.turnover-ratio,
+.market-value {
+  display: flex;
+  flex: 1;
+}
+
+.stock-chart {
+  width: 100%;
+}
+
+.stock-kline-tab {
+  display: flex;
+  width: 100%;
+  height: 80rpx;
+  /* border: 1px solid black; */
+}
+
+.tab-day,
+.tab-month,
+.tab-time,
+.tab-week,
+.tab-more,
+.tab-setting {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  font-size: 0.8rem;
+  color: #6a6a6a;
+  position: relative;
+}
+
+/* 向下小三角样式 */
+.arrow-down {
+  width: 0;
+  height: 0;
+  border-left: 10rpx solid transparent;
+  border-right: 10rpx solid transparent;
+  border-bottom: 12rpx solid currentColor;
+  margin-left: 8rpx;
+  display: inline-block;
+}
+
+.arrow-up {
+  width: 0;
+  height: 0;
+  border-left: 10rpx solid transparent;
+  border-right: 10rpx solid transparent;
+  border-top: 12rpx solid currentColor;
+  margin-left: 8rpx;
+  display: inline-block;
+}
+
+.moreTabsContainer {
+  width: 100%;
+  display: flex;
+  gap: 5rpx;
+  margin-bottom: 5rpx;
+}
+
+
+.moreTabItem {
+  flex: 1;
+  padding: 10rpx 20rpx;
+  border-radius: 10rpx;
+  background-color: white;
+  font-size: 0.85rem;
+  color: #6a6a6a;
+  text-align: center;
+}
+
+.tab-selected {
+  color: #db1f1d;
+}
+
+.tab-selected::after {
+  content: "";
+  position: absolute;
+  bottom: 10rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40rpx;
+  height: 5rpx;
+  background-color: #db1f1d;
+}
+
+.tab-setting-img {
+  width: 30rpx;
+  height: 30rpx;
+}
+
+.time-chart-container {
+  width: 100%;
+  min-height: 400rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
+.stock-chart {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.kline-chart-container {
+  width: 100%;
+  height: 400rpx;
+  background-color: #ffffff;
+  padding: 20rpx;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.bottomTool {
+  width: 100%;
+  height: 150rpx;
+  position: fixed;
+  bottom: 0;
+  background-color: white;
+  display: flex;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.index,
+.function,
+.favorites {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 12px;
+  transition: all 0.2s ease;
+}
+
+.index:active,
+.function:active,
+.favorites:active {
+  background-color: rgba(99, 99, 99, 0.5);
+  transform: scale(0.95);
+  transition: all 0.1s ease;
+}
+
+.icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+</style>
diff --git a/static/marketSituation-image/marketCondition-image/favorites.png b/static/marketSituation-image/marketCondition-image/favorites.png
new file mode 100644
index 0000000..0143bf6
Binary files /dev/null and b/static/marketSituation-image/marketCondition-image/favorites.png differ
diff --git a/static/marketSituation-image/marketCondition-image/function.png b/static/marketSituation-image/marketCondition-image/function.png
new file mode 100644
index 0000000..48cf5e0
Binary files /dev/null and b/static/marketSituation-image/marketCondition-image/function.png differ
diff --git a/static/marketSituation-image/marketCondition-image/index.png b/static/marketSituation-image/marketCondition-image/index.png
new file mode 100644
index 0000000..c422f41
Binary files /dev/null and b/static/marketSituation-image/marketCondition-image/index.png differ
diff --git a/static/marketSituation-image/marketCondition-image/setting2.png b/static/marketSituation-image/marketCondition-image/setting2.png
new file mode 100644
index 0000000..3e67210
Binary files /dev/null and b/static/marketSituation-image/marketCondition-image/setting2.png differ