no message

Former-commit-id: 5a9d9c58234460964df2948403f554c57ff8e723
Former-commit-id: 3eabfb28fafa8a8e90e4ebeadcca79eb512c184b
Former-commit-id: 6b4197adfc81509b1bba73c09fa2a065b9858438

src/assets/style/theme/default.scss

@@ -20,10 +20,11 @@ $color: #409EFF;
     .el-header {
       padding: 0px;
       .logo-group {
-        width: 200px;
+        transition: width .3s;
         float: left;
         text-align: center;
         img {
+          transition: all .3s;
           height: 60px;
         }
       }

src/components/core/MainLayout/index.vue

@@ -1,8 +1,9 @@
 <template>
   <el-container class="layout-main" :class="theme">
     <el-header>
-      <div class="logo-group">
-        <img src="@/assets/image/logo/header.png">
+      <div class="logo-group" :style="logoGroupStyle">
+        <img :style="{opacity: collapse ? 1 : 0}" src="@/assets/image/logo/header-icon-only.png">
+        <img :style="{opacity: collapse ? 0 : 1}" src="@/assets/image/logo/header.png">
       </div>
       <div class="toggle-sidemenu-btn" @click="toggleAside">
         <Icon name="bars"></Icon>
@@ -35,6 +36,11 @@ export default {
     }
   },
   computed: {
+    logoGroupStyle () {
+      return {
+        width: `${this.collapse ? '65' : '200'}px`
+      }
+    },
     asideStyle () {
       return {
         width: `${this.collapse ? '65' : '200'}px`