ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航栏样式修改

Browse Source
This commit is contained in:
zhujiyan
2024-08-22 16:36:00 +08:00
parent e0aaa7a30d
commit bc5fa95697
13 changed files with 204 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/layouts/LayoutTransverse/index.scss
View File

@@ -8,8 +8,9 @@
justify-content: space-between;
height: 55px;
padding: 0 15px 0 0;
background-color: var(--el-header-bg-color);
border-bottom: 1px solid var(--el-header-border-color);
// background-color: var(--el-header-bg-color);
background-color: var(--el-color-primary); //默认蓝色风格背景
.logo {
width: 210px;
margin-right: 30px;
@@ -21,31 +22,52 @@
.logo-text {
font-size: 21.5px;
font-weight: bold;
color: var(--el-header-logo-text-color);
// color: var(--el-header-logo-text-color);
color: #fff; // logo文字颜色
white-space: nowrap;
}
}
//导航栏样式
.el-menu {
flex: 1;
height: 100%;
overflow: hidden;
border-bottom: none;
background-color: var(--el-color-primary); //导航蓝色背景
.el-menu-item {
color: #fff;
}
.el-menu-item:hover {
color: #fff; //一级导航划过颜色
background-color: #5274a5 !important; //一级导航划过背景色
}
.el-sub-menu__hide-arrow {
width: 65px;
height: 55px;
}
.el-menu-item.is-active {
color: #ffffff !important;
color: #fff !important; //一级导航文字选中颜色
background-color: #5274a5 !important; //一级导航选中背景色
border-bottom: 0 !important;
}
.el-sub-menu__title {
color: #fff;
}
.is-opened:hover {
color: #fff;
}
.is-active {
background-color: var(--el-color-primary) !important;
border-bottom-color: var(--el-color-primary) !important;
// border-bottom-color: var(--el-color-primary) !important;
border-bottom: 0 !important;
&::before {
width: 0;
}
.el-sub-menu__title {
color: #ffffff !important;
background-color: var(--el-color-primary) !important;
color: #fff !important; //二级导航文字选中颜色
// background-color: var(--el-color-primary) !important;
// background-color: #5274a5 !important;//二级导航选中背景色
background-color: #5274a5 !important;
border-bottom-color: var(--el-color-primary) !important;
}
}