系统用户姓名头像显示在右上角

src/App.vue

@@ -71,7 +71,8 @@
 		background-size: cover;*/
 		background: #1F2D3D;
 		font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-		font-weight: 400;
+		/*font-weight: 400;*/
+		font-size:14px;
 		-webkit-font-smoothing: antialiased;
 	}
 	

src/main.js

@@ -28,6 +28,8 @@ Vue.use(ElementUI)
 Vue.use(VueRouter)
 Vue.use(Vuex)
 
+NProgress.configure({ showSpinner: false });
+
 const routes = [
   {
     path: '/login',

src/mockdata/user.js

@@ -4,7 +4,8 @@ const LoginUsers = [
     id: 1,
     username: 'admin',
     password: '123456',
-    avatar: ''
+    avatar: '',
+    name: '张某某'
   }
 ];
 

src/pages/Home.vue

@@ -2,19 +2,29 @@
 	<el-row class="panel">
 		<el-col :span="24" class="panel-top">
 			<el-col :span="20" style="font-size:26px;">
-				<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i></span>
+<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
+</span>
 </el-col>
-			<el-col :span="4">
-				<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;">
-					<!--<i class="logout" v-on:click="logout"></i>-->
+<el-col :span="4" class="rightbar">
+	<el-dropdown trigger="click">
+		<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img src="../assets/user.png" class="head"> 张某某
+</span>
+<el-dropdown-menu slot="dropdown">
+	<el-dropdown-item>我的消息</el-dropdown-item>
+	<el-dropdown-item>设置</el-dropdown-item>
+	<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
+</el-dropdown-menu>
+</el-dropdown>
+<!--<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;">
 <i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i>
-				</el-tooltip>
+</el-tooltip>-->
 </el-col>
 </el-col>
 <el-col :span="24" class="panel-center">
 	<!--<el-col :span="4">-->
 	<aside style="width:230px;">
-				<h5 class="admin"><i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员：测试</h5>
+<!--<h5 class="admin">
+	<i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员：测试</h5>-->
 <!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen"
 					@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
 					<el-submenu index="1">
@@ -30,8 +40,8 @@
 					</el-submenu>
 					<el-menu-item index="/page6"><i class="fa fa-line-chart"></i>导航三</el-menu-item>
 				</el-menu>-->
-				<el-menu style="border-top: 1px solid #475669;" :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen"
-					@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
+<el-menu :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
+	theme="dark" unique-opened router>
 	<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
 		<el-submenu :index="index+''" v-if="!item.leaf">
 			<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
@@ -145,6 +155,19 @@
 		color: #c0ccda;
 	}
 
+	.panel-top .rightbar{
+		text-align: right;
+		padding-right: 20px;
+	}
+
+	.panel-top .rightbar .head{
+		width: 40px;
+    	height: 40px;
+		border-radius: 20px;
+		margin: 10px 15px;
+    	float: right;
+	}
+	
 	.panel-center {
 		background: #324057;
 		position: absolute;