From 7355d18f038dd128c69cc1aba0892b383b7f6be4 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 7 May 2020 21:25:53 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=BC=A9=E8=BF=9B=E6=94=B9=E4=B8=BA=E5=8A=A8=E7=94=BB=E5=BD=A2?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |  6 ++-
 .../src/components/common/leftMenu.vue        | 42 +++++++++++--------
 .../page/dashboard/overview/overview2.scss    |  1 -
 3 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 6075dc3d5..59e543683 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -443,9 +443,10 @@ li{
 
 /* begin--左侧列表*/
 .content-left {
-  float: left;
+  display: inline-block;
   width: 200px;
   height: 100%;
+  vertical-align: top;
   border-right: 1px solid #eeeeee;
   padding: 0 0 0 15px;
   box-sizing: border-box;
@@ -507,8 +508,9 @@ li{
 /* begin--右侧内容*/
 .content-right {
   height: 100%;
-  margin-left: 201px;
   padding: 0 5px;
+  display: inline-block;
+  box-sizing: border-box;
   background-color: $content-right-background-color;
 }
 .content-right-option {
diff --git a/nezha-fronted/src/components/common/leftMenu.vue b/nezha-fronted/src/components/common/leftMenu.vue
index 0ede05858..679295278 100644
--- a/nezha-fronted/src/components/common/leftMenu.vue
+++ b/nezha-fronted/src/components/common/leftMenu.vue
@@ -6,8 +6,7 @@
           <div class="bottom-divider"></div>
           <div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div>
         </div>
-      </div>
-      <div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
+      </div><div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
         <slot name="content-right" ></slot>
       </div>
     </div>
@@ -21,7 +20,7 @@
       },
       data(){
         return{
-          isShrink:false,
+          isShrink: this.$store.state.leftMenuStat,
         }
       },
       methods:{
@@ -33,9 +32,6 @@
           }
         }
       },
-      mounted() {
-        this.isShrink=this.$store.state.leftMenuStat ;
-      }
     }
 </script>
 
@@ -50,27 +46,35 @@
   .content .left-slot{
     position: relative;
     background-color: $left-menu-bgcolor;
+    transition: transform 200ms;
+    /*transition: width 200ms;*/
+    transform: scaleX(1);
+    transform-origin: left;
     /*border-bottom: 1px solid #eeeeee;*/
     /*transition: all 100ms;*/
   }
   .content .right-slot{
-    margin-left: unset !important;
-    width: calc(100% - 210px);
-    float: right;
+    width: calc(100% - 200px);
+  }
+  .content .right-slot-open{
+    width: calc(100% - 46px);
+    margin-left: -154px;
   }
   .content .left-slot-shrink{
-    width: 25px;
-    padding: 0px;
+    /*width: 25px;*/
+    transform: scaleX(0.25);
     .bottom-icon .bottom-divider{
       width: 0px;
     }
     .slot-content{
-      visibility: hidden;
+      /*visibility: hidden;*/
+      opacity: 0;
     }
   }
-  .content .right-slot-open{
-    width:calc(100% - 35px);
+  .slot-content {
+    transition: opacity 200ms;
   }
+
   .left-slot .bottom-icon{
     position:absolute;
     bottom: 15px;
@@ -97,12 +101,14 @@
     visibility: hidden;
   }
   .content .left-slot-shrink:hover{
-    width: 200px;
-    padding: 0px 0px 0px 15px;
-    position: absolute;
+    /*width: 200px;*/
+    transform: scaleX(1);
+    /*padding: 0px 0px 0px 15px;
+    position: absolute;*/
     z-index: 100;
     .slot-content{
-      visibility: visible;
+      /*visibility: visible;*/
+      opacity: 1;
     }
     .bottom-icon{
       z-index: 101;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
index 285739a17..efb8f19e6 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -58,7 +58,6 @@
   width: 100%;
 }
 .overview-content .content-row-box {
-  width: 100%;
   display: flex;
   justify-content: space-between;
   align-content: flex-start;