界面规范2-列表上
1、表格线外边使用粗线,内部使用细线,颜色采用灰色
规定如下:
外边:border: 2px solid #d0e0e0
内部:border-right: 1px solid #d0e0e0
elementui实现如下,其他框架自行定义:
/* 修改表格边框颜色 */
.el-table--border,
.el-table--group {
border: 2px solid #d0e0e0 !important;
}
/* 修改表格内部竖线颜色 */
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper.el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid #d0e0e0 !important;
}
/* 修改表格内行线颜色 */
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid #d0e0e0 !important;
}
2、表头使用粗体,背景灰色
规定如下:
font-family:Microsoft YaHei;
font-size:16px;
color: #34b6a4;
font-weight: 700;
background-color: #f2f2f2
elementui实现如下,其他框架自行定义:
.el-table th.el-table__cell{
color: #34b6a4 !important;
font-weight: 700 !important;
background-color: #f2f2f2 !important;
}
3、内部背景色采用斑马纹效果,鼠标滑过行时着重显示
规定如下
鼠标滑过行:background-color: #D9E1E6
偶数行:background-color: #f2f2f2
elementui实现如下,其他框架自行定义:
.el-table tbody tr:hover > td {
background:#D9E1E6 !important;
}
.el-table__body tr:nth-child(even) > td{
background-color: #f2f2f2 !important;
}