From 6e90f8de23a4defec547ba8d4cee32e139424a90 Mon Sep 17 00:00:00 2001
From: OrangeM21 <orangemtony@gmail.com>
Date: Sun, 22 Mar 2020 16:09:00 +0800
Subject: [PATCH] =?UTF-8?q?[UPDATE]=E6=9B=B4=E6=96=B0=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/Logo.vue        |  6 +-
 .../components/Sidebar/Organization.vue       | 56 +++++++++++--------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 3391fa4c0..e5e6ad521 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -45,9 +45,9 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
+  height: 70px;
+  line-height: 60px;
+  // background: #2b2f3a;
   text-align: center;
   overflow: hidden;
 
diff --git a/src/layout/components/Sidebar/Organization.vue b/src/layout/components/Sidebar/Organization.vue
index e1dd22f11..ca1b22afb 100644
--- a/src/layout/components/Sidebar/Organization.vue
+++ b/src/layout/components/Sidebar/Organization.vue
@@ -1,15 +1,17 @@
 <template>
-  <div v-if="!isCollapse && orglist.length>1" style="display: block; background-color: transparent; padding: 14px 20px 14px 20px">
-    <el-dropdown size="medium">
-      <span class="el-dropdown-link" style="color: rgb(167, 177, 194);">
-        <i class="fa fa-bookmark" style="width: 14px;margin-right: 12px; " />
-        {{ currentorg.name }}<i class="el-icon-arrow-down el-icon--right" />
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="(option) in orglist" :key="option.id" @click.native="changeOrg(option.name, option.id)">{{ option.name }}</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-  </div>
+  <transition name="sidebarLogoFade">
+    <div v-if="!isCollapse && orglist.length>1" style="display: block; background-color: transparent; padding: 14px 20px 14px 20px">
+      <el-dropdown size="medium">
+        <span class="el-dropdown-link" style="color: rgb(167, 177, 194);">
+          <i class="fa fa-bookmark" style="width: 14px;margin-right: 12px; " />
+          {{ currentorg.name }}<i class="el-icon-arrow-down el-icon--right" />
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-for="(option) in orglist" :key="option.id" @click.native="changeOrg(option.name, option.id)">{{ option.name }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </transition>
 </template>
 
 <script>
@@ -41,19 +43,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-dropdown-menu{
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+  .el-dropdown-menu{
   width: 200px;
-}
-.el-dropdown-menu >>> .popper__arrow{
+  }
+  .el-dropdown-menu >>> .popper__arrow{
   display: none;
-}
-.el-dropdown{
+  }
+  .el-dropdown{
   width: 100%;
-}
-.el-icon-arrow-down{
-    position: absolute;
-    top: 50%;
-    right: 0px;
-    margin-top: -7px;
-}
+  }
+  .el-icon-arrow-down{
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  margin-top: -7px;
+  }
 </style>