菜单栏样式调整
This commit is contained in:
parent
d8002fae52
commit
860bb2b706
@ -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 != '系统管理'"
|
||||
: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-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 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>
|
||||
<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);
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -254,7 +254,7 @@ const state:any = reactive({
|
||||
loginData: {
|
||||
uuid: '',
|
||||
username: 'admin',
|
||||
password: 'Admin123qaz@@1',
|
||||
password: 'Jytl123qaz@@',
|
||||
code: ''
|
||||
} as LoginData,
|
||||
loginRules: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user