web-code-style

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

2.默认按钮（返回、取消、关闭）：背景色：#fff，文字颜色：606266

3.危险按钮（删除）：背景色：#f56c6c，文字颜色：#fff

4.文字按钮（主要出现在table中，表格跳转页面的按钮主要使用）：无边框，文字颜色：409eff

radio（2种）

间距

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

宽度

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

颜色及用法

1. 基础用法 选中状态：背景色和文字色 #409eff 未选中状态：文字和背景色#dcdfe6
2. 样式用法

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

checkbox（2种）

间距

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

宽高

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

颜色及用法

1.基础用法：

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

2.全选：

cascader (1种)

宽高

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

颜色及用法

Tabs标签页

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

颜色：

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

间距

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

用法

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

input

样式：

1、height:30px; width:220px; 左右padding15px；边框为1px;

2、focus的时候

select

样式：

​ 1.边框为1px；左右padding-15px和30px ；height:30px; width:190px;

​ 2.可清空

switch

样式:

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

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