From 9e14499db888dacacf68628cfce01fe3ba220409 Mon Sep 17 00:00:00 2001
From: taylor <709161610@qq.com>
Date: Thu, 19 Jan 2017 17:22:04 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E7=94=A8=E6=88=B7=E5=A7=93?=
 =?UTF-8?q?=E5=90=8D=E5=A4=B4=E5=83=8F=E6=98=BE=E7=A4=BA=E5=9C=A8=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=8A=E8=A7=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue          |   5 +-
 src/assets/user.png  | Bin 0 -> 3217 bytes
 src/main.js          |   2 +
 src/mockdata/user.js |   3 +-
 src/pages/Home.vue   | 195 ++++++++++++++++++++++++-------------------
 5 files changed, 116 insertions(+), 89 deletions(-)
 create mode 100644 src/assets/user.png

diff --git a/src/App.vue b/src/App.vue
index bf2c52e..3dab0a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
 	<div id="app">
 		<!--<transition name="bounce">-->
-			<router-view></router-view>
+		<router-view></router-view>
 		<!--</transition>-->
 	</div>
 </template>
@@ -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;
 	}
 	
diff --git a/src/assets/user.png b/src/assets/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..aeaa2f2c2f6e15a73183d706b9e52fa22400fbec
GIT binary patch
literal 3217
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
VCU4~8#A2&{G}^@IH{3X${STzZ+phos

literal 0
HcmV?d00001

diff --git a/src/main.js b/src/main.js
index 2be9bd0..c537e06 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,8 @@ Vue.use(ElementUI)
 Vue.use(VueRouter)
 Vue.use(Vuex)
 
+NProgress.configure({ showSpinner: false });
+
 const routes = [
   {
     path: '/login',
diff --git a/src/mockdata/user.js b/src/mockdata/user.js
index 68bdf24..6ef85fb 100644
--- a/src/mockdata/user.js
+++ b/src/mockdata/user.js
@@ -4,7 +4,8 @@ const LoginUsers = [
     id: 1,
     username: 'admin',
     password: '123456',
-    avatar: ''
+    avatar: '',
+    name: '张某某'
   }
 ];
 
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 3926072..6a12bd9 100644
--- a/src/pages/Home.vue
+++ b/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">
-			<!--<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"
+<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"
 					@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
 					<el-submenu index="1">
 						<template slot="title"><i class="el-icon-message"></i>导航一</template>
@@ -30,94 +40,94 @@
 					</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>
-					<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>
-							<el-menu-item v-for="child in item.children" :index="child.path">{{child.name}}</el-menu-item>
-						</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">
-				<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>
+<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>
+			<el-menu-item v-for="child in item.children" :index="child.path">{{child.name}}</el-menu-item>
+		</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">
+	<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>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-		  currentPath: '/table',
-		  currentPathName:'Table',
-		  currentPathNameParent:'导航一',
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        }
-      }
-    },
-	watch: {
-		'$route' (to, from) {//监听路由改变
-			this.currentPath=to.path;
-			this.currentPathName=to.name;
-			this.currentPathNameParent=to.matched[0].name;
-		}
-	},
-    methods: {
-      onSubmit() {
-        console.log('submit!');
-      },
-			handleopen(){
+	export default {
+		data() {
+			return {
+				currentPath: '/table',
+				currentPathName: 'Table',
+				currentPathNameParent: '导航一',
+				form: {
+					name: '',
+					region: '',
+					date1: '',
+					date2: '',
+					delivery: false,
+					type: [],
+					resource: '',
+					desc: ''
+				}
+			}
+		},
+		watch: {
+			'$route'(to, from) {//监听路由改变
+				this.currentPath = to.path;
+				this.currentPathName = to.name;
+				this.currentPathNameParent = to.matched[0].name;
+			}
+		},
+		methods: {
+			onSubmit() {
+				console.log('submit!');
+			},
+			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(() => {
 					_this.$router.replace('/login');
 				}).catch(() => {
-							
+
 				});
 
-				
+
 			}
-    }
-  }
+		}
+	}
 </script>
 
 <style scoped>
@@ -144,6 +154,19 @@
 		background: #1F2D3D;
 		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;