From 628276ccb7b933450e39d800c484c33aadce770b Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Sat, 11 Dec 2021 10:17:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=9B=BE=E6=A0=87=E5=B1=95=E7=A4=BA=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/SidebarItem/index.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/layout/components/SidebarItem/index.vue b/src/layout/components/SidebarItem/index.vue
index 2484bcde..d17d3275 100644
--- a/src/layout/components/SidebarItem/index.vue
+++ b/src/layout/components/SidebarItem/index.vue
@@ -2,7 +2,7 @@
     <div v-if="item.meta.sidebar !== false" class="sidebar-item">
         <el-sub-menu v-if="item.path == undefined" :title="item.meta.title" :index="JSON.stringify(item)">
             <template #title>
-                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                 <span class="title">{{ item.meta.title }}</span>
             </template>
             <SidebarItem v-for="route in item.children" :key="route.path" :item="route" />
@@ -10,14 +10,14 @@
         <router-link v-else-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
             <a :href="isExternalLink(resolveRoutePath(basePath, item.path)) ? resolveRoutePath(basePath, item.path) : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path)) ? '_blank' : '_self'" @click="navigate">
                 <el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
-                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                     <span class="title">{{ item.meta.title }}</span>
                 </el-menu-item>
             </a>
         </router-link>
         <el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path)">
             <template #title>
-                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" class="icon" />
+                <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
                 <span class="title">{{ item.meta.title }}</span>
             </template>
             <SidebarItem v-for="route in item.children" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path)" />
@@ -69,10 +69,9 @@ const hasChildren = computed(() => {
 }
 :deep(.el-sub-menu),
 :deep(.el-menu-item) {
-    .icon {
+    .svg-icon {
         width: 20px;
         font-size: 20px;
-        margin-right: 10px;
         vertical-align: -0.25em;
         transition: transform 0.3s;
         color: unset;
@@ -81,13 +80,16 @@ const hasChildren = computed(() => {
             vertical-align: middle;
         }
     }
-    &:hover > .icon,
-    .el-sub-menu__title:hover > .icon {
+    .svg-icon + .title {
+        margin-left: 10px;
+    }
+    &:hover > .svg-icon,
+    .el-sub-menu__title:hover > .svg-icon {
         transform: scale(1.2);
     }
 }
 :deep(.el-sub-menu) {
-    > .el-sub-menu__title > .icon.active {
+    > .el-sub-menu__title > .svg-icon.active {
         display: none;
     }
 }