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

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,20 +2,30 @@
 	<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>
-			</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>-->
-					<i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i>
-				</el-tooltip>
-			</el-col>
-		</el-col>
-		<el-col :span="24" class="panel-center">
+<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
+</span>
+</el-col>
+<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-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>
-				<!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen"
+<!--<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">
 						<template slot="title"><i class="el-icon-message"></i>导航一</template>
@@ -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>
@@ -39,30 +49,30 @@
 		</el-submenu>
 		<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
 	</template>
-				</el-menu>
-			</aside>
-			<!--</el-col>-->
-			<!--<el-col :span="20" class="panel-c-c">-->
-			<section class="panel-c-c">
+</el-menu>
+</aside>
+<!--</el-col>-->
+<!--<el-col :span="20" class="panel-c-c">-->
+<section class="panel-c-c">
 	<div class="grid-content bg-purple-light">
 		<el-col :span="24" style="margin-bottom:15px;">
-						<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
-						<el-breadcrumb separator="/" style="float:right;">
-							<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
-							<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item>
-							<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item>
-						</el-breadcrumb>
-					</el-col>
-					<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
-						<!--<transition name="fade">-->
-							<router-view></router-view>
-						<!--</transition>-->
-					</el-col>
-				</div>
-			</section>
-			<!--</el-col>-->
-		</el-col>
-	</el-row>
+<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
+<el-breadcrumb separator="/" style="float:right;">
+<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
+<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item>
+<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item>
+</el-breadcrumb>
+</el-col>
+<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
+<!--<transition name="fade">-->
+<router-view></router-view>
+<!--</transition>-->
+</el-col>
+</div>
+</section>
+<!--</el-col>-->
+</el-col>
+</el-row>
 </template>
 
 <script>
@@ -70,8 +80,8 @@
 		data() {
 			return {
 				currentPath: '/table',
-		  currentPathName:'Table',
-		  currentPathNameParent:'导航一',
+				currentPathName: 'Table',
+				currentPathNameParent: '导航一',
 				form: {
 					name: '',
 					region: '',
@@ -85,27 +95,27 @@
 			}
 		},
 		watch: {
-		'$route' (to, from) {//监听路由改变
-			this.currentPath=to.path;
-			this.currentPathName=to.name;
-			this.currentPathNameParent=to.matched[0].name;
+			'$route'(to, from) {//监听路由改变
+				this.currentPath = to.path;
+				this.currentPathName = to.name;
+				this.currentPathNameParent = to.matched[0].name;
 			}
 		},
 		methods: {
 			onSubmit() {
 				console.log('submit!');
 			},
-			handleopen(){
+			handleopen() {
 				//console.log('handleopen');
 			},
-			handleclose(){
+			handleclose() {
 				//console.log('handleclose');
 			},
-            handleselect:function(a,b){
+			handleselect: function (a, b) {
 			},
 			//退出登录
-			logout:function(){
-				var _this=this;
+			logout: function () {
+				var _this = this;
 				this.$confirm('确认退出吗?', '提示', {
 					//type: 'warning'
 				}).then(() => {
@@ -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;