index.scss 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. @import "../layout_common";
  2. .layout-wrap--topMix {
  3. width: 100%;
  4. height: 100%;
  5. .el-header {
  6. box-sizing: border-box;
  7. display: flex;
  8. align-items: center;
  9. justify-content: space-between;
  10. height: $header_height;
  11. //padding: 0 15px 0 0;
  12. padding: 0;
  13. background-color: var(--el-header-bg-color);
  14. border-bottom: 1px solid var(--el-header-border-color);
  15. //box-shadow: 0 2px 8px var(--el-header-border-color);
  16. //box-shadow: 0 1px 4px -1px var(--el-header-border-color);
  17. //z-index: $header_index + 1;
  18. .header-lf {
  19. display: flex;
  20. align-items: center;
  21. overflow: hidden;
  22. white-space: nowrap;
  23. height: 100%;
  24. .logo {
  25. display: flex;
  26. align-items: center;
  27. justify-content: center;
  28. flex-shrink: 0;
  29. width: 210px;
  30. height: 100%;
  31. //border-right: 1px solid #f00;
  32. //margin-right: 16px;
  33. .logo-img {
  34. //width: 28px;
  35. width: 36px;
  36. height: 36px;
  37. object-fit: contain;
  38. //margin-right: 6px;
  39. margin: 0 6px;
  40. }
  41. .logo-text {
  42. color: var(--el-color-primary);
  43. font-size: 15px;
  44. font-weight: bold;
  45. //color: var(--el-header-logo-text-color);
  46. white-space: nowrap;
  47. }
  48. }
  49. }
  50. }
  51. .topMix-content {
  52. display: flex;
  53. height: calc(100% - $header_height);
  54. .aside-box {
  55. width: auto;
  56. background-color: var(--el-menu-bg-color);
  57. //border-right: 1px solid var(--el-aside-border-color);
  58. z-index: $header_index;
  59. //box-shadow: 2px 0 8px #1d23290d;
  60. //box-shadow: 2px 0 8px var(--el-aside-border-color);
  61. box-shadow: 1px 0 2px var(--el-aside-border-color);
  62. ////box-shadow: 1px 1px 8px var(--el-color-primary);
  63. //box-shadow: 1px 1px 16px -10px var(--el-color-primary);
  64. display: flex;
  65. flex-direction: column;
  66. height: 100%;
  67. transition: width 0.3s ease;
  68. .layout-menu-wrap {
  69. width: 100%;
  70. overflow-x: hidden;
  71. border-right: none;
  72. // 折叠
  73. /*&--collapse {
  74. //background-color: transparent !important;
  75. .menu-icon {
  76. margin-right: 0;
  77. }
  78. }*/
  79. }
  80. }
  81. .topMix-main {
  82. display: flex;
  83. flex-direction: column;
  84. }
  85. }
  86. }