header.vue（右上角）
 

<template><div class="header"><!-- 折叠按钮 --><div class="collapse-btn" @click="collapseChage"><i v-if="!collapse" class="el-icon-s-fold"></i><i v-else class="el-icon-s-unfold"></i></div><div class="logo">在线考试管理系统</div><div class="header-right"><div class="header-user-con"><!-- 全屏显示 --><div class="btn-fullscreen" @click="handleFullScreen"><el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom"><i class="el-icon-rank"></i></el-tooltip></div><!-- 用户头像 --><div class="user-avator"><img :src="getAvatar(form.avatar)" alt="User Avatar"></div><!-- 用户名下拉菜单 --><el-dropdown class="user-name" trigger="click" @command="handleCommand"><span class="el-dropdown-link">{{username}}<i class="el-icon-caret-bottom"></i></span><el-dropdown-menu slot="dropdown"><!-- <el-dropdown-item command="updatePassword">个人中心</el-dropdown-item> 与下面的效果一致--><el-button style="border: 0;" @click="openDialog2">个人中心</el-button><br><el-button style="border: 0;" @click="openDialog">待办事件</el-button><el-dropdown-item command="loginout">退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown></div></div><el-dialog title="个人中心" :modal="false"  :visible.sync="addVisible" width="47%" style="height: auto;margin-left: 238px;margin-top: 60px;" :before-close="clearAddForm"><el-form label-position="left"  ref="addForm" label-width="80px"  :model="form" ><el-form-item label="用户名" style="margin-left: 30%;margin-top: 25px;"><el-input v-model="form.userName" style="width: 45%;"></el-input></el-form-item><el-form-item label="密码" style="mar