realty/virgo.wzfrontend/workark/src/layout/components/topNav.vue

<template>
	<div class="work-layout-title">
		<div class="work-layout-left">
			<div class="work-layout-image">
				<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/2f7b4bfaf9e64817bc2cb46f3a632b01"
					alt="logo.png" />
			</div>
			<div class="work-layout-label">WORKARK</div>
		</div>
		<div class="work-layout-right">
			<div class="work-layout-badge">
				<el-badge :is-dot="systemCountStatus">
					<i class="iconfont huifont-xiaoxi"></i>
				</el-badge>
			</div>
			<el-dropdown @visible-change="value => userDropdown = value" @command="userCommand">
				<div class="work-layout-user">
					<div class="work-layout-avatar">
						<avatar :user="users"></avatar>
					</div>
					<i :class="'iconfont huifont-gerenzhongxinxiala'+ (userDropdown ? ' dropdown-icon' : '')"></i>
				</div>
				<el-dropdown-menu class="user-dropdown" slot="dropdown">
					<el-dropdown-item command="user">{{users.name}}</el-dropdown-item>
					<el-dropdown-item command="detail">个人信息</el-dropdown-item>
					<el-dropdown-item command="loginout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	import {
		removeToken
	} from '@/uitls/auth';
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				users: {},
				userDropdown: false,
				systemCountStatus: false
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.users = this.$store.getters.user;
			},
			userCommand(command) {
				switch (command) {
					case 'detail':
						break;
					case 'loginout':
						this.loginout();
						break;
					default:
						break;
				}
			},
			loginout() {
				this.$confirm('是否要退出登录?', () => {
					removeToken();
					this.$router.replace('/loginRegister/login')
					this.$message.success('退出成功');
				});
			},
		},
		watch: {
			user() {
				this.init();
			}
		},
		computed: {
			...mapGetters(['user'])
		},
	}
</script>

<style lang="scss" scoped>
	.work-layout-title {
		display: flex;
		height: 52px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		justify-content: space-between;
		background: $--color-white;
		border-bottom: 1px solid $--border-color-lighter;
	}

	.work-layout-left {
		height: 100%;
		padding-left: 24px;
		display: flex;
		align-items: center;
	}

	.work-layout-image {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.work-layout-label {
		padding-left: 10px;
		font-size: 18px;
		font-weight: bold;
		font-weight: 600;
		margin-right: 77px;
	}

	.work-layout-right {
		height: 100%;
		padding-right: 24px;
		display: flex;
		align-items: center;
	}

	.work-layout-badge {
		margin-right: 35px;
		cursor: pointer;
		margin-left: 20px;

		.iconfont {
			font-size: 22px;
		}

		.el-badge__content {
			border: none;
		}
	}

	.work-layout-user {
		display: flex;
		align-items: center;
		cursor: pointer;

		.work-layout-avatar {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 8px;
		}

		.iconfont {
			font-size: 14px;
			transition: all 300ms;
		}

		.dropdown-icon {
			transform: rotate(180deg);
		}
	}
</style>