导航样式
This commit is contained in:
parent
cbc84b8273
commit
f6a0a25f91
@ -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>
|
Loading…
Reference in New Issue
Block a user