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