| | |
| | | <style lang="scss" scoped> |
| | | .sidebar-container { |
| | | background-color: v-bind(getMenuBackground); |
| | | border-radius: 22px; |
| | | overflow: hidden; |
| | | |
| | | .scrollbar-wrapper { |
| | | background-color: v-bind(getMenuBackground); |
| | |
| | | border: none; |
| | | height: 100%; |
| | | width: 100% !important; |
| | | border-radius: 22px; |
| | | |
| | | .el-menu-item, |
| | | .el-sub-menu__title { |
| | |
| | | |
| | | &:hover { |
| | | background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important; |
| | | border-radius: 14px; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | .el-sub-menu__title { |
| | | color: v-bind(getMenuTextColor); |
| | | padding-right: 10px !important; |
| | | display: flex !important; |
| | | align-items: center !important; |
| | | line-height: normal !important; |
| | | } |
| | | |
| | | :deep(.el-sub-menu.is-active > .el-sub-menu__title) { |
| | | color: v-bind(theme) !important; |
| | | font-weight: 600; |
| | | background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important; |
| | | border-radius: 14px; |
| | | margin: 0 10px 6px !important; |
| | | width: calc(100% - 20px) !important; |
| | | padding-left: 10px !important; |
| | | padding-right: 10px !important; |
| | | box-sizing: border-box; |
| | | background-clip: padding-box; |
| | | display: flex !important; |
| | | align-items: center !important; |
| | | line-height: normal !important; |
| | | } |
| | | |
| | | :deep(.el-menu-item.is-active) { |
| | | margin: 0 10px 6px !important; |
| | | width: calc(100% - 20px) !important; |
| | | padding-left: 10px !important; |
| | | padding-right: 10px !important; |
| | | box-sizing: border-box; |
| | | overflow: hidden; |
| | | background-clip: padding-box; |
| | | border-radius: 14px; |
| | | } |
| | | |
| | | :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title), |
| | |
| | | :deep(.el-menu-item.is-active .svg-icon) { |
| | | color: v-bind(theme) !important; |
| | | } |
| | | |
| | | :deep(.el-sub-menu__title:hover), |
| | | :deep(.el-menu-item:hover) { |
| | | border-radius: 14px; |
| | | } |
| | | |
| | | /* 确保子菜单箭头显示 - 使用 flex 布局让箭头和文字在一排 */ |
| | | :deep(.el-sub-menu .el-sub-menu__title) { |
| | | display: flex !important; |
| | | align-items: center !important; |
| | | justify-content: flex-start !important; |
| | | line-height: normal !important; |
| | | } |
| | | |
| | | :deep(.el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow) { |
| | | position: static !important; |
| | | display: inline-flex !important; |
| | | visibility: visible !important; |
| | | width: auto !important; |
| | | height: auto !important; |
| | | overflow: visible !important; |
| | | margin-left: auto !important; |
| | | margin-right: 0 !important; |
| | | order: 999 !important; |
| | | align-self: center !important; |
| | | margin-top: 0 !important; |
| | | margin-bottom: 0 !important; |
| | | transform: none !important; |
| | | top: auto !important; |
| | | } |
| | | |
| | | /* 确保一级菜单箭头显示 */ |
| | | :deep(> .el-menu > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow) { |
| | | display: inline-flex !important; |
| | | visibility: visible !important; |
| | | } |
| | | |
| | | /* 确保二级菜单箭头显示 */ |
| | | :deep(.nest-menu .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow) { |
| | | display: inline-flex !important; |
| | | visibility: visible !important; |
| | | } |
| | | } |
| | | } |
| | | </style> |