From 274f820daf3963373338235fc2952aff97cf9b85 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Mon, 27 Jul 2020 15:29:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E6=8A=98=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/components/MsAsideContainer.vue    | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/src/business/components/common/components/MsAsideContainer.vue b/frontend/src/business/components/common/components/MsAsideContainer.vue
index 05453eb947..354c2fa774 100644
--- a/frontend/src/business/components/common/components/MsAsideContainer.vue
+++ b/frontend/src/business/components/common/components/MsAsideContainer.vue
@@ -1,9 +1,12 @@
 <template>
-
-  <el-aside :width="width" class="ms-aside-container">
+  <el-aside :width="width" class="ms-aside-container"
+            :style="{'margin-left': asideHidden ? '0' : '-' + width}">
+    <div class="hiddenBottom" @click="asideHidden = !asideHidden" :style="{'left': width}">
+      <i v-if="asideHidden" class="el-icon-arrow-left"/>
+      <i v-if="!asideHidden" class="el-icon-arrow-right"/>
+    </div>
     <slot></slot>
   </el-aside>
-
 </template>
 
 <script>
@@ -14,6 +17,11 @@
           type: String,
           default: '300px'
         }
+      },
+      data() {
+        return {
+          asideHidden: true
+        }
       }
     }
 </script>
@@ -27,6 +35,31 @@
     box-sizing: border-box;
     background-color: #FFF;
     height: calc(100vh - 80px);
+    position: relative;
+    overflow: inherit;
+  }
+
+  .hiddenBottom {
+    z-index: 199;
+    width: 8px;
+    height: 50px;
+    top: calc((100vh - 80px)/2);
+    line-height: 50px;
+    border-radius: 0 15px 15px 0;
+    background-color: #acb7c1;
+    display: inline-block;
+    position: absolute;
+    cursor: pointer;
+    opacity: 0.2;
+    font-size: 2px;
+  }
+
+  .hiddenBottom i {
+    margin-left: -2px;
+  }
+
+  .hiddenBottom:hover {
+    opacity: 0.5;
   }
 
 </style>