.scrollbar { // width: 1200px; height: 100% !important; // margin: 0 auto; overflow-x: hidden; /deep/ .el-scrollbar__wrap { overflow-x: hidden; } div:last-child { margin-bottom: 5px; } } .NavScroll { width: 100%; height: 100%; margin: 0 auto; background-color: #f9f9f9; // background-image: url('../../../assets/img/probg.jpg'); // background-size: 100% 100%; // background-repeat: no-repeat; } .navbar.active { // color:#f9c253 !important; // border: 1px solid #44e7f6 !important; color: #fff; // background: linear-gradient(to top, #1776c9, #48a8ed); background: #3a77fd; &::before { background-color: #fff; } i { color: #fff; } } .applications-content { width: 1200px; height: 100%; margin: 0 auto; } .sidebar { width: 180px; height: 500px; position: absolute; top: 10px; left: 170px; display: flex; flex-direction: column; align-items: flex-end; // z-index: 999; } a { text-decoration: none; color: #cbcccf; } .navbar { font-size: 18px; color:rgba(0,0,0,0.8); // color: #a6b2c5; // border: 1px solid #32b1f1; // background-color: #429AFD; // width: 100px; border-radius: 8px; // text-align: center; margin-bottom: 10px; padding: 8px 10px 8px 10px; position: relative; display: flex; justify-content: space-between; align-items: center; position: relative; &::before { display: block; content: ''; width: 3px; height: 18px; background-color: #3a77fd; position: absolute; left: 5px; } span { font-size: 18px; } i { // padding-top: 2px; // float: right; // position: absolute; // top: 10px; // right: 5px; } } .navbar:hover { cursor: pointer; color: #fff; // background: linear-gradient(to top, #1776c9, #48a8ed); background: #3a77fd; // border:1px solid #44e7f6; // color:#f9c253 ; // background: linear-gradient(to top, #1776c9, #48a8ed); i { // color:#44e7f6; color: #fff; } &::before { background-color: #fff; } }