首页和面包屑导航的优化

src/axios/filter.js

@@ -41,7 +41,7 @@ Vue.use(VueAxios, axios);
 axios.defaults.baseURL = ''; //项目的的基础url
 axios.defaults.headers.common['Authorization'] = ""; //请求token信息配置
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //请求type设置
-axios.defaults.timeout = 24000; //在超时前，所有请求都会等待24秒
+axios.defaults.timeout = 30000; //在超时前，所有请求都会等待30秒
 axios.defaults.withCredentials = true;
 
 // 添加请求拦截器

src/views/index.vue

@@ -35,6 +35,7 @@ export default {
     position: relative;
     width: 100%;
     min-height: 100vh;
+    padding-top: 50px;
     padding-left: 150px;
 }
 
@@ -42,8 +43,15 @@ export default {
     padding-left: 60px;
 }
 
+.fold {
+    /deep/ .breadCrumbPanel {
+        left: 60px;
+    }
+}
+
 .mainBox {
     padding-bottom: 60px;
+    overflow: auto;
 }
 
 /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
@@ -64,9 +72,6 @@ export default {
     &.is-active {
         border: 1px solid @themeColor;
         border-bottom-color: #ffffff;
-        // font-size: 16px;
-        // height: 40px;
-        // line-height: 40px;
     }
 }
 </style>

src/views/page/breadCrumb.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="topClass">
+    <div class="breadCrumbPanel">
         <div class="contentClass">
             <el-breadcrumb separator="/">
                 <transition-group name="breadcrumb">
@@ -35,7 +35,6 @@
         </div>
 
         <div class="avatarBox">
-            <!-- <i class="el-icon-switch-button"></i> -->
             <img :src="imgSrc" width="100%" height="100%" />
         </div>
     </div>
@@ -46,20 +45,21 @@ export default {
     name: "breadCrumb",
     data() {
         return {
+            // 相关页面只为占位，页面是空白，无法展示
             disabledRoutes: [
                 "modelLibrary",
                 "algorithmsLibrary",
                 "sceneLibrary",
                 "systemManagement",
                 "workManagement",
-            ], // 相关页面只为占位，页面是空白，无法展示
+            ],
             imgSrc: require("@/assets/common/image/photoF.png"),
         };
     },
     methods: {},
     computed: {
         list() {
-            // console.log(this.$route.matched);
+            // console.log(this.$route);
             let isMainPage = false;
             this.$route.matched.filter((item) => {
                 if (item.name === this.$route.name) {
@@ -70,9 +70,11 @@ export default {
                 }
             });
             if (isMainPage) {
+                // 如果跳转首页，会有 / 需要去掉
                 return this.$route.matched.slice(0, 1);
             } else {
-                return this.$route.matched;
+                // 不要第一个显示首页的
+                return this.$route.matched.slice(1);
             }
         },
     },
@@ -80,11 +82,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.topClass {
-    position: relative;
+.breadCrumbPanel {
+    position: fixed;
+    top: 0;
+    left: 150px;
+    right: 0;
+    bottom: 0;
+    z-index: 666;
     height: 50px;
     line-height: 48px;
     border-bottom: 2px solid #f5f7fa;
+    background-color: #ffffff;
     overflow: hidden;
 
     .contentClass {
@@ -132,7 +140,7 @@ export default {
         position: absolute;
         top: 4px;
         right: 20px;
-        z-index: 3;
+        z-index: 669;
         width: 40px;
         height: 40px;
         cursor: pointer;

src/views/page/pageMenu.vue

@@ -230,12 +230,12 @@ export default {
 
 <style scoped lang="less">
 .pageMenu {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 6;
+    z-index: 666;
     width: 150px;
     height: 100%;