修复top栏样式问题

web/src/view/layout/aside/historyComponent/history.vue

@@ -36,6 +36,7 @@ export default {
       left: 0,
       top: 0,
       isCollapse: false,
+      isMobile:false,
       rightActive: ''
     }
   },
@@ -53,9 +54,15 @@ export default {
     this.setTab(this.$route)
   },
   mounted() {
-    this.$bus.on('totalCollapse', () => {
-      this.isCollapse = !this.isCollapse
+    this.$bus.on('collapse',(isCollapse)=>{
+      this.isCollapse = isCollapse
     })
+    this.$bus.on('mobile'),(isMobile)=>{
+      this.isMobile = isMobile
+    }
+  },
+  beforeDestroy(){
+    this.$bus.off('collapse')
   },
   methods: {
     openContextMenu(e) {
@@ -66,10 +73,13 @@ export default {
         this.contextMenuVisible = true
         let width
         if (this.isCollapse) {
-          width = 60
+          width = 54
         } else {
           width = 220
         }
+        if(this.isMobile){
+          width = 0
+        }
         this.left = e.clientX - width
         this.top = e.clientY + 10
         this.rightActive = e.srcElement.id.split('-')[1]

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

@@ -50,9 +50,7 @@ export default {
      if(screenWidth<1000){
        this.isCollapse = !this.isCollapse
       }
-    this.$bus.on('totalCollapse', () => {
-      this.isCollapse = !this.isCollapse
-    })
+
      this.$bus.on('collapse', (item) => {
       this.isCollapse = item
     })
@@ -64,7 +62,6 @@ export default {
     }
   },
   beforeDestroy() {
-    this.$bus.off('totalCollapse')
     this.$bus.off('collapse')
   }
 }

web/src/view/layout/index.vue

@@ -8,45 +8,47 @@
       <!-- 分块滑动功能 -->
       <el-main class="main-cont main-right">
         <transition mode="out-in" name="el-fade-in-linear">
-          <div class="topfix" :style="{width: `calc(100% - ${isCollapse?'54px':'220px'})`}">
-        <el-header class="header-cont">
-          <div @click="totalCollapse" class="menu-total">
-            <i class="el-icon-s-unfold" v-if="isCollapse"></i>
-            <i class="el-icon-s-fold" v-else></i>
-          </div>
-          <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item
-            :key="item.path"
-            v-for="item in matched.slice(1,matched.length)"
-          >{{item.meta.title}}</el-breadcrumb-item>
-        </el-breadcrumb>
-          <div class="fl-right right-box">
-            <el-dropdown>
-              <span class="el-dropdown-link">
-                <img :src="userInfo.headerImg" height="30" width="30" />
-                {{userInfo.title}}
-                <i class="el-icon-arrow-down"></i>
-              </span>
-              <el-dropdown-menu class="dropdown-group" slot="dropdown">
-                <el-dropdown-item>
-                  <span>
-                    更多信息
-                    <el-badge is-dot />
+          <div
+            class="topfix"
+            :style="{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
+          >
+            <el-header class="header-cont">
+              <div @click="totalCollapse" class="menu-total">
+                <i class="el-icon-s-unfold" v-if="isCollapse"></i>
+                <i class="el-icon-s-fold" v-else></i>
+              </div>
+              <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+                <el-breadcrumb-item
+                  :key="item.path"
+                  v-for="item in matched.slice(1,matched.length)"
+                >{{item.meta.title}}</el-breadcrumb-item>
+              </el-breadcrumb>
+              <div class="fl-right right-box">
+                <el-dropdown>
+                  <span class="el-dropdown-link">
+                    <img :src="userInfo.headerImg" height="30" width="30" />
+                    {{userInfo.title}}
+                    <i class="el-icon-arrow-down"></i>
                   </span>
-                </el-dropdown-item>
-                <el-dropdown-item @click.native="showPassword=true" icon="el-icon-s-custom">修改密码</el-dropdown-item>
-                <el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
-                <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-
+                  <el-dropdown-menu class="dropdown-group" slot="dropdown">
+                    <el-dropdown-item>
+                      <span>
+                        更多信息
+                        <el-badge is-dot />
+                      </span>
+                    </el-dropdown-item>
+                    <el-dropdown-item @click.native="showPassword=true" icon="el-icon-s-custom">修改密码</el-dropdown-item>
+                    <el-dropdown-item @click.native="toPerson" icon="el-icon-s-custom">个人信息</el-dropdown-item>
+                    <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp">登 出</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </el-header>
+            <!-- 当前面包屑用路由自动生成可根据需求修改 -->
+            <!--
+            :to="{ path: item.path }" 暂时注释不用-->
+            <HistoryComponent />
           </div>
-        </el-header>
-        <!-- 当前面包屑用路由自动生成可根据需求修改 -->
-        <!--
-        :to="{ path: item.path }" 暂时注释不用-->
-        <HistoryComponent />
-        </div>
         </transition>
         <transition mode="out-in" name="el-fade-in-linear">
           <keep-alive>
@@ -54,43 +56,38 @@
           </keep-alive>
         </transition>
         <transition mode="out-in" name="el-fade-in-linear">
-            <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
+          <router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
         </transition>
       </el-main>
     </el-container>
-               <el-dialog
-              title="修改密码"
-              :visible.sync="showPassword"
-              @close="clearPassword"
-              width="360px"
-            >
-              <el-form ref="modifyPwdForm" :model="pwdModify" :rules="rules" label-width="80px">
-                <el-form-item prop="password" :minlength="6" label="原密码">
-                  <el-input v-model="pwdModify.password" show-password></el-input>
-                </el-form-item>
-                <el-form-item prop="newPassword" :minlength="6" label="新密码">
-                  <el-input v-model="pwdModify.newPassword" show-password></el-input>
-                </el-form-item>
-                <el-form-item prop="confirmPassword" :minlength="6" label="确认密码">
-                  <el-input v-model="pwdModify.confirmPassword" show-password></el-input>
-                </el-form-item>
-              </el-form>
-              <div slot="footer" class="dialog-footer">
-                <el-button @click="showPassword=false">取 消</el-button>
-                <el-button type="primary" @click="savePassword">确 定</el-button>
-              </div>
-            </el-dialog>
+    <el-dialog title="修改密码" :visible.sync="showPassword" @close="clearPassword" width="360px">
+      <el-form ref="modifyPwdForm" :model="pwdModify" :rules="rules" label-width="80px">
+        <el-form-item prop="password" :minlength="6" label="原密码">
+          <el-input v-model="pwdModify.password" show-password></el-input>
+        </el-form-item>
+        <el-form-item prop="newPassword" :minlength="6" label="新密码">
+          <el-input v-model="pwdModify.newPassword" show-password></el-input>
+        </el-form-item>
+        <el-form-item prop="confirmPassword" :minlength="6" label="确认密码">
+          <el-input v-model="pwdModify.confirmPassword" show-password></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showPassword=false">取 消</el-button>
+        <el-button type="primary" @click="savePassword">确 定</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 </template>
 
 <script>
-import Aside from '@/view/layout/aside'
-import HistoryComponent from '@/view/layout/aside/historyComponent/history'
+import Aside from "@/view/layout/aside";
+import HistoryComponent from "@/view/layout/aside/historyComponent/history";
 
-import { mapGetters, mapActions } from 'vuex'
-import { changePassword } from '@/api/user'
+import { mapGetters, mapActions } from "vuex";
+import { changePassword } from "@/api/user";
 export default {
-  name: 'Layout',
+  name: "Layout",
   data() {
     return {
       isCollapse: false,
@@ -101,59 +98,49 @@ export default {
       pwdModify: {},
       rules: {
         password: [
-          { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { min: 6, message: "最少6个字符", trigger: "blur" }
         ],
         newPassword: [
-          { required: true, message: '请输入新密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' }
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          { min: 6, message: "最少6个字符", trigger: "blur" }
         ],
         confirmPassword: [
-          { required: true, message: '请输入确认密码', trigger: 'blur' },
-          { min: 6, message: '最少6个字符', trigger: 'blur' },
+          { required: true, message: "请输入确认密码", trigger: "blur" },
+          { min: 6, message: "最少6个字符", trigger: "blur" },
           {
             validator: (rule, value, callback) => {
               if (value !== this.pwdModify.newPassword) {
-                callback(new Error('两次密码不一致'))
+                callback(new Error("两次密码不一致"));
               } else {
-                callback()
+                callback();
               }
             },
-            trigger: 'blur'
+            trigger: "blur"
           }
         ]
-      },
-
-    }
+      }
+    };
   },
   components: {
-    Aside,HistoryComponent
-  },
-  created() {
-    let screenWidth = document.body.clientWidth
-    if (screenWidth < 1000) {
-      this.isMobile = true
-      this.isSider = false
-      this.isCollapse = !this.isCollapse
-    } else {
-      this.isMobile = false
-    }
+    Aside,
+    HistoryComponent
   },
   methods: {
-    ...mapActions('user', ['LoginOut']),
+    ...mapActions("user", ["LoginOut"]),
     totalCollapse() {
-      this.isCollapse = !this.isCollapse
-      this.isSider = !this.isCollapse
-      this.isShadowBg = !this.isCollapse
-      this.$bus.emit('totalCollapse')
+      this.isCollapse = !this.isCollapse;
+      this.isSider = !this.isCollapse;
+      this.isShadowBg = !this.isCollapse;
+      this.$bus.emit("collapse", this.isCollapse);
     },
     toPerson() {
-      this.$router.push({ name: 'person' })
+      this.$router.push({ name: "person" });
     },
     changeShadow() {
-      this.isShadowBg = !this.isShadowBg
-      this.isSider = !!this.isCollapse
-      this.totalCollapse()
+      this.isShadowBg = !this.isShadowBg;
+      this.isSider = !!this.isCollapse;
+      this.totalCollapse();
     },
     savePassword() {
       this.$refs.modifyPwdForm.validate(valid => {
@@ -163,57 +150,72 @@ export default {
             password: this.pwdModify.password,
             newPassword: this.pwdModify.newPassword
           }).then(() => {
-            this.$message.success('修改密码成功！')
-            this.showPassword = false
-          })
+            this.$message.success("修改密码成功！");
+            this.showPassword = false;
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     clearPassword() {
       this.pwdModify = {
-        password: '',
-        newPassword: '',
-        confirmPassword: ''
-      }
-      this.$refs.modifyPwdForm.clearValidate()
+        password: "",
+        newPassword: "",
+        confirmPassword: ""
+      };
+      this.$refs.modifyPwdForm.clearValidate();
     }
   },
   computed: {
-    ...mapGetters('user', ['userInfo']),
-    ...mapGetters('history', ['historys','activeValue']),
+    ...mapGetters("user", ["userInfo"]),
+    ...mapGetters("history", ["historys", "activeValue"]),
     title() {
-      return this.$route.meta.title || '当前页面'
+      return this.$route.meta.title || "当前页面";
     },
     matched() {
-      return this.$route.matched
+      return this.$route.matched;
     }
   },
   mounted() {
+    let screenWidth = document.body.clientWidth;
+    if (screenWidth < 1000) {
+      this.isMobile = true;
+      this.isSider = false;
+      this.isCollapse = true;
+    } else if (screenWidth >= 1000 && screenWidth < 1200) {
+      this.isMobile = false;
+      this.isSider = false;
+      this.isCollapse = true;
+    } else {
+      this.isMobile = false;
+      this.isSider = true;
+      this.isCollapse = false;
+    }
+    this.$bus.emit("collapse", this.isCollapse);
+    this.$bus.emit("mobile", this.isMobile);
     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)
-          }
+        let screenWidth = document.body.clientWidth;
+        if (screenWidth < 1000) {
+          this.isMobile = true;
+          this.isSider = false;
+          this.isCollapse = true;
+        } else if (screenWidth >= 1000 && screenWidth < 1200) {
+          this.isMobile = false;
+          this.isSider = false;
+          this.isCollapse = true;
         } else {
-          if (screenWidth < 1000) {
-            this.isMobile = true
-            this.isSider = false
-            this.isCollapse = true
-          } else {
-            this.isMobile = false
-          }
+          this.isMobile = false;
+          this.isSider = true;
+          this.isCollapse = false;
         }
-      })()
-    }
+        this.$bus.emit("collapse", this.isCollapse);
+        this.$bus.emit("mobile", this.isMobile);
+      })();
+    };
   }
-}
+};
 </script>
 
 <style lang="scss">
@@ -225,14 +227,14 @@ $mainHight: 100vh;
 .dropdown-group {
   min-width: 100px;
 }
-.topfix{
-  position:fixed;
-  top:0;
+.topfix {
+  position: fixed;
+  top: 0;
   box-sizing: border-box;
   z-index: 999;
 }
-.admin-box{
-  background-color: rgb(255,255,255);
+.admin-box {
+  background-color: rgb(255, 255, 255);
   margin-top: 100px;
 }
 .el-scrollbar__wrap {
@@ -269,10 +271,10 @@ $mainHight: 100vh;
       // padding: 6px;
       // border-bottom: 1px solid #eee;
     }
-    .router-history{
+    .router-history {
       background: #fff;
       padding: 0 6px;
-      border-top: 1px solid #DCDCDC;
+      border-top: 1px solid #dcdcdc;
     }
     &.el-main {
       overflow: auto;