导航样式

This commit is contained in:
jingna 2025-07-02 14:05:47 +08:00
parent cbc84b8273
commit f6a0a25f91

View File

@ -47,8 +47,9 @@ function menuclick(index: any) {
}
}
}
function childmenuclick(item: any) {
function childmenuclick(item: any,index:any) {
if (item.module_id && item.module_id !== '') {
checkindex.value = index
showcontent.value = ''
currentMoudleType.value = ''
currentrow.value = item
@ -215,12 +216,12 @@ function userdetails() {
<div class="Navbar-menu-content">
<TimeDisplay />
<div class="Navbar-menu-item"
:class="{ 'Navbar-menu-items': checkindex == index && item.children.length == 0 }"
:class="{ 'Navbar-menu-items': checkindex == index }"
v-for="(item, index) in navmenulist" :key="index" @click="menuclick(index)">
<div v-if="!item.children || item.children.length == 0">{{ item.name }}</div>
<el-popover v-else :show-arrow="false" class="tsmenu" placement="bottom" popper-class="tsmenu-popover">
<div v-for="(items, indexs) in item.children" :key="indexs" class="Navbar-menu-item-child-item"
@click="() => childmenuclick(items)">
@click="() => childmenuclick(items,index)">
{{ items.name }}
</div>
<template #reference>
@ -260,7 +261,8 @@ function userdetails() {
.Navbar-box {
width: 100%;
height: 65px;
height: 85px;
padding-top:10px;
display: flex;
align-items: center;
color: #fff;
@ -302,7 +304,7 @@ function userdetails() {
.Navbar-menu-time {
width: 150px;
margin-top: -10px;
.Navbar-menu-time-text {
font-size: 16px;
font-weight: 700;
@ -316,10 +318,11 @@ function userdetails() {
.Navbar-menu-item {
font-size: 14px;
padding: 5px 15px;
padding: 8px 20px;
background: url(/images/navmenu.png) no-repeat;
background-size: 100% 100%;
margin-left: 15px;
margin-top: -18px;
cursor: pointer;
position: relative;
}
@ -336,6 +339,7 @@ function userdetails() {
display: flex;
align-items: center;
font-size: 14px;
margin-top: -15px;
}
}
@ -348,20 +352,24 @@ function userdetails() {
</style>
<style>
.tsmenu-popover.el-popover.el-popper {
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5));
;
background: linear-gradient(to bottom, rgba(0, 71, 142, 1), rgba(0, 71, 142, 0));
border: 1px solid;
border-image: linear-gradient(to bottom, rgba(0,255,255,0.5), rgba(0,255,255,0)) 1;
border-bottom:none;
color: #fff;
border: none;
border-radius: 0px;
padding: 5px 0px;
z-index: 9001 !important;
}
.tsmenu-popover.ed-popover.ed-popper {
background: linear-gradient(to bottom, rgba(0, 52, 102, 1), rgba(0, 55, 110, 0.5));
;
background: linear-gradient(to bottom, rgba(0, 71, 142, 1), rgba(0, 71, 142, 0));
border: 1px solid;
border-image: linear-gradient(to bottom, rgba(0,255,255,0.5), rgba(0,255,255,0)) 1;
border-bottom:none;
color: #fff;
border: none;
border-radius: 0px;
padding: 5px 0px;
z-index: 9001 !important;
@ -375,7 +383,7 @@ function userdetails() {
.tsmenu-popover .Navbar-menu-item-child-item:hover {
color: rgb(0, 255, 254);
background: rgb(2, 88, 161);
background: rgba(0,153,255,0.2);
font-weight: 700;
}
</style>