| | |
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style lang="scss" scoped>
|
|---|
| | | .sidebar-item-wrapper { |
|---|
| | | :deep(.menu-icon) { |
|---|
| | | width: 26px; |
|---|
| | | height: 26px; |
|---|
| | | margin-right: 12px; |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | flex-shrink: 0; |
|---|
| | | transition: color 0.2s ease; |
|---|
| | | color: var(--sidebar-text); |
|---|
| | | opacity: 0.88; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-icon), |
|---|
| | | :deep(.el-sub-menu__title:hover .menu-icon) { |
|---|
| | | color: #ffffff; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | .sidebar-item-wrapper {
|
|---|
| | | :deep(.menu-icon) {
|
|---|
| | | width: 26px;
|
|---|
| | | height: 26px;
|
|---|
| | | margin-right: 12px;
|
|---|
| | | display: inline-flex;
|
|---|
| | | align-items: center;
|
|---|
| | | justify-content: center;
|
|---|
| | | flex-shrink: 0;
|
|---|
| | | transition: color 0.2s ease;
|
|---|
| | | color: var(--sidebar-text);
|
|---|
| | | opacity: 0.88;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-icon),
|
|---|
| | | :deep(.el-sub-menu__title:hover .menu-icon) {
|
|---|
| | | color: #ffffff;
|
|---|
| | | opacity: 1;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | :deep(.el-menu-item.is-active .menu-icon) {
|
|---|
| | | color: var(--menu-active-text) !important;
|
|---|
| | | opacity: 1;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | :deep(.menu-title) { |
|---|
| | | font-weight: 500; |
|---|
| | | transition: color 0.2s ease; |
|---|
| | | color: var(--sidebar-text); |
|---|
| | | opacity: 0.82; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-title), |
|---|
| | | :deep(.el-sub-menu__title:hover .menu-title) { |
|---|
| | | color: #ffffff; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.el-menu-item.is-active .menu-title) { |
|---|
| | | color: var(--menu-active-text) !important; |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | :deep(.nest-menu) { |
|---|
| | | .menu-icon { |
|---|
| | | width: 22px; |
|---|
| | | height: 22px; |
|---|
| | | margin-right: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .menu-title { font-size: 13px; } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | :deep(.menu-title) {
|
|---|
| | | font-weight: 500;
|
|---|
| | | transition: color 0.2s ease;
|
|---|
| | | color: var(--sidebar-text);
|
|---|
| | | opacity: 0.82;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.el-menu-item:hover .menu-title),
|
|---|
| | | :deep(.el-sub-menu__title:hover .menu-title) {
|
|---|
| | | color: #ffffff;
|
|---|
| | | opacity: 1;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.el-menu-item.is-active .menu-title) {
|
|---|
| | | color: var(--menu-active-text) !important;
|
|---|
| | | opacity: 1;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | :deep(.nest-menu) {
|
|---|
| | | .menu-icon {
|
|---|
| | | width: 18px;
|
|---|
| | | height: 18px;
|
|---|
| | | margin-right: 8px;
|
|---|
| | | opacity: 0.7;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .menu-title { |
|---|
| | | font-size: 13px;
|
|---|
| | | opacity: 0.85;
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | .el-menu-item.is-active {
|
|---|
| | | .menu-icon {
|
|---|
| | | opacity: 1;
|
|---|
| | | }
|
|---|
| | | .menu-title {
|
|---|
| | | opacity: 1;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
