From 7dcf98a17855b3946bfde571baf66723b5b02798 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 23 Oct 2021 20:40:32 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/sidebar/sidebarItem.vue | 18 +++++---
 src/layout/components/sidebar/vertical.vue    |  2 +
 src/style/sidebar.scss                        | 44 +++++++++++++++++++
 3 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index ee2eb568d..160ddb417 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -55,19 +55,23 @@ function resolvePath(routePath) {
     <el-menu-item
       :index="resolvePath(onlyOneChild.path)"
       :class="{ 'submenu-title-noDropdown': !isNest }"
+      style="display: flex; align-items: center"
     >
       <i
+        v-show="props.item.meta.icon"
         :class="
           onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
         "
       />
       <template #title>
-        <span>{{ $t(onlyOneChild.meta.title) }}</span>
-        <Icon
-          v-if="onlyOneChild.meta.extraIcon"
-          :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
-          :content="`${onlyOneChild.meta.extraIcon.name}`"
-        />
+        <div style="display: flex; align-items: center">
+          <span>{{ $t(onlyOneChild.meta.title) }}</span>
+          <Icon
+            v-if="onlyOneChild.meta.extraIcon"
+            :svg="onlyOneChild.meta.extraIcon.svg ? true : false"
+            :content="`${onlyOneChild.meta.extraIcon.name}`"
+          />
+        </div>
       </template>
     </el-menu-item>
   </template>
@@ -79,7 +83,7 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <i :class="props.item.meta.icon"></i>
+      <i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
       <span>{{ $t(props.item.meta.title) }}</span>
       <Icon
         v-if="props.item.meta.extraIcon"
diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue
index fda664dde..5e85c3a24 100644
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -68,12 +68,14 @@ onBeforeMount(() => {
         router
         :collapse-transition="false"
         mode="vertical"
+        class="outer-most"
         @select="menuSelect"
       >
         <sidebar-item
           v-for="route in routeStore.wholeRoutes"
           :key="route.path"
           :item="route"
+          class="outer-most"
           :base-path="route.path"
         />
       </el-menu>
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 57ba1b039..59339a58d 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -299,6 +299,11 @@
         color: $menuText;
         background-color: $subMenuBg;
 
+        span {
+          font-size: 12px;
+          margin-left: 10px;
+        }
+
         &:hover {
           background-color: $subMenuHover;
         }
@@ -306,6 +311,10 @@
 
       .el-sub-menu__title {
         color: $menuText;
+
+        span {
+          margin-left: 10px;
+        }
       }
     }
 
@@ -371,6 +380,11 @@
         color: $menuText;
         background-color: $subMenuBg;
 
+        span {
+          font-size: 12px;
+          margin-left: 10px;
+        }
+
         &:hover {
           background-color: $subMenuHover;
         }
@@ -378,6 +392,10 @@
 
       .el-sub-menu__title {
         color: $menuText;
+
+        span {
+          margin-left: 10px;
+        }
       }
     }
 
@@ -435,6 +453,32 @@
     min-width: $sideBarWidth !important;
   }
 
+  // 有子菜单
+  .el-menu--collapse
+    .is-active.outer-most.el-sub-menu
+    > .el-sub-menu__title::before {
+    position: absolute;
+    top: 0;
+    left: 5px;
+    width: 3px;
+    height: 100%;
+    background-color: #1890ff !important;
+    content: "";
+    clear: both;
+  }
+
+  // 无子菜单
+  .el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
+    position: absolute;
+    top: 0;
+    left: 5px;
+    width: 3px;
+    height: 100%;
+    background-color: #1890ff !important;
+    content: "";
+    clear: both;
+  }
+
   // 手机端
   .mobile {
     .fixed-header {