| | |
| | | } |
| | | |
| | | .el-menu-item, .el-submenu__title { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .el-submenu__title span { |
| | | white-space: normal; |
| | | word-break: break-all; |
| | | line-height: 20px; |
| | | flex: 1; |
| | | padding-right: 20px; |
| | | } |
| | | |
| | | .el-menu-item { |
| | | display: flex; |
| | | align-items: center; |
| | | padding-right: 20px !important; |
| | | } |
| | | .el-menu-item span { |
| | | white-space: normal; |
| | | word-break: break-all; |
| | | line-height: 20px; |
| | | flex: 1; |
| | | overflow: hidden !important; |
| | | text-overflow: ellipsis !important; |
| | | white-space: nowrap !important; |
| | | } |
| | | |
| | | // menu hover |
| | | .submenu-title-noDropdown, |
| | | .el-submenu__title { |
| | | &:hover { |
| | | background-color: rgba(0, 0, 0, 0.06) !important; |
| | | background-color: rgba(0, 0, 0, 0.08) !important; |
| | | } |
| | | } |
| | | |
| | |
| | | min-width: $base-sidebar-width !important; |
| | | |
| | | &:hover { |
| | | background-color: rgba(0, 0, 0, 0.06) !important; |
| | | background-color: rgba(0, 0, 0, 0.08) !important; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | .hideSidebar { |
| | | .sidebar-container { |
| | | width: 54px !important; |
| | | width: 70px !important; |
| | | } |
| | | |
| | | .main-container { |
| | | margin-left: 54px; |
| | | margin-left: 70px; |
| | | } |
| | | |
| | | .submenu-title-noDropdown { |
| | |
| | | padding: 0 !important; |
| | | |
| | | .svg-icon { |
| | | margin-left: 20px; |
| | | width: 1.5em; |
| | | height: 1.5em; |
| | | margin-left: 25px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-menu-item.is-active, |
| | | .el-submenu.is-active > .el-submenu__title { |
| | | background-color: transparent !important; |
| | | } |
| | | .el-submenu { |
| | | overflow: hidden; |
| | | |
| | |
| | | padding: 0 !important; |
| | | |
| | | .svg-icon { |
| | | margin-left: 20px; |
| | | width: 1.5em; |
| | | height: 1.5em; |
| | | margin-left: 25px; |
| | | } |
| | | |
| | | } |
| | |
| | | .el-menu--collapse { |
| | | .el-submenu { |
| | | &>.el-submenu__title { |
| | | height: auto; /* 根据内容自动调整高度 */ |
| | | flex-direction: column; /* 改变布局方向为垂直 */ |
| | | align-items: center; /* 居中对齐 */ |
| | | margin-bottom: 10px; |
| | | &>span { |
| | | height: 0; |
| | | width: 0; |
| | | overflow: hidden; |
| | | visibility: hidden; |
| | | display: inline-block; |
| | | display: block !important; |
| | | visibility: visible !important; |
| | | white-space: normal; /* 允许换行 */ |
| | | text-align: center; /* 文本居中对齐 */ |
| | | line-height: normal; |
| | | } |
| | | } |
| | | } |