style.less 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. .header {
  2. width: 100%;
  3. height: 50px;
  4. padding: 0 20px;
  5. background: #FFFFFF;
  6. display: flex;
  7. justify-content: space-between;
  8. align-items: center;
  9. &-logo {
  10. display: flex;
  11. align-items: center;
  12. cursor: pointer;
  13. &-picture {
  14. width: 30px;
  15. height: 30px;
  16. margin-right: 10px;
  17. }
  18. &-text {
  19. font-size: 16px;
  20. font-weight: 500;
  21. }
  22. }
  23. &-operation {
  24. display: flex;
  25. align-items: center;
  26. cursor: pointer;
  27. &-picture {
  28. width: 30px;
  29. height: 30px;
  30. background: @primary-color;
  31. border-radius: 50%;
  32. display: flex;
  33. justify-content: center;
  34. align-items: center;
  35. margin-right: 10px;
  36. color: #FFFFFF;
  37. }
  38. &-name {
  39. font-weight: 500;
  40. color: @primary-color;
  41. margin-right: 10px;
  42. }
  43. &-down {
  44. color: @primary-color !important;
  45. }
  46. }
  47. }
  48. .nav {
  49. width: 200px !important;
  50. height: calc(100vh - 50px) !important;
  51. background: #FFFFFF !important;
  52. &-menu {
  53. width: 100%;
  54. height: calc(100vh - 100px);
  55. overflow-x: hidden;
  56. overflow-y: auto;
  57. }
  58. &-bottom {
  59. width: 100%;
  60. height: 50px;
  61. display: flex;
  62. justify-content: center;
  63. align-items: center;
  64. }
  65. }
  66. .breadcrumb {
  67. width: 100%;
  68. height: 48px;
  69. padding: 20px;
  70. background: @background-color;
  71. display: flex;
  72. align-items: center;
  73. }
  74. .content {
  75. width: 100%;
  76. height: 100%;
  77. padding: 0 20px 20px 20px;
  78. background: @background-color;
  79. overflow: auto;
  80. }