导航

QMPlusVuePage/src/style/main.scss

@@ -574,6 +574,7 @@ li {
 //   layout
     .layout-cont{
         .main-cont{
+            position: relative;
             &.el-main {
                 background-color: #ecf0f5;
                 padding: 0;
@@ -713,4 +714,109 @@ li {
     .el-input__inner{
         width: 80%;
     }
-}
+}
+
+// 导航
+#app {
+    .el-container{
+        position: relative;
+        height: 100%;
+        width: 100%;
+       
+    }
+    .el-container.mobile.openside {
+        position: fixed;
+        top: 0;
+    }
+    .hideside{
+        .aside{
+            width: 54px!important;
+        }
+    }
+    .el-aside{
+        -webkit-transition: width .2s;
+        transition: width .2s;
+        width: 220px;
+        background-color: #304156;
+        height: 100%;
+        position: fixed;
+        font-size: 0;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1001;
+        overflow: hidden;
+    }
+
+    .mobile.hideside{
+        .el-aside{
+            // pointer-events: none;
+            -webkit-transition-duration: .2s;
+            transition-duration: .2s;
+            -webkit-transform: translate3d(-210px,0,0);
+            transform: translate3d(-220px,0,0);
+        }
+      
+    }
+ 
+    .mobile{
+        .el-aside{
+            -webkit-transition: -webkit-transform .28s;
+            transition: -webkit-transform .28s;
+            transition: transform .28s;
+            transition: transform .28s,-webkit-transform .28s;
+            width: 210px!important
+        }
+    }
+    
+   
+    .el-container{
+        position: relative;
+        height: 100%;
+        width: 100%;
+        .el-aside{
+            // transition: none;
+          .aside {
+                background: #000;
+                .el-menu{
+                    border-right: none;
+                }
+            }
+        }
+    }
+  
+    .main-cont.el-main{
+        min-height: 100%;
+        -webkit-transition: margin-left .28s;
+        transition: margin-left .28s;
+        margin-left: 220px;
+        position: relative;
+    }
+   
+
+    .hideside{
+        .main-cont.el-main{
+            margin-left: 54px;
+        }
+    }
+  .mobile {
+        .main-cont.el-main{
+            margin-left: 0px;
+        }
+       
+    }
+    .openside.mobile{
+        .shadowBg{
+            background: #000;
+            opacity: .3;
+            width: 100%;
+            top: 0;
+            height: 100%;
+            position: absolute;
+            z-index: 999;
+            left: 0;
+        }
+    }
+    
+}
+// 导航*****

QMPlusVuePage/src/view/layout/aside/index.vue

@@ -38,18 +38,28 @@ export default {
   },
   computed: {
     ...mapGetters('router', ['asyncRouters'])
+
   },
   components: {
     AsideComponent
   },
   created() {
     this.active = this.$route.name
+    let screenWidth = document.body.clientWidth
+     if(screenWidth<1000){
+       this.isCollapse = !this.isCollapse
+      }
     this.$bus.on('totalCollapse', () => {
       this.isCollapse = !this.isCollapse
     })
+     this.$bus.on('collapse', (item) => {
+      this.isCollapse = item
+    })
+
   },
   beforeDestroy() {
     this.$bus.off('totalCollapse')
+    this.$bus.off('collapse')
   }
 }
 </script>

QMPlusVuePage/src/view/layout/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <el-container class="layout-cont">
-    <el-container>
+  <el-container class="layout-cont" >
+    <el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
+      <el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()"></el-row>  
       <el-aside class="main-cont main-left">
         <Aside class="aside" />
       </el-aside>
@@ -56,21 +57,42 @@ export default {
   name: 'Layout',
   data() {
     return {
-      isCollapse: false
+      isCollapse: false,
+      isSider: true,
+      isMobile: false,
+      isShadowBg: false
     }
   },
   components: {
     Aside
   },
+  created(){
+     let screenWidth = document.body.clientWidth
+     if(screenWidth<1000){
+        this.isMobile = true
+        this.isSider = false
+        this.isCollapse = !this.isCollapse
+      }else{
+        this.isMobile = false
+      }
+  },
   methods: {
     ...mapActions('user', ['LoginOut']),
     totalCollapse() {
-      this.isCollapse = !this.isCollapse
-      this.$bus.emit('totalCollapse')
+       this.isCollapse = !this.isCollapse
+       this.isSider = !this.isCollapse
+       this.isShadowBg = !this.isCollapse
+       this.$bus.emit('totalCollapse')
     },
     toPerson() {
       this.$router.push({ name: 'person' })
+    },
+    changeShadow(){
+      this.isShadowBg = !this.isShadowBg
+      this.isSider = !!this.isCollapse
+      this.totalCollapse()
     }
+   
   },
   computed: {
     ...mapGetters('user', ['userInfo']),
@@ -80,6 +102,29 @@ export default {
     matched() {
       return this.$route.matched
     }
+  },
+  mounted() {
+     window.onresize = () => {
+          return (() => {
+             let screenWidth = document.body.clientWidth
+            if(!this.screenWidth && this.isSider){
+                 if(screenWidth < 1000){
+                   this.isMobile = true
+                   this.isSider = false
+                   this.isCollapse = true
+                   this.$bus.emit('collapse',this.isCollapse)
+                 }
+            }else {
+                if(screenWidth < 1000){
+                this.isMobile = true
+                this.isSider = false
+                this.isCollapse = true
+              } else {
+                this.isMobile = false
+              }
+            }
+          })()
+      }
   }
 }
 </script>
@@ -152,7 +197,7 @@ $mainHight: 100vh;
     }
     .aside {
       overflow: auto;
-      background: #fff;
+      // background: #fff;
       &::-webkit-scrollbar {
         display: none;
       }