1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-21 01:09:17 +08:00
1Panel/frontend/src/styles/element.scss

180 lines
4.3 KiB
SCSS
Raw Normal View History

2022-08-16 23:30:23 +08:00
// * 设置 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;
}
}
}