ibms/src/framework/style/layout.scss

@import './theme.scss';
$pageHeaderHeight: 50px;
$pageSidebarWidth: 235px;
$pageSidebarClosedWidth: 64px;
$pageSidebarItemHeight: 40px;
$pageFooterHeight: 40px;
html,
body {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px;
    width: 100%;
    height: 100%;
}

#app {
    width: 100%;
    height: 100%;
}

#page-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* 垂直 从上到下 */
    justify-content: flex-start;
    /* 垂直 左对齐 */
    align-items: stretch;
    .page-header {
        order: 0;
        flex-grow: 0;
        flex-shrink: 0;
        height: $pageHeaderHeight;
    }
    .page-container {
        order: 1;
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        flex-direction: row;
        /* 水平,从左到右 */
        justify-content: flex-start;
        /* 水平上对齐 */
        .page-sidebar-wrapper {
            width: $pageSidebarWidth;
            // overflow: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }
        .page-content-wrapper {
            flex-grow: 1;
            flex-shrink: 1;
        }
    }
    .page-footer {
        order: 2;
        flex-grow: 0;
        flex-shrink: 0;
        height: $pageFooterHeight;
        line-height: $pageFooterHeight;
        text-align: center;
        color: #6d6d6d;
    }
}

#page-main .page-header {
    display: flex;
    flex-direction: row;
    /* 水平, 从左向右 */
    justify-content: flex-start;
    /* 垂直 左对齐 */
    .page-logo {
        flex-grow: 0;
        flex-shrink: 0;
        padding-left: 20px;
        padding-right: 20px;
        width: 195px;
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        >a {
            display: inline-block;
            .logo-default {
                margin: 18px 0 0;
                height: 18px;
            }
        }
        .menu-toggler.sidebar-toggler {
            margin-top: 10.5px;
        }
    }
    .data-menu {
        flex-grow: 0;
        flex-shrink: 1;
        width: 240px;
        height: 100%;
        line-height: $pageHeaderHeight;
        .data-menu-dropdown {
            height: 100%;
            line-height: $pageHeaderHeight;
            font-size: 18px;
        }
        .el-select .el-input--suffix .el-input__inner {
            height: 30px;
            line-height: 30px;
        }
    }
    .user-menu {
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0 20px 0 0;
        padding: 0;
        height: 100%;
        display: inline-flex;
        flex-direction: row-reverse;
        .header-nav{
            margin-right: 10px;
            >li{
                float: left;
                width: 50px;
                height: 50px;
                padding: 0 4px;
                box-sizing: border-box;
            }
        }
        .user-menu-dropdown {
            height: 100%;
            line-height: $pageHeaderHeight;
            font-size: 18px;
            margin-left: 20px;
        }
    }
}

#page-main .page-container {
    .page-sidebar-wrapper {
        .el-menu {}
    }
}

#page-main .page-container #page-sidebar-wrapper {
    .sidebar-menu.el-menu {
        border-right: none;
        padding-bottom: 10px;
        .el-submenu {
            .el-menu-item {
                height: $pageSidebarItemHeight;
                line-height: $pageSidebarItemHeight;
            }
        }
    }
}


/** sidebar 弹框 */

.el-menu--vertical {
    .el-menu.el-menu--popup.el-menu--popup-right-start {
        .el-menu-item.sidebar-menu-item {
            height: $pageSidebarItemHeight;
            line-height: $pageSidebarItemHeight;
        }
    }
}

#page-main .page-container .page-content-wrapper {
    margin: 0px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    .page-bar {
        flex-grow: 0;
        flex-shrink: 0;
        height: 30px;
        padding: 0 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #333;
        .el-breadcrumb {
            font-size: 14px;
            line-height: 30px;
        }
    }
    .page-content {
        flex-grow: 1;
        flex-shrink: 1;
        overflow-y: auto;
    }
}

