.layout4-aside {
    position: relative;
    z-index: 10;
    width: 100% !important;
    height: 100%;
    background-color: $themeColor;
    transition: width 0.28s;
}

// .el-menu .el-submenu__title {
//     //background-color: #003078;
//     padding-left: 10px !important;
// }
// .el-menu {
//     padding-left: 10px !important;
// }
// .el-submenu__title {
//     //background-color: #003078;
//     padding-left: 10px !important;
// }
// .el-submenu .el-menu-item {
//     padding-left: 20px !important;
// }
.layout4-navbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-right: 20px;
    overflow: hidden;
    background: $themeColor;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    .navbar-left {
        display: flex;
        align-items: center;
        height: 100%;
    }
    .sidebar-logo-container {
        .sidebar-logo-link {
            .sidebar-logo {
                color: #fff;
            }
            .sidebar-title {
                color: rgb(251, 251, 251);
            }
        }
    }
    .right-menu .menu-item {
        color: #fbfbfb !important;
        background: $themeColor !important;
        &:hover {
            background: rgba(0, 0, 0, 0.025) !important;
        }
    }
}

//布局
.layout4 {
    .app-container {
        //background: blue;
        position: relative;
        width: 100%;
        height: 100%;
        background: #F0F2F5;
        .app-header {
            position: relative;
            z-index: 99;
            height: 60px;
            box-shadow: 0 2px 4px 0 rgba(96, 96, 96, 0.16);
        }
        .app-container-in {
            position: relative;
            width: 100%;
            height: auto;
            height: calc(100% - 60px);
            //background: blue;
            background: #F0F2F5;
            .app-aside {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                z-index: 3;
                width: $sideBarWidth;
                height: 100%;
                //background: yellow;
                background: $themeColor;
                box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
                transition: width 0.28s;
                // 侧边栏滚动条
                .el-scrollbar {
                    height: calc(100% - 30px);
                }
                .el-scrollbar__bar {
                    z-index: 10;
                }
                .el-scrollbar__bar.is-vertical {
                    right: 0;
                }
                .scrollbar-wrapper {
                    overflow-x: hidden !important;
                }
                .hamburger-container {
                    height: 30px;
                    line-height: 30px;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                    background: rgba(0, 0, 0, 0.05);
                    transition: background 0.3s;
                    -webkit-tap-highlight-color: transparent;
                }
            }
            .app-main {
                position: relative;
                height: 100%;
                margin-left: $sideBarWidth;
                transition: margin-left 0.28s;
                .app-main-in {
                    position: relative;
                    height: 0%;
                    //overflow: auto;
                    background: #f8f9fa;
                }
            }
        }
    }
    .hideSidebar {
        .app-aside {
            width: 54px !important;
        }
        .app-main {
            margin-left: 54px !important;
        }
    }
    .needTagsView {
        .app-header-in {
            height: 34px;
        }
        .app-main-in {
            height: calc(100% - 34px) !important;
        }
    }
    .withoutAnimation {
        .app-main {
            transition: none !important;
        }
        .app-aside {
            transition: none !important;
        }
    }
}

//layout4 菜单颜色样式
.layout4 .el-menu {
    background-color: $themeColor;
    .el-menu-item,
    .el-submenu__title {
        color: rgba(255, 255, 255, 0.7);
        background-color: $themeColor;
        .el-submenu__icon-arrow {
            color: rgba(255, 255, 255, 0.5);
        }
        &:hover,
        &:focus {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.1);
            .el-submenu__icon-arrow {
                color: #fff;
            }
        }
        &.is-active {
            color: rgb(0, 245, 253);
            background-color: rgba(0, 0, 0, 0.2);
        }
    }
    .is-active .el-submenu__title {
        color: #fff;
        .el-submenu__icon-arrow {
            color: #fff;
        }
    }
}