## 需求分析

京东金融首页的需求分析如下：

- 头部

- 轮播图

- 新手特权

- 极速借贷

- 理财精选

- 新品推荐

- 生活服务

- 在线客服

- 公司介绍

- 导航条

![](http://img.smyhvae.com/20180308_1953.png)


目前，大多数设计稿的尺寸是iPhone5：320*568。

拿到设计稿后，要先做架构。


### 组件化设计


### 按钮

俺就可以设计成抽象的组件。

我们要先给它一个**默认**类名，然后**允许传递进来一个自定义**的类名，这样就实现**继承**了；让自定义的类名去**覆盖**默认的样式，就实现了**复用**。

### panel


### 轮播图

Vue有一些常用的组件，可以直接拿来用，比如`vue-awesome-swiper`。链接：<https://www.npmjs.com/package/vue-awesome-swiper>


定义一个抽象的轮播图，然后把轮播图的图片和跳转的url作为参数传递。


### css module

这个组件有一个类名，另外一个组件可能还有个同名的，为了防止冲突，可以使用命名空间。


### 第三方的自适应解决方案

hotcss：<https://github.com/imochen/hotcss>