# web-code-style

该文件为前端推荐规范

1. 前端代码在 ***Google*** 中运行，右侧的主体容器的宽度最小为1000px
2. ***table*** 头部的搜索条件后统一没有冒号
3. 左侧 ***菜单导航*** 文案不得超过八个字符（含八个字符）
4. ***form表单*** 在三个不同尺寸中不同的显示规范
5. ***form表单*** 左侧label固定，需注意左侧字符长度
6. ***table***中表头标题全部居中，文本靠左，数字靠右，时间居中，表格中字符文案太多不做处理，表头列数过多样式无法保证
7. ***弹窗dialog*** 中存在表格请跳转页面，多级弹窗请换成跳转
8. ***左侧菜单*** 一共两级，不接受三级菜单设置
9. ***按钮button*** 统一不添加图标
10. ***分页Pagination*** 下的总数total统一放置在分页中，不接受将其总数变更位置，变换样式。
11. ***table表格*** 的搜索条件请整合为同一行
12. 除个别 ***下拉select*** 不可删除选中，其他选项都存在删除选中
13. 项目选择中默认选中第一个，如果在本地缓存中存在之前选择的项目，优先选中本地缓存的项目
14. 项目中的布局按照网站的布局。



## 整体布局

1.从上到下只要是换行的上下10px

2.从左到右表单元素之间的距离5px ,float到右边的距离右侧10px





## 组件

### button（4种）

####  间距

上下间距 9px    左右间距15px

####  宽度

按钮的宽度随文字多少而改变（文字越多，宽度越大）

####  颜色及用法

1.主要按钮（保存、确定、搜索条件中的按钮及与搜索条件同一列的按钮）：背景色：#409eff![1555054285438](./images/1555054285438.png)

2.默认按钮（返回、取消、关闭）：背景色：#fff，文字颜色：606266![1555054533819](./images/1555054533819.png) 

3.危险按钮（删除）：背景色：#f56c6c，文字颜色：#fff  ![1555055045167](./images/1555055045167.png) 

4.文字按钮（主要出现在table中，表格跳转页面的按钮主要使用）：无边框，文字颜色：409eff![1555055138473](./images/1555055138473.png) 

### **radio**（2种）

#### 间距

上下间距 9px    左右间距15px

#### 宽度

按钮的宽度随文字多少而改变（文字越多，宽度越大）

#### 颜色及用法

1. 基础用法![img](./images/4$WRK8DD8$C91A$NDSPW1DE.png) 选中状态：背景色和文字色 #409eff      未选中状态：文字和背景色#dcdfe6
2. 样式用法  ![1555056920621](./images/1555056920621.png)

​        选中状态：背景色和文字色 #409eff      未选中状态：文字和背景色#dcdfe6

### checkbox（2种）

#### 间距

框和文字直接的距离为10px

#### 宽高

高度19px ,框是14*14px 整体宽度随文字而定

#### 颜色及用法

1.基础用法：![1555057413760](./images/1555057413760.png)

选中状态：背景色和文字色 #409eff      未选中状态：文字和背景色#dcdfe6

2.全选： ![1555057620034](./images/1555057620034.png)

### cascader (1种)

#### 宽高

190*40px   （点击触发）（选中状态：背景色和文字色 #409eff      未选中状态：文字和背景色#dcdfe6）

#### 颜色及用法

![1555058175356](./images/1555058175356.png)



###  Tabs标签页

统一采用ele-card类型的标签页

#### 颜色：
文字颜色：#303133
活跃颜色：#409eff
border边框颜色：#e4e7ed
活跃tab下边框为空
标签页下b的内容容器不存在border

####  间距
tab标签通过文字多少确定宽度，即文字越多，该标签宽度越大
左右边距：20px
高度固定40px
文字上下局中

####  用法
分类状态固定，且不会变换的，且不适用下拉框组件的话可以参考使用





### input

####    样式：

  1、height:30px; width:220px; 左右padding15px；边框为1px;  ![1555060205199](./images/1555060205199.png) 

  2、focus的时候![1555060200424](./images/1555060200424.png) 

### select

####     样式：

​         1.边框为1px；左右padding-15px和30px ；height:30px; width:190px;  ![1555060218181](./images/1555060218181.png)![1555060285609](./images/1555060285609.png) 

​	 2.可清空

###  switch

####       样式:

​          1.height:40px; width:20px; 

​          2.颜色-开启“#13ce66”   关闭"#ff4949"