左侧菜单栏收缩放到右侧

src/App.vue

@@ -27,11 +27,11 @@
               </el-dropdown>
             </div>
           </div>
-<!--          <div class="logo">-->
+          <!--          <div class="logo">-->
-<!--            <img :src="logo" />-->
+          <!--            <img :src="logo" />-->
-<!--          </div>-->
+          <!--          </div>-->
         </div>
-<!--        <com-header></com-header>-->
+        <!--        <com-header></com-header>-->
         <div class="container-box">
           <router-view />
         </div>
@@ -41,9 +41,9 @@
 </template>
 
 <script>
-  import {mapGetters, mapState} from 'vuex'
+import {mapGetters, mapState} from 'vuex'
-  import { webLoginType } from '@/sysConfig'
+import { webLoginType } from '@/sysConfig'
-  export default {
+export default {
   name: 'App',
   data () {
     return {
@@ -277,11 +277,11 @@
     clearInterval(this.intervalForLogin)
     clearInterval(this.intervalForHome)
   }
-  }
+}
 </script>
 
 <style lang="less">
-  #app {
+#app {
   position: relative;
   width: 100%;
   height: 100%;
@@ -312,7 +312,8 @@
         //flex: 1;
         background: #F4F4F4;
         overflow-y: auto;
-          padding: 10px 10px 0;
+        padding: 10px 0 10px 0;
+        //padding:  10px 10px 0;
         .pagination {
           border-top: 1px solid #f4f4f4;
           width: calc(~'100% - 20px');
@@ -324,5 +325,5 @@
   /deep/.el-menu--vertical {
     background: red;
   }
-  }
+}
 </style>

src/components/navMenu/index.vue

@@ -8,10 +8,10 @@
         </div>
       </div>
     </div>
-    <div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
+    <!--    <div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
-      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>
+    <!--      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>-->
-    <div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
+    <!--    <div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
-      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div></div>
+    <!--      <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div></div>-->
     <div class="left-tree">
       <el-menu
           unique-opened
@@ -66,11 +66,16 @@
         </template>
       </el-menu>
     </div>
+    <div class="tree-collapse" @click="handleToggleSideBar" :class="{ 'tree-close': isCollapse }">
+      <!--切换折叠样式-->
+      <i class="el-icon-arrow-left" v-if="isCollapse === false"></i>
+      <i class="el-icon-arrow-right" v-if="isCollapse === true"></i>
+    </div>
   </div>
 </template>
 <script>
-  import { mapGetters, mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
-  export default {
+export default {
   name: 'NavMenu',
   data () {
     return {
@@ -461,6 +466,11 @@
     handleToggleSideBar () {
       this.toggleSideBar(!this.isCollapse)
     },
+    // 收展按钮
+    collapseIcon() {
+      return this.sideClose ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
+      // return 'el-icon-arrow-left'
+    },
     ...mapMutations(['toggleSideBar'])
   },
   computed: {
@@ -482,16 +492,17 @@
       }
     }
   }
-  }
+}
 </script>
 <style lang="less" scoped>
-  @import '~@/assets/styles/mixins';
+@import '~@/assets/styles/mixins';
-  .nav-menu {
+.nav-menu {
   width: 58px;
   height: 100%;
   overflow-y: auto;
   user-select: none;
   box-sizing: border-box;
+  position: relative;
   background: rgb(255, 255, 255);
   background-size: 100% 100%;
   /deep/.el-tooltip {
@@ -518,6 +529,21 @@
       }
     }
   }
+  .tree-collapse{
+    position: absolute;
+    right: 0;
+    top: 65px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: calc(100% - 69px);
+    background: #EEE;
+    cursor: pointer;
+    &:hover{
+      background-color: #3391CE;
+    }
+  }
   .logo{
     text-align: center;
     padding: 15px 0;
@@ -533,37 +559,37 @@
     background: #f0f7ff !important;
     color: #4091FF !important;
   }
-  }
+}
-  .has-no-read{
+.has-no-read{
   position: relative;
   top:-15px;
   left:10px
-  }
+}
-  .nav-menu /deep/.el-submenu__title i {
+.nav-menu /deep/.el-submenu__title i {
   color: #000;
-  }
+}
-  .nav-menu{
+.nav-menu{
   scrollbar-width: none;
   -ms-overflow-style: none; /* IE 10+ */
-  }
+}
-  .nav-menu::-webkit-scrollbar {
+.nav-menu::-webkit-scrollbar {
   display: none; /* Chrome Safari */
-  }
+}
-  .nav-menu-popper .el-menu .el-menu-item {
+.nav-menu-popper .el-menu .el-menu-item {
   color: #fff !important;
-  }
+}
-  .nav-menu-popper .el-menu .el-menu-item.is-active {
+.nav-menu-popper .el-menu .el-menu-item.is-active {
   background-color: #fff !important;
   color: #5ea9f6 !important;
   font-weight: bold;
-  }
+}
-  .nav-menu-popper .el-menu .el-menu-item:hover {
+.nav-menu-popper .el-menu .el-menu-item:hover {
   background-color: #fff !important;
   color: #5ea9f6 !important;
   font-weight: bold;
-  }
+}
 
-  .el-menu-item {
+.el-menu-item {
   padding: 0 16px !important;
   span {
     font-weight: normal;
@@ -595,8 +621,8 @@
       background-image: url("~assets/images/shangqi/sideBar/liucheng.png");
     }
   }
-  }
+}
-  .el-submenu {
+.el-submenu {
   /deep/.el-submenu__title {
     padding: 0 16px !important;
     span {
@@ -639,8 +665,8 @@
   /deep/.el-menu {
     padding-left: 18px;
   }
-  }
+}
-  .el-menu--collapse{
+.el-menu--collapse{
   width: 100%;
   .shangqi-icon{
     width: 24px;
@@ -654,5 +680,5 @@
       }
     }
   }
-  }
+}
 </style>