## 说明文档 >UI库设计的两大原则:一、设计与布局分离；二、内容与结构无关；谨记并理解 ### 目录文档结构说明 global.scss 目前在sadmin.s1.ymatou.com 未来做全局样式库 - variables 库变量 - reset rest全局样式 - mixin 常用混合，未来要改成做混合聚合 - container 容器定义，内容偏少，以后要扩容 - title 标题定义混合函数 - form 要废弃掉，在优惠券项目中使用，已经迁移只优惠券内做局部scss，目前全局中没有使用，希望以后改成form元素集合 - listgroup list集合，涵盖图片list，图文，图表单域list - table table list，未来要增加table相关系列的函数混合 - page 分页混合 - radio radio，checkbox定义，未来聚合到form混合，包含在mixin内 - icon 图片icon，没有发现有用到 - tab tab沿用以前写的名称结构，包括之前智豪写的资金合规中的，估计和seller中的也是一致的 - section 定义段落的文本布局 - iconfont 定义字体icon，http://iconfont.cn/showProject?pid=65453，没有权限的找我要 - dialog 弹窗，默认350，设想是最小350宽度，middle：550，large：750 - grid 现在缺少的模块，栅格化布局 ### UI库的目标：希望能建立一套seller和admin这种后台都通用的UI标准 #### btn:普通灰色底小按钮 ```html ``` #### btn:普通白底灰字 ```html 取消 ``` #### btn:大按钮 蓝色 ```html 关闭 ``` #### btn:小按钮 蓝色 ```html 关闭 ``` #### btn:小按钮 红色 ```html 确定 ``` #### btn:小按钮 红色 ```html 确定 ``` #### btn:大按钮 红色 ```html 确定 ``` #### select:普通select 宽度190px ```html ``` #### select:普通小select 宽度80px ```html ``` #### input:input做成的select ```html ``` #### input:最小input 42px ```html ``` #### input:小input 80px ```html ``` #### input:普通input 190px ```html ``` #### input:大input 300px ```html ``` #### textarea:大 300px ```html ``` #### tab ```html
``` #### table list ```html
批次号 发放方式 名称 有效期
1620305029

2016-04-29 17:30:46
～
2016-05-10 23:59:59

2016-04-30 17:20:37

 查看
1620305029

2016-04-29 17:30:46
～
2016-05-10 23:59:59

2016-04-30 17:20:37

 查看
``` #### 分页page count ```html ``` #### list:img ```html
``` #### list:upload ```html
``` #### dialog:普通350px 带表单 ```html
分配专员
关闭取消
``` #### dialog:普通350px 警告 ```html
提示
您的咨询人ID与订单买家/买手ID不匹配，请确认是否继续创建？
关闭取消
``` #### dialog:普通350px 成功 ```html
提示
您的咨询人ID与订单买家/买手ID不匹配，请确认是否继续创建？
关闭取消
``` #### dialog:普通350px 失败 ```html
提示
您的咨询人ID与订单买家/买手ID不匹配，请确认是否继续创建？
关闭取消
``` #### listgroup:列表项竖排 ```html
``` #### listgroup:列表项横排 ```html
``` #### listgroup:列表项标题横排 ```html
```