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

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>