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;
}
}

32
frontend/src/layouts/LayoutTransverse/index.vue
View File

@@ -3,13 +3,22 @@
<el-container class="layout">
<el-header>
<div class="logo flx-center">
<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
<!-- <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" /> -->
<img
class="logo-img"
src="@/assets/images/cn_pms9100_logo.png"
alt="logo"
/>
<span class="logo-text">{{ title }}</span>
</div>
<el-menu mode="horizontal" :router="false" :default-active="activeMenu">
<el-menu trigger="click" mode="horizontal" :router="false" :default-active="activeMenu">
<!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
<template v-for="subItem in menuList" :key="subItem.path">
<el-sub-menu v-if="subItem.children?.length" :key="subItem.path" :index="subItem.path + 'el-sub-menu'">
<el-sub-menu
v-if="subItem.children?.length"
:key="subItem.path"
:index="subItem.path + 'el-sub-menu'"
>
<template #title>
<el-icon>
<component :is="subItem.meta.icon"></component>
@@ -18,7 +27,12 @@
</template>
<SubMenu :menu-list="subItem.children" />
</el-sub-menu>
<el-menu-item v-else :key="subItem.path + 'el-menu-item'" :index="subItem.path" @click="handleClickMenu(subItem)">
<el-menu-item
v-else
:key="subItem.path + 'el-menu-item'"
:index="subItem.path"
@click="handleClickMenu(subItem)"
>
<el-icon>
<component :is="subItem.meta.icon"></component>
</el-icon>
@@ -48,7 +62,9 @@ const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
const activeMenu = computed(
() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string
);
const handleClickMenu = (subItem: Menu.MenuOptions) => {
if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
@@ -58,4 +74,10 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
<style scoped lang="scss">
@import "./index.scss";
.logo{
margin-right: 0 !important;
}
.logo-text {
letter-spacing: 2px;
}
</style>