sidebar.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. #app {
  2. // 主体区域
  3. .main-container {
  4. min-height: 100%;
  5. transition: margin-left .28s;
  6. margin-left: 180px;
  7. }
  8. // 侧边栏
  9. .sidebar-container {
  10. .horizontal-collapse-transition {
  11. transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
  12. }
  13. transition: width .28s;
  14. width: 180px !important;
  15. height: 100%;
  16. position: fixed;
  17. font-size: 0px;
  18. top: 0;
  19. bottom: 0;
  20. left: 0;
  21. z-index: 1001;
  22. overflow: hidden;
  23. a {
  24. display: inline-block;
  25. width: 100%;
  26. }
  27. .svg-icon {
  28. margin-right: 16px;
  29. }
  30. .el-menu {
  31. border: none;
  32. width: 100% !important;
  33. }
  34. }
  35. .hideSidebar {
  36. .sidebar-container {
  37. width: 36px !important;
  38. }
  39. .main-container {
  40. margin-left: 36px;
  41. }
  42. .submenu-title-noDropdown {
  43. padding-left: 10px !important;
  44. position: relative;
  45. .el-tooltip {
  46. padding: 0 10px !important;
  47. }
  48. }
  49. .el-submenu {
  50. &>.el-submenu__title {
  51. padding-left: 10px !important;
  52. &>span {
  53. height: 0;
  54. width: 0;
  55. overflow: hidden;
  56. visibility: hidden;
  57. display: inline-block;
  58. }
  59. .el-submenu__icon-arrow {
  60. display: none;
  61. }
  62. }
  63. }
  64. }
  65. .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
  66. .sidebar-container .el-submenu .el-menu-item {
  67. min-width: 180px !important;
  68. background-color: $subMenuBg !important;
  69. &:hover {
  70. background-color: $menuHover !important;
  71. }
  72. }
  73. .el-menu--collapse .el-menu .el-submenu {
  74. min-width: 180px !important;
  75. }
  76. //适配移动端
  77. .mobile {
  78. .main-container {
  79. margin-left: 0px;
  80. }
  81. .sidebar-container {
  82. top: 50px;
  83. transition: transform .28s;
  84. width: 180px !important;
  85. }
  86. &.hideSidebar {
  87. .sidebar-container {
  88. transition-duration: 0.3s;
  89. transform: translate3d(-180px, 0, 0);
  90. }
  91. }
  92. }
  93. .withoutAnimation {
  94. .main-container,
  95. .sidebar-container {
  96. transition: none;
  97. }
  98. }
  99. }