zhengsl/stdproject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航样式

Browse Source
This commit is contained in:
jingna 2025-07-02 14:05:47 +08:00
parent cbc84b8273
commit f6a0a25f91
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/views/system/userlogin/frame.vue
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 !== '') { if (item.module_id && item.module_id !== '') {
checkindex.value = index
showcontent.value = '' showcontent.value = ''
currentMoudleType.value = '' currentMoudleType.value = ''
currentrow.value = item currentrow.value = item
@ -215,12 +216,12 @@ function userdetails() {
<div class="Navbar-menu-content"> <div class="Navbar-menu-content">
<TimeDisplay /> <TimeDisplay />
<div class="Navbar-menu-item" <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)"> v-for="(item, index) in navmenulist" :key="index" @click="menuclick(index)">
<div v-if="!item.children || item.children.length == 0">{{ item.name }}</div> <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"> <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" <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 }} {{ items.name }}
</div> </div>
<template #reference> <template #reference>
@ -260,7 +261,8 @@ function userdetails() {
.Navbar-box { .Navbar-box {
width: 100%; width: 100%;
height: 65px; height: 85px;
padding-top:10px;
display: flex; display: flex;
align-items: center; align-items: center;
color: #fff; color: #fff;
@ -302,7 +304,7 @@ function userdetails() {
.Navbar-menu-time { .Navbar-menu-time {
width: 150px; width: 150px;
margin-top: -10px;
.Navbar-menu-time-text { .Navbar-menu-time-text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
@ -316,10 +318,11 @@ function userdetails() {
.Navbar-menu-item { .Navbar-menu-item {
font-size: 14px; font-size: 14px;
padding: 5px 15px; padding: 8px 20px;
background: url(/images/navmenu.png) no-repeat; background: url(/images/navmenu.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-left: 15px; margin-left: 15px;
margin-top: -18px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
@ -336,6 +339,7 @@ function userdetails() {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
margin-top: -15px;
} }
} }
@ -348,20 +352,24 @@ function userdetails() {
</style> </style>
<style> <style>
.tsmenu-popover.el-popover.el-popper { .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; color: #fff;
border: none;
border-radius: 0px; border-radius: 0px;
padding: 5px 0px; padding: 5px 0px;
z-index: 9001 !important; z-index: 9001 !important;
} }
.tsmenu-popover.ed-popover.ed-popper { .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; color: #fff;
border: none;
border-radius: 0px; border-radius: 0px;
padding: 5px 0px; padding: 5px 0px;
z-index: 9001 !important; z-index: 9001 !important;
@ -375,7 +383,7 @@ function userdetails() {
.tsmenu-popover .Navbar-menu-item-child-item:hover { .tsmenu-popover .Navbar-menu-item-child-item:hover {
color: rgb(0, 255, 254); color: rgb(0, 255, 254);
background: rgb(2, 88, 161); background: rgba(0,153,255,0.2);
font-weight: 700; font-weight: 700;
} }
</style> </style>