|
|
|
@ -14,32 +14,48 @@
|
|
|
|
|
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
|
|
|
|
|
|
|
|
|
|
<div class="right-menu">
|
|
|
|
|
<template v-if="device !== 'mobile'">
|
|
|
|
|
<!-- <template v-if="device !== 'mobile'">
|
|
|
|
|
<search id="header-search" class="right-menu-item" />
|
|
|
|
|
|
|
|
|
|
<!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
|
|
|
|
|
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
|
|
|
|
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
|
|
|
|
</el-tooltip> -->
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
|
|
<!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">
|
|
|
|
|
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
|
|
|
|
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
|
|
|
|
</el-tooltip> -->
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
|
|
|
|
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
|
|
|
|
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
|
|
|
|
|
|
|
|
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
|
|
|
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
|
|
|
<size-select id="size-select" class="right-menu-item hover-effect" />
|
|
|
|
|
</el-tooltip> -->
|
|
|
|
|
</template>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</template> -->
|
|
|
|
|
<header>
|
|
|
|
|
<el-dropdown trigger="click" @visible-change="getDrop">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="avatar"></div>
|
|
|
|
|
<div class="header-text">
|
|
|
|
|
<span
|
|
|
|
|
>{{ dept.deptName }} {{ username }}
|
|
|
|
|
</span>
|
|
|
|
|
<i class="el-icon-caret-bottom" v-if="!avatarFlag"></i>
|
|
|
|
|
<i class="el-icon-caret-top" v-if="avatarFlag"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<router-link to="/user/profile">
|
|
|
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
|
|
|
</router-link>
|
|
|
|
|
<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<el-dropdown
|
|
|
|
|
<!-- <el-dropdown
|
|
|
|
|
class="avatar-container right-menu-item hover-effect"
|
|
|
|
|
trigger="click"
|
|
|
|
|
>
|
|
|
|
|
<div class="avatar-wrapper">
|
|
|
|
|
<img :src="avatar" class="user-avatar" />
|
|
|
|
|
<i class="el-icon-caret-bottom" />
|
|
|
|
|
</div>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<router-link to="/user/profile">
|
|
|
|
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
|
|
@ -51,13 +67,13 @@
|
|
|
|
|
<span>退出登录</span>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</el-dropdown> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
|
import { mapGetters, mapState } from "vuex";
|
|
|
|
|
import Breadcrumb from "@/components/Breadcrumb";
|
|
|
|
|
import TopNav from "@/components/TopNav";
|
|
|
|
|
import Hamburger from "@/components/Hamburger";
|
|
|
|
@ -96,6 +112,11 @@ export default {
|
|
|
|
|
return this.$store.state.settings.topNav;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
...mapState({
|
|
|
|
|
dept: (state) => state.user.dept,
|
|
|
|
|
username: (state) => state.user.name,
|
|
|
|
|
roles: (state) => state.user.roles,
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
toggleSideBar() {
|
|
|
|
@ -119,6 +140,12 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
::v-deep .el-dropdown-selfdefine {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
.navbar {
|
|
|
|
|
height: 50px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
@ -156,7 +183,24 @@ export default {
|
|
|
|
|
.right-menu {
|
|
|
|
|
float: right;
|
|
|
|
|
height: 100%;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// line-height: 50px;
|
|
|
|
|
header {
|
|
|
|
|
padding-right: 20px;
|
|
|
|
|
.avatar {
|
|
|
|
|
height: 25px;
|
|
|
|
|
width: 25px;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-image: url("../../assets/images/gl-icon.png");
|
|
|
|
|
}
|
|
|
|
|
.header-text {
|
|
|
|
|
font-family: "Alibaba-PuHuiTi-Medium.otf";
|
|
|
|
|
span {
|
|
|
|
|
margin: 0 8px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|