// #page-main #page-container #page-content-wrapper .page-content.page-table-template {
#page-main #page-container #page-content-wrapper .page-table-template {
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-start;
    // align-items: stretch;
    // flex-grow: 1;
    // flex-shrink: 1;
    height: 100%;
    >.query-form {
        flex-grow: 0;
        flex-shrink: 0;
    }
    >.data-table {
        // flex-grow: 1;
        // flex-shrink: 1;
        height: calc(100% - 54px);
        // overflow-x: auto;
        // overflow-y: auto;
        background: #fff;
        // margin-top: 10px;
    }
    >.data-table-pagination {
        //     z-index: 99999;
        margin-top: 10px;
        //     flex-grow: 0;
        //     flex-shrink: 0;
        //     display: flex;
        //     justify-content: flex-end;
        text-align: right;
        //     position: fixed;
        //     bottom: 0;
        //     background: #f2f2f2;
        //     left: 242px;
        //     right: 0;
        //     padding-top: 10px;
        //     padding-bottom: 10px;
    }
}

#page-main #page-container #page-content-wrapper .page-content>.query-form {
    padding: 5px 10px 0px 10px;
    margin-bottom: 10px;
    .el-form {
        .el-form-item {
            margin-bottom: 5px;
            vertical-align: middle;
            .el-form-item__label {
                //min-width: 72px;
            }
            .el-form-item__content {
                margin-left: 0px;
            }
        }
        .halving_line {
            width: 100%;
            border-top: 1px solid #dfe6ec;
        }
    }
}

#page-main #page-container #page-content-wrapper .page-content .data-table {}

// #page-main #page-container #page-content-wrapper .page-content  .data-table {
.data-table {
    position: relative;
    >.el-table {
        position: absolute;
        .el-table__header-wrapper {
            .el-table__header {
                thead tr th {}
            }
        }
        .el-table__body-wrapper {
            .el-table__body {
                tr td {
                    padding: 6px 0;
                    .cell {
                        line-height: 20px;
                    }
                    &.btn {
                        padding: 2px 0;
                    }
                }
            }
        }
    }
}

#page-main #page-container #page-content-wrapper .page-content.input-form {
    form {
        max-width: 800px;
        margin: 50px auto;
        >.el-form-item {
            margin-bottom: 18px;
            >.el-form-item__label {
                width: 180px;
            }
            >.el-form-item__content {
                max-width: 600px;
                margin-left: 180px;
            }
        }
    }
}

#page-main.page-sidebar-closed {
    .page-header {
        .page-logo {
            padding-left: 20px;
            padding-right: 20px;
            width: 20px;
            >a {
                display: none;
            }
        }
    }
    .page-container {
        .page-sidebar-wrapper {
            width: $pageSidebarClosedWidth;
        }
    }
}

// @media screen and (max-width: 1000px) {
//     #page-main {
//         .page-header {
//             .page-logo {
//                 padding-left: 20px;
//                 padding-right: 20px;
//                 width: 20px;
//                 > a {
//                     display: none;
//                 }
//             }
//         }
//         .page-container {
//             .page-sidebar-wrapper {
//                 width: $pageSidebarClosedWidth;
//             }
//         }
//     }
// }
// @media screen and (max-width: 800px) {
//     #page-main {
//         .page-header {
//             .page-logo {
//                 display: none;
//             }
//         }
//         .page-container {
//             display: flex;
//             flex-direction: column;
//             justify-content: flex-start;
//             .page-sidebar-wrapper {
//                 width: 100%;
//             }
//         }
//     }
// }
// @media screen and (max-height: 700px) {
//     #page-main {
//         .page-footer {
//             display: none;
//         }
//     }
// }
.content-scrollbar {
    height: calc(100vh - 33px);
    background: #364150;
    .el-scrollbar__bar {
        &.is-vertical {
            display: none;
        }
    }
}

#page-main #page-container #page-content-wrapper .box {
    display: flex;
    flex-direction: column;
    .el-tabs {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        flex-direction: column;
        .el-tabs__header {
            flex-grow: 0;
            flex-shrink: 0;
        }
        .el-tabs__content {
            flex-grow: 1;
            flex-shrink: 1;
            display: flex;
            flex-direction: column;
            .el-tab-pane {
                height: 100%;
                // flex-grow: 1;
                // flex-shrink: 1;
                display: flex;
                flex-direction: column;
                // // > div {
                // //     flex-grow: 1;
                // //     flex-shrink: 1;
                // // }
            }
        }
    }
}