 layout布局 layout css .menu { height: 100%; left: 0; top: 0; bottom: 0; position: fixed; background-color: #112f50; /deep/ .el-menu { border-right: none; } } .content { padding-left: 200px; transition: all .3s; } .active { padding-left: 64px; } content 布局 {{ nowTime }} | content css .container { background-color: #f5f5f5; .header { background: #242f42; height: 50px; line-height: 50px; width: 100%; .icon { font-size: 30px; float: left; i { font-weight: 500; border-left: 0; color: #ffffff; text-align: center; box-sizing: border-box; outline: 0; cursor: pointer; // transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); padding-left: 12px; } } .header-right { font-size: 12px; text-align: right; padding-right: 20px; .line { font-size: 12px; color: #f5f5f5f5; padding: 10px; } .exit { float: right; position: relative; height: 50px; width: 30px; i { font-size: 18px; top: 50%; transform: translateY(-50%); position: absolute; right: 0; } } } }