2018-03-08 23:34:58 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 需求分析
|
|
|
|
|
|
|
|
|
|
|
|
京东金融首页的需求分析如下：
|
|
|
|
|
|
|
|
|
|
|
|
- 头部
|
|
|
|
|
|
|
|
|
|
|
|
- 轮播图
|
|
|
|
|
|
|
|
|
|
|
|
- 新手特权
|
|
|
|
|
|
|
|
|
|
|
|
- 极速借贷
|
|
|
|
|
|
|
|
|
|
|
|
- 理财精选
|
|
|
|
|
|
|
|
|
|
|
|
- 新品推荐
|
|
|
|
|
|
|
|
|
|
|
|
- 生活服务
|
|
|
|
|
|
|
|
|
|
|
|
- 在线客服
|
|
|
|
|
|
|
|
|
|
|
|
- 公司介绍
|
|
|
|
|
|
|
|
|
|
|
|
- 导航条
|
|
|
|
|
|
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2018-03-08 23:34:58 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
目前，大多数设计稿的尺寸是iPhone5：320*568。
|
|
|
|
|
|
|
2018-10-02 22:10:26 +08:00
|
|
|
|
拿到设计稿后，要先做架构。
|
2018-03-08 23:34:58 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 组件化设计
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 按钮
|
|
|
|
|
|
|
|
|
|
|
|
俺就可以设计成抽象的组件。
|
|
|
|
|
|
|
|
|
|
|
|
我们要先给它一个**默认**类名，然后**允许传递进来一个自定义**的类名，这样就实现**继承**了；让自定义的类名去**覆盖**默认的样式，就实现了**复用**。
|
|
|
|
|
|
|
|
|
|
|
|
### panel
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 轮播图
|
|
|
|
|
|
|
|
|
|
|
|
Vue有一些常用的组件，可以直接拿来用，比如`vue-awesome-swiper`。链接：<https://www.npmjs.com/package/vue-awesome-swiper>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
定义一个抽象的轮播图，然后把轮播图的图片和跳转的url作为参数传递。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### css module
|
|
|
|
|
|
|
|
|
|
|
|
这个组件有一个类名，另外一个组件可能还有个同名的，为了防止冲突，可以使用命名空间。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 第三方的自适应解决方案
|
|
|
|
|
|
|
|
|
|
|
|
hotcss：<https://github.com/imochen/hotcss>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
