fix: 添加id indexContainerBox

client/src/views/OaSystem/home/index.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="indexContainerBox">
+  <div class="indexContainerBox" id="indexContainerBox">
     <div class="homeBox">
-      <template v-if="currentIndex == '1'">
+      <!-- <template v-if="currentIndex == '1'">
         <HomeLeader />
       </template>
       <template v-else>
         <homeStaff />
-      </template>
+      </template> -->
+      <homeStaff />
     </div>
   </div>
 </template>

client/src/views/OaSystem/oaLayout/menus.vue

@@ -92,9 +92,9 @@ const reactiveData: any = reactive({
 const initMenus = async () => {
   const uid = currentRoute.value
   let locals: any = localStorage.getItem('roleRouters')
-  let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children
+  let roleRouters = JSON.parse(JSON.parse(locals).v)?.[0]?.children
 
-  let childArr = roleRouters.slice(0, roleRouters.length)
+  let childArr = roleRouters?.slice(0, roleRouters?.length)
   reactiveData.routes = childArr
 }
 
@@ -142,61 +142,67 @@ onMounted(() => {
   // background: #183868;
 
   .menus-user {
+    display: flex;
     width: 100%;
     height: 180px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
     padding-top: 40px;
-    border-bottom: 1px solid #5383bd;
     margin-bottom: 20px;
+    border-bottom: 1px solid #5383bd;
+    flex-wrap: wrap;
+    justify-content: center;
+
     .userImg {
+      position: relative;
+      display: flex;
       width: 60px;
       height: 60px;
+      padding: 3px;
+      cursor: pointer;
       background-color: #fff;
       border-radius: 50%;
-      display: flex;
       align-items: center;
       justify-content: center;
-      padding: 3px;
-      position: relative;
-      cursor: pointer;
+
       .userIcon {
         width: 100%;
         height: 100%;
       }
+
       .glBox {
         position: absolute;
         bottom: -10px;
         left: 50%;
-        margin-left: -32px;
+        z-index: 1;
         display: flex;
-        align-items: center;
-        justify-content: center;
         width: 64px;
         height: 18px;
+        margin-left: -32px;
         background: #f9a527;
-        border-radius: 14px 14px 14px 14px;
-        z-index: 1;
+        border-radius: 14px;
+        align-items: center;
+        justify-content: center;
+
         span {
-          color: #fff;
           font-size: 12px;
+          color: #fff;
         }
       }
+
       .userHover {
+        position: absolute;
+        top: 0;
+        left: 0;
         display: none;
         width: 100%;
         height: 100%;
+        background-color: rgba($color: #000, $alpha: 30%);
         border-radius: 50%;
-        background-color: rgba($color: #000000, $alpha: 0.3);
         align-items: center;
         justify-content: center;
-        position: absolute;
-        left: 0;
-        top: 0;
+
         p {
-          color: #fff;
           font-size: 10px;
+          color: #fff;
         }
       }
     }
@@ -209,18 +215,20 @@ onMounted(() => {
 
     .userInfo {
       width: 100%;
-      margin-top: 0px;
+      margin-top: 0;
+
       h4 {
-        text-align: center;
-        color: #fff;
-        font-size: 18px;
         margin-bottom: 5px;
+        font-size: 18px;
+        color: #fff;
+        text-align: center;
       }
+
       p {
-        text-align: center;
-        color: #bcd1f0;
         font-size: 14px;
         font-weight: 400;
+        color: #bcd1f0;
+        text-align: center;
       }
     }
   }
@@ -232,27 +240,31 @@ onMounted(() => {
     margin-bottom: 10px;
 
     .btn {
+      display: flex;
       width: 100%;
       height: 100%;
+      cursor: pointer;
       background: #05ce9e;
-      border-radius: 20px 20px 20px 20px;
-      display: flex;
+      border-radius: 20px;
       align-items: center;
       justify-content: center;
-      cursor: pointer;
+
       p {
         margin-left: 8px;
-        color: #fff;
         font-size: 16px;
         font-weight: bold;
+        color: #fff;
       }
     }
   }
+
   .menus-tabs {
     width: 100%;
     height: calc(100% - 250px);
+
     .menuDiv {
       position: relative;
+
       :deep(.el-menu-item) {
         justify-content: center;
       }
@@ -262,24 +274,28 @@ onMounted(() => {
 
 ::v-deep(.menus-tabs) {
   .el-menu {
-    border: none;
     background-color: transparent;
+    border: none;
+
     span {
-      color: #fff;
       font-size: 16px;
+      color: #fff;
     }
 
     .is-active {
       background-color: transparent;
     }
+
     .el-menu-item:hover {
       background-color: #113468;
     }
   }
 }
+
 :deep(.el-menu-item > span) {
   font-size: 18px !important;
 }
+
 :deep(.el-menu-item > .el-icon > span) {
   font-size: 18px !important;
 }

client/src/views/OaSystem/oaViews/layout/header.vue

@@ -50,9 +50,9 @@ const rightMenuList = ref([])
 
 const initMenus = async () => {
   let locals: any = localStorage.getItem('roleRouters')
-  let roleRouters = JSON.parse(JSON.parse(locals).v)[1].children
-  let leftMenu = roleRouters.slice(0, 2)
-  let rightMenu = roleRouters.slice(2, 4)
+  let roleRouters = JSON.parse(JSON.parse(locals).v)?.[1]?.children
+  let leftMenu = roleRouters?.slice(0, 2)
+  let rightMenu = roleRouters?.slice(2, 4)
   leftMenuList.value = leftMenu
   rightMenuList.value = rightMenu
 }
@@ -83,128 +83,141 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .viewLayout-header {
+  position: relative;
   width: 100%;
   height: 100%;
-  background: url(@/assets/imgs/oaView/oaViewHeader.png) no-repeat;
+  background: url('@/assets/imgs/oaView/oaViewHeader.png') no-repeat;
   background-size: 100% 100%;
-  position: relative;
+
   .header-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
     width: 100%;
     height: 100%;
     margin: 0 auto;
-    display: flex;
     align-items: center;
     justify-content: center;
-    position: absolute;
-    left: 0;
-    top: 0;
+
     p {
-      color: #fff;
-      font-size: 44px;
+      margin-top: -35px;
       font-family: AlibabaPuHuiTiB;
-      text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.5);
+      font-size: 44px;
       font-weight: 600;
-      color: #ffffff;
+      letter-spacing: 3px;
+      color: #fff;
+      text-shadow: 1px 2px 3px rgb(255 255 255 / 50%);
       background: linear-gradient(0deg, #ffff 20%, #def1ff 100%);
-      -webkit-background-clip: text;
+      background-clip: text;
       -webkit-text-fill-color: transparent;
-      margin-top: -35px;
-      letter-spacing: 3px;
     }
   }
+
   .weather-box {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: absolute;
     left: 10px;
+    display: flex;
+    height: 100%;
     margin-top: -30px;
+    align-items: center;
+    justify-content: center;
 
     p {
-      color: #fff;
       font-size: 16px;
+      color: #fff;
     }
   }
 
   .left-menu {
     position: absolute;
-    height: 100%;
-    display: flex;
     left: 170px;
+    display: flex;
+    height: 100%;
+    margin-top: -31px;
     align-items: center;
     justify-content: center;
-    margin-top: -31px;
+
     ul {
       display: flex;
       align-items: center;
       height: 34px;
+
       li {
         width: 122px;
         height: 100%;
 
         a {
+          display: flex;
           width: 100%;
           height: 100%;
-          background: url(@/assets/imgs/oaView/menuLeft.png) no-repeat;
-          background-size: 100% 100%;
+          text-decoration: none;
           cursor: pointer;
-          display: flex;
+          background: url('@/assets/imgs/oaView/menuLeft.png') no-repeat;
+          background-size: 100% 100%;
           align-items: center;
           justify-content: center;
-          text-decoration: none;
+
           span {
+            font-family: AlibabaPuHuiTiB;
             font-size: 18px;
             color: #7ac1ec;
-            font-family: AlibabaPuHuiTiB;
           }
         }
       }
+
       .router-link-active {
-        background: url(@/assets/imgs/oaView/menuLeftActive.png) no-repeat;
+        background: url('@/assets/imgs/oaView/menuLeftActive.png') no-repeat;
         background-size: 100% 100%;
+
         span {
           color: #fff;
         }
       }
     }
   }
+
   .right-menu {
     position: absolute;
-    height: 100%;
-    display: flex;
     right: 170px;
+    display: flex;
+    height: 100%;
+    margin-top: -31px;
     align-items: center;
     justify-content: center;
-    margin-top: -31px;
+
     ul {
       display: flex;
       align-items: center;
       height: 34px;
+
       li {
         width: 122px;
         height: 100%;
 
         a {
+          display: flex;
           width: 100%;
           height: 100%;
-          background: url(@/assets/imgs/oaView/menuRight.png) no-repeat;
-          background-size: 100% 100%;
+          text-decoration: none;
           cursor: pointer;
-          display: flex;
+          background: url('@/assets/imgs/oaView/menuRight.png') no-repeat;
+          background-size: 100% 100%;
           align-items: center;
           justify-content: center;
-          text-decoration: none;
+
           span {
+            font-family: AlibabaPuHuiTiB;
             font-size: 18px;
             color: #7ac1ec;
-            font-family: AlibabaPuHuiTiB;
           }
         }
       }
+
       .router-link-active {
-        background: url(@/assets/imgs/oaView/menuRightActive.png) no-repeat;
+        background: url('@/assets/imgs/oaView/menuRightActive.png') no-repeat;
         background-size: 100% 100%;
+
         span {
           color: #fff;
         }
@@ -215,17 +228,19 @@ onMounted(() => {
   .user-box {
     position: absolute;
     right: 25px;
-    height: 100%;
     display: flex;
+    height: 100%;
+    margin-top: -32px;
     align-items: center;
     justify-content: center;
-    margin-top: -32px;
+
     h4 {
       margin-right: 10px;
-      font-size: 18px;
       font-family: AlibabaPuHuiTiB;
+      font-size: 18px;
       color: #fff;
     }
+
     img {
       cursor: pointer;
     }