导航栏样式修改
This commit is contained in:
zhujiyan
1
frontend/src/assets/icons/loginout.svg
Normal file
1
frontend/src/assets/icons/loginout.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724311309043" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12103" width="24.0234375" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1001.65696 463.424l-332.224-332.416C648.76096 110.4 624.05696 104.256 598.52096 113.792c-26.176 9.856-41.152 33.28-41.216 64.384L557.30496 328.32 492.28096 328.32 305.65696 328.384C266.48896 328.512 239.16096 355.712 239.03296 394.624c-0.128 78.4-0.128 156.736 0 235.072 0.128 37.696 27.776 65.28 65.792 65.664l252.48 0.064L557.24096 724.48c-0.128 40.768-0.256 81.408 0.576 122.112 0.256 15.936 6.528 33.28 16.256 45.184 11.904 14.656 28.224 22.72 45.952 22.72l0 0c17.536 0 35.2-8 49.728-22.464 110.848-110.72 221.568-221.504 332.288-332.352C1031.60896 530.176 1031.48096 493.248 1001.65696 463.424z" p-id="12104" fill="#ffffff"></path><path d="M387.70496 805.696 387.64096 805.696l-72.576 0.128-103.872-0.064c-52.48 0-82.624-30.144-82.624-82.688L128.56896 300.48c0-52.416 30.144-82.496 82.752-82.496l68.8-0.064 75.584 0.064 42.048-0.064c30.08 0 46.528-15.104 48.896-44.8 0.896-11.072 0.64-22.336 0.256-34.88C446.13696 106.944 428.60096 89.664 397.68896 89.6L321.33696 89.6C280.44096 89.6 239.54496 89.6 198.71296 89.856 186.16896 89.92 173.30496 91.328 160.44096 94.08 68.21696 113.728 0.88896 196.416 0.37696 290.688 0.12096 341.504 0.18496 392.384 0.24896 443.136l0.064 67.648L0.18496 581.76C0.12096 632.768-0.00704 683.712 0.44096 734.784c0.896 107.776 88.768 197.056 195.904 199.04 26.368 0.512 52.8 0.64 79.168 0.64l125.376-0.256c24.768 0 42.112-15.04 45.184-39.232 1.088-8.832 1.216-17.856 1.28-26.88l0-4.48c0.128-13.312 0.256-31.552-12.544-44.48C422.45696 806.784 404.66496 805.696 387.70496 805.696z" p-id="12105" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
BIN
frontend/src/assets/images/cn_pms9100_logo.png
Normal file
BIN
frontend/src/assets/images/cn_pms9100_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
@@ -24,6 +24,7 @@ export default {
|
||||
exitFullScreen: "Exit Full Screen",
|
||||
personalData: "Personal Data",
|
||||
changePassword: "Change Password",
|
||||
changeMode:"Change Mode",
|
||||
logout: "Logout"
|
||||
}
|
||||
};
|
||||
|
||||
@@ -24,6 +24,7 @@ export default {
|
||||
exitFullScreen: "退出全屏",
|
||||
personalData: "个人信息",
|
||||
changePassword: "修改密码",
|
||||
changeMode:"模式切换",
|
||||
logout: "退出登录"
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);//默认蓝色风格背景
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
12
frontend/src/views/home/index.vue
Normal file
12
frontend/src/views/home/index.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary">按钮</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user