chuwu 6 years ago
parent
commit
0753167d38
1 changed files with 139 additions and 8 deletions
  1. 139 8
      README.md

+ 139 - 8
README.md

@@ -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![1555054285438](C:\Users\root\AppData\Local\Temp\1555054285438.png)
+
+2.默认按钮(返回、取消、关闭):背景色:#fff,文字颜色:606266![1555054533819](C:\Users\root\AppData\Local\Temp\1555054533819.png) 
+
+3.危险按钮(删除):背景色:#f56c6c,文字颜色:#fff  ![1555055045167](C:\Users\root\AppData\Local\Temp\1555055045167.png) 
+
+4.文字按钮(主要出现在table中,表格跳转页面的按钮主要使用):无边框,文字颜色:409eff![1555055138473](C:\Users\root\AppData\Local\Temp\1555055138473.png) 
+
+### **radio**(2种)
+
+#### 间距
+
+上下间距 9px    左右间距15px
+
+#### 宽度
+
+按钮的宽度随文字多少而改变(文字越多,宽度越大)
+
+#### 颜色及用法
+
+1. 基础用法![img](file:///C:\Users\root\AppData\Roaming\Tencent\Users\1339465914\TIM\WinTemp\RichOle\4$WRK8DD8$C91A$NDSPW1DE.png) 选中状态:背景色和文字色 #409eff      未选中状态:文字和背景色#dcdfe6
+2. 样式用法  ![1555056920621](C:\Users\root\AppData\Local\Temp\1555056920621.png)
+
+​        选中状态:背景色和文字色 #409eff      未选中状态:文字和背景色#dcdfe6
+
+### checkbox(2种)
+
+#### 间距
+
+框和文字直接的距离为10px
+
+#### 宽高
+
+高度19px ,框是14*14px 整体宽度随文字而定
+
+#### 颜色及用法
+
+1.基础用法:![1555057413760](C:\Users\root\AppData\Local\Temp\1555057413760.png)
+
+选中状态:背景色和文字色 #409eff      未选中状态:文字和背景色#dcdfe6
+
+2.全选: ![1555057620034](C:\Users\root\AppData\Local\Temp\1555057620034.png)
+
+### cascader (1种)
+
+#### 宽高
+
+190*40px   (点击触发)(选中状态:背景色和文字色 #409eff      未选中状态:文字和背景色#dcdfe6)
+
+#### 颜色及用法
+
+![1555058175356](C:\Users\root\AppData\Local\Temp\1555058175356.png)
+
+
+
+###  Tabs标签页
+
+统一采用ele-card类型的标签页
+
+#### 颜色:
+文字颜色:#303133
+活跃颜色:#409eff
+border边框颜色:#e4e7ed
+活跃tab下边框为空
+标签页下b的内容容器不存在border
+
+####  间距
+tab标签通过文字多少确定宽度,即文字越多,该标签宽度越大
+左右边距:20px
+高度固定40px
+文字上下局中
+
+####  用法
+分类状态固定,且不会变换的,且不适用下拉框组件的话可以参考使用
+
+
+
+
+
+### input
+
+####    样式:
+
+  1、height:30px; width:220px; 左右padding15px;边框为1px;  ![1555060205199](C:\Users\root\AppData\Local\Temp\1555060205199.png) 
+
+  2、focus的时候![1555060200424](C:\Users\root\AppData\Local\Temp\1555060200424.png) 
+
+### select
+
+####     样式:
+
+​         1.边框为1px;左右padding-15px和30px ;height:30px; width:190px;  ![1555060218181](C:\Users\root\AppData\Local\Temp\1555060218181.png)![1555060285609](C:\Users\root\AppData\Local\Temp\1555060285609.png) 
+
+​	 2.可清空
+
+###  switch
+
+####       样式:
+
+​          1.height:40px; width:20px; 
+
+​          2.颜色-开启“#13ce66”   关闭"#ff4949" 
+
+