From 141d96b6a29f1c55830cf3c32bd71cb6cfcd7f3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Tue, 20 Mar 2018 22:26:12 +0800
Subject: [PATCH] no message

Former-commit-id: 5a9d9c58234460964df2948403f554c57ff8e723
Former-commit-id: 3eabfb28fafa8a8e90e4ebeadcca79eb512c184b
Former-commit-id: 6b4197adfc81509b1bba73c09fa2a065b9858438
---
 src/assets/style/theme/default.scss      |  3 ++-
 src/components/core/MainLayout/index.vue | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

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`