隐藏按钮bug修改

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 v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
-      </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>
+    <router-link class="sidebar-logo-link" to="/">
+      <img :src="logo" class="sidebar-logo" />
+      <h1 class="sidebar-title">{{ title }} </h1>
+    </router-link>
   </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 {
-            margin-right: 0;
+        .section-title-inner {
+            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;
         }