首页优化及路由

ruoyi-ui/src/views/index.vue

@@ -1,25 +1,30 @@
 <template>
+  <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
-        :style="{ '--theme': theme } "
-        :index="item.path"
           :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" style="height: 40px; width:auto;" alt="">
+          <img :src="item.meta.img" alt="" style="height: 40px; width:auto;">
           {{ item.meta.title }}
         </el-menu-item>
       </template>
-
     </el-menu >
+    </div>
+  </div>
+
 </template>
 
 <script>
@@ -60,9 +65,20 @@ 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 = {
+        "/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) => {
         if (menu.hidden !== true) {
@@ -166,6 +182,26 @@ export default {
         // 显示左侧联动菜单
         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,18 +228,34 @@ 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;
+  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 {
@@ -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>