首页优化及路由

ruoyi-ui/src/views/index.vue

@@ -1,30 +1,35 @@
 <template>
-  <el-menu
-    :default-active="activeMenu"
-    mode="horizontal"
-    @select="handleSelect"
-  >
-    <template v-for="(item, index) in topMenus">
-      <el-menu-item
-        :style="{ '--theme': theme } "
-        :index="item.path"
-        :key="index"
-      >
-        <!-- <svg-icon
-          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
-          :icon-class="item.meta.icon"
-        /> -->
-        <img :src="item.meta.img" style="height: 40px; width:auto;" alt="">
-        {{ item.meta.title }}
-      </el-menu-item>
-    </template>
-
-  </el-menu>
+  <div class="bj">
+    <div class="masking">
+    <el-menu
+      :default-active="activeMenu"
+      mode="horizontal"
+      @select="handleSelect"
+      class="_elMenu"
+    >
+      <template v-for="(item, index) in topMenus">
+        <el-menu-item
+          :key="index"
+          :index="item.path"
+          :style="{ '--theme': theme } "
+        >
+          <!-- <svg-icon
+            v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
+            :icon-class="item.meta.icon"
+          /> -->
+          <img :src="item.meta.img" alt="" style="height: 40px; width:auto;">
+          {{ item.meta.title }}
+        </el-menu-item>
+      </template>
+    </el-menu >
+    </div>
+  </div>
+
 </template>
 
 <script>
-import { constantRoutes } from "@/router";
-import { eventBus } from '@/main.js';
+import {constantRoutes} from "@/router";
+import {eventBus} from '@/main.js';
 
 // 隐藏侧边栏路由
 const hideList = ["/index", "/user/profile"];
