perf: 优化移动端样式

src/components/Hamburger/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="padding: 0 20px;" @click="toggleClick">
-    <svg-icon icon-class="arrow-to-left" class="hamburger" style="color: #ffffff;" :class="{'is-active':isActive}" />
+    <svg-icon icon-class="direction-left" class="hamburger" :class="{'is-active':isActive}" />
   </div>
 </template>
 
@@ -30,6 +30,6 @@ export default {
   color: $menuText;
 }
 .hamburger.is-active {
-  transform: rotate(180deg);
+  transform: rotate(-180deg);
 }
 </style>

src/icons/svg/direction-left.svg

@@ -0,0 +1,3 @@
+<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#646A73" d="M4.856 11H16.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H4.814l5.025 5.024a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 0 1-.707 0L2.42 13.435l-.006.008L1 12.028l.008-.007L1 12.014 2.414 10.6l.008.007 6.003-6.003a.5.5 0 0 1 .707 0l.707.706a.5.5 0 0 1 0 .708L4.856 11ZM21.5 20a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1Z"/><path fill-opacity=".2" fill="#000" d="M4.856 11H16.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H4.814l5.025 5.024a.5.5 0 0 1 0 .707l-.707.708a.5.5 0 0 1-.707 0L2.42 13.435l-.006.008L1 12.028l.008-.007L1 12.014 2.414 10.6l.008.007 6.003-6.003a.5.5 0 0 1 .707 0l.707.706a.5.5 0 0 1 0 .708L4.856 11ZM21.5 20a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1Z"/></svg> -->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#646A73" d="M19.144 13H7.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h11.686l-5.024-5.025a.5.5 0 0 1 0-.707l.706-.707a.5.5 0 0 1 .708 0l6.003 6.004.007-.008 1.41 1.41a.005.005 0 0 1 0 .008.005.005 0 0 0 0 .007.005.005 0 0 1 0 .007l-1.41 1.411-.008-.007-6.002 6.003a.5.5 0 0 1-.708 0l-.707-.706a.5.5 0 0 1 0-.708L19.144 13ZM2.5 4a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1Z"/><path fill-opacity=".2" fill="#000" d="M19.144 13H7.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h11.686l-5.024-5.025a.5.5 0 0 1 0-.707l.706-.707a.5.5 0 0 1 .708 0l6.003 6.004.007-.008 1.41 1.41a.005.005 0 0 1 0 .008.005.005 0 0 0 0 .007.005.005 0 0 1 0 .007l-1.41 1.411-.008-.007-6.002 6.003a.5.5 0 0 1-.708 0l-.707-.706a.5.5 0 0 1 0-.708L19.144 13ZM2.5 4a.5.5 0 0 1 .5.5v15a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 .5-.5h1Z"/></svg>

src/layout/components/NavHeader/index.vue

@@ -198,7 +198,6 @@ export default {
     line-height: 30px;
     border-radius: 4px;
     border-color: $--color-primary;
-    background-color: white;
     color: #fff;
     cursor: pointer;
     transition: .2s;

src/layout/components/NavLeft/index.vue

@@ -3,19 +3,17 @@
     <div class="nav-header">
       <div class="active-mobile">
         <Organization v-if="$hasLicense()" class="organization" />
-        <ViewSwitcher class="mobile-view-switch" mode="vertical" />
       </div>
       <div class="nav-title">
         <span
           v-show="!isCollapse"
           style="margin-left: 5px;"
-          @click="viewShown = !viewShown"
         >
           {{ isRouteMeta.title || '' }}
         </span>
+
         <span class="switch-view active-switch-view">
           <el-popover
-            v-model="viewShown"
             placement="right-start"
             trigger="hover"
             width="160"
@@ -24,6 +22,9 @@
             <svg-icon slot="reference" class="icon" icon-class="switch" />
           </el-popover>
         </span>
+        <span class="switch-view show-switch-view">
+          <svg-icon class="icon" icon-class="switch" @click="toggleSwitch" />
+        </span>
       </div>
     </div>
     <el-scrollbar class="menu-wrap" wrap-class="scrollbar-wrapper">
@@ -53,6 +54,9 @@
         <Hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
       </div>
     </div>
+    <div class="mobile-menu" :class="{'is-show': viewShown}" @click="viewShown = false">
+      <ViewSwitcher :mode="'vertical'" />
+    </div>
   </div>
 </template>
 
@@ -124,6 +128,9 @@ export default {
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
+    },
+    toggleSwitch() {
+      this.viewShown = true
     }
   }
 }
@@ -217,6 +224,26 @@ export default {
     }
   }
 
+  .is-show {
+    display: block!important;;
+  }
+
+  .mobile-menu {
+    display: none;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    padding-top: 10px;
+    background: #fff;
+    z-index: 100;
+  }
+
+  .show-switch-view {
+    display: none;
+  }
+
   .active-mobile {
     display: none;
 
@@ -227,10 +254,6 @@ export default {
       border-bottom: 1px solid rgba(31, 35, 41, .15);
     }
 
-    & > > > .menu-main {
-      margin-left: -10px;
-    }
-
     & > > > .title-label {
       color: white !important;
     }
@@ -243,9 +266,27 @@ export default {
   @media screen and (max-width: 992px) {
     .active-mobile {
       display: block;
+      .organization {
+        &>>> .svg-icon {
+          color: #FFF!important;
+          margin-right:0px!important;
+        }
+      }
+      .mobile-view-switch {
+        background: #fff!important;
+        &>>> .el-menu-item.is-active {
+          color: var(--menu-text-active)!important;
+          .svg-icon {
+            color: var(--menu-text-active)!important;
+          }
+        }
+      }
     }
     .active-switch-view {
-      display: none !important;;
+      display: none!important;
+    }
+    .show-switch-view {
+      display: block!important;
     }
   }
 </style>