wanghep/lhbfx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8c9117ca4c7dbdc739aa4ed3a30ba7c9957c6d5a
lhbfx/docs/ui-mockup.html

670 lines
36 KiB
HTML
Raw Normal View History

chore: initialize lhbfx project and documentation
2026-04-17 21:20:26 +08:00
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>顶级游资监控系统 UI Mockup</title>
<style>
:root {
--bg: #0a0d12;
--panel: rgba(18, 24, 33, 0.88);
--text: #f4efe4;
--muted: #91a0b1;
--gold: #d4a35c;
--gold-2: #f0c071;
--blue: #5ab8ff;
--red: #ff5d5d;
--green: #2dbd7b;
--orange: #ffae42;
--line: rgba(214, 168, 95, 0.22);
--shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
color: var(--text);
background:
radial-gradient(circle at 10% 20%, rgba(212, 163, 92, 0.12), transparent 26%),
radial-gradient(circle at 90% 10%, rgba(90, 184, 255, 0.1), transparent 24%),
linear-gradient(180deg, #0b0e13 0%, #090c12 100%);
min-height: 100vh;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 36px 36px;
opacity: .3;
pointer-events: none;
}
.page { width: 1600px; margin: 0 auto; padding: 26px 26px 80px; position: relative; }
.hero {
position: sticky; top: 0; z-index: 20; margin-bottom: 20px; padding: 18px 22px;
backdrop-filter: blur(16px); background: rgba(10, 13, 18, 0.82);
border: 1px solid rgba(212, 163, 92, 0.16); border-radius: 20px;
box-shadow: var(--shadow); display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: center;
}
.brand { display: flex; gap: 18px; align-items: center; }
.logo {
width: 56px; height: 56px; border-radius: 18px;
background: linear-gradient(135deg, rgba(212,163,92,0.2), rgba(212,163,92,0.06));
border: 1px solid rgba(240, 192, 113, 0.35); display: grid; place-items: center;
color: var(--gold-2); font-size: 30px; font-weight: 700;
}
.brand h1 { margin: 0; font-size: 28px; letter-spacing: 1px; font-weight: 800; }
.brand p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mini { padding: 14px 14px 12px; border-radius: 16px; background: rgba(20, 26, 36, 0.84); border: 1px solid rgba(255,255,255,0.06); }
.mini .label { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.mini .value { font-size: 26px; font-weight: 800; line-height: 1; }
.danger .value { color: var(--red); } .watch .value { color: var(--orange); } .focus .value { color: var(--gold-2); } .good .value { color: var(--blue); }
.screen {
margin-top: 28px; padding: 24px; border-radius: 28px;
background: linear-gradient(180deg, rgba(18,24,33,0.95), rgba(10,14,20,0.97));
border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.screen::after {
content: ""; position: absolute; inset: auto -15% -40% auto; width: 380px; height: 380px;
background: radial-gradient(circle, rgba(212,163,92,0.08), transparent 70%); pointer-events: none;
}
.screen-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.screen-title h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.kicker { display: inline-flex; gap: 8px; color: var(--gold-2); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.toolbar, .chips, .chart-labels { display: flex; gap: 10px; flex-wrap: wrap; }
.pill, .chip {
padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08); color: var(--muted); font-size: 12px;
}
.pill.active { color: #0a0d12; background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: transparent; font-weight: 700; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }
.stock-layout { display: grid; grid-template-columns: 1.55fr .85fr; gap: 18px; align-items: start; }
.home-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.warning-layout { display: grid; grid-template-columns: 280px 1fr 360px; gap: 16px; }
.card, .chart, .filter-box, .side-card, .signal, .monitor-item, .row, .stat-box {
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px;
}
.card, .filter-box, .side-card, .signal, .monitor-item, .stat-box { padding: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-head h3, .side-card h4, .filter-box h4 { margin: 0; font-weight: 700; }
.table, .signal-list, .filter { display: grid; gap: 10px; }
.row {
display: grid; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,0.025);
}
.row.warning, .monitor-item.red { background: linear-gradient(90deg, rgba(255,93,93,0.12), rgba(255,255,255,0.02)); border-color: rgba(255,93,93,0.18); }
.row.opportunity, .monitor-item.orange { background: linear-gradient(90deg, rgba(255,174,66,0.10), rgba(255,255,255,0.02)); border-color: rgba(255,174,66,0.18); }
.w-6 { grid-template-columns: 1.2fr .9fr .9fr .7fr .7fr .8fr; }
.w-7 { grid-template-columns: 1.2fr .95fr .8fr .7fr .7fr .8fr .8fr; }
.w-8 { grid-template-columns: 1fr .9fr .8fr .85fr .8fr .8fr .7fr .7fr; }
.stock { display: flex; flex-direction: column; gap: 4px; }
.stock b { font-size: 15px; } .stock span { color: var(--muted); font-size: 12px; }
.tag {
display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 5px 10px;
border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent;
}
.tag.red { background: rgba(255,93,93,0.14); color: #ffb4b4; border-color: rgba(255,93,93,0.18); }
.tag.orange { background: rgba(255,174,66,0.14); color: #ffd08b; border-color: rgba(255,174,66,0.18); }
.tag.gold { background: rgba(212,163,92,0.14); color: #f3c986; border-color: rgba(212,163,92,0.2); }
.tag.blue { background: rgba(90,184,255,0.14); color: #acd8ff; border-color: rgba(90,184,255,0.2); }
.metric { padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); position: relative; }
.metric::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), transparent); opacity: .8; }
.metric .t, .small { font-size: 12px; color: var(--muted); }
.metric .n, .big { margin-top: 8px; font-size: 30px; font-weight: 800; }
.metric .s, .desc, .check, .line2, .kv, .footer-note { color: var(--muted); font-size: 12px; }
.profile {
padding: 20px; border-radius: 22px; background: linear-gradient(135deg, rgba(212,163,92,0.18), rgba(255,255,255,0.02));
border: 1px solid rgba(212,163,92,0.2);
}
.profile h3 { margin: 0; font-size: 34px; font-weight: 800; }
.profile p, .side-card p { line-height: 1.7; color: #c9c2b6; font-size: 13px; }
.header-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-bottom: 16px; }
.stat-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.chart { min-height: 360px; padding: 16px; overflow: hidden; }
.chart svg { width: 100%; height: 300px; display: block; }
.chart-large { min-height: 500px; }
.chart-large svg { height: 390px; }
.legend { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.lane { padding: 14px; border-radius: 18px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); margin-top: 12px; }
.lane-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.lane-name { color: #d8d2c7; font-size: 13px; font-weight: 700; }
.track { position: relative; height: 30px; border-radius: 999px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); }
.track span { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.kv:last-child { border-bottom: 0; } .kv b { color: var(--text); }
.monitor-item .line1, .monitor-item .line2, .signal .top, .check { display: flex; justify-content: space-between; align-items: center; }
.judge {
padding: 16px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(255,174,66,0.16), rgba(255,255,255,0.02));
border: 1px solid rgba(255,174,66,0.24);
margin-bottom: 12px;
}
.judge .judge-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.judge .judge-top h4 {
margin: 0;
font-size: 15px;
font-weight: 800;
}
.judge .judge-main {
font-size: 28px;
font-weight: 900;
color: #ffd08b;
margin-bottom: 8px;
}
.judge .judge-desc {
color: #d5cab7;
font-size: 13px;
line-height: 1.7;
}
.radar { height: 220px; border-radius: 20px; border: 1px solid rgba(90,184,255,0.12); background: radial-gradient(circle at center, rgba(90,184,255,0.08), transparent 60%), repeating-radial-gradient(circle at center, rgba(255,255,255,0.05) 0 1px, transparent 1px 42px); position: relative; overflow: hidden; }
.radar::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 230deg, transparent 0deg, rgba(90,184,255,0.26) 46deg, transparent 64deg); animation: sweep 6s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar .point { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 16px rgba(240,192,113,0.8); }
.footer-note { margin-top: 18px; text-align: center; letter-spacing: 1px; }
</style>
</head>
<body>
<div class="page">
<div class="hero">
<div class="brand">
<div class="logo">资</div>
<div>
<h1>顶级游资监控系统</h1>
<p>盘后总控台 / 风险优先 / 游资视角 / 单票作战图</p>
</div>
</div>
<div class="hero-stats">
<div class="mini danger"><div class="label">今日卖出预警</div><div class="value">06</div></div>
<div class="mini watch"><div class="label">慢流出观察</div><div class="value">11</div></div>
<div class="mini focus"><div class="label">多游资共振</div><div class="value">04</div></div>
<div class="mini good"><div class="label">可关注标的</div><div class="value">05</div></div>
</div>
</div>
<section class="screen">
<div class="screen-title">
<div>
<div class="kicker">01 Home Control</div>
<h2>首页总控台</h2>
</div>
<div class="toolbar">
<span class="pill active">盘后 16:42 已更新</span>
<span class="pill">龙虎榜采集正常</span>
<span class="pill">预警优先级：高</span>
</div>
</div>
<div class="grid-4">
<div class="metric"><div class="t">高风险卖出预警</div><div class="n" style="color:var(--red)">6</div><div class="s">核心席位出现净卖出</div></div>
<div class="metric"><div class="t">慢流出观察</div><div class="n" style="color:var(--orange)">11</div><div class="s">买入后 5 日无强化动作</div></div>
<div class="metric"><div class="t">今日共振标的</div><div class="n" style="color:var(--gold-2)">4</div><div class="s">双游资及以上同场</div></div>
<div class="metric"><div class="t">可关注标的</div><div class="n" style="color:var(--blue)">5</div><div class="s">接近 5 日线 / Fib 支撑</div></div>
</div>
<div class="home-layout">
<div class="card">
<div class="section-head">
<h3>今日高优先级预警</h3>
<span class="pill">先处理风险，再看机会</span>
</div>
<div class="table">
<div class="row warning w-6">
<div class="stock"><b>拓维信息</b><span>002261 / AI算力</span></div>
<div><span class="tag red">章盟主卖出</span></div>
<div>33.42</div>
<div style="color:var(--red)">+6.38%</div>
<div>高风险</div>
<div>建议减仓</div>
</div>
<div class="row warning w-6">
<div class="stock"><b>四川长虹</b><span>600839 / 机器人</span></div>
<div><span class="tag orange">慢流出观察</span></div>
<div>12.67</div>
<div style="color:var(--green)">-2.45%</div>
<div>重点预警</div>
<div>继续观察</div>
</div>
<div class="row warning w-6">
<div class="stock"><b>常山北明</b><span>000158 / 鸿蒙</span></div>
<div><span class="tag red">共振失效</span></div>
<div>24.08</div>
<div style="color:var(--green)">-3.17%</div>
<div>高风险</div>
<div>规避追高</div>
</div>
</div>
<div class="section-head" style="margin-top:18px">
<h3>今日可关注</h3>
<span class="pill active">5 日线 / Fib 0.382</span>
</div>
<div class="table">
<div class="row opportunity w-7">
<div class="stock"><b>中科曙光</b><span>603019 / 算力中军</span></div>
<div>章盟主</div>
<div>+2.3亿</div>
<div style="color:var(--green)">-1.12%</div>
<div>接近 5 日线</div>
<div><span class="tag gold">锁仓</span></div>
<div>可关注</div>
</div>
<div class="row opportunity w-7">
<div class="stock"><b>银之杰</b><span>300085 / 金融科技</span></div>
<div>欢乐海岸</div>
<div>+8600万</div>
<div style="color:var(--red)">+4.21%</div>
<div>Fib 0.5</div>
<div><span class="tag blue">共振</span></div>
<div>谨慎关注</div>
</div>
</div>
</div>
<div class="card">
<div class="section-head">
<h3>三大游资动态</h3>
<span class="pill">点击进入详情</span>
</div>
<div class="signal-list">
<div class="signal">
<div class="top"><span class="name">章盟主</span><span class="tag gold">高权重</span></div>
<div class="desc">近期参与 14 只，当前 3 只重点观察，卖出预警 2 只，聚焦 AI 算力与大市值中军。</div>
</div>
<div class="signal">
<div class="top"><span class="name">炒股养家</span><span class="tag blue">情绪确认</span></div>
<div class="desc">近期参与 9 只，偏连板与情绪龙头，当前 1 只共振标的，追踪节奏快。</div>
</div>
<div class="signal">
<div class="top"><span class="name">欢乐海岸</span><span class="tag red">高溢价</span></div>
<div class="desc">近期参与 6 只，高位强势股信号明显，一旦卖出需提高预警等级。</div>
</div>
</div>
<div class="section-head" style="margin-top:18px">
<h3>风险雷达</h3>
<span class="pill">实时视图</span>
</div>
<div class="radar">
<span class="point" style="left:62%; top:34%"></span>
<span class="point" style="left:31%; top:57%"></span>
<span class="point" style="left:74%; top:66%"></span>
<span class="point" style="left:50%; top:44%"></span>
</div>
</div>
</div>
</section>
<section class="screen">
<div class="screen-title">
<div>
<div class="kicker">02 Trader Detail</div>
<h2>游资详情页 · 章盟主</h2>
</div>
<div class="toolbar">
<span class="pill active">近期参与股票列表</span>
<span class="pill">板块分布</span>
<span class="pill">动作时间轴</span>
</div>
</div>
<div class="header-card">
<div class="profile">
<h3>章盟主 / 章建平</h3>
<p>板块中军、权重大票、上亿级别资金体量。更偏趋势强化和大资金推动，不完全等同于情绪打板游资。</p>
<div class="chips">
<span class="chip">国泰君安上海江苏路</span>
<span class="chip">国泰君安上海海阳西路</span>
<span class="chip">国泰君安宁波彩虹北路</span>
<span class="chip">中信证券杭州延安路</span>
</div>
</div>
<div class="stat-boxes">
<div class="stat-box"><div class="small">近期参与股票数</div><div class="big">14</div></div>
<div class="stat-box"><div class="small">当前观察中</div><div class="big" style="color:var(--gold-2)">3</div></div>
<div class="stat-box"><div class="small">卖出预警</div><div class="big" style="color:var(--red)">2</div></div>
<div class="stat-box"><div class="small">慢流出观察</div><div class="big" style="color:var(--orange)">4</div></div>
</div>
</div>
<div class="grid-2">
<div class="card">
<div class="section-head">
<h3>近期参与股票列表</h3>
<span class="pill">默认按最近动作排序</span>
</div>
<div class="table">
<div class="row w-8">
<div class="stock"><b>中科曙光</b><span>603019</span></div>
<div>AI算力</div>
<div>63.80</div>
<div style="color:var(--red)">+3.24%</div>
<div>932亿</div>
<div>2026-04-10</div>
<div>+2.3亿</div>
<div><span class="tag gold">锁仓</span></div>
</div>
<div class="row w-8">
<div class="stock"><b>拓维信息</b><span>002261</span></div>
<div>鸿蒙算力</div>
<div>33.42</div>
<div style="color:var(--red)">+6.38%</div>
<div>421亿</div>
<div>2026-04-16</div>
<div>-6800万</div>
<div><span class="tag red">卖出预警</span></div>
</div>
<div class="row w-8">
<div class="stock"><b>四川长虹</b><span>600839</span></div>
<div>机器人</div>
<div>12.67</div>
<div style="color:var(--green)">-2.45%</div>
<div>585亿</div>
<div>2026-04-11</div>
<div>+1.1亿</div>
<div><span class="tag orange">慢流出</span></div>
</div>
<div class="row w-8">
<div class="stock"><b>工业富联</b><span>601138</span></div>
<div>AI服务器</div>
<div>31.90</div>
<div style="color:var(--red)">+1.78%</div>
<div>6328亿</div>
<div>2026-04-15</div>
<div>+4.7亿</div>
<div><span class="tag blue">共振</span></div>
</div>
</div>
</div>
<div class="card">
<div class="section-head"><h3>板块分布与时间轴</h3><span class="pill">近 20 日</span></div>
<div class="signal-list">
<div class="signal"><div class="top"><span class="name">AI 算力</span><span>5 只</span></div><div class="desc">累计净额 7.8 亿，当前 1 只卖出预警，2 只仍处于锁仓观察。</div></div>
<div class="signal"><div class="top"><span class="name">机器人</span><span>3 只</span></div><div class="desc">累计净额 2.1 亿，当前 2 只进入慢流出观察。</div></div>
<div class="signal"><div class="top"><span class="name">最近动作</span><span>7 日</span></div><div class="desc">04-16 拓维信息卖出；04-15 工业富联共振；04-11 四川长虹进入慢流出观察。</div></div>
</div>
</div>
</div>
</section>
<section class="screen">
<div class="screen-title">
<div>
<div class="kicker">03 Stock Detail</div>
<h2>股票详情页 · 中科曙光</h2>
</div>
<div class="toolbar">
<span class="pill active">全部游资</span>
<span class="pill">仅看章盟主</span>
<span class="pill">仅看欢乐海岸</span>
</div>
</div>
<div class="stock-layout">
<div>
<div class="card" style="margin-bottom:16px">
<div class="section-head">
<h3>股票基础信息</h3>
<span class="tag gold">算力中军</span>
</div>
<div class="table">
<div class="row w-7">
<div class="stock"><b>中科曙光</b><span>603019 / AI算力 / 信创</span></div>
<div>63.80</div>
<div style="color:var(--red)">+3.24%</div>
<div>总市值 932亿</div>
<div>流通 927亿</div>
<div><span class="tag gold">锁仓</span></div>
<div><span class="tag blue">共振</span></div>
</div>
</div>
</div>
<div class="chart chart-large">
<div class="section-head">
<h3>K线走势 + 龙虎榜买卖点</h3>
<span class="pill">K线 / 成本线 / 5 日线 / 游资操作叠加</span>
</div>
<svg viewBox="0 0 1080 400" preserveAspectRatio="none">
<g opacity="0.08" stroke="#fff">
<line x1="0" y1="50" x2="1080" y2="50"/>
<line x1="0" y1="110" x2="1080" y2="110"/>
<line x1="0" y1="170" x2="1080" y2="170"/>
<line x1="0" y1="230" x2="1080" y2="230"/>
<line x1="0" y1="290" x2="1080" y2="290"/>
<line x1="0" y1="350" x2="1080" y2="350"/>
</g>
<rect x="150" y="94" width="210" height="216" rx="16" fill="rgba(255,93,93,0.10)" stroke="rgba(255,93,93,0.22)">
<title>章盟主首轮买入区：累计净买入 1.2 亿</title>
</rect>
<rect x="360" y="76" width="290" height="234" rx="16" fill="rgba(240,192,113,0.10)" stroke="rgba(240,192,113,0.22)">
<title>章盟主持续加仓与锁仓区：累计增加 1.1 亿</title>
</rect>
<rect x="780" y="66" width="160" height="244" rx="16" fill="rgba(90,184,255,0.10)" stroke="rgba(90,184,255,0.20)">
<title>欢乐海岸减仓卖出区：净卖出 3100 万</title>
</rect>
<text x="176" y="84" fill="#ffb4b4" font-size="14">首日买入区 / +1.2亿</text>
<text x="424" y="66" fill="#f3c986" font-size="14">持续加仓 / 锁仓区 / +1.1亿</text>
<text x="806" y="56" fill="#acd8ff" font-size="14">减仓卖出区 / -3100万</text>
<line x1="70" y1="290" x2="70" y2="234" stroke="#7e8a97" stroke-width="2"><title>04-01 高 58.1 低 54.2 收 56.6</title></line>
<rect x="58" y="254" width="24" height="34" rx="3" fill="#2dbd7b"><title>04-01 开 57.8 收 56.6</title></rect>
<line x1="130" y1="272" x2="130" y2="204" stroke="#7e8a97" stroke-width="2"><title>04-02 高 60.4 低 55.6 收 59.2</title></line>
<rect x="118" y="222" width="24" height="44" rx="3" fill="#ff5d5d"><title>04-02 开 56.9 收 59.2</title></rect>
<line x1="190" y1="248" x2="190" y2="164" stroke="#7e8a97" stroke-width="2"><title>04-03 高 62.6 低 57.7 收 61.8</title></line>
<rect x="178" y="182" width="24" height="54" rx="3" fill="#ff5d5d"><title>04-03 开 58.8 收 61.8</title></rect>
<line x1="250" y1="226" x2="250" y2="150" stroke="#7e8a97" stroke-width="2"><title>04-04 高 63.4 低 59.6 收 60.7</title></line>
<rect x="238" y="166" width="24" height="48" rx="3" fill="#2dbd7b"><title>04-04 开 62.3 收 60.7</title></rect>
<line x1="310" y1="218" x2="310" y2="138" stroke="#7e8a97" stroke-width="2"><title>04-07 高 64.8 低 60.1 收 63.2</title></line>
<rect x="298" y="154" width="24" height="54" rx="3" fill="#ff5d5d"><title>04-07 开 60.9 收 63.2</title></rect>
<line x1="370" y1="206" x2="370" y2="126" stroke="#7e8a97" stroke-width="2"><title>04-08 高 65.4 低 61.7 收 64.0</title></line>
<rect x="358" y="140" width="24" height="52" rx="3" fill="#ff5d5d"><title>04-08 开 62.1 收 64.0</title></rect>
<line x1="430" y1="198" x2="430" y2="114" stroke="#7e8a97" stroke-width="2"><title>04-09 高 66.2 低 62.8 收 63.5</title></line>
<rect x="418" y="132" width="24" height="44" rx="3" fill="#2dbd7b"><title>04-09 开 64.9 收 63.5</title></rect>
<line x1="490" y1="182" x2="490" y2="98" stroke="#7e8a97" stroke-width="2"><title>04-10 高 67.8 低 63.8 收 66.9</title></line>
<rect x="478" y="112" width="24" height="58" rx="3" fill="#ff5d5d"><title>04-10 开 64.2 收 66.9</title></rect>
<line x1="550" y1="176" x2="550" y2="92" stroke="#7e8a97" stroke-width="2"><title>04-11 高 68.1 低 64.4 收 67.5</title></line>
<rect x="538" y="104" width="24" height="48" rx="3" fill="#ff5d5d"><title>04-11 开 65.1 收 67.5</title></rect>
<line x1="610" y1="184" x2="610" y2="98" stroke="#7e8a97" stroke-width="2"><title>04-14 高 67.9 低 64.9 收 66.0</title></line>
<rect x="598" y="118" width="24" height="40" rx="3" fill="#2dbd7b"><title>04-14 开 67.2 收 66.0</title></rect>
<line x1="670" y1="166" x2="670" y2="86" stroke="#7e8a97" stroke-width="2"><title>04-15 高 69.1 低 65.8 收 68.2</title></line>
<rect x="658" y="98" width="24" height="50" rx="3" fill="#ff5d5d"><title>04-15 开 66.1 收 68.2</title></rect>
<line x1="730" y1="160" x2="730" y2="82" stroke="#7e8a97" stroke-width="2"><title>04-16 高 69.4 低 66.2 收 67.4</title></line>
<rect x="718" y="104" width="24" height="44" rx="3" fill="#2dbd7b"><title>04-16 开 68.7 收 67.4</title></rect>
<line x1="790" y1="174" x2="790" y2="92" stroke="#7e8a97" stroke-width="2"><title>04-17 高 68.4 低 64.6 收 65.9</title></line>
<rect x="778" y="116" width="24" height="50" rx="3" fill="#2dbd7b"><title>04-17 开 67.3 收 65.9</title></rect>
<line x1="850" y1="190" x2="850" y2="110" stroke="#7e8a97" stroke-width="2"><title>04-18 高 67.1 低 63.9 收 64.5</title></line>
<rect x="838" y="128" width="24" height="48" rx="3" fill="#2dbd7b"><title>04-18 开 66.3 收 64.5</title></rect>
<line x1="910" y1="182" x2="910" y2="104" stroke="#7e8a97" stroke-width="2"><title>04-21 高 68.0 低 65.1 收 66.8</title></line>
<rect x="898" y="116" width="24" height="44" rx="3" fill="#ff5d5d"><title>04-21 开 65.4 收 66.8</title></rect>
<line x1="970" y1="172" x2="970" y2="96" stroke="#7e8a97" stroke-width="2"><title>04-22 高 68.7 低 65.9 收 67.9</title></line>
<rect x="958" y="108" width="24" height="42" rx="3" fill="#ff5d5d"><title>04-22 开 66.2 收 67.9</title></rect>
<line x1="0" y1="138" x2="1080" y2="138" stroke="#5ab8ff" stroke-width="2" stroke-dasharray="8 8">
<title>游资预估成本线：64.8</title>
</line>
<line x1="0" y1="176" x2="1080" y2="176" stroke="#ffffff" opacity="0.18" stroke-width="2" stroke-dasharray="6 10">
<title>5 日线：63.6</title>
</line>
<path d="M190 332 L190 302" stroke="#ff5d5d" stroke-width="3"><title>章盟主买入：净买入 +1.2 亿</title></path>
<path d="M190 302 L184 310 L196 310 Z" fill="#ff5d5d"/>
<text x="138" y="352" fill="#ffb4b4" font-size="12">章盟主买入 +1.2亿</text>
<path d="M490 62 L490 92" stroke="#f0c071" stroke-width="3"><title>章盟主加仓：净买入 +7800 万</title></path>
<path d="M490 62 L484 70 L496 70 Z" fill="#f0c071"/>
<text x="438" y="46" fill="#f3c986" font-size="12">章盟主加仓 +7800万</text>
<path d="M850 60 L850 92" stroke="#5ab8ff" stroke-width="3"><title>欢乐海岸卖出：净卖出 -3100 万</title></path>
<path d="M850 92 L844 84 L856 84 Z" fill="#5ab8ff"/>
<text x="790" y="44" fill="#acd8ff" font-size="12">欢乐海岸卖出 -3100万</text>
<text x="42" y="388" fill="#7e8a97" font-size="11">04-01</text>
<text x="228" y="388" fill="#7e8a97" font-size="11">04-04</text>
<text x="416" y="388" fill="#7e8a97" font-size="11">04-09</text>
<text x="604" y="388" fill="#7e8a97" font-size="11">04-14</text>
<text x="792" y="388" fill="#7e8a97" font-size="11">04-18</text>
<text x="954" y="388" fill="#7e8a97" font-size="11">04-22</text>
</svg>
<div class="chart-labels">
<span class="legend"><i class="dot" style="background:#ff5d5d"></i>买入操作</span>
<span class="legend"><i class="dot" style="background:#f0c071"></i>加仓 / 锁仓操作</span>
<span class="legend"><i class="dot" style="background:#5ab8ff"></i>卖出操作</span>
<span class="legend"><i class="dot" style="background:#2dbd7b"></i>阴线 K</span>
<span class="legend"><i class="dot" style="background:#ff5d5d"></i>阳线 K</span>
<span class="legend"><i class="dot" style="background:#5ab8ff"></i>成本线</span>
</div>
<div style="margin-top:10px; color:#91a0b1; font-size:12px; line-height:1.7;">
图上不仅标单日信号，还用半透明操作区展示游资阶段动作：红色区代表首次集中买入，金色区代表持续加仓与锁仓，蓝色区代表减仓卖出阶段。悬停蜡烛、操作区、箭头时可查看价格与买卖金额说明。
</div>
</div>
</div>
<div>
<div class="judge">
<div class="judge-top">
<h4>预警判断结果</h4>
<span class="tag orange">重点观察</span>
</div>
<div class="judge-main">当前结论：继续观察，防慢流出</div>
<div class="judge-desc">
章盟主累计净额仍为正，价格尚未跌破成本线和 5 日线，但买入后近 5 个交易日未出现明显强化动作，系统将该票判定为“重点观察”而非“直接参与”。
</div>
</div>
<div class="side-card">
<h4>当前预警</h4>
<div class="kv"><span>卖出预警</span><b>无</b></div>
<div class="kv"><span>慢流出观察</span><b style="color:var(--orange)">观察中</b></div>
<div class="kv"><span>破位状态</span><b>未破位</b></div>
<div class="kv"><span>建议动作</span><b style="color:var(--gold-2)">继续观察</b></div>
</div>
<div class="side-card">
<h4>参与游资</h4>
<div class="kv"><span>章盟主</span><b>累计 +2.3亿</b></div>
<div class="kv"><span>炒股养家</span><b>累计 +4200万</b></div>
<div class="kv"><span>欢乐海岸</span><b>累计 +3100万</b></div>
</div>
<div class="side-card">
<h4>财务摘要</h4>
<div class="kv"><span>PE / PB</span><b>48.2 / 5.8</b></div>
<div class="kv"><span>营收增速</span><b style="color:var(--blue)">+17.6%</b></div>
<div class="kv"><span>净利润增速</span><b style="color:var(--blue)">+22.1%</b></div>
<div class="kv"><span>ROE</span><b>10.4%</b></div>
<div class="kv"><span>资产负债率</span><b>41.8%</b></div>
</div>
</div>
</div>
</section>
<section class="screen">
<div class="screen-title">
<div>
<div class="kicker">04 Warning Center</div>
<h2>预警与监控页</h2>
</div>
<div class="toolbar">
<span class="pill active">高风险</span>
<span class="pill">重点预警</span>
<span class="pill">普通提醒</span>
</div>
</div>
<div class="warning-layout">
<div class="filter">
<div class="filter-box">
<h4>游资筛选</h4>
<div class="check"><span>章盟主</span><span>14</span></div>
<div class="check"><span>炒股养家</span><span>9</span></div>
<div class="check"><span>欢乐海岸</span><span>6</span></div>
</div>
<div class="filter-box">
<h4>预警类型</h4>
<div class="check"><span>卖出预警</span><span>6</span></div>
<div class="check"><span>慢流出观察</span><span>11</span></div>
<div class="check"><span>破位预警</span><span>3</span></div>
<div class="check"><span>共振失效</span><span>2</span></div>
</div>
<div class="filter-box">
<h4>时间范围</h4>
<div class="check"><span>今日</span><span>22</span></div>
<div class="check"><span>近 3 日</span><span>49</span></div>
<div class="check"><span>近 7 日</span><span>87</span></div>
</div>
</div>
<div class="card">
<div class="section-head"><h3>预警列表</h3><span class="pill">按等级排序</span></div>
<div class="monitor-item red">
<div class="line1"><b>拓维信息 / 章盟主</b><span class="tag red">高风险卖出</span></div>
<div class="line2"><span>江苏路席位净卖出 6800 万</span><span>33.42 / +6.38%</span></div>
</div>
<div class="monitor-item orange">
<div class="line1"><b>四川长虹 / 章盟主</b><span class="tag orange">慢流出观察</span></div>
<div class="line2"><span>买入后 5 日未见强化动作</span><span>12.67 / -2.45%</span></div>
</div>
<div class="monitor-item red">
<div class="line1"><b>常山北明 / 欢乐海岸</b><span class="tag red">共振失效</span></div>
<div class="line2"><span>高位强势股核心席位开始流出</span><span>24.08 / -3.17%</span></div>
</div>
<div class="monitor-item orange">
<div class="line1"><b>银之杰 / 欢乐海岸</b><span class="tag orange">破位提醒</span></div>
<div class="line2"><span>价格下穿短期成本区</span><span>18.23 / -1.88%</span></div>
</div>
</div>
<div class="card">
<div class="section-head"><h3>预警详情</h3><span class="pill active">拓维信息</span></div>
<div class="side-card" style="margin-bottom:10px">
<h4>触发原因</h4>
<p>章盟主核心席位出现明确净卖出，累计净额由正向下降，同时价格处于高位波动阶段，预警等级提升为高风险。</p>
</div>
<div class="side-card" style="margin-bottom:10px">
<h4>最近 5 日动作摘要</h4>
<div class="kv"><span>D-5</span><b>首次建仓</b></div>
<div class="kv"><span>D-3</span><b>加仓</b></div>
<div class="kv"><span>D-1</span><b>锁仓观察</b></div>
<div class="kv"><span>D</span><b style="color:var(--red)">出现卖出</b></div>
</div>
<div class="side-card">
<h4>建议动作</h4>
<div class="kv"><span>当前判断</span><b>风险优先</b></div>
<div class="kv"><span>执行建议</span><b style="color:var(--red)">减仓 / 规避追高</b></div>
<div class="kv"><span>备注</span><b>等待重新站稳成本区</b></div>
</div>
</div>
</div>
</section>
<div class="footer-note">UI MOCKUP / 深色交易终端风格 / 风险优先于机会</div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink