anti-fake-code/src/styles/sidebar.scss

@import './variables.scss';
#app {
    // 主体区域
    .main-container {
        position: relative;
        min-height: 100%;
        width: calc(100% - 180px);
        background-color: #EFEFEF;
        transition: margin-left .28s;
        margin-left: 180px;
    }
    .main-content {
        width: calc(100% - 180px);
        margin: 0 15px;
    }
    .header-content {
        width: 100%;
        padding: 0 20px;
    }
    // 顶边栏
    .header-sidebar-container {
        width: 100%;
        // height: 60px;
        position: fixed;
        min-width: 700px;
        background-color: #439CFF;
        color: #fff;
        top: 0;
        left: 0;
        font-size: 18px;
        z-index: 1001;
        // overflow: hidden;
        .svg-icon {
            color: #000;
            margin-right: 16px;
        }
        .el-menu {
            display: inline-block;
            border: none;
            height: 84px;
            vertical-align: bottom;
            a,
            .el-submenu {
                display: inline-block;
                float: left;
            }
            .el-submenu__icon-arrow {
                position: static;
                vertical-align: middle;
                margin-left: 8px;
                margin-top: -3px;
            }
            .el-menu-item,
            .el-submenu__title {
                i {
                    color: #ffffff;
                }
                height: 84px;
                line-height: 84px;
                font-size: 16px;
                padding:0 15px;
                &:hover {
                    background-color: $menuHover !important;
                }
            }
        }
        .is-active {
            border-top: 3px solid #fff;
            border-bottom: 0;
            background-color: $menuHover !important;
        }
        // menu hover
        // .submenu-title-noDropdown,
        // .el-submenu__title {
        // 	i {
        // 		color: #ffffff;
        // 	}
        // 	&:hover {
        // 		background-color: $menuHover !important;
        // 	}
        // }
        // .is-active>.el-submenu__title {
        //   color: $subMenuActiveText !important;
        // }
        // & .nest-menu .el-submenu>.el-submenu__title,
        // & .el-submenu .el-menu-item {
        //   min-width: $sideBarWidth !important;
        //   background-color: $subMenuBg !important;
        //   &:hover {
        // 	background-color: $subMenuHover !important;
        //   }
        // }
    }
    // 侧边栏
    .sidebar-container {
        transition: width 0.28s;
        width: 180px !important;
        height: calc(100% - 84px);
        position: fixed;
        font-size: 0px;
        top: 84px;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow: hidden;
        //reset element-ui css
        .horizontal-collapse-transition {
            transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
        }
        .scrollbar-wrapper {
            height: calc(100% + 15px);
            .el-scrollbar__view {
                height: 100%;
            }
        }
        .is-horizontal {
            display: none;
        }
        a {
            display: inline-block;
            width: 100%;
            overflow: hidden;
        }
        .svg-icon {
            margin-right: 16px;
        }
        .el-menu {
            border: none;
            height: 100%;
            width: 100% !important;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            li {
                &:hover {
                    color: #1b5c7d;
                    // background-color: #ececec !important;
                }
            }
        }
        .is-active {
            border-left: 3px solid #1b5c7d;
            color: #1b5c7d;
            border-bottom: 0;
            // background-color: #ececec !important;
        }
    }
    .openSidebar {
        position: relative;
        top: 84px;
        height: calc(100% - 84px);
    }
    .hideSidebar {
        position: relative;
        top: 84px;
        height: calc(100% - 84px);
        .sidebar-container {
            width: 60px !important;
        }
        .main-container {
            margin-left: 60px;
        }
        .submenu-title-noDropdown {
            padding-left: 10px !important;
            position: relative;
            .el-tooltip {
                padding: 0 10px !important;
            }
        }
        .el-submenu {
            overflow: hidden;
            &>.el-submenu__title {
                padding-left: 10px !important;
                .el-submenu__icon-arrow {
                    display: none;
                }
            }
        }
        .el-menu--collapse {
            .el-submenu {
                &>.el-submenu__title {
                    &>span {
                        height: 0;
                        width: 0;
                        overflow: hidden;
                        visibility: hidden;
                        display: inline-block;
                    }
                }
            }
        }
    }
    //适配移动端
    .mobile {
        .main-container {
            margin-left: 0px;
        }
        .sidebar-container {
            transition: transform .28s;
            width: 180px !important;
        }
        &.hideSidebar {
            .sidebar-container {
                transition-duration: 0.3s;
                transform: translate3d(-180px, 0, 0);
            }
        }
    }
    .withoutAnimation {
        .main-container,
        .sidebar-container {
            transition: none;
        }
    }
}

.el-menu--horizontal {
    // width: 100% !important;
    // left: 0 !important;
    background-color: #F7F7F7;
    .el-menu--popup {
        min-width: 120px;
        .is-active {
            // border-bottom: 2px solid #fff;
            background-color: rgba(255, 232, 230, 1) !important;
        }
        .el-menu-item {
            color: #000 !important;
            &:hover {
                background-color: rgba(255, 232, 230, 1) !important;
            }
        }
    }
}