交易页 · 10 种布局
每套的图表位置、控件排布、赔率形态都不同。
全部真价格 · 真 K 线 · 真下单 · 震动。
图表全部升级:蜡烛 + 成交量 + MA5/MA20 + 价格轴 + 时间轴 + 买卖标签,
手指按住图表会出十字光标和 OHLC 读数。
保留
3
极简大字(保留)64px 价格 · 数字滚动 · 无边框
›
图表当主角 · 大占比
T1
全屏图 + 底部抽屉
图表铺满整屏,底部一条 152px 的条:赔率 + 跌涨。上滑展开完整下单面板。
图表 100% 面积 · 抽屉式交互
›
T3
大图 + 浮动卡
图表 62vh,下单卡半透明压在图表底边(-26px 重叠),毛玻璃。
图表 62% · 卡片浮在图上
›
T8
沉浸式
图表占满全屏,只有底部两个巨大的跌/涨按钮。赔率和金额缩到顶部小条。
图表 100% · 按钮最大 · 无表格
›
左右分栏 · 横向排布
T2
左图右栏
图表在左占 62%,右侧一条窄栏竖排:赔率 6 行、金额、跌涨按钮。
左右分栏 · 右栏 168px
›
T9
分栏终端
左侧 92px 竖排赔率列表(像 Bloomberg 的券列表),右侧图表 + 底部下单。
左窄栏 92px · 终端感
›
T6
横滑三图
M1 / M5 / M15 三张图横向滑动切换,每张带标签,下方固定下单。
横向轮播 · scroll-snap
›
网格 / 特殊形态
T7
便当网格
图表占 4×2 大格,赔率、金额、按钮、订单各占小格,苹果 Bento 布局。
4 列网格 · 图表跨 2 行
›
T5
环形赔率
6 个圆形赔率按钮环绕在图表四周(左上/右上/左中/右中/左下/右下)。
赔率环形分布 · 图表居中
›
T4
图表吸顶
图表 36vh 吸在顶部,下方所有内容滚动时图表不动(sticky)。
sticky 吸顶 · 边滚边看盘
›
T10
垂直流
最传统的从上到下:价格 → 44vh 大图 → 赔率 3×2 → 金额 → 按钮 → 订单。
单列滚动 · 图表 44vh
›
图表怎么试:手指按住图表左右滑动 → 出现十字光标和 OHLC 读数(开/高/低/收)。
打不开:点整行会全屏打开,如果没反应,长按复制链接发我。