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>

3
frontend/src/layouts/LayoutVertical/index.scss
View File

@@ -42,7 +42,8 @@
justify-content: space-between;
height: 55px;
padding: 0 15px;
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);//默认蓝色风格背景
}
}

16
frontend/src/layouts/components/Header/ToolBarRight.vue
View File

@@ -8,32 +8,18 @@
<!-- <Message id="message" />-->
<!-- <Fullscreen id="fullscreen" />-->
<!-- </div>-->
<span class="username">{{ username }}</span>
<Avatar />
</div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useUserStore } from "@/stores/modules/user";
import AssemblySize from "./components/AssemblySize.vue";
import Language from "./components/Language.vue";
import SearchMenu from "./components/SearchMenu.vue";
import ThemeSetting from "./components/ThemeSetting.vue";
import Message from "./components/Message.vue";
import Fullscreen from "./components/Fullscreen.vue";
import Avatar from "./components/Avatar.vue";
const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
</script>
<style scoped lang="scss">
.tool-bar-ri {
display: flex;
align-items: center;
justify-content: center;
padding-right: 25px;
// padding-right: 25px;
.header-icon {
display: flex;
align-items: center;

68
frontend/src/layouts/components/Header/components/Avatar.vue
View File

@@ -1,7 +1,12 @@
<template>
<el-dropdown trigger="click">
<div class="avatar">
<img src="@/assets/images/avatar.gif" alt="avatar" />
<div class="userInfo">
<div class="icon">
<Icon><Avatar/></Icon>
</div>
<div class="username">
{{ username }}
</div>
</div>
<template #dropdown>
<el-dropdown-menu>
@@ -11,6 +16,25 @@
<el-dropdown-item @click="openDialog('passwordRef')">
<el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
</el-dropdown-item>
<el-dropdown-item @click="openDialog('passwordRef')">
<el-icon><Edit /></el-icon>{{ $t("header.changeMode") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<div class="avatar">
<!-- <img src="@/assets/images/avatar.gif" alt="avatar" /> -->
<img src="@/assets/icons/loginout.svg" alt="avatar" />
</div>
<template #dropdown>
<el-dropdown-menu>
<!-- <el-dropdown-item @click="openDialog('infoRef')">
<el-icon><User /></el-icon>{{ $t("header.personalData") }}
</el-dropdown-item>
<el-dropdown-item @click="openDialog('passwordRef')">
<el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
</el-dropdown-item> -->
<el-dropdown-item divided @click="logout">
<el-icon><SwitchButton /></el-icon>{{ $t("header.logout") }}
</el-dropdown-item>
@@ -32,16 +56,24 @@ import { useUserStore } from "@/stores/modules/user";
import { ElMessageBox, ElMessage } from "element-plus";
import InfoDialog from "./InfoDialog.vue";
import PasswordDialog from "./PasswordDialog.vue";
const router = useRouter();
import { computed } from "vue";
import { Avatar } from "@element-plus/icons-vue";
import AssemblySize from "./components/AssemblySize.vue";
import Language from "./components/Language.vue";
import SearchMenu from "./components/SearchMenu.vue";
import ThemeSetting from "./components/ThemeSetting.vue";
import Message from "./components/Message.vue";
import Fullscreen from "./components/Fullscreen.vue";
const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const router = useRouter();
// 退出登录
const logout = () => {
ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
type: "warning",
}).then(async () => {
// 1.执行退出登录接口
await logoutApi();
@@ -65,15 +97,35 @@ const openDialog = (ref: string) => {
</script>
<style scoped lang="scss">
.userInfo {
min-width: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
.icon{
width: 18px;
height: 18px;
color: #fff !important;
}
.username {
color: #fff;
font-size: 16px;
margin-left: 10px;
}
}
.avatar {
width: 40px;
height: 40px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
border-radius: 50%;
// border-radius: 50%;
img {
width: 100%;
height: 100%;
// width: 100%;
// height: 100%;
}
}
</style>

20
frontend/src/layouts/components/Menu/SubMenu.vue
View File

@@ -19,29 +19,29 @@
</el-menu-item>
</template>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
defineProps<{ menuList: Menu.MenuOptions[] }>();
const router = useRouter();
const handleClickMenu = (subItem: Menu.MenuOptions) => {
if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
router.push(subItem.path);
};
</script>
<style lang="scss">
.el-sub-menu .el-sub-menu__title:hover {
color: var(--el-menu-hover-text-color) !important;
background-color: transparent !important;
// color: var(--el-menu-hover-text-color) !important;
// background-color: transparent !important;
color: #fff !important;//一级导航文字选中颜色
background-color: #5274a5 !important; //一级导航选中背景色
}
.el-menu--collapse {
.is-active {
.el-sub-menu__title {
color: #ffffff !important;
background-color: var(--el-color-primary) !important;
// background-color: var(--el-color-primary) !important;
background-color: #5274a5 !important;
border-bottom: 0 !important;
}
}
}
@@ -50,8 +50,10 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
color: var(--el-menu-hover-text-color);
}
&.is-active {
color: var(--el-menu-active-color) !important;
background-color: var(--el-menu-active-bg-color) !important;
// color: var(--el-menu-active-color) !important;
// background-color: var(--el-menu-active-bg-color) !important;
color: #fff !important;//一级导航文字选中颜色
background-color: #5274a5 !important; //一级导航选中背景色
&::before {
position: absolute;
top: 0;