Trading Command Center · 设计风格说明
关键词:Glassmorphism + Data Dashboard +
Cyberpunk Accent
|整体感觉:高端交易控制中心 / 航天指挥舱,层级分明、数据流动感强,给操盘手“掌控全局”的专业感。
一、视觉风格定位
玻璃拟态 + 仪表盘 + 赛博强调
强调色只用于:当前选中 / 关键状态 / 可操作按钮。其余保持克制。
二、背景层
#0a0f1a → #111827
可选:微弱网格纹理(已加)/ 轻粒子(后续再上)。
三、卡片层(高性能实现)
rgba(255,255,255,0.03)
用半透明 + 细边框 + 轻阴影替代 blur,视觉接近但更稳更快。
色彩方案(文字提示 + 颜色参考)
主强调:#06b6d4 → #22d3ee
次强调:#8b5cf6 → #a78bfa
盈利:#10b981
亏损:#f43f5e
警告:#f59e0b
主背景
#0a0f1a → #111827
#0a0f1a → #111827
玻璃层
rgba(255,255,255,0.03)
rgba(255,255,255,0.03)
主强调(青)
#06b6d4 → #22d3ee
#06b6d4 → #22d3ee
次强调(紫)
#8b5cf6 → #a78bfa
#8b5cf6 → #a78bfa
状态色
绿/黄/红
绿/黄/红
主文字:#ffffff
次文字:#94a3b8
辅助文字:#64748b
设计元素(文字说明)
毛玻璃卡片
半透明背景 + 细边框 + 轻阴影;Hover 边框更清晰,提示可交互。
渐变强调(克制)
用于“当前操盘对象 / 关键按钮 / 风险提示”,不要全屏乱用。
动效策略(高性能版)
默认只用 transition(无循环动画);告警可局部加闪烁/脉冲(后续再开)。
简单元素参考:操盘日志表格
| 时间 | 对象 | 动作 | 状态 | 影响 |
|---|---|---|---|---|
| 12:41:18 | 英超 · 曼城 vs 阿森纳 | 调整盘口:AH -0.25 → -0.5 | 已生效 | +¥8,240 |
| 12:39:02 | NBA · 湖人 vs 勇士 | 触发风控:单注限额下调 | 需确认 | Risk ↑ |
| 12:32:47 | 西甲 · 皇马 vs 巴萨 | 自动封盘:赔率波动过快 | 已拦截 | -¥3,120 |
提示:后续日志变多时建议做 虚拟列表(只渲染可视行),保证滚动和筛选始终丝滑。