ThbTech/SmartSubstationPlatform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

菜单栏样式调整

Browse Source
This commit is contained in:
wangxk 2025-04-25 10:20:05 +08:00
parent d8002fae52
commit 860bb2b706
3 changed files with 76 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
riis-web/src/layout/components/Navbar.vue
View File

@ -12,29 +12,32 @@
</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 != '系统管理'"
:class="{ 'nav-active': activeIndex == index,'iscursorinitial':(item.children != null&&item.children.length != 1 ) }" @click.stop="navClick(item, index)"
@mousemove="mousemoveNav(item, index)"
>
<div class="nav-imgleft"></div>
<div class="nav-list" v-for="(item, index) in navlist" v-show="index != 0"
:class="{ 'nav-active': activeIndex == index }" @click.stop="navClick(item, index)">
<div class="nav-imgleft"></div>
<div class="nav-imgtitle">{{ item.name }}</div>
<div class="nav-imgright"></div>
</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">
<div class="nav-right-text" style="margin-right: 20px;">
<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>
<img title="告警信息" src="@/assets/newimg/top_gj.png" style="width: ;height:;margin-right: 10px;cursor: pointer"
</div> -->
<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/header/top_qp1.png" @click="toggle" v-if="isFullscreen" style="width: ;height:;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_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="margin-right: 10px;cursor: pointer">
<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) {
activeSonIndex.value = indexs
activeTempInfo.value = {
name:item.name,
index:indexs
}
function navSonClick(row: any, index: any, item: any) {
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) { // 显示二级菜单
if(row.children != null&&row.children.length != 1){
function navClick(row: any, index: any) {
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);

11
riis-web/src/layout/index.vue
View File

@ -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"

2
riis-web/src/views/login/index.vue
View File

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