attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 左侧菜单折叠后icon不居中问题

Browse Source
This commit is contained in:
wang_fan_w 2024-04-14 21:45:55 +08:00
parent c238078f07
commit f81163aca8
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/layout/components/Aside/index.vue
View File

@ -57,4 +57,22 @@ const { collapsed } = storeToRefs(themeStore);
box-shadow: unset; box-shadow: unset;
border-right: $border-1 solid $color-border-2; border-right: $border-1 solid $color-border-2;
} }
// 解决折叠菜单的icon不居中问题
:deep(.arco-menu-vertical.arco-menu-collapsed) {
// 消除icon的自带padding值，并且让元素居中
.arco-menu-has-icon {
padding: 0;
justify-content: center;
}
// 消除icon的自带margin-right值，并且设置icon的padding值以保留icon空隙
.arco-menu-icon {
margin-right: 0;
padding: 10px 0;
}
// 消除title占位
.arco-menu-title {
display: none;
}
}
</style> </style>

12
src/layout/components/Menu/index.vue
View File

@ -18,14 +18,4 @@ const { collapsed } = storeToRefs(themeStore);
console.log("路由树", routeTree.value); console.log("路由树", routeTree.value);
</script> </script>
<style lang="scss"> <style lang="scss" scoped></style>
:deep(.arco-menu-pop .arco-menu-pop-header .arco-menu-has-icon) {
padding: 0 !important;
}
:deep(.arco-menu-vertical .arco-menu-pop-header) {
padding: 0 !important;
}
:deep(.arco-menu-vertical .arco-menu-item) {
padding: 0 !important;
}
</style>