// * 设置 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; } } border-radius: 5px; } .row-box { display: flex; flex-flow: wrap; } .row-box .el-card { min-width: 100%; height: 100%; margin-right: 20px; border: 0; // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); }