2.4 前端开发规范
2.4.1 标准页面公共组件样式规范
本节介绍标准页面前端组件的颜色、图标、文字、按钮、提示框、输入框、选择器等 样式规范。
应用开发主要包括标准页面和高级页面两种页面类型：
● 高级页面：由于自定义开发Widget，代码DOM结构不可能保持唯一，因此无法统 一样式类。可参考规范自行调整。
1.
BackgroundColor背景底色
2. 文字3.
Button按钮
4.
Input输入框/Search搜索框
5.Select选择器（单选/级联选择）
6.
DateTimePicker日期时间选择器
7.Radio单选框 + CheckBox复选框
8.Slider滑块
9.
Upload上传
10.Tree树形控件
11.Pagination分页
12.Message弹窗
13.Tab标签页
14.
Step步骤条（横向/竖向）
15.
TimeLine时间线
16.Table表格
17. 弹窗模态框
18.
Title标题
19.
Border边框
20.
BreadCrumb面包屑
BackgroundColor 背景底色
背景底色的样式规范如图2-13所示。
图2-13 背景底色
表2-2 背景底色的样式类
颜色 色值 引用类
主色 #ff8b00 std-bg-color main-01 主色-提示 #3f75fc std-bg-color main-02 辅助色-严重 #ff0000 std-bg-color assit-error 辅助色-严重 #ff0000 std-bg-color assit-error 辅助色-重要 #ffc600 std-bg-color assit-important 辅助色-一般 #5af0ff std-bg-color assit-normal 辅助色-提示/不确定 #b8bbcc std-bg-color assit-prompt 辅助色-成功 #00ffc6 std-bg-color assit-success 中性色-主要文字 #ffffff std-bg-color neutral-main 中性色-常规文字 #cfd2e5 std-bg-color neutral-normal 中性色-次要文字 #9297b6 std-bg-color neutral-minor 中性色-中性色01 #1b1a33 std-bg-color neutral-bgc01 中性色-中性色02 #1f2033 std-bg-color neutral-bgc02 中性色-中性色03 #4b4d73 std-bg-color neutral-bgc03
颜色 色值 引用类
中性色-中性色04 #595b80 std-bg-color neutral-bgc04
文字
文字的颜色使用主题色橙色（#FF8B00）和中性色（#FFFFFF、#CFD2E5、
#9297B6）。
图2-14 文字规范
Button 按钮
Button按钮的样式规范如图2-15所示。
图2-15 Button 按钮样式规范
表2-3 Button 按钮的风格样式类
组件风格 引用类
积极操作（完成/确定/保存） std-positive
组件风格 引用类 辅助操作（查询/上一步/返回） std-support 消极操作（重置/取消） std-negative
带图标按钮 std-icon
文字按钮 std-text
Input 输入框/Search 搜索框
Input输入框/Search搜索框的样式规范如图2-16所示。
图2-16 Input 输入框/Search 搜索框样式规范
表2-4 Input 输入框/Search 搜索框的风格样式类
组件风格 引用类
初始态 无
带边框（常用于弹窗中的输入框） std-border 搜索框01（带底色方框） std-serach__01 搜索框02 std-serach__02
Select 选择器（单选/级联选择）
Select选择器（单选/级联选择）的样式规范如图2-17所示。
图2-17 Select 选择器（单选/级联选择）样式规范
表2-5 Select 选择器（单选/级联选择）的风格样式类
组件风格 引用类
默认状态 无
带边框（上图选择器Select 02） std-border
DateTimePicker 日期时间选择器
DateTimePicker日期时间选择器的样式规范如图2-18所示。
图2-18 DateTimePicker 日期时间选择器样式规范
表2-6 DateTimePicker 日期时间选择器的风格样式类
组件风格 引用类
初始状态 无
组件风格 引用类
带有背景颜色 ivu-time-picker input带边框 time-border
Radio 单选框 + CheckBox 复选框
Radio单选框 + CheckBox复选框的样式规范如图2-19所示。
图2-19 Radio 单选框 + CheckBox 复选框样式规范
风格样式类：无，直接引入园区主题库即可。
Slider 滑块
Slider滑块的样式规范如图2-20所示。
图2-20 Slider 滑块样式规范
风格样式类：无。
Upload 上传
Upload上传的样式规范如图2-21所示。
图2-21 Upload 上传样式规范
风格样式类：无。
Tree 树形控件
Tree树形控件的样式规范如图2-22所示。
图2-22 Tree 树形控件样式规范
表2-7 Tree 树形控件的风格样式类
组件风格 引用类
初始状态 无
带有选中的背景颜色 ivu-tree-view
Pagination 分页
Pagination分页的样式规范如图2-23所示。
图2-23 Pagination 分页样式规范
表2-8 Pagination 分页的风格样式类
组件风格 引用类
非modal普通页面下 stc-pageDivide-simple modal下的分页组件 stc-pageDivide-modal
Message 弹窗
Message弹窗的样式规范如图2-24所示。
图2-24 Message 弹窗样式规范
风格样式类：直接引入园区主题库即可。
Tab 标签页
1. 标签页样式1：适用于普通页面的标签页样式如图2-25所示。
图2-25 普通页面的标签页样式规范
2. 标签页样式2：适用于弹窗中的标签页样式如图2-26所示。
图2-26 弹窗中的标签页样式规范
3. 标签页样式3：适用于弹窗中或三级的标签页样式如图2-27所示。
图2-27 弹窗中或三级的标签页样式规范
表2-9 Tab 标签页的风格样式类
组件风格 引用类
标签页样式1(适用于普通页面) dream-tabs-simple-page 标签页样式2（适用于弹窗中） dream-tabs-simple-modal1 标签页样式3（适用于弹窗中或三级） dream-tabs-simple-modal2
Step 步骤条（横向/竖向）
Step步骤条（横向/竖向）的样式规范如图2-28所示。
图2-28 Step 步骤条（横向/竖向）样式规范
表2-10 Step 步骤条（横向/竖向）的风格样式类
组件风格 引用类 备注
Step步骤条样式 dream-steps-simple 可以通过该组件的“方向”属性 控制风格为横向或者竖向
TimeLine 时间线
TimeLine时间线的样式规范如图2-29所示。
图2-29 TimeLine 时间线样式规范
表2-11 TimeLine 时间线的风格样式类
组件风格 引用类
TimeLine时间线样式 dream-timeline-simple
Table 表格
1. 普通页面表格样式如图2-30所示。
图2-30 普通页面表格样式规范
2. modal下表格样式如图2-31所示。
图2-31 modal 下表格样式规范
在表格容器下的表格组件上，添加表2-12中的样式类。
表2-12 modal 下表格的风格样式类
组件风格 引用类
modal下的表格 stc-table-modal
组件风格 引用类
非modal普通页面下(有操作栏) stc-table-simple
非modal普通页面下(无操作栏) stc-table-simple-nooperation
弹窗模态框
弹窗模态框的样式规范如图2-32所示。
图2-32 弹窗模态框样式规范
风格样式类：直接引入园区主题库即可。
Title 标题
Title标题样式参考规范如图2-33所示。
图2-33 Title 标题样式规范
表2-13 Title 标题的风格样式类
组件风格 引用类
无背景图 无
组件风格 引用类 卡片中带背景标题 std-card-title
Border 边框
表2-14 Border 边框的风格样式类
组件风格 引用类
全边框 std-border full
左边框 std-border left
右边框 std-border right
上边框 std-border top
底部边框 std-border bottom 加宽(width:2px) strong
定制边框颜色(color: #ff8b00) highlight
BreadCrumb 面包屑
BreadCrumb面包屑的样式规范如图2-34所示。
图2-34 BreadCrumb 面包屑样式规范
风格样式类：无。