菜单栏样式调整

riis-web/src/layout/components/Navbar.vue

@@ -12,13 +12,16 @@
           </div>
         </div>
         <div title="首页" class="homeImgBox" @mousemove="mousemoveNav(navlist[0], 0)"  :class="{'homeImgActive':activeIndex == 0}"   @click="navClick(navlist[0], 0)"></div>
-        <div class="nav-list" v-for="(item, index) in navlist" v-show="index != 0 && item.name != '系统管理'"
+        <div class="nav-list" v-for="(item, index) in navlist" v-show="index != 0" 
-          :class="{ 'nav-active': activeIndex == index,'iscursorinitial':(item.children != null&&item.children.length != 1 ) }" @click.stop="navClick(item, index)"
+            :class="{ 'nav-active': activeIndex == index }" @click.stop="navClick(item, index)">
-          @mousemove="mousemoveNav(item, index)"
-          >
             <div class="nav-imgleft"></div>
           <div class="nav-imgtitle">{{ item.name }}</div>
           <div class="nav-imgright"></div>
+            <div class="nav-sonbox" v-if="item.children != undefined && item.hide == true">
+              <div class="nav-son-list" v-for="(items, indexs) in item.children"  @click.stop="navSonClick(item, index, items)"
+               >{{ items.name }}
+              </div>
+            </div>
           </div>
       </div>
       <div class="nav-right-box">
@@ -26,15 +29,15 @@
           <div class="header-left-time" style="padding: 0;">用户名：{{ userStore.username }}</div>
           <div class="header-left-time" style="padding-top: 10px;">变电站：{{ userStore.regionName }}</div>
         </div>
-        <div  v-for="(item, index) in navlist" v-show="item.name == '系统管理'"
+        <!-- <div  v-for="(item, index) in navlist" v-show="item.name == '系统管理'"
           @click.stop="navClick(item, index)"  @mousemove="mousemoveNav(item, index)">
           <img title="系统菜单" v-if="activeIndex != index" src="@/assets/newimg/top_xtgl.png" style="width:20px ;margin-right: 10px;cursor: pointer" >
           <img title="系统菜单" v-else src="@/assets/header/top_xtgl.png" style="width:20px ;margin-right: 10px;cursor: pointer" >
-        </div>
+        </div> -->
-        <img title="告警信息" src="@/assets/newimg/top_gj.png" style="width: ;height:;margin-right: 10px;cursor: pointer"
+        <img title="告警信息" src="@/assets/newimg/top_gj.png" style="margin-right: 10px;cursor: pointer"
           @click="alarmInfoClick">
         <div style="position:relative ;" class="versionbox">
-          <img title="查看版本" src="@/assets/newimg/top_bb.png" style="width: ;height:;margin-right: 10px;cursor: pointer">
+          <img title="查看版本" src="@/assets/newimg/top_bb.png" style="margin-right: 10px;cursor: pointer">
           <div class="versionsonbox">
             <div class="stationintroducebox">
               <div class="introduceboxtext1">变电站远程智能巡视系统</div>
@@ -60,22 +63,20 @@
         </div>
        
 
-        <img src="@/assets/newimg/top_qp.png"  @click="toggle" v-if="!isFullscreen" style="width: ;height:;margin-right: 10px;cursor: pointer">
+        <img src="@/assets/newimg/top_qp.png"  @click="toggle" v-if="!isFullscreen" style="margin-right: 10px;cursor: pointer">
-        <img src="@/assets/header/top_qp1.png"  @click="toggle" v-if="isFullscreen" style="width: ;height:;margin-right: 10px;cursor: pointer">
+        <img src="@/assets/header/top_qp1.png"  @click="toggle" v-if="isFullscreen" style="margin-right: 10px;cursor: pointer">
-        <img src="@/assets/newimg/top_tc.png" style="width: ;height:;margin-right: 5px;cursor: pointer" @click="logout">
+        <img src="@/assets/newimg/top_tc.png" style="margin-right: 5px;cursor: pointer" @click="logout">
       </div>
     </div>
-    <div class="header2-nav" v-if="navlist[activeIndex] != null && navlist[activeIndex].children != null && navlist[activeIndex].children.length != 0&& navlist[activeIndex].children.length != 1">
+    <!-- <div class="header2-nav" v-if="navlist[activeIndex] != null && navlist[activeIndex].children != null && navlist[activeIndex].children.length != 0&& navlist[activeIndex].children.length != 1">
       <div class="header2-navlist"  :class="{ 'nav-active': activeSonIndex == indexs }" 
       v-for="(items, indexs) in navlist[activeIndex].children" @click.stop="navSonClick(navOneInfo, activeIndex, items,indexs)"
-      
       @mousemove="mousemoveSonNav(navOneInfo, activeIndex, items,indexs)">
         <div class="header2-imgleft"></div>
           <div class="header2-imgtitle">{{ items.name }}</div>
         <div class="header2-imgright"></div>
-      
-      </div>
       </div>
+    </div> -->
   </div>
 </template>
 <script setup lang="ts">
@@ -94,6 +95,13 @@ import { getNotCheckAlarmCount} from '@/api/home';
 import { constantRoutes} from '@/router';
 import { useFullscreen} from '@vueuse/core';
 import { downloadFile } from '@/utils/index';
+const props = defineProps({
+  CloseNav: {
+    required: false,
+    type: Number,
+    default: 0
+  },
+});
 const tagsViewStore = useTagsViewStore();
 const userStore = useUserStore();
 const url = userStore.webApiBaseUrl;
@@ -146,20 +154,16 @@ function alarmInfoClick() {
     opturl:"/task/alarmInfo/index"
   }
   activeSonIndex.value = 2
