@import './ZDcolor.sass'; #app{ background: $back_ff; } // .el-dropdown-menu .popper__arrow{ left:65px!important; } //顶部导航 #app .top-submenu{ background: #0045AF!important; border:0!important; } //顶部导航选中 #app .top-submenu .is-active{ background: #043581!important; --theme: #043581!important; } //顶部导航按钮 #app .top-submenu .el-menu-item{ padding:0 20px!important; margin:0!important; font-size:16px; font-weight:500; } //顶部导航悬浮 #app .top-submenu .el-menu-item:hover{ background: #043581!important; } //顶部导航-更多按钮 #app .top-submenu .el-submenu__title{ //backAnimation: #043581!important; color:#fff!important; height:80px!important; line-height:80px!important; margin:0!important; padding:0 20px!important; font-size:16px; font-weight:500; .el-submenu__icon-arrow{ margin-top:-2px!important; } } //顶部导航-更多悬浮 #app .top-submenu .el-submenu__title:hover{ background: #043581!important; } //顶部导航-更多下啦列表 .el-menu--horizontal{ .el-menu{ padding:10px 0; margin:0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; overflow: hidden; background: #f5f5f5!important; box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2); } } .all-menu{ font-size:16px; font-weight:500; margin:5px 10px; background: #f5f5f5!important; color:#333!important; border-radius:10px; } .all-menu:hover{ background: #0045AF!important; color:#fff!important; border-radius:10px; } //缩小后的遮罩 .drawer-bg{ display: none; } #app .sidebar-container .el-scrollbar__bar.is-vertical{ display: none; } /*侧边栏-左*/ .el-menu{ background: $layout_left_back!important; font-family: Microsoft YaHei; font-weight: bold; } #app .sidebar-container .theme-dark .nest-menu svg{ display: none; } #app .sidebar-container .theme-dark .nest-menu span{ margin-left:30px; } #app .sidebar-container{ background: $layout_left_back!important; width:300px!important; //box-shadow: none; //box-shadow:0 0 0 rgb(0 21 41 / 35%); //border-bottom-right-radius: 30px; //border-top-right-radius: 30px; overflow: hidden; padding:0 20px; box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1); //logo栏 .sidebar-logo-container{ background:$layout_left_button!important; } //按钮栏-父 .el-submenu__title{ background:$layout_left_button!important; color:$layout_left_color!important; font-size:16px; font-weight:700; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; svg{ color:#0045af; } } .el-submenu__title span{ display: inline-block; margin-top:-3px; } .el-submenu__title i{ display: inline-block; } .el-submenu__title:hover{ background:$layout_left_button_hover!important; color:$layout_left_color_selected!important; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; i{ color:#fff!important; } svg{ color:#fff; } } .el-submenu__title:hover i{ display: inline-block; margin-right:0; } //独立 .submenu-title-noDropdown{ background:$layout_left_button!important; color:$layout_left_color!important; font-size:16px; font-weight:700; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; svg{ color:#0045af; } } .submenu-title-noDropdown span{ display: inline-block; margin-top:-3px; } //独立-悬浮 .submenu-title-noDropdown:hover{ color:$layout_left_color_selected!important; background:$layout_left_button_hover!important; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; svg{ color:#fff; } } //独立-选中 .router-link-active li{ color:$layout_left_color_selected!important; background:$layout_left_button_hover!important; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; //width:260px; //因为表现异常 暂时注释掉 svg{ color:#fff; } } } //按钮-子 #app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .theme-dark .el-submenu .el-menu-item{ color:$layout_left_color!important; background-color:$layout_left_button!important; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; svg{ color:#0045af; } } #app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title, #app .sidebar-container .theme-dark .el-submenu .el-menu-item span{ display: inline-block; margin-top:-3px; } //按钮-子-悬浮 #app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover{ background-color:$layout_left_button_hover!important; color:$layout_left_color_selected!important; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; svg{ color:#fff; } } //二级父类 #app .sidebar-container .theme-dark .nest-menu .el-submenu .el-submenu__title{ font-size:14px; font-weight:700; //width:260px; //因为表现异常 暂时注释掉 margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; } #app .sidebar-container .theme-dark .nest-menu .el-submenu .el-submenu__title:hover i{ display: inline-block; margin-top:-10px; } //二级父类-悬浮 #app .sidebar-container .theme-dark .nest-menu .el-submenu .el-submenu__title:hover{ background-color:$layout_left_button_hover!important; color:$layout_left_color_selected!important; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; } //选中按钮-父 #app .sidebar-container .theme-dark .is-active > .el-submenu__title{ color:$layout_left_color!important; //color:$layout_left_color_selected!important; //width:260px; //因为表现异常 暂时注释掉 } #app .sidebar-container .theme-dark .is-active > .el-submenu__title:hover{ color:$layout_left_color_selected!important; //color:$layout_left_color_selected!important; } //选中按钮-子 #app .sidebar-container .theme-dark .nest-menu a .is-active{ background:$layout_left_button_selected!important; color:$layout_left_color_selected!important; margin:10px 0 0 0!important; border-radius:10px!important; height:40px!important; line-height:40px!important; //width:260px; //因为表现异常 暂时注释掉 } //右侧小图标-菜单关闭 .el-submenu>.el-submenu__title .el-submenu__icon-arrow{ -webkit-transform: rotateZ(-90deg); -ms-transform: rotate(-90deg); transform: rotateZ(-90deg); margin-top: -10px; } //右侧小图标-菜单展开 .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{ -webkit-transform: rotateZ(0deg); -ms-transform: rotate(0deg); transform: rotateZ(0deg); margin-top: -10px; } //右侧小图标-样式 .el-submenu>.el-submenu__title .el-submenu__icon-arrow::before{ //content: '\e790'; font-size:20px; } /*内容栏-右*/ #app .main-container{ flex:1; margin-left:300px; background: $layout_right_back; display: flex; flex-direction: column; } #app .app-main{ flex:1; display: flex; font-family: Microsoft YaHei; font-weight: bold; } #app .app-container{ flex:1; background: $back_ff; border-radius:10px; //height:870px; overflow-x: hidden; overflow-y: scroll; padding:0; margin:5px 20px 20px 10px; box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1); } //#app .app-container::-webkit-scrollbar { // display: none; //} #app .app-container::-webkit-scrollbar{ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } #app .app-container::-webkit-scrollbar-thumb{ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px #999; background: #fff; } //双时间选项 .el-range-editor--small.el-input__inner{ height:40px; } //角色管理 .role-el-dialog{ .tree-border{ height:200px; overflow-y: scroll; } //滚动条样式 .tree-border::-webkit-scrollbar{ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .tree-border::-webkit-scrollbar-thumb{ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px #999; background: #fff } .tree-border::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0); border-radius: 0; background: rgba(255,255,255,0); } } //顶部菜单导航条 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus{ background: #043581 !important; }