init

src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="sidebar-logo-container">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" class="sidebar-logo-link" to="/">
+        <img :src="logo" class="sidebar-logo">
+      </router-link>
+    </transition>
+    <transition name="sidebarLogoFade">
+      <router-link v-if="!collapse" to="/" class="sidebar-logo-link">
+        <img :src="logo" class="sidebar-logo">
+        <h1 class="sidebar-title">{{ title }} </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarLogo',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: 'Vue Element Admin',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+    }
+  }
+}
+</script>
+
+ <style rel="stylesheet/scss" lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+ .sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+ .sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: #2b2f3a;
+  text-align: center;
+  overflow: hidden;
+   & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+     & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+    }
+     & .sidebar-title {
+      display: inline-block;
+      margin: 0 0 0 12px;
+      color: #fff;
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
+    <logo :collapse="isCollapse" />
     <el-menu
       :default-active="$route.path"
       :collapse="isCollapse"
@@ -16,11 +17,12 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
 
 export default {
-  components: { SidebarItem },
+  components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
       'permission_routes',

src/styles/transition.scss

@@ -1,4 +1,4 @@
-//globl transition css
+//global transition css
 
 /*fade*/
 .fade-enter-active,