一、目录结构：
|---views
--------luckyDraw //转盘活动
-------------index.vue //PC端页面入口
-------------mindex.vue //m站页面入口
|---components //组件文件夹
---------luckyDraw
------------XXX.vue //子组件
|-----assets
-------------luckyDraw //活动图片位置
二、数据请求处理：
本次活动涉及到的异步数据请求都放在index.vue或者mindex.vue文件中，各个子组件需要的数据如果没有特殊要求均需要通过props获取父组件中的数据 [1]。
三、样式（css or sass)书写:
css:
命名方法：如果需要需要两个单词需要采用单线连接，例：happy-day；更详细的请点击：CSS命名规范
-
书写顺序：
- 代表位置的属性：例：position、top、left、right、bottom、display、z-index、float、flex等；
- 代表自身大小的属性：例：width、height、padding、margin、border等
- 代表文字的属性：例：font（family、weight、size）、color、text-align、test-indent、line-height、letter-spacing、text-overflow等；
- 其他属性：例：background、transition、visibility、border-radius等
属性简写：padding[2]、margin[2]、font[3]属性的简写；更多的属性简介点击这里
sass:
- 页面中的颜色色值采用变量形式存储[4];
- 页面中当有可以重复利用的样式时，可以将相同的属性提取到一个自定义的类中，当需要使用的时候使用
@extend 类名即可；例：
//自己声明的可复用的类名 test-extend
.test-extend {
width:100px;
height;100px;
}
//应用
.extend{
@extend .test-extend;
line-height:100px;
}
//渲染为
.extend{
width:100px;
height:100px;
line-height:100px;
}
-
因每个人需要的数据可能在同一个接口中获得，所以采用传参形式; ↩
-
margin、padding的值为四个时，对应关系：上、右、下、左；三个值时：上、左右、下；两个值：上下、左右; ↩ ↩
-
font简写：font-style | font-variant | font-weight | font-size | line-height | font-family，同时，font-size和line-height只能通过斜杠/组成一个值，不能分开写，顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值; ↩
-
有的网站多处用到同一个色值，采用变量可以达到类似"一键换肤"效果; ↩
