夜雨聆风关于我的白标Perp DEX，之前已经分享过五篇文章：
我决定启动做一款白标Perp DEX了 我的白标Perp DEX终于有进展了 我的白标Perp DEX完成了Portfolio Service 我的白标Perp DEX完成了所有后端服务开发 我的白标Perp DEX完成桌面版前端UI了
前几天，我刚发布最新文章宣布我的白标 Perp DEX 完成 桌面版 UI 了，这也说明端到端的交易全流程已经完全跑通了。
这几天，我就忙着开发 手机版 UI 了。今天，也终于开发完了。以下就是在我的手机上演示的效果图：
因为手机端和 PC 端的排版完全不同，所以手机端每一个页面都是重新设计和开发的。
PC 端导航栏的三个菜单，在手机端就改为了底部的三个 Tab。
Trade 页面是最复杂的，整体布局上，和几大主流交易所是差不多的，细节上的排版有些差异。值得一提的是，我对于 Positions 的卡片设计，每一个仓位卡片，左边有一条红色或绿色的边条，红色代表这是一个空仓，绿色代表多仓。通过这么大的颜色边条进行区分，识别度很高。
盘口的高度会随着右边下单区的高度而自动调整，保持左右高度的一致性，这一点细节其实让我调试了挺久的。
每个仓位卡片下面都有三个按钮，分别用于调整杠杆、设置止盈止损、平仓，这三个弹窗效果如下：
设置止盈止损时，如果勾选上了 Close entire position 的勾选框，则是整个仓位级的止盈止损，否则，可以指定平仓数量。
平仓时则提供了三种方式：市价平仓、限价平仓、反向仓位。市价和限价平仓还支持部分平仓。
再来看 K 线图页面，画图组件和 PC 端一样，依然集成了 TradingView。Hover 具体 K 线，可看到每一根 K 线的具体数据，包括高开低收价格等。K 线周期也和 PC 端的一样，总共可查看 14 种周期。移动平均线也同样可查看 MA7、MA25、MA99。
盘口上，买卖盘分别展示出了 25 档。PC 端默认只展示 7 档。
Markets 页面展示的字段相比 PC 端的会少了不少，只展示了几个核心字段。但搜索功能和排序功能依然保留了。
充值和提现按钮则是在 Portfolio 页面里，展示的数据和 PC 端的保持一致，只是排版不同。下面有多个 Tab，可以查看仓位、当前委托、历史委托、成交记录等，包括充提记录也在这里可以查看。
目前，这个手机端的 UI 主要就是这些了。因为具体的接口和数据，都在开发 PC 端时调试过了，而且一开始的架构设计上就是 PC 端和手机端的 UI 页面是分开的，所以，这次手机端的适配开发相对快很多。
下一步，就准备完善下管理后台了。