Merge branches 'gin-vue-admin-develop' and 'master' of https://github.com/piexlmax/QMPlus

QMPlusVuePage/src/style/main.scss

@@ -530,9 +530,21 @@ ol,
 li {
     list-style-type: none;
 }
+.el-table__body-wrapper{
+    tr{
+        td{
+            .cell{
+                .el-button+.el-button{
+                    margin-left: 0;
+                }
+            }
+        }
+    }
+}
 
 
 // navbar
+.aside{
 .el-scrollbar {
     .el-scrollbar__view {
       .el-menu-vertical{
@@ -570,10 +582,12 @@ li {
       }
     }
   }
+}
 
 //   layout
     .layout-cont{
         .main-cont{
+            position: relative;
             &.el-main {
                 background-color: #ecf0f5;
                 padding: 0;
@@ -617,7 +631,6 @@ li {
 // table
 .has-gutter{
     tr{
-        
         th{
             background-color: #fafafa;
         }
@@ -714,3 +727,124 @@ li {
         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;
+        }
+    }
+    
+}
+.el-menu--vertical{
+    .el-menu{
+        margin-left: -8px;
+        background-color:rgb(48,65,86);
+        .el-menu-item{
+            background-color:rgb(48,65,86);
+        }
+        .el-menu-item:focus, 
+        .el-menu-item:hover{
+            background-color: #263445;
+            color: #fff;
+        }
+    }
+}
+// 导航*****
+
+

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;
       }

QMPlusVuePage/src/view/superAdmin/menu/menu.vue

@@ -8,14 +8,14 @@
     <el-table :data="tableData" border stripe row-key="ID">
       <el-table-column label="ID" min-width="100" prop="ID"></el-table-column>
       <el-table-column label="路由Name" min-width="160" prop="name"></el-table-column>
-      <el-table-column label="是否隐藏" min-width="80" prop="hidden">
+      <el-table-column label="是否隐藏" min-width="100" prop="hidden">
         <template slot-scope="scope">
           <span>{{scope.row.hidden?"隐藏":"显示"}}</span>
         </template>
       </el-table-column>
-      <el-table-column label="父节点" min-width="70" prop="parentId"></el-table-column>
+      <el-table-column label="父节点" min-width="90" prop="parentId"></el-table-column>
       <el-table-column label="排序" min-width="70" prop="sort"></el-table-column>
-      <el-table-column label="文件路径" min-width="400" prop="component"></el-table-column>
+      <el-table-column label="文件路径" min-width="360" prop="component"></el-table-column>
       <el-table-column label="展示名称" min-width="120" prop="authorityName">
         <template slot-scope="scope">
           <span>{{scope.row.meta.title}}</span>

QMPlusVuePage/src/view/superAdmin/system/system.vue

@@ -103,8 +103,8 @@ export default {
 <style lang="scss">
 h2 {
   padding: 10px;
-  border-bottom: 1px dashed #ccc;
   margin: 10px 0;
   font-size: 16px;
+  box-shadow:-4px 1px 3px 0px #e7e8e8
 }
 </style>