diff --git a/src/assets/style/theme/default.scss b/src/assets/style/theme/default.scss
index 8036cdeb..71ed11c3 100644
--- a/src/assets/style/theme/default.scss
+++ b/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;
         }
       }
diff --git a/src/components/core/MainLayout/index.vue b/src/components/core/MainLayout/index.vue
index 1e4fa914..7405279f 100644
--- a/src/components/core/MainLayout/index.vue
+++ b/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`