@@ -37,18 +42,18 @@ export default {
 
       // 当前激活菜单的 index
       currentIndex: undefined,
-      img1:require('../assets/images/icon/menu (6).png'),
-      img2:require('../assets/images/icon/menu (10).png'),
-      img3:require('../assets/images/icon/menu (2).png'),
-      img4:require('../assets/images/icon/menu (7).png'),
-      img5:require('../assets/images/xzzf.png'),
-      img6:require('../assets/images/icon/menu (8).png'),
-      img7:require('../assets/images/icon/menu (9).png'),
-      img8:require('../assets/images/icon/menu (1).png'),
-      img9:require('../assets/images/icon/menu (11).png'),
-      img10:require('../assets/images/icon/menu (5).png'),
-      img11:require('../assets/images/icon/menu (12).png'),
-      img12:require('../assets/images/icon/menu (4).png'),
+      img1: require('../assets/images/icon/menu (6).png'),
+      img2: require('../assets/images/icon/menu (10).png'),
+      img3: require('../assets/images/icon/menu (2).png'),
+      img4: require('../assets/images/icon/menu (7).png'),
+      img5: require('../assets/images/xzzf.png'),
+      img6: require('../assets/images/icon/menu (8).png'),
+      img7: require('../assets/images/icon/menu (9).png'),
+      img8: require('../assets/images/icon/menu (1).png'),
+      img9: require('../assets/images/icon/menu (11).png'),
+      img10: require('../assets/images/icon/menu (5).png'),
+      img11: require('../assets/images/icon/menu (12).png'),
+      img12: require('../assets/images/icon/menu (4).png'),
     };
   },
   computed: {
@@ -59,12 +64,23 @@ export default {
     // 顶部显示菜单
     topMenus() {
       let topMenus = [];
-     //let imgArr= [this.img1,this.img2,this.img3,this.img4,this.img5,this.img6,this.img7,this.img8,this.img9,this.img10,this.img11,this.img12]
-      let imgArr = {"/ehsRisk":this.img1,"/ehsMaterial":this.img2,"/ehsDocu":this.img3,"/ehsTeam":this.img4,"/ehsLawEnforce":this.img5,
-                    "/ehsNoticeMessage":this.img6,"/enterprise":this.img7,"/ehsNoticeMessage1":this.img8,"/ehsHiddenDangerMenu":this.img9,
-                    "/system":this.img10,"/monitor":this.img11,"/tool":this.img12}  ;
+      //let imgArr= [this.img1,this.img2,this.img3,this.img4,this.img5,this.img6,this.img7,this.img8,this.img9,this.img10,this.img11,this.img12]
+      let imgArr = {
+        "/ehsRisk": this.img1,
+        "/ehsMaterial": this.img2,
+        "/ehsDocu": this.img3,
+        "/ehsTeam": this.img4,
+        "/ehsLawEnforce": this.img5,
+        "/ehsNoticeMessage": this.img6,
+        "/enterprise": this.img7,
+        "/ehsNoticeMessage1": this.img8,
+        "/ehsHiddenDangerMenu": this.img9,
+        "/system": this.img10,
+        "/monitor": this.img11,
+        "/tool": this.img12
+      };
 
-      this.routers.map((menu,index) => {
+      this.routers.map((menu, index) => {
         if (menu.hidden !== true) {
           console.log(menu.path);
           // 兼容顶部栏一级菜单内部跳转
@@ -132,15 +148,15 @@ export default {
     // this.openAlert();
     // this.openMaterialMsg();
   },
-/*  mounted() {
-    //一秒后执行一次get方法，打印1
-    //this.timer = setTimeout(this.get, 1000);
-  },*/
+  /*  mounted() {
+      //一秒后执行一次get方法，打印1
+      //this.timer = setTimeout(this.get, 1000);
+    },*/
 
   //销毁定时器，不然会一直存在
-/*  beforeDestroy() {
-    clearTimeout(this.timer);
-  },*/
+  /*  beforeDestroy() {
+      clearTimeout(this.timer);
+    },*/
   methods: {
 
 
@@ -157,15 +173,35 @@ export default {
         const routeMenu = this.childrenMenus.find((item) => item.path === key);
         if (routeMenu && routeMenu.query) {
           let query = JSON.parse(routeMenu.query);
-          this.$router.push({ path: key, query: query });
+          this.$router.push({path: key, query: query});
         } else {
-          this.$router.push({ path: key });
+          this.$router.push({path: key});
         }
         this.$store.dispatch("app/toggleSideBarHide", true);
       } else {
         // 显示左侧联动菜单
         this.activeRoutes(key);
         this.$store.dispatch("app/toggleSideBarHide", false);
+
+        let myRoutes = [];
+        if (this.childrenMenus && this.childrenMenus.length > 0) {
+          this.childrenMenus.map((item) => {
+            if (key == item.parentPath || (key == "index" && "" == item.path)) {
+              myRoutes.push(item);
+            }
+          });
+        }
+        setTimeout(() => {
+          if(myRoutes[0].path != this.$route.path) {
+            this.$router.replace({
+              path: myRoutes[0].path
+            })
+          } else {
+            this.$router.replace({
+              path: '/index'
+            })
+          }
+        }, 100)
       }
     },
     // 当前激活的路由
@@ -192,26 +228,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.bj{
+  background-image: url("../assets/images/indexBj.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: calc(100vh - 120px);
+}
+.masking{
+  height: 100%;
+  background: rgba(255, 255, 255, 85%);
+}
 .el-menu-item {
-  display: block;
+  display: flex;
   text-align: center;
   width: 20%;
-  line-height: 100px;
-  height: auto;
+  line-height: 20px;
+  height: 100px;
   border: 1px solid #c1c1c1 !important;
-
   color: #494848;
-    font-weight: 600;
-    font-size: 17px;
-    letter-spacing: 1px;
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: 1px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  white-space: normal;
+  word-break: break-all;
 }
 
 .el-menu.el-menu--horizontal {
-    border-bottom: transparent;
-//  margin-left: 45px;
-//  margin-top: 40px;
-    width: 95%;
-    margin: 30px auto;
+  border-bottom: transparent;
+  //  margin-left: 45px;
+  //  margin-top: 40px;
+  width: 95%;
+  margin: 30px auto;
 }
 
 .el-menu-item.is-active {
@@ -221,4 +273,20 @@ export default {
 .el-message {
   min-width: 580px;
 }
+ul.el-menu--horizontal.el-menu{
+  background: transparent;
+}
+li.el-menu-item{
+  background: rgb(255 255 255 / 60%);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+_elMenu{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+}
 </style>