.header{width:100%;height:60px;box-sizing:border-box;padding-right:20px;background-color:pink;position:fixed;top:0;left:0;z-index:99;display:flex;justify-content:space-between;align-items:center;transition:all .3s .05s}.header .left{display:flex;align-items:center}.header .left .header-expand{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;margin-right:10px;margin-left:-10px}.header-title{font-size:20px}.header-user{display:flex;align-items:center}.header-user_logout{margin-left:10px}.main{transition:all .3s .05s;padding-top:80px}.nav{height:100%;background-color:#f5f5f5;position:fixed;top:0;left:0;z-index:100;overflow:scroll}.nav-title{text-align:center;padding:16px 0;border-bottom:1px dashed #e6e6e6;white-space:nowrap}.nav-item{padding:10px 20px 10px 16px;cursor:pointer;display:flex;flex-wrap:nowrap;align-items:center;border-left:2px solid transparent;-webkit-user-select:none;user-select:none}.nav-item.active{color:#260fd2;border-left:2px solid #260fd2;background-color:#f5f5f5}.nav-item .icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:26px;height:26px}.nav-item .text{font-size:16px;white-space:nowrap;margin-left:6px}.nav-item:hover{color:#260fd2}.aside{transition:all .3s}.aside--open{width:200px}.aside--close{width:60px}.aside--close .nav-item .text{visibility:hidden}.layout--open .header,.layout--open .main{padding-left:220px}.layout--close .header,.layout--close .main{padding-left:80px}*{margin:0;padding:0}li{list-style-type:none}