From 485aef90f3240c06747d1e7bf6a0edfe4c2dbe0c Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期一, 13 二月 2023 16:31:10 +0800
Subject: [PATCH] 2023/2/13 肖辉 侧边栏处理
---
src/views/layout/components/Menu/index.vue | 55 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 46 insertions(+), 9 deletions(-)
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index cc37bb7..aa2c626 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -28,6 +28,7 @@
v-if="secondMenu.menuVoArrayList.length > 0"
:index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
class="secondMenu"
+ :class="secondMenu.menuVoArrayList.length > 0?'is-Active':'none-Active'"
>
<template slot="title">
<span class="secondSpan">{{ secondMenu.title }}</span>
@@ -140,48 +141,84 @@
.el-menu {
background: linear-gradient(#313350, #0f2b56);
border: 0;
-
+ font-size: 16px;
+ .is-opened{
+ .fisrtSpan{
+ color: #22d3eb;
+ }
+ }
.firstMenu {
background: #313350;
text-align: left;
-
+ //border-bottom:1px solid #ccc ;
&:hover > .el-submenu__title {
background-color: #092c4a;
}
-
&:hover .fisrtSpan {
color: #22d3eb;
- }
+ }
span,
span {
color: #e9eef3;
+ font-size: 16px;
}
-
+ .el-menu{
+ .is-active {
+ background-color: #409EFF;
+ color: #fff;
+ }
+ .is-Active{
+ background-color: #092c4a;
+ color: #fff;
+ }
+ }
.el-menu-item {
color: #e9eef3;
background-color: #313350;
+ font-size: 16px;
+ border-bottom: 1px solid #ccc;
}
-
.el-menu-item:hover {
background-color: #409EFF;
color: #22d3eb;
}
+ .is-opened{
+ .secondSpan{
+ color: #22d3eb;
+ }
+ }
+ .secondMenu{
+ //border-bottom:1px solid #ccc ;
- .is-active {
- background-color: #409EFF;
- color: #fff;
+ .is-active {
+ background-color: #409EFF;
+ color: #22d3eb;
+ }
}
}
.secondMenu {
+
&:hover > .el-submenu__title {
background-color: #092c4a;
}
+ .secondSpan{
+ }
&:hover .secondSpan {
color: #22d3eb;
}
+ .is-opened{
+
+ .el-submenu__title{
+ background-color: #fff;
+ }
+ }
+ .is-active {
+ background-color: #409EFF;
+ color: #fff;
+ }
}
.thirdMenu {
--
Gitblit v1.8.0