编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>模拟炒股 · 君弘风格</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
    body { background: #f5f7fa; padding: 12px; color: #1a2332; }
    .app { max-width: 420px; margin: 0 auto; background: white; border-radius: 24px; padding: 16px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
    /* 顶部资产 */
    .asset-box { background: linear-gradient(145deg, #1a3a6b, #0f2647); color: white; border-radius: 18px; padding: 16px; margin-bottom: 16px; }
    .asset-row { display: flex; justify-content: space-between; align-items: center; }
    .asset-label { font-size: 13px; opacity: 0.7; }
    .asset-number { font-size: 24px; font-weight: 700; letter-spacing: 0.5px; }
    .asset-sub { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
    .asset-sub-item { flex: 1; min-width: 60px; }
    .asset-sub-item .label { font-size: 11px; opacity: 0.6; }
    .asset-sub-item .value { font-size: 16px; font-weight: 600; }
    .green { color: #2ecc71; }
    .red { color: #e74c3c; }
    /* 股票列表 */
    .stock-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #ecf0f1; cursor: pointer; transition: background 0.1s; }
    .stock-item:active { background: #f0f3f8; }
    .stock-left .name { font-weight: 600; font-size: 16px; }
    .stock-left .code { font-size: 12px; color: #7f8c8d; }
    .stock-right { text-align: right; }
    .stock-right .price { font-size: 17px; font-weight: 600; }
    .stock-right .change { font-size: 13px; padding: 2px 8px; border-radius: 12px; display: inline-block; margin-top: 2px; }
    .change.up { background: #e8f8ef; color: #1e8b4c; }
    .change.down { background: #fde8e8; color: #c0392b; }
    /* 交易面板 */
    .trade-panel { margin-top: 16px; background: #f8fafc; border-radius: 18px; padding: 16px; display: none; border: 1px solid #e9edf2; }
    .trade-panel.active { display: block; }
    .trade-panel .title { font-size: 16px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; }
    .trade-panel .close-btn { color: #95a5a6; font-size: 20px; cursor: pointer; padding: 0 6px; }
    .trade-panel .row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
    .trade-panel .row label { width: 60px; font-size: 14px; color: #2c3e50; }
    .trade-panel .row input { flex: 1; padding: 10px 12px; border: 1px solid #dcdfe6; border-radius: 12px; font-size: 15px; background: white; outline: none; }
    .trade-panel .row input:focus { border-color: #1a3a6b; }
    .trade-btns { display: flex; gap: 10px; margin-top: 6px; }
    .trade-btns button { flex: 1; padding: 12px; border: none; border-radius: 14px; font-size: 16px; font-weight: 600; color: white; cursor: pointer; transition: opacity 0.2s; }
    .trade-btns button:active { opacity: 0.7; }
    .btn-buy { background: #2ecc71; }
    .btn-sell { background: #e74c3c; }
    .btn-cancel { background: #bdc3c7; color: #2c3e50; }
    /* 持仓 & 记录 */
    .section-title { font-size: 15px; font-weight: 600; margin: 18px 0 8px; color: #1a2332; display: flex; justify-content: space-between; }
    .section-title span { font-size: 13px; font-weight: 400; color: #7f8c8d; }
    .hold-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f3f8; font-size: 14px; }
    .hold-item .left .name { font-weight: 500; }
    .hold-item .left .detail { font-size: 12px; color: #7f8c8d; }
    .hold-item .right { text-align: right; }
    .hold-item .right .pl { font-weight: 500; }
    .record-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #ecf0f1; color: #34495e; }
    .record-item .side { font-weight: 500; }
    .record-item .side.buy { color: #2ecc71; }
    .record-item .side.sell { color: #e74c3c; }
    .empty-tip { color: #bdc3c7; font-size: 14px; text-align: center; padding: 16px 0; }
    /* 底部 */
    .footer { font-size: 11px; color: #bdc3c7; text-align: center; margin-top: 20px; border-top: 1px solid #ecf0f1; padding-top: 12px; }
  </style>
</head>
<body>
<div class="app" id="app">
  <!-- 资产 -->
  <div class="asset-box">
    <div class="asset-row">
      <span class="asset-label">总资产 (元)</span>
      <span class="asset-number" id="totalAsset">1000000.00</span>
    </div>
    <div class="asset-sub">
      <div class="asset-sub-item"><span class="label">可用资金</span><br><span class="value" id="cash">1000000.00</span></div>
      <div class="asset-sub-item"><span class="label">持仓市值</span><br><span class="value" id="marketValue">0.00</span></div>
      <div class="asset-sub-item"><span class="label">总盈亏</span><br><span class="value" id="totalPL">0.00</span></div>
    </div>
  </div>

  <!-- 股票行情 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
    <span class="section-title">自选</span>
    <span style="font-size:12px; color:#95a5a6;">点击股票交易</span>
  </div>
  <div id="stockList"></div>

  <!-- 交易面板 -->
  <div class="trade-panel" id="tradePanel">
    <div class="title">
      <span id="tradeStockName">股票名称</span>
      <span class="close-btn" id="closeTrade">✕</span>
    </div>
    <div class="row"><label>最新价</label><span id="tradePrice" style="font-weight:600;">0.00</span></div>
    <div class="row"><label>数量</label><input type="number" id="tradeQty" placeholder="输入股数 (100的整数倍)" min="100" step="100" value="100"></div>
    <div class="row"><label>可买/卖</label><span id="tradeMax" style="color:#7f8c8d;">--</span></div>
    <div class="trade-btns">
      <button class="btn-buy" id="btnBuy">买入</button>
      <button class="btn-sell" id="btnSell">卖出</button>
      <button class="btn-cancel" id="btnCancel">取消</button>
    </div>
  </div>

  <!-- 持仓 -->
  <div class="section-title">持仓 <span id="holdCount">0 只</span></div>
  <div id="holdList"><div class="empty-tip">暂无持仓</div></div>

  <!-- 交易记录 -->
  <div class="section-title">交易记录 <span style="font-weight:400;font-size:13px;color:#7f8c8d;" id="recordCount">0 笔</span></div>
  <div id="recordList"><div class="empty-tip">暂无记录</div></div>

  <div class="footer">模拟交易 · 仅供体验 ｜ 数据每5秒随机波动</div>
</div>

<script>
  (function() {
    // ----- 初始数据 -----
    const stocks = [
      { code: '000001', name: '平安银行', price: 12.34, history: 12.34 },
      { code: '600519', name: '贵州茅台', price: 1888.00, history: 1888.00 },
      { code: '300750', name: '宁德时代', price: 235.60, history: 235.60 }
    ];

    let cash = 1000000;          // 可用资金
    let holdings = {};           // key: code, { code, name, qty, cost }
    let records = [];            // 交易记录 { time, code, name, side, price, qty, amount }

    // 辅助函数
    function fmt(n) { return n.toFixed(2); }

    // 更新界面
    function render() {
      // 计算持仓市值 & 总盈亏
      let marketVal = 0;
      let totalPL = 0;
      let holdCount = 0;
      for (let code in holdings) {
        const h = holdings[code];
        const stock = stocks.find(s => s.code === code);
        if (stock) {
          const currentPrice = stock.price;
          const mVal = h.qty * currentPrice;
          marketVal += mVal;
          const pl = (currentPrice - h.cost) * h.qty;
          totalPL += pl;
          holdCount++;
        }
      }
      const totalAsset = cash + marketVal;
      document.getElementById('totalAsset').textContent = fmt(totalAsset);
      document.getElementById('cash').textContent = fmt(cash);
      document.getElementById('marketValue').textContent = fmt(marketVal);
      document.getElementById('totalPL').textContent = fmt(totalPL);
      document.getElementById('holdCount').textContent = holdCount + ' 只';

      // 渲染股票列表
      const stockListDiv = document.getElementById('stockList');
      stockListDiv.innerHTML = '';
      stocks.forEach(s => {
        const change = s.price - s.history;
        const changePercent = s.history !== 0 ? (change / s.history * 100) : 0;
        const up = change >= 0;
        const div = document.createElement('div');
        div.className = 'stock-item';
        div.dataset.code = s.code;
        div.innerHTML = `
          <div class="stock-left">
            <div class="name">${s.name}</div>
            <div class="code">${s.code}</div>
          </div>
          <div class="stock-right">
            <div class="price">${fmt(s.price)}</div>
            <div class="change ${up ? 'up' : 'down'}">${up ? '+' : ''}${fmt(change)} (${up ? '+' : ''}${fmt(changePercent)}%)</div>
          </div>
        `;
        div.addEventListener('click', function(e) {
          const code = this.dataset.code;
          openTradePanel(code);
        });
        stockListDiv.appendChild(div);
      });

      // 渲染持仓
      const holdListDiv = document.getElementById('holdList');
      if (Object.keys(holdings).length === 0) {
        holdListDiv.innerHTML = '<div class="empty-tip">暂无持仓</div>';
      } else {
        holdListDiv.innerHTML = '';
        for (let code in holdings) {
          const h = holdings[code];
          const stock = stocks.find(s => s.code === code);
          if (!stock) continue;
          const currentPrice = stock.price;
          const pl = (currentPrice - h.cost) * h.qty;
          const plPercent = h.cost !== 0 ? (pl / (h.cost * h.qty) * 100) : 0;
          const item = document.createElement('div');
          item.className = 'hold-item';
          item.innerHTML = `
            <div class="left">
              <div class="name">${h.name}</div>
              <div class="detail">${h.qty} 股 · 成本 ${fmt(h.cost)}</div>
            </div>
            <div class="right">
              <div>${fmt(currentPrice)}</div>
              <div class="pl" style="color:${pl>=0?'#2ecc71':'#e74c3c'}">${pl>=0?'+':''}${fmt(pl)} (${pl>=0?'+':''}${fmt(plPercent)}%)</div>
            </div>
          `;
          holdListDiv.appendChild(item);
        }
      }

      // 渲染交易记录 (最近10条)
      const recordListDiv = document.getElementById('recordList');
      const recordCountSpan = document.getElementById('recordCount');
      recordCountSpan.textContent = records.length + ' 笔';
      if (records.length === 0) {
        recordListDiv.innerHTML = '<div class="empty-tip">暂无记录</div>';
      } else {
        recordListDiv.innerHTML = '';
        const show = records.slice(-10).reverse();
        show.forEach(r => {
          const div = document.createElement('div');
          div.className = 'record-item';
          const sideClass = r.side === '买入' ? 'buy' : 'sell';
          div.innerHTML = `
            <span>${r.time}</span>
            <span>${r.name}</span>
            <span class="side ${sideClass}">${r.side}</span>
            <span>${r.qty}股 @ ${fmt(r.price)}</span>
            <span>${fmt(r.amount)}</span>
          `;
          recordListDiv.appendChild(div);
        });
      }
    }

    // 打开交易面板
    let currentTradeCode = null;
    function openTradePanel(code) {
      const stock = stocks.find(s => s.code === code);
      if (!stock) return;
      currentTradeCode = code;
      document.getElementById('tradeStockName').textContent = stock.name;
      document.getElementById('tradePrice').textContent = fmt(stock.price);
      document.getElementById('tradeQty').value = 100;
      // 计算可买/可卖
      const hold = holdings[code];
      let maxMsg = '';
      if (hold) {
        maxMsg = `可卖 ${hold.qty} 股`;
      } else {
        maxMsg = '无持仓';
      }
      // 可买数量 (按资金)
      const maxBuy = Math.floor(cash / stock.price / 100) * 100;
      if (maxBuy > 0) {
        maxMsg += `，可买 ${maxBuy} 股`;
      } else {
        maxMsg += `，资金不足`;
      }
      document.getElementById('tradeMax').textContent = maxMsg;
      document.getElementById('tradePanel').classList.add('active');
    }

    // 关闭面板
    document.getElementById('closeTrade').addEventListener('click', function() {
      document.getElementById('tradePanel').classList.remove('active');
      currentTradeCode = null;
    });
    document.getElementById('btnCancel').addEventListener('click', function() {
      document.getElementById('tradePanel').classList.remove('active');
      currentTradeCode = null;
    });

    // 执行交易 (side: 'buy' or 'sell')
    function executeTrade(side) {
      if (!currentTradeCode) return;
      const stock = stocks.find(s => s.code === currentTradeCode);
      if (!stock) return;
      const qtyInput = document.getElementById('tradeQty');
      let qty = parseInt(qtyInput.value);
      if (isNaN(qty) || qty <= 0 || qty % 100 !== 0) {
        alert('请输入100的整数倍股数');
        return;
      }
      const price = stock.price;
      const amount = qty * price;

      if (side === 'buy') {
        if (amount > cash) {
          alert('可用资金不足');
          return;
        }
        // 更新持仓
        if (holdings[currentTradeCode]) {
          const h = holdings[currentTradeCode];
          const totalCost = h.cost * h.qty + amount;
          h.qty += qty;
          h.cost = totalCost / h.qty;
        } else {
          holdings[currentTradeCode] = {
            code: currentTradeCode,
            name: stock.name,
            qty: qty,
            cost: price
          };
        }
        cash -= amount;
        // 记录
        records.push({
          time: new Date().toLocaleTimeString(),
          code: currentTradeCode,
          name: stock.name,
          side: '买入',
          price: price,
          qty: qty,
          amount: amount
        });
      } else { // sell
        const hold = holdings[currentTradeCode];
        if (!hold || hold.qty < qty) {
          alert('持仓数量不足');
          return;
        }
        hold.qty -= qty;
        cash += amount;
        if (hold.qty === 0) {
          delete holdings[currentTradeCode];
        }
        records.push({
          time: new Date().toLocaleTimeString(),
          code: currentTradeCode,
          name: stock.name,
          side: '卖出',
          price: price,
          qty: qty,
          amount: amount
        });
      }
      render();
      // 刷新面板信息
      if (currentTradeCode) {
        openTradePanel(currentTradeCode); // 刷新可买卖信息
      }
    }

    document.getElementById('btnBuy').addEventListener('click', function() { executeTrade('buy'); });
    document.getElementById('btnSell').addEventListener('click', function() { executeTrade('sell'); });

    // 随机波动
    function randomWalk() {
      stocks.forEach(s => {
        const delta = (Math.random() - 0.5) * 0.8;
        let newPrice = s.price + delta;
        if (newPrice < 0.01) newPrice = 0.01;
        s.price = Math.round(newPrice * 100) / 100;
        // 更新历史开盘价 (保留每天开盘价, 这里简化)
        if (!s.history) s.history = s.price;
      });
      render();
      // 如果有打开的面板，更新价格显示
      if (currentTradeCode) {
        const stock = stocks.find(s => s.code === currentTradeCode);
        if (stock) {
          document.getElementById('tradePrice').textContent = fmt(stock.price);
          // 重新计算可买
          const hold = holdings[currentTradeCode];
          let maxMsg = '';
          if (hold) maxMsg = `可卖 ${hold.qty} 股`;
          else maxMsg = '无持仓';
          const maxBuy = Math.floor(cash / stock.price / 100) * 100;
          if (maxBuy > 0) maxMsg += `，可买 ${maxBuy} 股`;
          else maxMsg += `，资金不足`;
          document.getElementById('tradeMax').textContent = maxMsg;
        }
      }
    }

    // 每5秒波动
    setInterval(randomWalk, 5000);

    // 初始渲染
    render();
    // 给一个初始历史价
    stocks.forEach(s => s.history = s.price);
    render();
  })();
</script>
</body>
</html>