mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-21 01:09:17 +08:00
180 lines
4.3 KiB
SCSS
180 lines
4.3 KiB
SCSS
|
// * 设置 notification 层级在 loading 之上
|
|||
|
.el-notification {
|
|||
|
z-index: 99999 !important;
|
|||
|
}
|
|||
|
|
|||
|
// * 设置 message 层级在 loading 之上
|
|||
|
.el-message {
|
|||
|
z-index: 99999 !important;
|
|||
|
}
|
|||
|
|
|||
|
// * el-table 样式
|
|||
|
.table-box {
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
height: 100%;
|
|||
|
|
|||
|
// 表格 search 样式
|
|||
|
.table-search {
|
|||
|
display: flex;
|
|||
|
margin-bottom: 10px;
|
|||
|
.el-form {
|
|||
|
max-width: 1260px;
|
|||
|
.el-form-item {
|
|||
|
margin-right: 5px;
|
|||
|
.el-input,
|
|||
|
.el-select,
|
|||
|
.el-date-editor--timerange {
|
|||
|
width: 210px;
|
|||
|
}
|
|||
|
.el-date-editor--datetimerange,
|
|||
|
.el-date-editor--daterange {
|
|||
|
width: 400px;
|
|||
|
}
|
|||
|
|
|||
|
// 去除时间选择器上下 padding
|
|||
|
.el-range-editor.el-input__wrapper {
|
|||
|
padding: 0 10px;
|
|||
|
}
|
|||
|
|
|||
|
// el-select 为多选时不换行显示
|
|||
|
.el-select__tags {
|
|||
|
overflow: hidden;
|
|||
|
white-space: nowrap;
|
|||
|
}
|
|||
|
}
|
|||
|
.more-item {
|
|||
|
display: inline;
|
|||
|
}
|
|||
|
}
|
|||
|
.search-operation {
|
|||
|
margin-left: 15px;
|
|||
|
white-space: nowrap;
|
|||
|
.search-isOpen {
|
|||
|
margin-left: 20px;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
// 表格 header 样式
|
|||
|
.table-header {
|
|||
|
.header-button-lf {
|
|||
|
float: left;
|
|||
|
.el-button {
|
|||
|
margin-bottom: 20px;
|
|||
|
}
|
|||
|
}
|
|||
|
.header-button-ri {
|
|||
|
float: right;
|
|||
|
.el-button {
|
|||
|
margin-bottom: 20px;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
// el-table 表格样式
|
|||
|
.el-table {
|
|||
|
// 表格自适应撑满整个页面(设置了 flex:1,页面上表格必须添加 height 属性)
|
|||
|
flex: 1;
|
|||
|
.el-table__header th,
|
|||
|
.el-table__body td {
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
.el-table__header th {
|
|||
|
height: 50px;
|
|||
|
font-size: 15px;
|
|||
|
font-weight: bold;
|
|||
|
color: #252525;
|
|||
|
background: #fafafa;
|
|||
|
}
|
|||
|
|
|||
|
// table 中 image 图片样式
|
|||
|
.table-image {
|
|||
|
width: 50px;
|
|||
|
height: 50px;
|
|||
|
border-radius: 50%;
|
|||
|
}
|
|||
|
|
|||
|
// 解决 el-table 中 header 文字换行问题
|
|||
|
.el-table__header .el-table__cell > .cell {
|
|||
|
white-space: nowrap;
|
|||
|
}
|
|||
|
.el-table__row {
|
|||
|
height: 52px;
|
|||
|
}
|
|||
|
|
|||
|
// 解决表格数据为空时样式不居中问题(仅在element-plus中)
|
|||
|
.el-table__empty-block {
|
|||
|
position: absolute;
|
|||
|
top: 50%;
|
|||
|
left: 50%;
|
|||
|
transform: translate(-50%, -50%);
|
|||
|
}
|
|||
|
.table-empty {
|
|||
|
line-height: 30px;
|
|||
|
}
|
|||
|
|
|||
|
// 解决 keep-alive || 浏览器窗口大小变化 导致 el-table 样式错乱问题(2.1.4会出现问题,升级之后问题已解决)
|
|||
|
// .el-table__body-wrapper {
|
|||
|
// height: calc(100% - 50px) !important;
|
|||
|
// }
|
|||
|
// .el-table__inner-wrapper,
|
|||
|
// .el-scrollbar__wrap {
|
|||
|
// height: 100% !important;
|
|||
|
// }
|
|||
|
}
|
|||
|
|
|||
|
// 表格 pagination 样式
|
|||
|
.el-pagination {
|
|||
|
display: flex;
|
|||
|
justify-content: flex-end;
|
|||
|
margin: 23px 0 10px;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
// * el-drawer 样式
|
|||
|
.el-drawer {
|
|||
|
// drawer header 样式
|
|||
|
.el-drawer__header {
|
|||
|
padding: 15px 20px 14px;
|
|||
|
margin-bottom: 0;
|
|||
|
border-bottom: 1px solid #ebeef5;
|
|||
|
span {
|
|||
|
font-size: 17px;
|
|||
|
color: #303133;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
// drawer header 样式
|
|||
|
.el-drawer__footer {
|
|||
|
border-top: 1px solid #ebeef5;
|
|||
|
}
|
|||
|
.el-select {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
// drawer-form 多列 form-item
|
|||
|
.drawer-multiColumn-form {
|
|||
|
display: flex;
|
|||
|
flex-wrap: wrap;
|
|||
|
.el-form-item {
|
|||
|
width: 47%;
|
|||
|
&:nth-child(2n-1) {
|
|||
|
margin-right: 5%;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
// * el-dialog 样式
|
|||
|
.el-dialog {
|
|||
|
.el-dialog__header {
|
|||
|
padding: 15px 20px;
|
|||
|
margin: 0;
|
|||
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
.el-dialog__title {
|
|||
|
font-size: 17px;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|