new_wms_admin/src/styles/element.scss

/* 设置 notification、message 层级在 loading 之上 */
.el-message,
.el-notification {
    z-index: 2058 !important;
}

// .el-message,
// .el-message--info {
//     color: red !important;
// }

/* el-alert */
.el-alert {
    border: 1px solid;
}

/* 当前页面最大化 css */
.main-maximize {
    .aside-split,
    .el-aside,
    .el-header,
    .el-footer,
    .tabs-box {
        display: none !important;
    }
}

/* custom card */
.card {
    box-sizing: border-box;
    padding: 16px;
    overflow-x: hidden;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-light);
    border-radius: 6px;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
.no-card {
    .card {
        padding: 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .table-search {
        padding: 18px 0 0 !important;
        margin-bottom: 0 !important;
    }
}

/* content-box (常用内容盒子) */
.content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    .text {
        margin: 20px 0 30px;
        font-size: 23px;
        font-weight: bold;
        color: var(--el-text-color-regular);
    }
    .el-descriptions {
        width: 100%;
        padding: 40px 0 0;
        .el-descriptions__title {
            font-size: 18px;
        }
        .el-descriptions__label {
            width: 200px;
        }
    }
}

/* main-box (树形表格 treeFilter 页面会使用，左右布局 flex) */
.main-box {
    display: flex;
    width: 100%;
    height: 100%;
    .table-box {
        // 这里减去的是 treeFilter 组件宽度
        width: calc(100% - 230px);
    }
}

/* proTable */
.table-box,
.table-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: 100%;

    // table-search 表格搜索样式
    .table-search {
        margin-bottom: 10px;
        .el-form {
            .el-form-item__content > * {
                width: 100%;
            }

            // 去除时间选择器上下 padding
            .el-range-editor.el-input__wrapper {
                padding: 0 10px;
            }
        }
        .operation {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 18px;
        }
    }

    // 表格 header 样式
    .table-header {
        .header-button-lf {
            float: left;
        }
        .header-button-ri {
            float: right;
        }
        .el-button {
            margin-bottom: 15px;
        }
    }

    // el-table 表格样式
    .el-table {
        flex: 1;

        // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
        table {
            width: 100%;
        }
        .el-table__header th {
            height: 45px;
            font-size: 12px;
            font-weight: bold;
            color: var(--el-text-color-primary);
            background: var(--el-fill-color-light);
        }
        .el-table__row {
            height: 45px;
            font-size: 12px;
            .el-table__placeholder {
                display: inline;
            }
        }

        // 设置 el-table 中 header 文字不换行，并省略
        .el-table__header .el-table__cell > .cell {
            // color: red;
            white-space: nowrap;

            //   border-right: 1px solid rgb(206 209 217 / 100%);
        }

        // 解决表格数据为空时样式不居中问题(仅在element-plus中)
        .el-table__empty-block {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .table-empty {
                line-height: 30px;
            }
        }

        // table 中 image 图片样式
        .table-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }

    // 表格 pagination 样式
    .el-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
}

/* el-table 组件大小 */
.el-table--small {
    .el-table__header th {
        height: 40px !important;
        font-size: 14px !important;
    }
    .el-table__row {
        height: 40px !important;
        font-size: 13px !important;
    }
}
.el-table--large {
    .el-table__header th {
        height: 50px !important;
        font-size: 16px !important;
    }
    .el-table__row {
        height: 50px !important;
        font-size: 15px !important;
    }
}

/* el-drawer */
.el-drawer {
    .el-drawer__header {
        padding: 16px 20px;
        margin-bottom: 0;
        border-bottom: 1px solid var(--el-border-color-lighter);
        span {
            font-size: 17px;
            line-height: 17px;
            color: var(--el-text-color-primary) !important;
        }
    }
    .el-drawer__footer {
        border-top: 1px solid var(--el-border-color-lighter);
    }

    // select 样式
    .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 var(--el-border-color-lighter);
        .el-dialog__title {
            font-size: 17px;
        }
    }
}
.el {
    font-size: 12px !important;
}
.el-form-item--default {
    font-size: 12px !important;
}
.el-pagination__total {
    font-size: 12px !important;
}
.el-table__cell .cell div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}