| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- .header {
- width: 100%;
- height: 50px;
- padding: 0 20px;
- background: #FFFFFF;
- display: flex;
- justify-content: space-between;
- align-items: center;
- &-logo {
- display: flex;
- align-items: center;
- cursor: pointer;
- &-picture {
- width: 30px;
- height: 30px;
- margin-right: 10px;
- }
- &-text {
- font-size: 16px;
- font-weight: 500;
- }
- }
- &-operation {
- display: flex;
- align-items: center;
- cursor: pointer;
- &-picture {
- width: 30px;
- height: 30px;
- background: @primary-color;
- border-radius: 50%;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-right: 10px;
- color: #FFFFFF;
- }
- &-name {
- font-weight: 500;
- color: @primary-color;
- margin-right: 10px;
- }
- &-down {
- color: @primary-color !important;
- }
- }
- }
- .nav {
- width: 200px !important;
- height: calc(100vh - 50px) !important;
- background: #FFFFFF !important;
- &-menu {
- width: 100%;
- height: calc(100vh - 100px);
- overflow-x: hidden;
- overflow-y: auto;
- }
- &-bottom {
- width: 100%;
- height: 50px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
- .breadcrumb {
- width: 100%;
- height: 48px;
- padding: 20px;
- background: @background-color;
- display: flex;
- align-items: center;
- }
- .content {
- width: 100%;
- height: 100%;
- padding: 0 20px 20px 20px;
- background: @background-color;
- overflow: auto;
- }
|