隐藏按钮bug修改

klp-ui/src/assets/styles/sidebar.scss

@@ -167,14 +167,18 @@
 
     .submenu-title-noDropdown {
       padding: 0 !important;
-      position: relative;
 
       .el-tooltip {
         padding: 0 !important;
+      }
 
-        .svg-icon {
+      .menu-item-inner {
-          margin-left: 20px;
+        justify-content: center;
-        }
+        padding: 0;
+      }
+
+      .svg-icon {
+        margin: 0;
       }
     }
 
@@ -184,23 +188,25 @@
       &>.el-submenu__title {
         padding: 0 !important;
 
+        .menu-item-inner {
+          justify-content: center;
+          padding: 0;
+        }
+
         .svg-icon {
-          margin-left: 20px;
+          margin: 0;
         }
       }
     }
 
     .el-menu--collapse {
-      .el-submenu {
+      .el-menu-item .menu-title,
-        &>.el-submenu__title {
+      .el-submenu .el-submenu__title .menu-title {
-          &>span {
+        height: 0;
-            height: 0;
+        width: 0;
-            width: 0;
+        overflow: hidden;
-            overflow: hidden;
+        visibility: hidden;
-            visibility: hidden;
+        display: inline-block;
-            display: inline-block;
-          }
-        }
       }
     }
   }

klp-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,15 +1,9 @@
 <template>
   <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: '#fff'}">
-    <transition name="sidebarLogoFade">
+    <router-link class="sidebar-logo-link" to="/">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <img :src="logo" class="sidebar-logo" />
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
+      <h1 class="sidebar-title">{{ title }} </h1>
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+    </router-link>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title">{{ title }} </h1>
-      </router-link>
-    </transition>
   </div>
 </template>
 
@@ -43,15 +37,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
-}
-
-.sidebarLogoFade-enter,
-.sidebarLogoFade-leave-to {
-  opacity: 0;
-}
-
 .sidebar-logo-container {
   position: relative;
   width: 100%;
@@ -85,8 +70,19 @@ export default {
   }
 
   &.collapse {
+    .sidebar-logo-link {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
     .sidebar-logo {
-      margin-right: 0px;
+      width: 28px;
+      height: 28px;
+      margin-right: 0;
+    }
+    .sidebar-title {
+      display: none;
     }
   }
 }

klp-ui/src/layout/components/Sidebar/index.vue

@@ -264,7 +264,7 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 26px;
+        font-size: 66px;
         color: #555;
 
         .section-logo {
@@ -293,14 +293,22 @@ export default {
     }
 
     &.is-collapse {
-        padding: 0 6px;
+        padding: 0;
         justify-content: center;
 
-        .section-icon {
+        .section-title-inner {
-            margin-right: 0;
+            justify-content: center;
+            width: auto;
         }
 
-        .section-title-right,
+        .section-icon {
+            margin: 0;
+            width: 36px;
+            height: 36px;
+            font-size: 24px;
+        }
+
+        .section-module,
         .section-arrow {
             display: none;
         }