echarts模拟股票交易系统代码-html代码-BFW代码库

echarts模拟股票交易系统代码

代码语言：html

所属分类：其他

代码描述：模拟股票交易系统

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StockSim Pro — 模拟交易</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0b0e14;--sf:#111822;--card:#182030;--card2:#1c2840;--bd:#253048;
  --tx:#d1d5db;--tx2:#7a8599;--tx3:#3e4a60;
  --up:#22c55e;--up-bg:rgba(34,197,94,.12);
  --dn:#ef4444;--dn-bg:rgba(239,68,68,.12);
  --bl:#3b82f6;--bl-bg:rgba(59,130,246,.1);
  --yw:#f0b90b;
  --mono:'JetBrains Mono',monospace;--sans:'Inter',system-ui,sans-serif;
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--tx);font:13px/1.5 var(--sans)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
input[type=number]::-webkit-inner-spin-button{opacity:.4}
::selection{background:var(--bl);color:#fff}

.app{display:grid;grid-template-rows:50px 40px 1fr 170px;grid-template-columns:1fr 310px;height:100vh;overflow:hidden}

/* ===== HEADER ===== */
.hdr{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--sf);border-bottom:1px solid var(--bd);gap:16px}
.hdr-left{display:flex;align-items:center;gap:20px}
.logo{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--bl);letter-spacing:.06em;white-space:nowrap}
.acct{display:flex;gap:20px}
.acct-item{display:flex;flex-direction:column;align-items:flex-end}
.acct-label{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.acct-val{font-family:var(--mono);font-weight:600;font-size:13px}

/* ===== STOCK BAR ===== */
.sbar{grid-column:1/-1;display:flex;align-items:center;padding:0 16px;background:var(--sf);border-bottom:1px solid var(--bd);gap:4px;overflow-x:auto}
.stab{padding:6px 14px;border:1px solid transparent;border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:500;cursor:pointer;color:var(--tx2);transition:.15s;white-space:nowrap;background:none}
.stab:hover{color:var(--tx);background:var(--card)}
.stab.on{color:var(--bl);border-color:rgba(59,130,246,.3);background:var(--bl-bg)}
.sbar-spacer{flex:1}
.sprice{display:flex;align-items:baseline;gap:10px;margin-left:16px;white-space:nowrap}
.sprice .p{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:-.02em}
.sprice .c{font-family:var(--mono);font-weight:600;font-size:13px}
.c-up{color:var(--up)}.c-dn{color:var(--dn)}

/* ===== CHART ===== */
.chart-area{position:relative;overflow:hidden;background:var(--bg)}
.chart-area>div{width:100%;height:100%}

/* ===== SIDEBAR ===== */
.side{display:flex;flex-direction:column;background:var(--sf);border-left:1px solid var(--bd);overflow:hidden}
.trade-box{padding:14px;border-bottom:1p.........完整代码请登录后点击上方下载按钮下载查看