Merge branch 'milestone-20251031-简版功能开发' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into milestone-20251031-简版功能开发

4 weeks ago · 0ec1138f32
71 changed files with 7039 additions and 1434 deletions
--- 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"
        }
    ]
--- a/common/canvasMethod.js
+++ 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);
+  },
+};
--- a/common/stockTimeInformation.js
+++ 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 },
+];
--- 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
+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;
+		}
+	};
+};
--- a/components/IndexCard.vue
+++ b/components/IndexCard.vue
@ -4,7 +4,7 @@
 			<view class="flag-container">
 				<image :src="flagIcon" class="flag-icon" mode="aspectFit"></image>
 			</view>
-			<text class="index-name">{{ indexName }}</text>
+			<text class="index-name">{{ stockName }}</text>
 		</view>
 		
 		<view class="price-info">
@ -35,7 +35,7 @@ const props = defineProps({
 		required: true
 	},
 	// 指数名称
-	indexName: {
+	stockName: {
 		type: String,
 		required: true
 	},
--- a/main.js
+++ b/main.js
@ -2,6 +2,9 @@
 // #ifndef VUE3
 import Vue from 'vue'
 import App from './App'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'

 Vue.config.productionTip = false

@ -10,6 +13,10 @@ App.mpType = 'app'
 const app = new Vue({
    ...App
 })
+app.use(ElementPlus)
+for (const [key, component] of Object.entries(ElementPlusIconsVue{
+	app.component(key, component)
+}
 app.$mount()
 // #endif

@ -32,7 +39,7 @@ function getCurrentLocale() {
 		return uni.getStorageSync('languageData').code;
 	} else {
 		let language = uni.getSystemInfoSync().osLanguage;
-		// language = 'zh_CN'
+		language = 'zh_CN'
 		if (language.indexOf('th') != -1) {
 			language = 'th'
 			uni.setStorageSync('languageData', {
--- a/package-lock.json
+++ b/package-lock.json
@ -1,10 +1,13 @@
 {
-  "name": "DeepChartApp",
+  "name": "deepChartVueApp",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
+        "@dcloudio/uni-ui": "^1.5.11",
+        "@element-plus/icons-vue": "^2.3.2",
+        "element-plus": "^2.11.5",
        "vue-i18n": "^9.14.5"
      }
    },
@ -58,6 +61,55 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@dcloudio/uni-ui": {
+      "version": "1.5.11",
+      "resolved": "https://registry.npmjs.org/@dcloudio/uni-ui/-/uni-ui-1.5.11.tgz",
+      "integrity": "sha512-DBtk046ofmeFd82zRI7d89SoEwrAxYzUN3WVPm1DIBkpLPG5F5QDNkHMnZGu2wNrMEmGBjBpUh3vqEY1L3jaMw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.2.tgz",
+      "integrity": "sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
    "node_modules/@intlify/core-base": {
      "version": "9.14.5",
      "resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.14.5.tgz",
@ -109,6 +161,38 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
+      "license": "MIT"
+    },
    "node_modules/@vue/compiler-core": {
      "version": "3.5.22",
      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
@ -224,6 +308,100 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
@ -231,6 +409,37 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/dayjs": {
+      "version": "1.11.18",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz",
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
+      "license": "MIT"
+    },
+    "node_modules/element-plus": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.11.5.tgz",
+      "integrity": "sha512-O+bIVHQCjUDm4GiIznDXRoS8ar2TpWLwfOGnN/Aam0VXf5kbuc4SxdKKJdovWNxmxeqbcwjsSZPKgtXNcqys4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.2",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.17.20",
+        "@types/lodash-es": "^4.17.12",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.18",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.3",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@ -251,6 +460,29 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.19",
      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.19.tgz",
@ -261,6 +493,12 @@
        "@jridgewell/sourcemap-codec": "^1.5.5"
      }
    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
    "node_modules/nanoid": {
      "version": "3.3.11",
      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
@ -280,6 +518,12 @@
        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
      }
    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -1,5 +1,8 @@
 {
  "dependencies": {
+    "@dcloudio/uni-ui": "^1.5.11",
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "^2.11.5",
    "vue-i18n": "^9.14.5"
  }
 }
--- a/pages.json
+++ b/pages.json
@ -1,6 +1,8 @@
 {
-	"pages": [
-		{
+	  "easycom": {
+	    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+	  },
+	"pages": [{
 			"path": "pages/home/home",
 			"style": {
 				"navigationStyle": "custom",
@ -69,6 +71,121 @@
 				"titleNView": false,
 				"bounce": false
 			}
+		},
+		{
+			"path": "pages/setting/general",
+			"style": {
+				"navigationBarTitleText": "通用设置"
+			}
+		},
+		{
+			"path": "pages/setting/font",
+			"style": {
+				"navigationBarTitleText": "字体大小"
+			}
+		},
+		{
+			"path": "pages/setting/theme",
+			"style": {
+				"navigationBarTitleText": "主题切换"
+			}
+		},
+		{
+			"path": "pages/setting/message",
+			"style": {
+				"navigationBarTitleText": "消息推送"
+			}
+		},
+		{
+			"path": "pages/setting/push",
+			"style": {
+				"navigationBarTitleText": "推送设置"
+			}
+		},
+		{
+			"path": "pages/setting/server",
+			"style": {
+				"navigationBarTitleText": "选择服务器"
+			}
+		},
+		{
+			"path": "pages/setting/market",
+			"style": {
+				"navigationBarTitleText": "行情设置"
+			}
+		},
+		{
+			"path": "pages/setting/account",
+			"style": {
+				"navigationBarTitleText": "账号与安全"
+			}
+		},
+		{
+			"path": "pages/setting/newVersion",
+			"style": {
+				"navigationBarTitleText": "新版本更新"
+			}
+		},
+		{
+			"path": "pages/setting/about",
+			"style": {
+				"navigationBarTitleText": "关于DeepChart"
+			}
+		},
+		{
+			"path": "pages/setting/introduce",
+			"style": {
+				"navigationBarTitleText": "产品介绍"
+			}
+		},
+		{
+			"path": "pages/setting/bind",
+			"style": {
+				"navigationBarTitleText": "绑定账号"
+			}
+		},
+		{
+			"path": "pages/setting/phone",
+			"style": {
+				"navigationBarTitleText": "绑定账号"
+				// 其实是绑定手机号
+			}
+		},
+		{
+			"path": "pages/setting/email",
+			"style": {
+				"navigationBarTitleText": "绑定账号"
+				// 其实是绑定邮箱
+			}
+		},
+		{
+			"path": "pages/setting/password",
+			"style": 
+			{
+				"navigationBarTitleText": "修改密码"
+			}
+		},
+		{
+			"path" : "pages/setting/nextPwd",
+			"style" : 
+			{
+				"navigationBarTitleText" : "修改密码"
+			}
+		},
+		{
+			"path" : "pages/setting/share",
+			"style" : 
+			{
+				"navigationBarTitleText" : "分享领取奖励"
+			}
+		},
+		{
+			"path" : "pages/home/marketCondition",
+			"style" : 
+			{
+				"navigationBarTitleText" : "行情",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
--- a/pages/home/globalIndex.vue
+++ b/pages/home/globalIndex.vue
@ -1,574 +1,579 @@
+<!-- @format -->
+
 <template>
-    <view class="main">
-        <!-- 固定头部 -->
-        <view class="header_fixed" :style="{ top: iSMT + 'px' }">
-            <view class="header_content">
-                <view class="header_back" @click="goBack">
-                    <image src="/static/marketSituation-image/back.png" mode=""></image>
-                </view>
-                <view class="header_input_wrapper">
-                    <image class="search_icon" src="/static/marketSituation-image/search.png" mode=""
-                        @click="onSearchClick"></image>
-                    <input class="header_input" type="text" placeholder="搜索"
-                        placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue"
-                        @input="onSearchInput" @confirm="onSearchConfirm" />
-                </view>
-                <view class="header_icons">
-                    <view class="header_icon" @click="selected">
-                        <image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
-                    </view>
-                    <view class="header_icon" @click="history">
-                        <image src="/static/marketSituation-image/history.png" mode=""></image>
-                    </view>
-                </view>
-            </view>
-            <view class="warn">
-                <image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
-                <view class="warn_text_container">
-                    <text :class="warnTextClass">{{ $t('marketSituation.warn') }}</text>
-                </view>
-            </view>
+  <view class="main">
+    <!-- 固定头部 -->
+    <view class="header_fixed" :style="{ top: iSMT + 'px' }">
+      <view class="header_content">
+        <view class="header_back" @click="goBack">
+          <image src="/static/marketSituation-image/back.png" mode=""></image>
        </view>
-
-        <!-- 内容区域 -->
-        <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
-            <!-- 亚太-中华 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">亚太-中华</text>
-                    <view class="market-more" @click="viewMore('asia-china')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in asiachinaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :indexName="item.indexName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 亚太 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">亚太</text>
-                    <view class="market-more" @click="viewMore('asia')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in asiaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :indexName="item.indexName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 美洲 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">美洲</text>
-                    <view class="market-more" @click="viewMore('america')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in americaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :indexName="item.indexName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 底部安全区域 -->
-            <view class="bottom-safe-area"></view>
-        </scroll-view>
+        <view class="header_input_wrapper">
+          <image class="search_icon" src="/static/marketSituation-image/search.png" mode="" @click="onSearchClick"></image>
+          <input class="header_input" type="text" placeholder="搜索" placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue" @input="onSearchInput" @confirm="onSearchConfirm" />
+        </view>
+        <view class="header_icons">
+          <view class="header_icon" @click="selected">
+            <image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
+          </view>
+          <view class="header_icon" @click="history">
+            <image src="/static/marketSituation-image/history.png" mode=""></image>
+          </view>
+        </view>
+      </view>
+      <view class="warn">
+        <image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
+        <view class="warn_text_container">
+          <text :class="warnTextClass">{{ $t("marketSituation.warn") }}</text>
+        </view>
+      </view>
    </view>

-    <!-- 底部导航栏 -->
-    <footerBar class="static-footer" :type="'marketSituation'"></footerBar>
+    <!-- 内容区域 -->
+    <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
+      <!-- 亚太-中华 -->
+      <view class="market-section">
+        <view class="market-header">
+          <text class="market-title">亚太-中华</text>
+          <view class="market-more" @click="viewMore('asia-china')">
+            <text class="more-text">查看更多</text>
+            <text class="more-arrow">></text>
+          </view>
+        </view>
+        <view class="cards-grid-three">
+          <view v-for="(item, index) in asiachinaIndexes" :key="index" class="card-item">
+            <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName" :currentPrice="item.currentPrice" :changeAmount="item.changeAmount" :changePercent="item.changePercent" :isRising="item.isRising" @click="viewIndexDetail(item)" />
+          </view>
+        </view>
+      </view>
+
+      <!-- 亚太 -->
+      <view class="market-section">
+        <view class="market-header">
+          <text class="market-title">亚太</text>
+          <view class="market-more" @click="viewMore('asia')">
+            <text class="more-text">查看更多</text>
+            <text class="more-arrow">></text>
+          </view>
+        </view>
+        <view class="cards-grid-three">
+          <view v-for="(item, index) in asiaIndexes" :key="index" class="card-item">
+            <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName" :currentPrice="item.currentPrice" :changeAmount="item.changeAmount" :changePercent="item.changePercent" :isRising="item.isRising" @click="viewIndexDetail(item)" />
+          </view>
+        </view>
+      </view>
+
+      <!-- 美洲 -->
+      <view class="market-section">
+        <view class="market-header">
+          <text class="market-title">美洲</text>
+          <view class="market-more" @click="viewMore('america')">
+            <text class="more-text">查看更多</text>
+            <text class="more-arrow">></text>
+          </view>
+        </view>
+        <view class="cards-grid-three">
+          <view v-for="(item, index) in americaIndexes" :key="index" class="card-item">
+            <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName" :currentPrice="item.currentPrice" :changeAmount="item.changeAmount" :changePercent="item.changePercent" :isRising="item.isRising" @click="viewIndexDetail(item)" />
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部安全区域 -->
+      <view class="bottom-safe-area"></view>
+    </scroll-view>
+  </view>
+
+  <!-- 底部导航栏 -->
+  <footerBar class="static-footer" :type="'marketSituation'"></footerBar>
 </template>

 <script setup>
-import { ref, onMounted, computed, nextTick, watch } from 'vue'
-import footerBar from '../../components/footerBar.vue'
-import IndexCard from '../../components/IndexCard.vue'
+import { ref, onMounted, computed, nextTick, watch } from "vue";
+import footerBar from "../../components/footerBar.vue";
+import IndexCard from "../../components/IndexCard.vue";

 // 响应式数据
-const iSMT = ref(0) // 状态栏高度
-const contentHeight = ref(0)
-const headerHeight = ref(0) // 头部高度
-const searchValue = ref('') // 搜索值
-const isWarnTextOverflow = ref(false) // warn文字是否溢出
+const iSMT = ref(0); // 状态栏高度
+const contentHeight = ref(0);
+const headerHeight = ref(0); // 头部高度
+const searchValue = ref(""); // 搜索值
+const isWarnTextOverflow = ref(false); // warn文字是否溢出

 // warn文字的class计算属性
 const warnTextClass = computed(() => {
-    return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text'
-})
+  return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
+});

 // 检测warn文字是否溢出
 const checkWarnTextOverflow = () => {
-    nextTick(() => {
-        setTimeout(() => {
-            const query = uni.createSelectorQuery()
-
-            // 同时查询容器和文字元素
-            query.select('.warn_text_container').boundingClientRect()
-            query.select('.warn_text').boundingClientRect()
-            query.exec((res) => {
-                const containerRect = res[0]
-                const textRect = res[1]
-
-                if (!containerRect || !textRect) {
-                    return
-                }
-
-                // 判断文字是否超出容器（留一些余量）
-                const isOverflow = textRect.width > (containerRect.width - 10)
-
-                isWarnTextOverflow.value = isOverflow
-            })
-        }, 500)
-    })
-}
+  nextTick(() => {
+    setTimeout(() => {
+      const query = uni.createSelectorQuery();
+
+      // 同时查询容器和文字元素
+      query.select(".warn_text_container").boundingClientRect();
+      query.select(".warn_text").boundingClientRect();
+      query.exec((res) => {
+        const containerRect = res[0];
+        const textRect = res[1];
+
+        if (!containerRect || !textRect) {
+          return;
+        }
+
+        // 判断文字是否超出容器（留一些余量）
+        const isOverflow = textRect.width > containerRect.width - 10;
+
+        isWarnTextOverflow.value = isOverflow;
+      });
+    }, 500);
+  });
+};

 // 亚太-中华指数数据
 const asiachinaIndexes = ref([
-    {
-        flagIcon: '/static/c1.png',
-        indexName: '上证指数',
-        currentPrice: '3933.96',
-        changeAmount: '+24.32',
-        changePercent: '+0.62%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c2.png',
-        indexName: '深证成指',
-        currentPrice: '45757.90',
-        changeAmount: '-123.45',
-        changePercent: '-0.27%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c3.png',
-        indexName: '创业板指',
-        currentPrice: '6606.08',
-        changeAmount: '+89.76',
-        changePercent: '+1.38%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c4.png',
-        indexName: 'HSI50',
-        currentPrice: '22333.96',
-        changeAmount: '+156.78',
-        changePercent: '+0.71%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c5.png',
-        indexName: '沪深300',
-        currentPrice: '45757.90',
-        changeAmount: '-89.12',
-        changePercent: '-0.19%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c6.png',
-        indexName: '上证50',
-        currentPrice: '45757.90',
-        changeAmount: '+234.56',
-        changePercent: '+0.52%',
-        isRising: true
-    }
-])
+  {
+    flagIcon: "/static/c1.png",
+    stockName: "上证指数",
+    stockCode: "1A0001",
+    currentPrice: "3933.96",
+    changeAmount: "+24.32",
+    changePercent: "+0.62%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c2.png",
+    stockName: "深证成指",
+    stockCode: "2A01",
+    currentPrice: "45757.90",
+    changeAmount: "-123.45",
+    changePercent: "-0.27%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c3.png",
+    stockName: "创业板指",
+    stockCode: "399006",
+    currentPrice: "6606.08",
+    changeAmount: "+89.76",
+    changePercent: "+1.38%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c4.png",
+    stockName: "沪深300",
+    stockCode: "1B0300",
+    currentPrice: "45757.90",
+    changeAmount: "-89.12",
+    changePercent: "-0.19%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c5.png",
+    stockName: "上证50",
+    stockCode: "1B0011",
+    currentPrice: "45757.90",
+    changeAmount: "+234.56",
+    changePercent: "+0.52%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c6.png",
+    stockName: "科创50",
+    stockCode: "1B0688",
+    currentPrice: "22333.96",
+    changeAmount: "+156.78",
+    changePercent: "+0.71%",
+    isRising: true,
+  },
+]);

 // 亚太指数数据
 const asiaIndexes = ref([
-    {
-        flagIcon: '/static/c7.png',
-        indexName: '日经225',
-        currentPrice: '28456.78',
-        changeAmount: '+234.56',
-        changePercent: '+0.83%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c8.png',
-        indexName: '韩国KOSPI',
-        currentPrice: '2567.89',
-        changeAmount: '-12.34',
-        changePercent: '-0.48%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c9.png',
-        indexName: '印度孟买',
-        currentPrice: '65432.10',
-        changeAmount: '+456.78',
-        changePercent: '+0.70%',
-        isRising: true
-    }
-])
+  {
+    flagIcon: "/static/c7.png",
+    stockName: "日经225",
+    stockCode: "noCode",
+    currentPrice: "28456.78",
+    changeAmount: "+234.56",
+    changePercent: "+0.83%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c8.png",
+    stockName: "韩国KOSPI",
+    stockCode: "noCode",
+    currentPrice: "2567.89",
+    changeAmount: "-12.34",
+    changePercent: "-0.48%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c9.png",
+    stockName: "印度孟买",
+    stockCode: "noCode",
+    currentPrice: "65432.10",
+    changeAmount: "+456.78",
+    changePercent: "+0.70%",
+    isRising: true,
+  },
+]);

 // 美洲指数数据
 const americaIndexes = ref([
-    {
-        flagIcon: '/static/c7.png',
-        indexName: '道琼斯指数',
-        currentPrice: '34567.89',
-        changeAmount: '+123.45',
-        changePercent: '+0.36%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c8.png',
-        indexName: '纳斯达克',
-        currentPrice: '13456.78',
-        changeAmount: '-67.89',
-        changePercent: '-0.50%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c9.png',
-        indexName: '标普500',
-        currentPrice: '4234.56',
-        changeAmount: '+23.45',
-        changePercent: '+0.56%',
-        isRising: true
-    }
-])
+  {
+    flagIcon: "/static/c7.png",
+    stockName: "道琼斯指数",
+    stockCode: "noCode",
+    currentPrice: "34567.89",
+    changeAmount: "+123.45",
+    changePercent: "+0.36%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c8.png",
+    stockName: "纳斯达克",
+    stockCode: "noCode",
+    currentPrice: "13456.78",
+    changeAmount: "-67.89",
+    changePercent: "-0.50%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c9.png",
+    stockName: "标普500",
+    stockCode: "noCode",
+    currentPrice: "4234.56",
+    changeAmount: "+23.45",
+    changePercent: "+0.56%",
+    isRising: true,
+  },
+]);

 // 计算属性：内容区域顶部位置
 const contentTopPosition = computed(() => {
-    const statusBarHeight = iSMT.value || 0
-    const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100
-    return statusBarHeight + currentHeaderHeight
-})
+  const statusBarHeight = iSMT.value || 0;
+  const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100;
+  return statusBarHeight + currentHeaderHeight;
+});

 // 方法：返回上一页
 const goBack = () => {
-    uni.navigateBack()
-}
+  uni.navigateBack();
+};

 // 方法：搜索输入
 const onSearchInput = (e) => {
-    searchValue.value = e.detail.value
-}
+  searchValue.value = e.detail.value;
+};

 // 方法：清除搜索
 const clearSearch = () => {
-    searchValue.value = ''
-}
+  searchValue.value = "";
+};

 // 方法：查看更多
 const viewMore = (market) => {
-	console.log('查看更多:', market)
-	uni.navigateTo({
-		url: `/pages/home/marketDetail?market=${market}`
-	})
-}
+  console.log("查看更多:", market);
+  uni.navigateTo({
+    url: `/pages/home/marketDetail?market=${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}`
-    // })
-}
+  console.log("查看指数详情:", item.stockName);
+  // uni.showToast({
+  //     title: `查看 ${item.stockName} 详情`,
+  //     icon: 'none',
+  //     duration: 2000
+  // })
+  // 这里可以跳转到具体的指数详情页面
+  uni.navigateTo({
+    url: `/pages/home/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
+  });
+};

 // 生命周期：页面挂载
 onMounted(() => {
-    // 获取系统信息
-    const systemInfo = uni.getSystemInfoSync()
-    iSMT.value = systemInfo.statusBarHeight || 0
-
-    console.log('全球指数页面加载完成')
-    // 动态计算header实际高度
-    uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
-        if (rect) {
-            headerHeight.value = rect.height
-            console.log('Header实际高度:', headerHeight.value, 'px')
-        }
-    }).exec()
-    // 检测warn文字是否溢出
-    checkWarnTextOverflow()
-})
+  // 获取系统信息
+  const systemInfo = uni.getSystemInfoSync();
+  iSMT.value = systemInfo.statusBarHeight || 0;
+
+  console.log("全球指数页面加载完成");
+  // 动态计算header实际高度
+  uni
+    .createSelectorQuery()
+    .select(".header_fixed")
+    .boundingClientRect((rect) => {
+      if (rect) {
+        headerHeight.value = rect.height;
+        console.log("Header实际高度:", headerHeight.value, "px");
+      }
+    })
+    .exec();
+  // 检测warn文字是否溢出
+  checkWarnTextOverflow();
+});

 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
-    if (newHeight > 0) {
-        const systemInfo = uni.getSystemInfoSync()
-        const windowHeight = systemInfo.windowHeight
-        const statusBarHeight = systemInfo.statusBarHeight || 0
-        const footerHeight = 100
-
-        contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-        console.log('重新计算contentHeight:', contentHeight.value)
-    }
-})
+  if (newHeight > 0) {
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
+
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
+  }
+});
 </script>

 <style lang="scss" scoped>
 .main {
-    position: relative;
-    height: 100vh;
-    overflow: hidden;
-    background-color: #f5f5f5;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f5f5f5;
 }

 /* 状态栏占位 */
 .top {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1001;
-    background-color: #ffffff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+  background-color: #ffffff;
 }

 /* 固定头部样式 */
 .header_fixed {
-    position: fixed;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    background-color: #ffffff;
-    padding: 20rpx 0 0 0;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #ffffff;
+  padding: 20rpx 0 0 0;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }

 .header_content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 80rpx;
-    padding: 0 20rpx;
-    margin-bottom: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80rpx;
+  padding: 0 20rpx;
+  margin-bottom: 10rpx;
 }

 .header_back {
-    margin-right: 20rpx;
-    width: 25rpx;
-    height: 30rpx;
+  margin-right: 20rpx;
+  width: 25rpx;
+  height: 30rpx;
 }

 .header_back image {
-    width: 25rpx;
-    height: 30rpx;
+  width: 25rpx;
+  height: 30rpx;
 }

 .header_input_wrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin: 0 20rpx 0 0;
-    height: 70rpx;
-    border-radius: 35rpx;
-    background-color: #ffffff;
-    border: 1rpx solid #e9ecef;
-    padding: 0 80rpx 0 30rpx;
-    font-size: 28rpx;
-    color: #5c5c5c;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0 20rpx 0 0;
+  height: 70rpx;
+  border-radius: 35rpx;
+  background-color: #ffffff;
+  border: 1rpx solid #e9ecef;
+  padding: 0 80rpx 0 30rpx;
+  font-size: 28rpx;
+  color: #5c5c5c;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }

 .search_icon {
-    width: 40rpx;
-    height: 40rpx;
-    opacity: 0.6;
+  width: 40rpx;
+  height: 40rpx;
+  opacity: 0.6;
 }

 .header_input {
-    margin-left: 10rpx;
+  margin-left: 10rpx;
 }

 .header_icons {
-    display: flex;
-    align-items: center;
-    gap: 15rpx;
+  display: flex;
+  align-items: center;
+  gap: 15rpx;
 }

 .header_icon {
-    width: 40rpx;
-    height: 40rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

 .header_icon image {
-    width: 40rpx;
-    height: 40rpx;
+  width: 40rpx;
+  height: 40rpx;
 }

-
 .warn {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 10rpx;
-    font-size: 28rpx;
-    color: #666666;
-    padding: 20rpx;
-    max-width: 100%;
-    overflow: hidden;
-    position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10rpx;
+  font-size: 28rpx;
+  color: #666666;
+  padding: 20rpx;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
 }

 .warn image {
-    width: 40rpx;
-    height: 40rpx;
-    flex-shrink: 0;
-    /* 防止图片被压缩 */
-    position: relative;
-    z-index: 2;
-    /* 确保图片在最上层 */
+  width: 40rpx;
+  height: 40rpx;
+  flex-shrink: 0;
+  /* 防止图片被压缩 */
+  position: relative;
+  z-index: 2;
+  /* 确保图片在最上层 */
 }

 .warn_text_container {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    min-width: 0;
-    /* 允许容器收缩 */
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
+  /* 允许容器收缩 */
 }

 .warn_text {
-    display: block;
-    white-space: nowrap;
-    will-change: transform;
-    /* 优化动画性能 */
+  display: block;
+  white-space: nowrap;
+  will-change: transform;
+  /* 优化动画性能 */
 }

 /* 文字滚动动画 */
@keyframes scrollText {
-    0% {
-        transform: translateX(0);
-    }
+  0% {
+    transform: translateX(0);
+  }

-    20% {
-        transform: translateX(0);
-    }
+  20% {
+    transform: translateX(0);
+  }

-    80% {
-        transform: translateX(-85%);
-    }
+  80% {
+    transform: translateX(-85%);
+  }

-    100% {
-        transform: translateX(-85%);
-    }
+  100% {
+    transform: translateX(-85%);
+  }
 }

 /* 当文字超长时启用滚动动画 */
 .warn_text.scroll-active {
-    animation: scrollText 12s linear infinite;
-    animation-delay: 2s;
-    /* 延迟2秒开始滚动，让用户先看到开头 */
+  animation: scrollText 12s linear infinite;
+  animation-delay: 2s;
+  /* 延迟2秒开始滚动，让用户先看到开头 */
 }

 /* 内容区域 */
 .content {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 120rpx;
-    background-color: #f5f5f5;
-    padding: 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 120rpx;
+  background-color: #f5f5f5;
+  padding: 0;
 }

 /* 市场分组 */
 .market-section {
-    background-color: white;
-    border-radius: 20rpx;
+  background-color: white;
+  border-radius: 20rpx;
 }

 .market-header {
-    margin: 20rpx 20rpx 0 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10rpx;
-    padding-bottom: 10rpx;
-    border-bottom: 2rpx solid #f0f0f0;
+  margin: 20rpx 20rpx 0 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10rpx;
+  padding-bottom: 10rpx;
+  border-bottom: 2rpx solid #f0f0f0;
 }

 .market-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #333;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
 }

 .market-more {
-    display: flex;
-    align-items: center;
-    gap: 8rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
 }

 .more-text {
-    font-size: 24rpx;
-    color: #666;
+  font-size: 24rpx;
+  color: #666;
 }

 .more-arrow {
-    font-size: 20rpx;
-    color: #666;
-    font-weight: bold;
+  font-size: 20rpx;
+  color: #666;
+  font-weight: bold;
 }

 /* 三列卡片网格 */
 .cards-grid-three {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }

 .card-item {
-    background-color: white;
-    border-radius: 16rpx;
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background-color: white;
+  border-radius: 16rpx;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .card-item:active {
-    transform: scale(0.98);
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
+  transform: scale(0.98);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
 }

 /* 底部安全区域 */
 .bottom-safe-area {
-    height: 40rpx;
-    background-color: transparent;
+  height: 40rpx;
+  background-color: transparent;
 }

 /* 底部导航栏 */
 .static-footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
 }

 /* 响应式设计 */
@media (max-width: 400rpx) {
-    .cards-grid-three {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  .cards-grid-three {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
-</style>
+</style>
--- a/pages/home/marketCondition.vue
+++ b/pages/home/marketCondition.vue
--- a/pages/home/marketDetail.vue
+++ b/pages/home/marketDetail.vue
@ -1,471 +1,475 @@
+<!-- @format -->
+
 <template>
-	<view class="main">
-		<!-- 自定义导航栏 -->
-		<view class="header_fixed" :style="{ top: iSMT + 'px' }">
-			<view class="header-content">
-				<view class="header-left" @click="goBack">
-					<text class="back-text">‹</text>
-				</view>
-				<view class="header-center">
-					<text class="header-title">{{ marketTitle }}</text>
-				</view>
-				<view class="header-right">
-					<image src="/static/marketSituation-image/search.png" class="header-icon" mode="aspectFit"></image>
-					<text class="more-text">···</text>
-				</view>
-			</view>
-			<!-- 表头 -->
-			<view class="table-header">
-				<view class="header-item name-column">
-					<text class="header-text">名称</text>
-				</view>
-				<view class="header-item price-column" @click="sortByPrice">
-					<text class="header-text">最新</text>
-					<text class="sort-icon">{{ sortType === 'price' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
-				</view>
-				<view class="header-item change-column" @click="sortByChange">
-					<text class="header-text">涨幅</text>
-					<text class="sort-icon">{{ sortType === 'change' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
-				</view>
-			</view>
-		</view>
-
-		<!-- 内容区域 -->
-		<scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
-			
-
-			<!-- 股票列表 -->
-			<view class="stock-list">
-				<view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index"
-					@click="viewStockDetail(stock)">
-					<view class="stock-cell name-column">
-						<view class="stock-name">{{ stock.name }}</view>
-						<view class="stock-code">{{ stock.code }}</view>
-					</view>
-					<view class="stock-cell price-column">
-						<text class="stock-price"
-							:class="stock.isRising ? 'rising' : 'falling'">
-							{{ typeof stock.price === 'number' ? stock.price.toFixed(2) : stock.price }}
-						</text>
-					</view>
-					<view class="stock-cell change-column">
-						<text class="stock-change"
-							:class="stock.isRising ? 'rising' : 'falling'">
-							{{ stock.change || stock.changePercent }}
-						</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 底部安全区域 -->
-			<!-- <view class="bottom-safe-area"></view> -->
-		</scroll-view>
-	</view>
-
-	<!-- 底部导航栏 -->
-	<!-- <footerBar class="static-footer" :type="'marketSituation'"></footerBar> -->
+  <view class="main">
+    <!-- 自定义导航栏 -->
+    <view class="header_fixed" :style="{ top: iSMT + 'px' }">
+      <view class="header-content">
+        <view class="header-left" @click="goBack">
+          <text class="back-text">‹</text>
+        </view>
+        <view class="header-center">
+          <text class="header-title">{{ marketTitle }}</text>
+        </view>
+        <view class="header-right">
+          <image src="/static/marketSituation-image/search.png" class="header-icon" mode="aspectFit"></image>
+          <text class="more-text">···</text>
+        </view>
+      </view>
+      <!-- 表头 -->
+      <view class="table-header">
+        <view class="header-item name-column">
+          <text class="header-text">名称</text>
+        </view>
+        <view class="header-item price-column" @click="sortByPrice">
+          <text class="header-text">最新</text>
+          <text class="sort-icon">{{ sortType === "price" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
+        </view>
+        <view class="header-item change-column" @click="sortByChange">
+          <text class="header-text">涨幅</text>
+          <text class="sort-icon">{{ sortType === "change" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
+      <!-- 股票列表 -->
+      <view class="stock-list">
+        <view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index" @click="viewStockDetail(stock)">
+          <view class="stock-cell name-column">
+            <view class="stock-name">{{ stock.stockName }}</view>
+            <view class="stock-code">{{ stock.stockCode }}</view>
+          </view>
+          <view class="stock-cell price-column">
+            <text class="stock-price" :class="stock.isRising ? 'rising' : 'falling'">
+              {{ typeof stock.price === "number" ? stock.price.toFixed(2) : stock.price }}
+            </text>
+          </view>
+          <view class="stock-cell change-column">
+            <text class="stock-change" :class="stock.isRising ? 'rising' : 'falling'">
+              {{ stock.change || stock.changePercent }}
+            </text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部安全区域 -->
+      <!-- <view class="bottom-safe-area"></view> -->
+    </scroll-view>
+  </view>
+
+  <!-- 底部导航栏 -->
+  <!-- <footerBar class="static-footer" :type="'marketSituation'"></footerBar> -->
 </template>

 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-import footerBar from '@/components/footerBar.vue'
+import { ref, computed, onMounted, watch } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import footerBar from "@/components/footerBar.vue";

 // 响应式数据
-const iSMT = ref(0)
-const headerHeight = ref(80)
-const marketType = ref('america')
-const marketTitle = ref('美洲')
-const sortType = ref('') // 排序类型：'price' 或 'change'
-const sortOrder = ref('desc') // 排序顺序：'asc' 或 'desc'
+const iSMT = ref(0);
+const headerHeight = ref(80);
+const marketType = ref("america");
+const marketTitle = ref("美洲");
+const sortType = ref(""); // 排序类型：'price' 或 'change'
+const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'

 // 股票数据
 const stockList = ref([
-	{
-		name: 'Telecommunication',
-		code: '888607',
-		price: 1349.47,
-		change: '+7.67%',
-		isRising: true
-	},
-	{
-		name: 'Other',
-		code: '888607',
-		price: 1349.47,
-		change: '+6.67%',
-		isRising: true
-	},
-	{
-		name: 'Consumer Discretio...',
-		code: '888610',
-		price: 1349.47,
-		change: '+5.67%',
-		isRising: true
-	},
-	{
-		name: 'Telecommunication',
-		code: '888607',
-		price: 1349.47,
-		change: '+4.67%',
-		isRising: true
-	},
-	{
-		name: 'Other',
-		code: '888611',
-		price: 1359.47,
-		change: '+3.67%',
-		isRising: true
-	},
-	{
-		name: 'Consumer Discretio...',
-		code: '888610',
-		price: 1349.47,
-		change: '+2.67%',
-		isRising: true
-	},
-	{
-		name: 'Telecommunication',
-		code: '888607',
-		price: 1349.47,
-		change: '+1.67%',
-		isRising: true
-	},
-	{
-		name: 'Other',
-		code: '888611',
-		price: 1009.98,
-		change: '-1.67%',
-		isRising: false
-	},
-	{
-		name: 'Consumer Discretio...',
-		code: '888610',
-		price: 1009.98,
-		change: '-0.67%',
-		isRising: false
-	},
-	{
-		name: 'Telecommunication',
-		code: '888607',
-		price: 1009.98,
-		change: '-0.67%',
-		isRising: false
-	},
-	{
-		name: 'Other',
-		code: '888611',
-		price: 1009.98,
-		change: '-1.67%',
-		isRising: false
-	},
-	{
-		name: 'Consumer Discretio...',
-		code: '888610',
-		price: 1009.98,
-		change: '-4.67%',
-		isRising: false
-	},
-	{
-		name: 'Consumer Discretio...',
-		code: '888610',
-		price: 1009.98,
-		change: '-3.67%',
-		isRising: false
-	},
-	{
-		name: 'Consumer Discretio...',
-		code: '888610',
-		price: 1009.98,
-		change: '-3.67%',
-		isRising: false
-	}
-])
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+7.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+6.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1349.47,
+    change: "+5.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+4.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888611",
+    price: 1359.47,
+    change: "+3.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1349.47,
+    change: "+2.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+1.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888611",
+    price: 1009.98,
+    change: "-1.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-0.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1009.98,
+    change: "-0.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888611",
+    price: 1009.98,
+    change: "-1.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-4.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-3.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-3.67%",
+    isRising: false,
+  },
+]);

 // 计算属性
 const contentTopPosition = computed(() => {
-	return iSMT.value + headerHeight.value
-})
+  return iSMT.value + headerHeight.value;
+});

 const sortedStockList = computed(() => {
-	console.log('计算sortedStockList，原始数据长度:', stockList.value.length);
-	let list = [...stockList.value]
-	
-	if (sortType.value === 'price') {
-		list.sort((a, b) => {
-			return sortOrder.value === 'asc' ? a.price - b.price : b.price - a.price
-		})
-	} else if (sortType.value === 'change') {
-		list.sort((a, b) => {
-			const aChange = parseFloat(a.change.replace(/[+%-]/g, ''))
-			const bChange = parseFloat(b.change.replace(/[+%-]/g, ''))
-			return sortOrder.value === 'asc' ? aChange - bChange : bChange - aChange
-		})
-	}
-	
-	console.log('排序后数据长度:', list.length);
-	return list
-})
+  console.log("计算sortedStockList，原始数据长度:", stockList.value.length);
+  let list = [...stockList.value];
+
+  if (sortType.value === "price") {
+    list.sort((a, b) => {
+      return sortOrder.value === "asc" ? a.price - b.price : b.price - a.price;
+    });
+  } else if (sortType.value === "change") {
+    list.sort((a, b) => {
+      const aChange = parseFloat(a.change.replace(/[+%-]/g, ""));
+      const bChange = parseFloat(b.change.replace(/[+%-]/g, ""));
+      return sortOrder.value === "asc" ? aChange - bChange : bChange - aChange;
+    });
+  }
+
+  console.log("排序后数据长度:", list.length);
+  return list;
+});

 // 页面加载时接收参数
 onLoad((options) => {
-	if (options && options.market) {
-		marketType.value = options.market
-		switch (options.market) {
-			case 'america':
-				marketTitle.value = '美洲'
-				break
-			case 'asia':
-				marketTitle.value = '亚太'
-				break
-			case 'asia-china':
-				marketTitle.value = '亚太-中华'
-				break
-			default:
-				marketTitle.value = '全球指数'
-		}
-	}
-})
+  if (options && options.market) {
+    marketType.value = options.market;
+    switch (options.market) {
+      case "america":
+        marketTitle.value = "美洲";
+        break;
+      case "asia":
+        marketTitle.value = "亚太";
+        break;
+      case "asia-china":
+        marketTitle.value = "亚太-中华";
+        break;
+      default:
+        marketTitle.value = "全球指数";
+    }
+  }
+});

 // 方法
 const goBack = () => {
-	uni.navigateBack()
-}
+  uni.navigateBack();
+};

 const sortByPrice = () => {
-	if (sortType.value === 'price') {
-		sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
-	} else {
-		sortType.value = 'price'
-		sortOrder.value = 'desc'
-	}
-}
+  if (sortType.value === "price") {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+  } else {
+    sortType.value = "price";
+    sortOrder.value = "desc";
+  }
+};

 const sortByChange = () => {
-	if (sortType.value === 'change') {
-		sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
-	} else {
-		sortType.value = 'change'
-		sortOrder.value = 'desc'
-	}
-}
+  if (sortType.value === "change") {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+  } else {
+    sortType.value = "change";
+    sortOrder.value = "desc";
+  }
+};

 const viewStockDetail = (stock) => {
-	console.log('查看股票详情:', stock)
-	// 这里可以跳转到股票详情页面
-}
+  console.log("查看股票详情:", stock);
+  // 这里可以跳转到股票详情页面
+  uni.navigateTo({
+    url: `/pages/home/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(stock))}`,
+  });
+};

 onMounted(() => {
-	// 获取状态栏高度
-	iSMT.value = uni.getSystemInfoSync().statusBarHeight;
-	// 动态计算header实际高度
-    uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
-        if (rect) {
-            headerHeight.value = rect.height
-            console.log('Header实际高度:', headerHeight.value, 'px')
-        }
-    }).exec()
-})
+  // 获取状态栏高度
+  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+  // 动态计算header实际高度
+  uni
+    .createSelectorQuery()
+    .select(".header_fixed")
+    .boundingClientRect((rect) => {
+      if (rect) {
+        headerHeight.value = rect.height;
+        console.log("Header实际高度:", headerHeight.value, "px");
+      }
+    })
+    .exec();
+});

 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
-    if (newHeight > 0) {
-        const systemInfo = uni.getSystemInfoSync()
-        const windowHeight = systemInfo.windowHeight
-        const statusBarHeight = systemInfo.statusBarHeight || 0
-        const footerHeight = 100
-
-        contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-        console.log('重新计算contentHeight:', contentHeight.value)
-    }
-})
+  if (newHeight > 0) {
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
+
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
+  }
+});
 </script>

 <style scoped>
 .main {
-	width: 100%;
-	height: 100vh;
-	background-color: #f5f5f5;
-	position: relative;
+  width: 100%;
+  height: 100vh;
+  background-color: #f5f5f5;
+  position: relative;
 }

 /* 自定义导航栏 */
 .header_fixed {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 1000;
-	background-color: #ffffff;
-	border-bottom: 1px solid #f0f0f0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
 }

 .header-content {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 44px;
-	padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 15px;
 }

 .header-left,
 .header-right {
-	width: 60px;
-	display: flex;
-	align-items: center;
+  width: 60px;
+  display: flex;
+  align-items: center;
 }

 .header-left {
-	justify-content: flex-start;
+  justify-content: flex-start;
 }

 .header-right {
-	justify-content: flex-end;
-	gap: 10px;
+  justify-content: flex-end;
+  gap: 10px;
 }

 .back-text {
-	font-size: 24px;
-	color: #333333;
-	font-weight: 500;
-	line-height: 1;
+  font-size: 24px;
+  color: #333333;
+  font-weight: 500;
+  line-height: 1;
 }

 .header-center {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

 .header-title {
-	font-size: 18px;
-	font-weight: 600;
-	color: #333333;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
 }

 .header-icon {
-	width: 20px;
-	height: 20px;
+  width: 20px;
+  height: 20px;
 }

 .more-text {
-	font-size: 20px;
-	color: #666666;
-	font-weight: bold;
+  font-size: 20px;
+  color: #666666;
+  font-weight: bold;
 }

 /* 内容区域 */
 .content {
-	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: #ffffff;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
 }

 /* 表头样式 */
 .table-header {
-	display: flex;
-	padding: 12px 15px;
-	background-color: #f8f9fa;
-	border-bottom: 1px solid #e9ecef;
+  display: flex;
+  padding: 12px 15px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
 }

 .header-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }

 .header-item.name-column {
-	flex: 2;
-	justify-content: flex-start;
+  flex: 2;
+  justify-content: flex-start;
 }

 .header-item.price-column,
 .header-item.change-column {
-	flex: 1;
-	justify-content: center;
+  flex: 1;
+  justify-content: center;
 }

 .header-text {
-	font-size: 14px;
-	color: #666666;
-	font-weight: 500;
+  font-size: 14px;
+  color: #666666;
+  font-weight: 500;
 }

 .sort-icon {
-	margin-left: 4px;
-	font-size: 12px;
-	color: #999999;
+  margin-left: 4px;
+  font-size: 12px;
+  color: #999999;
 }

 /* 股票列表 */
 .stock-list {
-	background-color: #ffffff;
+  background-color: #ffffff;
 }

 .stock-row {
-	display: flex;
-	align-items: center;
-	padding: 12px 15px;
-	border-bottom: 1px solid #f5f5f5;
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  border-bottom: 1px solid #f5f5f5;
 }

 .stock-row:active {
-	background-color: #f8f8f8;
+  background-color: #f8f8f8;
 }

 .stock-cell {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

 .stock-cell.name-column {
-	flex: 2;
-	align-items: flex-start;
+  flex: 2;
+  align-items: flex-start;
 }

 .stock-cell.price-column,
 .stock-cell.change-column {
-	flex: 1;
-	align-items: center;
+  flex: 1;
+  align-items: center;
 }

 .stock-name {
-	font-size: 15px;
-	color: #333333;
-	font-weight: 500;
-	line-height: 1.2;
-	margin-bottom: 2px;
+  font-size: 15px;
+  color: #333333;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 2px;
 }

 .stock-code {
-	font-size: 11px;
-	color: #999999;
-	line-height: 1.2;
+  font-size: 11px;
+  color: #999999;
+  line-height: 1.2;
 }

 .stock-price {
-	font-size: 15px;
-	font-weight: 600;
-	line-height: 1.2;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
 }

 .stock-change {
-	font-size: 13px;
-	font-weight: 500;
-	line-height: 1.2;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
 }

 .rising {
-	color: #00C851;
+  color: #00c851;
 }

 .falling {
-	color: #FF4444;
+  color: #ff4444;
 }

 /* 底部安全区域 */
@ -481,4 +485,4 @@ watch(headerHeight, (newHeight) => {
 	right: 0;
 	z-index: 1000;
 } */
-</style>
+</style>
--- a/pages/home/marketSituation.vue
+++ b/pages/home/marketSituation.vue
--- a/pages/home/member.vue
+++ b/pages/home/member.vue
@ -1,28 +1,294 @@
 <template>
 	<view class="main">
-		<!-- 顶部状态栏占位 -->
-		<view class="top" :style="{height:iSMT+'px'}"></view>
-		<view>我的</view>
+		<view class="top">
+			<view class="bell">
+				<image class="image-bell" src="/static/my/铃铛2.png"></image>
+			</view>
+			<view class="msg">
+				<view class="msg-left">
+					<view class="avatar"></view>
+				</view>
+				<view class="msg-center">
+					<view style="display: flex;">
+						<view class="userInfo">{{ username }}</view>
+						<image class="image-editName" src="/static/my/editName.png"></image>
+					</view>
+					<view class="userId">ID:{{ dccode }}</view>
+				</view>
+				<view class="msg-right">
+					<image class="image-attendance" src="/static/my/签到.png" />
+					<span style="font-size:10px;">签到</span>
+				</view>
+			</view>
+
+			<view class="settings-buttons">
+				<view class="setting-btn" @click="goToMarket">
+					<image src="/static/my/行情设置.png" class="setting-icon" />
+					<text>行情设置</text>
+				</view>
+				<view class="setting-btn" @click="goToGeneral">
+					<image src="/static/my/设置.png" class="setting-icon" />
+					<text>通用设置</text>
+				</view>
+			</view>
+
+			<view class="share" @click="goToShare">
+				<image class="img-share" src="/static/my/share.png" mode="widthFix" />
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="list-item" @click="goToAccount">
+				<image src="/static/my/security.png" class="list-icon" />
+				<text>账号与安全</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="list-item">
+				<image src="/static/my/connection.png" class="list-icon" />
+				<text>联系我们</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="list-item" @click="goToNewVersion">
+				<image src="/static/my/update.png" class="list-icon" />
+				<text>新版本更新</text>
+				<view class="update-tip">有新版本可更新
+					<view class="circle"></view>
+				</view>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="list-item">
+				<image src="/static/my/opinion.png" class="list-icon" />
+				<text>意见反馈</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="list-item" @click="goToAbout">
+				<image src="/static/my/about.png" class="list-icon" />
+				<text>关于DeepChart</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+		</view>
 		<footerBar class="static-footer" :type="type"></footerBar>
 	</view>
 </template>

 <script setup>
-import { ref,onMounted } from 'vue'
-import footerBar from '../../components/footerBar.vue'
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	import {
+		ArrowRight
+	} from '@element-plus/icons-vue'
+	import footerBar from '../../components/footerBar.vue'

-const type = ref('member')
-const iSMT = ref(0)
+	const type = ref('member')
+	const iSMT = ref(0)
+	const username = ref('演示机EVA')
+	const dccode = ref('90047681')
+	const goToGeneral = () => {
+		uni.navigateTo({
+			url: '/pages/setting/general'
+		})
+	}
+	
+	const goToMarket = () => {
+		uni.navigateTo({
+			url: '../setting/market'
+		})
+	}
+	
+	const goToAccount = () => {
+		uni.navigateTo({
+			url:'../setting/account'
+		})
+	}
+	
+	const goToNewVersion = () =>{
+		uni.navigateTo({
+			url:'../setting/newVersion'
+		})
+	}
+	
+	const goToAbout = () =>{
+		uni.navigateTo({
+			url:'../setting/about'
+		})
+	}
+	
+	const goToShare = () =>{
+		uni.navigateTo({
+			url:'../setting/share'
+		})
+	}

-onMounted(() => {
-	// 状态栏高度
-	iSMT.value = uni.getSystemInfoSync().statusBarHeight;
-})
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight
+		console.log('??????????????', iSMT.value)
+	})
 </script>

 <style scoped>
-.static-footer {
-	position: fixed;
-	bottom: 0;
-}
+	.static-footer {
+		position: fixed;
+		bottom: 0;
+	}
+
+	.top {
+		height: 47vh;
+		background-color: white;
+	}
+
+	.bell {
+		height: 9.6vh;
+		display: flex;
+		align-items: flex-end;
+		justify-content: flex-end;
+		padding-right: 50rpx;
+	}
+
+	.image-bell {
+		width: 13px;
+		height: 16px;
+	}
+
+	.msg {
+		height: 10.7vh;
+		display: flex;
+		margin-top: 3vh;
+		margin-bottom: 3vh;
+	}
+
+	.msg-left {
+		width: 33.6vw;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.avatar {
+		width: 175rpx;
+		height: 175rpx;
+		border-radius: 50%;
+		background-color: black;
+	}
+
+	.msg-center {
+		width: 51.7vw;
+		padding-left: 2.5vh;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.userInfo {
+		font-size: 20px;
+	}
+
+	.userId {
+		font-size: 14px;
+		margin-top: 1vh;
+	}
+
+	.image-editName {
+		width: 40rpx;
+		height: 40rpx;
+		margin-left: 2vw;
+	}
+
+	.msg-right {
+		width: 14.7vw;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.image-attendance {
+		width: 43rpx;
+		height: 43rpx;
+	}
+
+	.settings-buttons {
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.setting-btn {
+		width: 349rpx;
+		height: 135rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgb(243, 243, 243);
+		border-radius: 8%;
+	}
+
+	.setting-icon {
+		width: 64.7rpx;
+		height: 64.7rpx;
+		margin-right: 25rpx;
+	}
+
+	.setting-btn text {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #333;
+	}
+
+	.share {
+		height: 12.6vh;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.img-share {
+		width: 720rpx;
+		height: 160rpx;
+	}
+
+	.bottom {
+		height: 44.5vh;
+		margin-top: 1vh;
+		background-color: rgb(255, 255, 255);
+	}
+
+	.list-item {
+		width: 670rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin: 0rpx 40rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+	
+	.list-item:last-child{
+		border-bottom: none;
+	}
+
+	.list-icon {
+		width: 42rpx;
+		height: 42rpx;
+		margin-right: 18rpx;
+	}
+
+	.arrow {
+		margin-left: auto;
+	}
+
+	.update-tip {
+		display: flex;
+		color: #999;
+		font-size: 24rpx;
+		align-items: center;
+		margin-left: 200rpx;
+		justify-content: center;
+	}
+
+	.circle {
+		width: 10rpx;
+		height: 10rpx;
+		border-radius: 50%;
+		background-color: red;
+		margin-left: 10rpx;
+	}
 </style>
--- a/pages/setting/about.vue
+++ b/pages/setting/about.vue
@ -0,0 +1,86 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view style="height:1.5vh" />
+		<view class="top">
+			<img src="/static/my/aboutDC.png"></img>
+		</view>
+
+		<view class="bottom">
+			<view class="bottom-list" @click="goToIntroduce">
+				<text class="label">产品介绍</text>
+				<uni-icons type="arrowright" size="16" />
+			</view>
+			<view class="bottom-list">
+				<text class="label">免责声明</text>
+				<uni-icons type="arrowright" size="16" />
+			</view>
+			<view class="bottom-list">
+				<text class="label">隐私政策</text>
+				<uni-icons type="arrowright" size="16" />
+			</view>
+			<view class="bottom-list">
+				<text class="label">服务协议</text>
+				<uni-icons type="arrowright" size="16" />
+			</view>
+			<view class="bottom-list">
+				<text class="label">鼓励一下</text>
+				<uni-icons type="arrowright" size="16" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const goToIntroduce = () =>{
+		uni.navigateTo({
+			url: '../setting/introduce'
+		})
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		height: 23vh;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: white;
+	}
+
+	.bottom {
+		height: 35vh;
+		background-color: white;
+	}
+
+	.bottom-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 40rpx;
+		padding: 0 10rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.bottom-list:last-child {
+		border-bottom: none;
+	}
+	
+	.label{
+		flex:1;
+	}
+</style>
--- a/pages/setting/account.vue
+++ b/pages/setting/account.vue
@ -0,0 +1,213 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view style="height:1.5vh;"></view>
+
+		<view class="setting-list">
+			<view class="setting-item">
+				<text class="item-label">头像</text>
+				<view class="item-right">
+					<image src="/static/avatar.png" class="avatar" mode="aspectFill"></image>
+					<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
+				</view>
+			</view>
+			<view class="setting-item">
+				<text class="item-label">昵称</text>
+				<view class="item-right">
+					<text class="item-text">DeepChart</text>
+					<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
+				</view>
+			</view>
+			<view class="setting-item">
+				<text class="item-label">ID</text>
+				<view class="item-right">
+					<text class="item-text">{{ jwcode }}</text>
+					<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
+				</view>
+			</view>
+			<view class="setting-item">
+				<text class="item-label">密码</text>
+				<view class="item-right">
+					<text class="item-text">qwertyuiop</text>
+					<uni-icons type="eye" size="16" class="eye-icon"></uni-icons>
+				</view>
+			</view>
+			<view class="setting-item" @click="goToPassword">
+				<text class="item-label">修改密码</text>
+				<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
+			</view>
+			<view class="setting-item">
+				<text class="item-label">注销账号</text>
+				<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
+			</view>
+			<view class="setting-item" @click="goToBind">
+				<text class="item-label">绑定账号</text>
+				<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
+			</view>
+		</view>
+
+		<view style="height:1.5vh;"></view>
+
+		<view class="logout" @click="showLogout = true">
+			<text>退出登录</text>
+		</view>
+
+		<view class="logout-confirm" v-if="showLogout">
+			<view class="logoutDialog">
+				<view class="tips">是否退出登录</view>
+				<view class="tips-button">
+					<button class="confirm-btn" @click="handleConfirmLogout">确认</button>
+					<button class="cancel-btn" @click="showLogout = false">取消</button>
+				</view>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const jwcode = ref('90047681')
+	const showLogout = ref(false)
+	
+	const handleConfirmLogout = () => {
+		showLogout.value = false
+		uni.showToast({
+			title: '退出登录成功',
+			icon: 'none',
+		})
+	}
+	
+	const goToBind = () =>{
+		uni.navigateTo({
+			url:'../setting/bind'
+		})
+	}
+	
+	const goToPassword = () =>{
+		uni.navigateTo({
+			url:'../setting/password'
+		})
+	}
+
+	onMounted(() => {
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+	})
+</script>
+
+<style scoped>
+	.setting-list {
+		height: 49vh;
+		background-color: #fff;
+	}
+
+	.setting-item {
+		display: flex;
+		align-items: center;
+		height: 7vh;
+		padding: 0 40rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.setting-item:last-child {
+		border-bottom: none;
+	}
+
+	.item-label {
+		font-size: 28rpx;
+		flex: 1;
+	}
+
+	.item-right {
+		display: flex;
+		align-items: center;
+	}
+
+	.avatar {
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		margin-right: 20rpx;
+		background-color: #999;
+	}
+
+	.item-text {
+		margin-right: 20rpx;
+		font-size: 28rpx;
+	}
+
+	.arrow,
+	.eye-icon {
+		color: #999;
+	}
+
+	.logout {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 7vh;
+		font-size: 28rpx;
+		color: #f56c6c;
+		background-color: white;
+	}
+
+	.logout-confirm {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 999;
+	}
+
+	.logoutDialog {
+		width: 500rpx;
+		background-color: #fff;
+		border-radius: 12rpx;
+		padding: 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.tips {
+		font-size: 32rpx;
+		margin-bottom: 40rpx;
+	}
+
+	.tips-button {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	.confirm-btn,
+	.cancel-btn {
+		width: 180rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+		border-radius: 30rpx;
+		font-size: 28rpx;
+	}
+
+	.confirm-btn {
+		background-color: #fff;
+		color: #000;
+		border: 1rpx solid #ddd;
+	}
+
+	.cancel-btn {
+		background-color: #000;
+		color: #fff;
+		border: none;
+	}
+</style>
--- a/pages/setting/bind.vue
+++ b/pages/setting/bind.vue
@ -0,0 +1,85 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view style="height:1.5vh;" />
+
+		<view class="top">
+			<view class="top-list" @click="goToBindPhone">
+				<text class="label">手机号</text>
+				<view class="right">
+					<text style="font-size: 28rpx;">未绑定</text>
+					<uni-icons type="arrowright" size="16" />
+				</view>
+			</view>
+
+			<view class="top-list" @click="goToBindEmail">
+				<text class="label">邮箱</text>
+				<view class="right">
+					<text style="font-size: 28rpx;">analsak@163.com</text>
+					<uni-icons type="arrowright" size="16" />
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const goToBindPhone = () =>{
+		uni.navigateTo({
+			url:'../setting/phone'
+		})
+	}
+	
+	const goToBindEmail = () =>{
+		uni.navigateTo({
+			url:'../setting/email'
+		})
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		height: 14vh;
+		background-color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		margin: 0rpx 40rpx;
+		display: flex;
+		align-items: center;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.top-list:last-child {
+		border: none;
+	}
+
+	.label {
+		font-size: 28rpx;
+		flex: 1;
+	}
+	
+	.right{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
--- a/pages/setting/email.vue
+++ b/pages/setting/email.vue
@ -0,0 +1,142 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view style="height:1.5vh;" />
+
+		<view class="top">
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/bindedEmail.png" />
+					<text class="label">已绑邮箱：{{ email }}</text>
+				</view>
+			</view>
+
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/changeEmail.png" />
+					<text class="label">+86</text>
+					<input type="number" placeholder="请输入您的换绑邮箱" class="input" />
+				</view>
+				<view class="right">
+					<button class="verification" :class="{ 'disabled': gettingCode }" @click="getVerification"
+						:disabled="gettingCode">
+						{{ gettingCode ? `重新发送 ${time}s` : '获取验证码' }}
+					</button>
+				</view>
+			</view>
+
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/verification.png" />
+					<input type="text" placeholder="请输入验证码" class="input" />
+				</view>
+			</view>
+		</view>
+
+		<view class="bottom">
+			<button class="change-btn">换绑</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const email = ref('analsak@16.com')
+	const gettingCode = ref(false)
+	const time = ref(60)
+
+	const getVerification = () => {
+		if (gettingCode.value) return
+		gettingCode.value = true
+
+		time.value = 60
+		const timer = setInterval(() => {
+			time.value--
+			if (time.value <= 0) {
+				clearInterval(timer)
+				gettingCode.value = false
+			}
+		}, 1000)
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		height: auto;
+		background-color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		margin: 0rpx 40rpx;
+		display: flex;
+		align-items: center;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.left {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
+
+	.label {
+		font-size: 28rpx;
+		margin-left: 10rpx;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.input {
+		flex: 1;
+		height: 70rpx;
+		font-size: 29rpx;
+		margin-left: 20rpx;
+	}
+
+	.verification {
+		font-size: 24rpx;
+		border-radius: 10rpx;
+		background-color: rgb(230, 230, 230);
+	}
+
+	.bottom {
+		height: 22vh;
+		background-color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.change-btn {
+		height: 85rpx;
+		width: 610rpx;
+		padding:0 20rpx;
+		background-color: black;
+		color: white;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
--- a/pages/setting/font.vue
+++ b/pages/setting/font.vue
@ -0,0 +1,68 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+		<view class="top">
+			<view class="top-list">
+				<text>标准</text>
+				<radio value="0" class="radio-btn"  activeBackgroundColor="red"
+				 :checked="selectedIndex === 0"  @click="selectFont(0)" />
+			</view>
+			<view class="top-list">
+				<text>中号</text>
+				<radio value="1" class="radio-btn" activeBackgroundColor="red"
+				 :checked="selectedIndex === 1"  @click="selectFont(1)" />
+			</view>
+			<view class="top-list">
+				<text>大号</text>
+				<radio value="2" class="radio-btn"  activeBackgroundColor="red"
+				:checked="selectedIndex === 2"  @click="selectFont(2)" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const selectedIndex = ref(0)
+
+	const selectFont = (index) => {
+		selectedIndex.value = index
+		console.log('看看选中状态',selectedIndex.value)
+	}
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		margin-top: 1.5vh;
+		height: 21vh;
+		background-color: white;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin: 0 40rpx;
+		padding:0 10rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.top-list:last-child {
+		border-bottom: none;
+	}
+
+	.radio-btn {
+		margin-left: auto;
+		transform: scale(0.6);
+	}
+</style>
--- a/pages/setting/general.vue
+++ b/pages/setting/general.vue
@ -0,0 +1,165 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+		<view class="top">
+			<view class="top-list">
+				<text>语言</text>
+				<text class="language">中文（简体）</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="top-list" @click="goToFont">
+				<text>字体大小</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="top-list" @click="goToTheme">
+				<text>主题切换</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+		</view>
+
+
+		<view class="center">
+			<view class="center-list" @click="goToMessage">
+				<text>消息推送</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+		</view>
+
+		<view class="bottom">
+			<view class="bottom-list" @click="goToServer">
+				<text>切换服务器</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="bottom-list" @click="clearCache">
+				<text>清理缓存</text>
+				<text class="cache">{{ cache }}M</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const cache = ref('45.5')
+
+	const goToFont = () => {
+		uni.navigateTo({
+			url: '/pages/setting/font'
+		})
+	}
+
+	const goToTheme = () => {
+		uni.navigateTo({
+			url: '/pages/setting/theme'
+		})
+	}
+
+	const goToMessage = () => {
+		uni.navigateTo({
+			url: '/pages/setting/message'
+		})
+	}
+
+	const goToServer = () => {
+		uni.navigateTo({
+			url: '/pages/setting/server'
+		})
+	}
+
+	const clearCache = () => {
+		cache.value = 0
+		uni.showToast({
+			title: '清理成功',
+			icon: 'success',
+			duration: 1500
+		})
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		margin-top: 1.5vh;
+		height: 21vh;
+		background-color: white;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin: 0 40rpx;
+		padding: 0 10rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.top-list:last-child {
+		border-bottom: none;
+	}
+
+	.language {
+		margin-left: 55%;
+		font-size: 14px;
+		color: rgb(203, 203, 203);
+	}
+
+	.arrow {
+		margin-left: auto;
+	}
+
+	.center {
+		background-color: white;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin-top: 1vh;
+	}
+
+	.center-list {
+		width: 630rpx;
+		margin: 0rpx 40rpx;
+		display: flex;
+		padding: 0 10rpx;
+	}
+
+	.center-list>.arrow {
+		margin-right: 0;
+	}
+
+	.bottom {
+		height: 13.5vh;
+		background-color: white;
+		margin-top: 1vh;
+	}
+
+	.bottom-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin: 0 40rpx;
+		padding: 0 10rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.cache {
+		margin-left: 55%;
+		font-size: 14px;
+		color: rgb(203, 203, 203);
+	}
+
+	.bottom-list:last-child {
+		border-bottom: none;
+	}
+</style>
--- a/pages/setting/introduce.vue
+++ b/pages/setting/introduce.vue
@ -0,0 +1,76 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view style="height:1.5vh" />
+		<view class="top">
+			<img src="/static/my/aboutDC.png"></img>
+		</view>
+
+		<view class="bottom">
+			<view class="title">1.产品定位</view>
+			<view class="main-text">DeepChart：全球最懂机构行为的AI（你的AI投资伙伴）强化"深度分析"
+				的品牌标签（DeepChart=全球最懂机构行为的AI），主打"深度解读机构行为"的APP。</view>
+
+			<view class="title">2.产品介绍</view>
+			<view class="main-text">DeepChart是一款以"Al智能体”为决策核心的智能投资分析平台，
+				专注于深度研究机构行为，专为全球散户投资者量身打造。它重新定义了人与投资工具之间的关系，
+				是一个真正懂投资、懂市场、更懂用户的AI投资伙伴。</view>
+
+			<view class="title">3.产品理念</view>
+			<view class="main-text">从“人找信息”到“AI智能体替你思考和管理”。</view>
+
+			<view class="title">4.功能定位——全景AI决策体系</view>
+			<view class="main-text">黄其振是大笨蛋</view>
+			<view class="main-text">李建霖是大笨蛋</view>
+			<view class="main-text">double是大笨蛋</view>
+						<view class="main-text">张鲁平是大笨蛋</view>
+			<view style="height:1.5vh;background-color: white;" />
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		height: 26vh;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: white;
+	}
+
+	.bottom {
+		height: 35vh;
+		padding: 0 60rpx;
+		background-color: white;
+		height: auto;
+	}
+
+	.title {
+		font-size: 30rpx;
+		font-weight: bold;
+		margin-bottom: 20rpx;
+	}
+
+	.main-text {
+		font-size: 27rpx;
+		margin-bottom: 20rpx;
+		color: rgb(122, 122, 122);
+		text-align: justify;
+		text-justify: inter-character;/* 两端对齐哈哈哈哈 */
+	}
+</style>
--- a/pages/setting/market.vue
+++ b/pages/setting/market.vue
@ -0,0 +1,221 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view class="time-share-title">
+			<text>分时设计</text>
+		</view>
+		<view style="height:57.5vh;background-color: white;">
+			<view class="title">A股竞价</view>
+			<view class="top-options">
+				<view class="option-btn" :class="{ 'active': aStockBid === 0 }" @click="aStockBid = 0">
+					<text>智能开启</text>
+					<view class="active-dot" v-if="aStockBid === 0"></view>
+				</view>
+				<view class="option-btn" :class="{ 'active': aStockBid === 1 }" @click="aStockBid = 1">
+					<text>保持开启</text>
+					<view class="active-dot" v-if="aStockBid === 1"></view>
+				</view>
+
+				<view class="option-btn" :class="{ 'active': aStockBid === 2 }" @click="aStockBid = 2">
+					<text>保持关闭</text>
+					<view class="active-dot" v-if="aStockBid === 2"></view>
+				</view>
+			</view>
+
+			<view class="title">K线样式</view>
+			<view class="top-options">
+				<view class="option-btn" :class="{ 'active': kStyle === 0 }" @click="kStyle = 0">
+					<img src="/static/my/common.png" class="kline-icon" />
+					<text>普通</text>
+					<view class="active-dot" v-if="kStyle === 0"></view>
+				</view>
+				<view class="option-btn" :class="{ 'active': kStyle === 1 }" @click="kStyle = 1">
+					<img src="/static/my/outline.png" class="kline-icon" />
+					<text>轮廓图</text>
+					<view class="active-dot" v-if="kStyle === 1"></view>
+				</view>
+				<view class="option-btn" :class="{ 'active': kStyle === 2 }" @click="kStyle = 2">
+					<img src="/static/my/polylines.png" class="kline-icon" />
+					<text>折线图</text>
+					<view class="active-dot" v-if="kStyle === 2"></view>
+				</view>
+			</view>
+
+			<view class="title">除权类型</view>
+			<view class="top-options">
+				<view class="option-btn" :class="{ 'active': exRights === 0 }" @click="exRights = 0">
+					<text>除权</text>
+					<view class="active-dot" v-if="exRights === 0"></view>
+				</view>
+				<view class="option-btn" :class="{ 'active': exRights === 1 }" @click="exRights = 1">
+					<text>普通</text>
+					<view class="active-dot" v-if="exRights === 1"></view>
+				</view>
+				<view class="option-btn" :class="{ 'active': exRights === 2 }" @click="exRights = 2">
+					<text>加权</text>
+					<view class="active-dot" v-if="exRights === 2"></view>
+				</view>
+			</view>
+
+			<view class="title">涨跌颜色</view>
+			<view class="top-options">
+				<view class="option-btn" :class="{ 'active': rfColor === 0 }" @click="rfColor = 0">
+					<view class="color-icon">
+						<img src="/static/my/greenRise.png" class="kline-icon" />
+					</view>
+					<text>绿涨红跌</text>
+					<view class="active-dot" v-if="rfColor === 0"></view>
+				</view>
+				<view class="option-btn" :class="{ 'active': rfColor === 1 }" @click="rfColor = 1">
+					<view class="color-icon">
+						<img src="/static/my/redRise.png" class="kline-icon" />
+					</view>
+					<text>红涨绿跌</text>
+					<view class="active-dot" v-if="rfColor === 1"></view>
+				</view>
+			</view>
+
+			<view class="title">副图指标个数</view>
+			<view class="top-options">
+				<view class="option-btn" :class="{ 'active': indexCount === 0 }" @click="indexCount = 0">
+					<text>1</text>
+				</view>
+				<view class="option-btn" :class="{ 'active': indexCount === 1 }" @click="indexCount = 1">
+					<text>2</text>
+				</view>
+				<view class="option-btn" :class="{ 'active': indexCount === 2 }" @click="indexCount = 2">
+					<text>3</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="indicator-title">
+			<text>指标设置</text>
+		</view>
+		<view class="indicator-list">
+			<view class="indicator-item" v-for="(item, index) in indicatorList" :key="index">
+				<text class="indicator-text">{{ item }}</text>
+				<view class="indicator-icons">
+					<img src="/static/my/setting.png" class="icon" />
+					<img src="/static/my/menu.png" class="icon" />
+				</view>
+			</view>
+			<view style="height:10vh;background-color: white;"></view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const aStockBid = ref(0) // 股票竞价：Stock bidding
+	const kStyle = ref(0) // k线样式
+	const exRights = ref(0) // 除权类型 除权：Ex-rights
+	const rfColor = ref(0) // 涨跌颜色 rise-fall
+	const indexCount = ref(0) // 副图指标个数
+	const indicatorList = ref(['K线', '均线', '成交量', 'KDJ', 'MACD', 'RSI'])
+
+	onMounted(() => {
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+	})
+</script>
+
+<style scoped>
+	.time-share-title {
+		height: 4.5vh;
+		padding: 0 40rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.title {
+		height: 5.5vh;
+		padding: 0 40rpx;
+		display: flex;
+		align-items: center;
+		font-size: 26rpx;
+		color: #666;
+	}
+
+	.top-options {
+		height: 5.5vh;
+		display: flex;
+		padding: 0 40rpx;
+	}
+
+	.option-btn {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1rpx solid #ddd;
+		border-radius: 8rpx;
+		margin: 0 10rpx;
+		padding: 15rpx 0;
+		font-size: 28rpx;
+	}
+
+	.option-btn.active {
+		border-color: red;
+	}
+
+	.active-dot {
+		width: 16rpx;
+		height: 16rpx;
+		background-color: red;
+		border-radius: 50%;
+		margin-left: 10rpx;
+	}
+
+	.kline-icon {
+		margin-right: 10rpx;
+		font-size: 32rpx;
+	}
+
+	.color-icon {
+		margin-right: 10rpx;
+		display: flex;
+		gap: 4rpx;
+	}
+
+	.indicator-title {
+		height: 6vh;
+		padding: 0 40rpx;
+		display: flex;
+		align-items: center;
+	}
+
+	.indicator-list {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		padding: 0 40rpx;
+		background-color: white;
+	}
+
+	.indicator-item {
+		display: flex;
+		align-items: center;
+		height: 7.5vh;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.indicator-text {
+		font-size: 28rpx;
+	}
+
+	.indicator-icons {
+		display: flex;
+		gap: 100rpx;
+		margin-left: auto;
+	}
+
+	.icon {
+		width: 28rpx;
+		height: 28rpx;
+	}
+</style>
--- a/pages/setting/message.vue
+++ b/pages/setting/message.vue
@ -0,0 +1,62 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+		<view class="top">
+			<view class="top-list" @click="goToPush">
+				<text>语言</text>
+				<text class="message" v-if="isMessage">通知已开启</text>
+				<text class="message" v-if="!isMessage">通知未开启</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const isMessage = ref(true)
+	
+	const goToPush = () =>{
+		uni.navigateTo({
+			url: '/pages/setting/push'
+		})
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		margin-top: 1.5vh;
+		height: 7vh;
+		background-color: white;
+		display: flex;
+		justify-content: center;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin: 0rpx 40rpx;
+	}
+
+	.message {
+		margin-left: 60%;
+		font-size: 14px;
+		color: rgb(203, 203, 203);
+	}
+
+	.arrow {
+		margin-left: auto;
+	}
+</style>
--- a/pages/setting/newVersion.vue
+++ b/pages/setting/newVersion.vue
@ -0,0 +1,82 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+		<view style="height:1.5vh;" />
+		<view class="top">
+			<view class="top-list">
+				<text v-if="hasNew === true" class="label">已有新版本</text>
+				<text v-if="hasNew === false" class="label">已是最新版本</text>
+				<view class="right">
+					<text style="font-size: 28rpx;">{{ version }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view style="height:1vh;" />
+
+		<view class="bottom">
+			<button v-if="hasNew === true" class="bottom-btn">立即更新</button>
+			<button v-if="hasNew === false" class="bottom-btn" disabled 
+			style="background-color: rgb(204,204,204);color:white;">暂无更新</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const hasNew = ref(true)
+	const version = ref('2.0')
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		height: 7vh;
+		background-color: white;
+		display: flex;
+		justify-content: center;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin: 0rpx 40rpx;
+	}
+
+	.label {
+		font-size: 28rpx;
+		flex: 1;
+	}
+
+	.bottom {
+		height: 11vh;
+		background-color: white;
+		padding: 0 50rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.bottom-btn {
+		width: 670rpx;
+		height: 84rpx;
+		border-radius: 40rpx;
+		background-color: #000;
+		color: #fff;
+		font-size: 28rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
--- a/pages/setting/nextPwd.vue
+++ b/pages/setting/nextPwd.vue
@ -0,0 +1,144 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view style="height:1.5vh;" />
+
+		<view class="title">
+			<text class="label">确认新密码</text>
+		</view>
+
+		<view class="top">
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/unlock.png" />
+					<input type="password" :type="pwdType" placeholder="请输入新密码" class="input" />
+					<img :src="pwdType === 1 ? '/static/my/hideEye.png' : '/static/my/openEye.png'"
+						@click="changeEye(1)" />
+				</view>
+			</view>
+
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/unlock.png" />
+					<input type="password" :type="pwdType2" placeholder="再次确认" class="input" />
+					<img :src="pwdType === 1 ? '/static/my/hideEye.png' : '/static/my/openEye.png'"
+						@click="changeEye(2)" />
+				</view>
+			</view>
+
+			<text class="tips">密码最少8位数</text>
+		</view>
+
+		<view class="bottom">
+			<button class="change-btn">确认</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+
+	const iSMT = ref(0)
+	const pwdType = ref('password')
+	const pwdType2 = ref('password')
+
+	const changeEye = (type) => {
+		if (type === 1) {
+			pwdType.value = pwdType.value === 'password' ? 'text' : 'password'
+		} else {
+			pwdType2.value = pwdType2.value === 'password' ? 'text' : 'password'
+		}
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.title {
+		height: 8.5vh;
+		background-color: white;
+	}
+
+	.label {
+		height: 8.5vh;
+		font-size: 40rpx;
+		font-weight: bold;
+		display: flex;
+		align-items: center;
+		padding: 0 60rpx;
+	}
+
+	.top {
+		height: auto;
+		background-color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		margin: 0rpx 40rpx;
+		display: flex;
+		align-items: center;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.left {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
+
+	.input {
+		flex: 1;
+		height: 70rpx;
+		font-size: 29rpx;
+		margin-left: 20rpx;
+	}
+
+	.bottom {
+		height: 22vh;
+		background-color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.change-btn {
+		height: 85rpx;
+		width: 610rpx;
+		padding: 0 20rpx;
+		background-color: black;
+		color: white;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.img {
+		position: absolute;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.tips {
+		font-size: 24rpx;
+		color: #999;
+		margin-top: 20rpx;
+		margin-left: 60rpx;
+		align-self: flex-start;
+		/* 这是左对齐 */
+	}
+</style>
--- a/pages/setting/password.vue
+++ b/pages/setting/password.vue
@ -0,0 +1,171 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view class="tab">
+			<view class="tab-item" :class="{active: activeTab === 'email'}" @click="activeTab = 'email'">邮箱</view>
+			<view class="tab-item" :class="{active: activeTab === 'phone'}" @click="activeTab = 'phone'">手机号</view>
+		</view>
+
+		<view class="switch-tab">
+			<view class="input-list" v-if="activeTab === 'email'">
+				<image src="/static/my/changeEmail.png" mode="aspectFit"></image>
+				<input type="text" placeholder="请输入邮箱" class="input" />
+				<button class="code-btn" :class="{disabled: gettingCode}" @click="getCode" :disabled="gettingCode">
+					{{ gettingCode ? `重新发送 ${time}s` : '获取验证码' }}
+				</button>
+			</view>
+
+			<view class="input-list" v-else>
+				<image src="/static/my/changeBindPhone.png" mode="aspectFit"></image>
+				<input type="number" placeholder="请输入手机号" class="input" />
+				<button class="code-btn" :class="{disabled: gettingCode}" @click="getCode" :disabled="gettingCode">
+					{{ gettingCode ? `重新发送 ${time}s` : '获取验证码' }}
+				</button>
+			</view>
+
+			<view class="input-list">
+				<image src="/static/my/verification.png" mode="aspectFit"></image>
+				<input type="text" placeholder="请输入验证码" class="input" />
+			</view>
+		</view>
+
+		<view class="btn-area">
+			<button class="next-btn" @click="goToPwdNext">下一步</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+
+	const iSMT = ref(0)
+	const activeTab = ref('email')
+	const gettingCode = ref(false)
+	const time = ref(60)
+
+	const getCode = () => {
+		if (gettingCode.value) return
+		gettingCode.value = true
+
+		time.value = 60
+
+		const timer = setInterval(() => {
+			time.value--
+			if (time.value <= 0) {
+				clearInterval(timer)
+				gettingCode.value = false
+				time.value = 60
+			}
+		}, 1000)
+	}
+	
+	const goToPwdNext = () =>{
+		uni.navigateTo({
+			url:'../setting/nextPwd'
+		})
+	}
+
+	onMounted(() => {
+		// 获取状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+	})
+</script>
+
+<style>
+	.tab {
+		display: flex;
+		height: 8vh;
+		background-color: #fff;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.tab-item {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 32rpx;
+		position: relative;
+	}
+
+	.tab-item.active {
+		color: #000;
+		font-weight: bold;
+	}
+
+	.tab-item.active::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 40rpx;
+		height: 6rpx;
+		background-color: #000;/* ????? */
+	}
+
+	.switch-tab {
+		background-color: #fff;
+		padding: 0 60rpx;
+	}
+
+	.input-list {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 7vh;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.input-list image {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 20rpx;
+	}
+
+	.input {
+		flex: 1;
+		height: 14vh;
+		font-size: 28rpx;
+	}
+
+	.code-btn {
+		width: 200rpx;
+		height: 60rpx;
+		font-size: 24rpx;
+		border-radius: 10rpx;
+		background-color: #eee;
+		color: #666;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.code-btn.disabled {
+		background-color: #ccc;
+		color: #999;
+	}
+	
+	.btn-area{
+		height:8vh;
+		background-color: white;
+		padding-top: 120rpx;
+	}
+
+
+	.next-btn {
+		width: 610rpx;
+		height: 85rpx;
+		background-color: #000;
+		color: #fff;
+		font-size: 30rpx;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
--- a/pages/setting/phone.vue
+++ b/pages/setting/phone.vue
@ -0,0 +1,143 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+
+		<view style="height:1.5vh;" />
+
+		<view class="top">
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/bindedPhone.png" />
+					<text class="label">已绑手机号：{{ phone }}</text>
+				</view>
+			</view>
+
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/changeBindPhone.png" />
+					<text class="label">+86</text>
+					<input type="number" placeholder="请输入您的换绑手机号" class="input" />
+				</view>
+				<view class="right">
+					<button class="verification" :class="{ 'disabled': gettingCode }" @click="getVerification"
+						:disabled="gettingCode">
+						{{ gettingCode ? `重新发送 ${time}s` : '获取验证码' }}
+					</button>
+				</view>
+			</view>
+
+			<view class="top-list">
+				<view class="left">
+					<img src="/static/my/verification.png" />
+					<input type="text" placeholder="请输入验证码" class="input" />
+				</view>
+			</view>
+		</view>
+
+		<view class="bottom">
+			<button class="change-btn">换绑</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const phone = ref('15105421566')
+	const gettingCode = ref(false)
+	const time = ref(60)
+
+	const getVerification = () => {
+		if (gettingCode.value) return
+		gettingCode.value = true
+
+		time.value = 60
+		
+		const timer = setInterval(() => {
+			time.value--
+			if (time.value <= 0) {
+				clearInterval(timer)
+				gettingCode.value = false
+			}
+		}, 1000)
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		height: auto;
+		background-color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		margin: 0rpx 40rpx;
+		display: flex;
+		align-items: center;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.left {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
+
+	.label {
+		font-size: 28rpx;
+		margin-left: 10rpx;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.input {
+		flex: 1;
+		height: 70rpx;
+		font-size: 29rpx;
+		margin-left: 20rpx;
+	}
+
+	.verification {
+		font-size: 24rpx;
+		border-radius: 10rpx;
+		background-color: rgb(230, 230, 230);
+	}
+
+	.bottom {
+		height: 22vh;
+		background-color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.change-btn {
+		height: 85rpx;
+		width: 610rpx;
+		padding:0 20rpx;
+		background-color: black;
+		color: white;
+		border-radius: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>
--- a/pages/setting/push.vue
+++ b/pages/setting/push.vue
@ -0,0 +1,108 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+		<view class="top">
+			<view class="top-list">
+				<text style="width:180rpx;">公共消息</text>
+				<text class="public">重大咨询、财经要闻等系统提醒</text>
+				<switch class="arrow switch-btn" />
+			</view>
+			<view class="top-list">
+				<text>字体大小</text>
+				<switch class="arrow switch-btn"  />
+			</view>
+		</view>
+
+		<view class="bottom">
+			<view class="bottom-list">
+				<text>盯盘预警</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+			<view class="bottom-list">
+				<text>订阅服务</text>
+				<text class="cache">45.5M</text>
+				<uni-icons type="arrowright" size="16" class="arrow" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		margin-top: 1.5vh;
+		height: 14vh;
+		background-color: white;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 40rpx;
+		padding: 0 10rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.top-list:last-child {
+		border-bottom: none;
+	}
+
+	.switch-btn {
+		width: 100rpx;
+		transform: scale(0.6);
+		transform-origin: center right;
+	}
+
+	.public {
+		width: 450rpx;
+		margin-left: auto;
+		font-size: 10px;
+		color: rgb(203, 203, 203);
+	}
+
+	.arrow {
+		margin-left: auto;
+	}
+
+	.bottom {
+		height: 13.5vh;
+		background-color: white;
+		margin-top: 1vh;
+	}
+
+	.bottom-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		margin: 0 40rpx;
+		padding: 0 10rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.cache {
+		margin-left: 55%;
+		font-size: 14px;
+		color: rgb(203, 203, 203);
+	}
+
+	.bottom-list:last-child {
+		border-bottom: none;
+	}
+</style>
--- a/pages/setting/server.vue
+++ b/pages/setting/server.vue
@ -0,0 +1,87 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+		<view class="top">
+			<view class="top-list">
+				<text>自动选择</text>
+				<radio value="0" class="radio-btn"  activeBackgroundColor="red"
+				 :checked="selectedIndex === 0"  @click="selectFont(0)" />
+			</view>
+			<view class="top-list">
+				<text>新加坡服务器</text>
+				<radio value="1" class="radio-btn"  activeBackgroundColor="red"
+				 :checked="selectedIndex === 1"  @click="selectFont(1)" />
+			</view>
+			<view class="top-list">
+				<text>香港服务器</text>
+				<radio value="2" class="radio-btn"  activeBackgroundColor="red"
+				 :checked="selectedIndex === 2"  @click="selectFont(2)" />
+			</view>
+		</view>
+		</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const selectedIndex = ref(0)
+	
+	const selectFont = (index) => {
+		selectedIndex.value = index
+		console.log('看看选中状态',selectedIndex.value)
+	}
+
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.top {
+		margin-top: 1.5vh;
+		height: 21vh;
+		background-color: white;
+	}
+
+	.top-list {
+		width: 630rpx;
+		height: 7vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 40rpx;
+		padding: 0 10rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.top-list:last-child {
+		border-bottom: none;
+	}
+
+	.switch-btn {
+		width: 100rpx;
+		transform: scale(0.6);
+		transform-origin: center right;
+	}
+
+	.public {
+		width: 450rpx;
+		margin-left: auto;
+		font-size: 10px;
+		color: rgb(203, 203, 203);
+	}
+
+	.arrow {
+		margin-left: auto;
+	}
+	
+	.radio-btn {
+		margin-left: auto;
+		transform: scale(0.6);
+	}
+</style>
--- a/pages/setting/share.vue
+++ b/pages/setting/share.vue
@ -0,0 +1,111 @@
+<template>
+	<view class="all">
+		<img class="img-share" src="/static/my/shareBackground.png" />
+		<img class="img-greenBack" src="/static/my/greenBackground.png" />
+		<img class="img-QRcode" src="/static/my/QRcode.png" />
+		<img class="img-award" src="/static/my/award.png" />
+		<img class="img-myFriends" src="/static/my/myFriends.png" />
+		<img class="img-friends" src="/static/my/shareFriends.png" />
+		<text class="jwcode">{{ jwcode }}</text>
+		<button class="invite">立即邀请</button>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue'
+
+	const jwcode = ref('90047681')
+</script>
+
+<style>
+	.all {
+		position: relative;
+		width: 750rpx;
+		height: auto;
+	}
+
+	.img-share {
+		width: 750rpx;
+		height: 2118rpx;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+	}
+	
+	.img-QRcode{
+		width:320rpx;
+		height:320rpx;
+		position:absolute;
+		top:26vh;
+		left:215rpx;
+		z-index: 3;
+	}
+
+	.img-greenBack {
+		width: 670rpx;
+		height: 1740rpx;
+		position: absolute;
+		top: 16vh;
+		/* 为什么要用这个替代 margin-top */
+		left: 40rpx;
+		/* 还有 padding-left */
+		z-index: 2;
+	}
+
+	.img-friends {
+		width: 602rpx;
+		height: 840rpx;
+		position: absolute;
+		top: 68vh;
+		left: 74rpx;
+		z-index: 3;
+	}
+
+	.img-award {
+		width: 300rpx;
+		height: 120rpx;
+		position: absolute;
+		top: 61vh;
+		left: 75rpx;
+		z-index: 3;
+	}
+
+	.img-myFriends {
+		width: 300rpx;
+		height: 88rpx;
+		position: absolute;
+		top: 61vh;
+		right: 75rpx;
+		z-index: 3;
+	}
+
+	.jwcode {
+		width: 320rpx;
+		height: 38rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: 19vh;
+		left: 212rpx;
+		z-index: 999;
+	}
+
+	.invite {
+		width: 320rpx;
+		height: 80rpx;
+		border-radius: 40rpx;
+		background-color: black;
+		color:white;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		top: 50.7vh;
+		left: 212rpx;
+		z-index: 999;
+	}
+</style>
--- a/pages/setting/theme.vue
+++ b/pages/setting/theme.vue
@ -0,0 +1,64 @@
+<template>
+	<view class="main">
+		<view :style="{height:iSMT+'px'}"></view>
+		<view class="theme">
+			<view class="left">
+				<image class="img-theme" src="/static/my/whiteTheme.png" mode="widthFix" />
+				<radio value="0" class="radio-btn" activeBackgroundColor="red" :checked="selectedIndex === 0"
+					@click="selectFont(0)" />
+			</view>
+			<view class="left">
+				<image class="img-theme" src="/static/my/blackTheme.png" mode="widthFix" />
+				<radio value="1" class="radio-btn" activeBackgroundColor="red" :checked="selectedIndex === 1"
+					@click="selectFont(1)" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	const iSMT = ref(0)
+	const selectedIndex = ref(0)
+
+	const selectFont = (index) => {
+		selectedIndex.value = index
+		console.log('看看选中状态', selectedIndex.value)
+	}
+	onMounted(() => {
+		// 状态栏高度
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+		console.log('看看高度', iSMT.value)
+	})
+</script>
+
+<style>
+	.theme {
+		margin-top: 1.5vh;
+		height: 34vh;
+		background-color: white;
+		display: flex;
+		justify-content: space-around;
+	}
+
+	.img-theme {
+		width: 316rpx;
+		height: 362rpx;
+	}
+
+	.left {
+		width: 350rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.radio-btn {
+		margin-top: 36rpx;
+		transform: scale(0.8);
+	}
+</style>
--- a/static/marketSituation-image/marketCondition-image/favorites.png
+++ b/static/marketSituation-image/marketCondition-image/favorites.png
--- a/static/marketSituation-image/marketCondition-image/function.png
+++ b/static/marketSituation-image/marketCondition-image/function.png
--- a/static/marketSituation-image/marketCondition-image/index.png
+++ b/static/marketSituation-image/marketCondition-image/index.png
--- a/static/marketSituation-image/marketCondition-image/setting2.png
+++ b/static/marketSituation-image/marketCondition-image/setting2.png
--- a/static/my/BlackTheme.png
+++ b/static/my/BlackTheme.png
--- a/static/my/QRcode.png
+++ b/static/my/QRcode.png
--- a/static/my/about.png
+++ b/static/my/about.png
--- a/static/my/aboutDC.png
+++ b/static/my/aboutDC.png
--- a/static/my/award.png
+++ b/static/my/award.png
--- a/static/my/bindedEmail.png
+++ b/static/my/bindedEmail.png
--- a/static/my/bindedPhone.png
+++ b/static/my/bindedPhone.png
--- a/static/my/changeBindPhone.png
+++ b/static/my/changeBindPhone.png
--- a/static/my/changeEmail.png
+++ b/static/my/changeEmail.png
--- a/static/my/common.png
+++ b/static/my/common.png
--- a/static/my/connection.png
+++ b/static/my/connection.png
--- a/static/my/editName.png
+++ b/static/my/editName.png
--- a/static/my/greenBackground.png
+++ b/static/my/greenBackground.png
--- a/static/my/greenRise.png
+++ b/static/my/greenRise.png
--- a/static/my/hideEye.png
+++ b/static/my/hideEye.png
--- a/static/my/invite.png
+++ b/static/my/invite.png
--- a/static/my/menu.png
+++ b/static/my/menu.png
--- a/static/my/myFriends.png
+++ b/static/my/myFriends.png
--- a/static/my/openEye.png
+++ b/static/my/openEye.png
--- a/static/my/opinion.png
+++ b/static/my/opinion.png
--- a/static/my/outline.png
+++ b/static/my/outline.png
--- a/static/my/polylines.png
+++ b/static/my/polylines.png
--- a/static/my/redRise.png
+++ b/static/my/redRise.png
--- a/static/my/security.png
+++ b/static/my/security.png
--- a/static/my/setting.png
+++ b/static/my/setting.png
--- a/static/my/share.png
+++ b/static/my/share.png
--- a/static/my/shareBackground.png
+++ b/static/my/shareBackground.png
--- a/static/my/shareFriends.png
+++ b/static/my/shareFriends.png
--- a/static/my/unlock.png
+++ b/static/my/unlock.png
--- a/static/my/update.png
+++ b/static/my/update.png
--- a/static/my/verification.png
+++ b/static/my/verification.png
--- a/static/my/whiteTheme.png
+++ b/static/my/whiteTheme.png
--- a/static/my/签到.png
+++ b/static/my/签到.png
--- a/static/my/行情设置.png
+++ b/static/my/行情设置.png
--- a/static/my/设置.png
+++ b/static/my/设置.png
--- a/static/my/铃铛2.png
+++ b/static/my/铃铛2.png