2018-12-03-新手教程重构思路

布局防止拉伸

1. 百分比加固定宽度
2. 大屏考虑媒体查询
3. 分组件进行宽度固定或者自适应（对于像图表一类的尽量就不要适应了，防止单位拉伸过大，不美观）
4. 现在常用的布局宽度为1180px，考虑在非大屏下尽量使用1180来限制宽度

详细尝试

1. 将左下方的返回上一页按钮的定位left设置为2%，即让返回按钮始终位于左下角。（由于此处并不对chart部分做适应，所以chart和return-icon的相对位置会发生变化）

小屏下的return图标位置.png

大屏下的return图标位置.png

2. 将下方的forecast-box（包含主要的信息和按钮部分内容）宽度写死为1180px，符合大部分网页的宽度，且可以保证不会因为屏幕宽度与flex布局的问题导致的横向拉伸，使得支付按钮向右移动过度，页面不美观。

   
   
   image.png

小屏下的支付按钮位置.png

大屏下的支付按钮位置.png

同样，设置宽度避免了公式中等号间距过宽的问题

小屏下的等式展示.png

大屏下的等式展示.png

可扩展性（之后添加新的关卡或是页面）

1. 考虑尝试添加一下新的关卡

上一页的翻页逻辑精简（查询类似的gal游戏逻辑，学习）

图表的绘制要更为合理精炼

下一次重构要添加埋点，记录pv uv