fix ui

src/layout/index.vue

@@ -2,10 +2,10 @@
   <div class="full-screen flex flex-justify-start">
     <el-container>
       <el-header class="header">
-        <top />
+        <top @openMenu="show = true" />
       </el-header>
       <div class="flex" style="padding: 20px 20px; background-color: #f6f7f8">
-        <el-aside style="width: 200px">
+        <el-aside style="width: 200px" v-if="!mini">
           <left />
         </el-aside>
         <el-main class="wt-main" @scroll="scroll">
@@ -19,6 +19,14 @@
         </el-main>
       </div>
     </el-container>
+    <el-drawer v-model="show" direction="ltr" :with-header="false" :size="280">
+      <div>
+        <div class="padding-left flex flex-justify-start">
+          <el-button icon="DArrowLeft" circle @click="show = false" />
+        </div>
+        <left />
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -36,12 +44,26 @@ export default {
     const permission = permissionStore()
     return { keepAlive, permission }
   },
+  data() {
+    return {
+      show: false,
+      mini: false
+    }
+  },
   created() {
     this.keepAlive.$subscribe(res => {
       console.log(this.keepAlive.list)
     })
     this.getPermission()
   },
+  mounted() {
+    this.setScale()
+    this.onresize = this.debounce(() => this.setScale(), 100)
+    window.addEventListener('resize', this.onresize)
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.onresize)
+  },
   methods: {
     getPermission() {
       this.$api.login.getPermission().then(res => {
@@ -53,6 +75,33 @@ export default {
     },
     scroll(event) {
       this.$bus.emit('scorll', event)
+    },
+    // 防抖
+    debounce(fn, t) {
+      const delay = t || 500
+      let timer
+      return function () {
+        const args = arguments
+        if (timer) {
+          clearTimeout(timer)
+        }
+        const that = this
+        timer = setTimeout(() => {
+          timer = null
+          fn.apply(that, args)
+        }, delay)
+      }
+    },
+
+    // 设置缩放比例
+    setScale() {
+      const width = document.documentElement.clientWidth
+      if (width < 1590) {
+        this.mini = true
+      } else {
+        this.mini = false
+      }
+      this.$bus.emit('sizeChange', width)
     }
   }
 }
@@ -69,4 +118,8 @@ export default {
   background-color: #f6f7f8;
   padding: 0;
 }
+
+:deep(.el-drawer) {
+  --el-drawer-bg-color: #f6f7f8;
+}
 </style>

src/layout/top.vue

@@ -6,6 +6,13 @@
     >
       <el-col :span="12">
         <div class="flex flex-justify-start flex-align-center padding">
+          <el-button
+            icon="Menu"
+            class="mr-20"
+            circle
+            @click="openMenu"
+            v-if="mini"
+          />
           <div class="flex flex-center">
             <img src="@/assets/svg/logo.svg" />
           </div>
@@ -18,10 +25,7 @@
             :class="dataType === 'project' ? 'black' : 'white'"
             @click="show = true"
           >
-            <el-icon class="mr-5">
-              <Search />
-            </el-icon>
-            <span>搜索</span>
+            <el-button icon="Search" circle />
           </div>
           <div class="padding flex flex-align-center pointer">
             <el-avatar
@@ -107,7 +111,8 @@ export default {
       isAll: 1,
       filterTypeName: '全部',
       resultCount: 0,
-      title: ''
+      title: '',
+      mini: false
     }
   },
   created() {
@@ -116,9 +121,12 @@ export default {
     if (tmp) {
       this.dataType = tmp
     }
-    this.$bus.on('navChange', res => {
-      console.log(res)
-      this.dataType = res
+    this.$bus.on('sizeChange', res => {
+      if (res < 1590) {
+        this.mini = true
+      } else {
+        this.mini = false
+      }
     })
   },
   methods: {
@@ -247,6 +255,9 @@ export default {
     close() {
       this.params.keyword = ''
       this.show = false
+    },
+    openMenu() {
+      this.$emit('openMenu')
     }
   }
 }