-  navSonClick(navlist.value[2], 2, item,7)
+  navSonClick(navlist.value[2], 2, item)
 }
-function navSonClick(row: any, index: any, item: any,indexs:any) {
+function navSonClick(row: any, index: any, item: any) {
-  activeSonIndex.value = indexs
-  activeTempInfo.value = {
-    name:item.name,
-    index:indexs
-  }
   isElicon.value = true
   activeIndex.value = index
-  // row.hide = false
+  row.hide = false
   if (item.opturl != undefined) {
     router.push(item.opturl)
   }
+
 }
 function mousemoveSonNav(row: any, index: any, item: any,indexs:any){
   activeSonIndex.value = indexs
@@ -167,44 +171,21 @@ function mousemoveSonNav(row: any, index: any, item: any,indexs:any){
   activeIndex.value = index
 }
 const navOneInfo :any = ref({})
-function navClick(row: any, index: any) { // 显示二级菜单
+function navClick(row: any, index: any) {
-  if(row.children != null&&row.children.length != 1){
+  isElicon.value = true
+  if (row.hide == true) {
+    row.hide = false
     return
   }
-  activeSonIndex.value = -1
-  navOneInfo.value = row
-  activeIndex.value = index
-  isElicon.value = true
   for (let i = 0; i < navlist.value.length; i++) {
     navlist.value[i].hide = false
   }
   if (row.children == undefined) {
     activeIndex.value = index
     router.push(row.opturl)
-    activeSonIndex.value = -1
-    activeTempInfo.value = {
-      name:"",
-      index:-1
-    }
   } else {
-    if(row.children.length == 1){
-      router.push(row.children[0].opturl)
-      activeSonIndex.value = -1
-      activeTempInfo.value = {
-        name:"",
-        index:-1
-      }
-      return
-    }
-    row.children.forEach((element:any) => {
-      if(element.name == activeTempInfo.value.name ){
-        activeSonIndex.value = activeTempInfo.value.index
-      }
-    });
     row.hide = true
   }
-
-
 }
 
 function mousemoveNav(row: any, index: any){ //鼠标移入
@@ -378,6 +359,14 @@ function leadingOut() {// 下载系统操作手册
   }).catch(() => {
   });
 }
+watch(() => props.CloseNav, (newValue, oldValue) => {
+  // debugger
+  for (let i = 0; i < navlist.value.length; i++) {
+    navlist.value[i].hide = false
+  }
+}, { 
+  deep: true
+})
 </script>
 
 
@@ -523,6 +512,32 @@ function leadingOut() {// 下载系统操作手册
       height: 37px;
       background: url(@/assets/header/cd_yuo.png);
     }
+    .nav-sonbox {
+        width: 120px;
+        background-image: linear-gradient(#001f5a 1%, #001f5b 90%, transparent);
+        border: 1px solid red;
+        border-image: linear-gradient(to bottom, #0082df 20%, transparent) 1;
+        border-bottom: 0;
+        padding-top: 10px;
+        padding-bottom: 20px;
+        // margin-top: 12px;
+        margin-left: -12px;
+        position: absolute;
+        top:40px ;
+
+        .nav-son-list {
+          width: 100%;
+          height: 32px;
+          line-height: 32px;
+          color: rgb(255, 255, 255);
+          cursor: pointer;
+        }
+
+        .nav-son-list:hover {
+          color: #00FFFF;
+          background-color: rgba(255, 255, 255, 0.2);
+        }
+      }
     .nav-imgtitle{
       height: 34px;
       line-height: 34px;
@@ -531,6 +546,7 @@ function leadingOut() {// 下载系统操作手册
       border-top: 1px solid rgba(181, 215, 255, 0.3);
       border-bottom: 1px solid rgba(181, 215, 255, 0.3);
       margin-top: 3px;
+      cursor: pointer;
     }
     .nav-active .nav-imgleft{
       background: url(@/assets/header/cd_zuo.png);

riis-web/src/layout/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watchEffect } from 'vue';
+import { computed, watchEffect,ref } from 'vue';
 import { useWindowSize } from '@vueuse/core';
 import { AppMain, Navbar, Settings, TagsView } from './components/index';
 import Sidebar from './components/Sidebar/index.vue';
@@ -57,11 +57,14 @@ function handleOutsideClick() {
 function toggleSideBar() {
   appStore.toggleSidebar(true);
 }
-
+const CloseNav: any = ref(0)
+function closeClick() {
+  CloseNav.value++
+}
 </script>
 
 <template>
-  <div :class="classObj" class="app-wrapper">
+  <div :class="classObj" class="app-wrapper" @click="closeClick">
     <Giveanalarmfrommodel />
     <!-- 手机设备 && 侧边栏 → 显示遮罩层 -->
     <!-- <div
@@ -71,7 +74,7 @@ function toggleSideBar() {
     ></div> -->
 
     <!-- <Sidebar class="sidebar-container" /> -->
-    <navbar :class="{ 'fixed-header': fixedHeader }" />
+    <navbar :class="{ 'fixed-header': fixedHeader }"  :CloseNav="CloseNav" />
     <div v-show="fixedHeader" style="height:90px"></div>
     <!-- <hamburger
       :is-active="appStore.sidebar.opened"

riis-web/src/views/login/index.vue

@@ -254,7 +254,7 @@ const state:any = reactive({
   loginData: {
     uuid: '',
     username: 'admin',
-    password: 'Admin123qaz@@1',
+    password: 'Jytl123qaz@@',
     code: ''
   } as LoginData,
   loginRules: {