From d98d62b4149bd7efd7898299925c14058a93fda1 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 29 五月 2025 17:06:27 +0800
Subject: [PATCH] 左侧菜单栏样式修改
---
src/layout/components/Sidebar/SidebarItem.vue | 32 +++++++++++++++++++++++++++-----
1 files changed, 27 insertions(+), 5 deletions(-)
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 27f987c..4884381 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -2,8 +2,8 @@
<div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
- <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
- <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+ <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }" style="display: flex;flex-direction: column;justify-content: center;height: 80px;padding: 0;width: 80px">
+ <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" style="width: 30px;height: 30px;margin-bottom: 6px"/>
<template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
</el-menu-item>
</app-link>
@@ -11,8 +11,8 @@
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
<template v-if="item.meta" #title>
- <svg-icon :icon-class="item.meta && item.meta.icon" />
- <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+ <svg-icon :icon-class="item.meta && item.meta.icon" style="width: 30px;height: 30px;margin-bottom: 6px"/>
+ <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title}}</span>
</template>
<sidebar-item
@@ -99,5 +99,27 @@
}
</script>
<style scoped>
-
+:deep(.el-sub-menu__title) {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 0 !important;
+ height: 80px;
+ margin-top: 20px;
+}
+:deep(.submenu-title-noDropdown) {
+ padding: 0 !important;
+}
+:deep(.router-link-exact-active) {
+ width: 80px;
+ height: 80px;
+ background: #FFFFFF;
+ border-radius: 10px 10px 10px 10px;
+}
+:deep(.el-sub-menu__icon-arrow) {
+ right: -12px !important;
+ &:hover {
+ color: #ffffff !important;
+ }
+}
</style>
--
Gitblit v1.9.3