活动页面开发规范（简）

一、目录结构：

|---views
--------luckyDraw //转盘活动
-------------index.vue //PC端页面入口
-------------mindex.vue //m站页面入口
|---components //组件文件夹
---------luckyDraw
------------XXX.vue //子组件
|-----assets
-------------luckyDraw //活动图片位置

二、数据请求处理：

本次活动涉及到的异步数据请求都放在index.vue或者mindex.vue文件中，各个子组件需要的数据如果没有特殊要求均需要通过props获取父组件中的数据 ^[1]。

三、样式（css or sass)书写:

css:

1. 命名方法：如果需要需要两个单词需要采用单线连接，例：happy-day；更详细的请点击：CSS命名规范

2. 书写顺序：

   • 代表位置的属性：例：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等

3. 属性简写：padding^[2]、margin^[2]、font^[3]属性的简写；更多的属性简介点击这里

sass:

1. 页面中的颜色色值采用变量形式存储^[4];
2. 页面中当有可以重复利用的样式时，可以将相同的属性提取到一个自定义的类中，当需要使用的时候使用@extend 类名即可；例：

//自己声明的可复用的类名 test-extend
.test-extend {
  width:100px;
  height;100px;
}
//应用
.extend{
  @extend .test-extend;
  line-height:100px;
}
//渲染为
.extend{
  width:100px;
  height:100px;
  line-height:100px;
}

---

---

1. 因每个人需要的数据可能在同一个接口中获得，所以采用传参形式; ↩

2. margin、padding的值为四个时，对应关系：上、右、下、左；三个值时：上、左右、下；两个值：上下、左右; ↩ ↩

3. 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 ，他们会使用缺省值; ↩

4. 有的网站多处用到同一个色值，采用变量可以达到类似"一键换肤"效果; ↩