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