diff --git a/src/assets/img/avator.jpg b/src/assets/img/avator.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a1f9ea9ff99d2a1f2dc8b4d3f67e76a49d568a57
Binary files /dev/null and b/src/assets/img/avator.jpg differ
diff --git a/src/components/headTop.vue b/src/components/headTop.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c552fbd18a2c94bac78a9cd45b196987545dc3c0
--- /dev/null
+++ b/src/components/headTop.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="header_container">
+
+		<el-breadcrumb separator="/">
+			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+			<el-breadcrumb-item>活动管理</el-breadcrumb-item>
+			<el-breadcrumb-item>活动列表</el-breadcrumb-item>
+			<el-breadcrumb-item>活动详情</el-breadcrumb-item>
+		</el-breadcrumb>
+		<el-dropdown @command="handleCommand" menu-align='start'>
+			<img src="../assets/img/avator.jpg" class="avator">
+			<el-dropdown-menu slot="dropdown">
+				<el-dropdown-item command="home">首页</el-dropdown-item>
+				<el-dropdown-item command="singout">退出</el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>
+    </div>
+</template>
+
+<script>
+    export default {
+		methods: {
+			handleCommand(command) {
+				this.$message(command);
+			}
+		}
+    }
+</script>
+
+<style lang="less">
+	@import '../style/mixin';
+	.header_container{
+		background-color: #EFF2F7;
+		height: 60px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-left: 20px;
+	}
+	.avator{
+		.wh(36px, 36px);
+		border-radius: 50%;
+		margin-right: 30px;
+	}
+	.el-dropdown-menu__item{
+        text-align: center;
+    }
+</style>
diff --git a/src/page/home.vue b/src/page/home.vue
index ec68afd6a754bfb29c5909ffe4eff9afe50f44c4..2b227550da3aeb503d6bbafe83f33a7d7b54cb47 100644
--- a/src/page/home.vue
+++ b/src/page/home.vue
@@ -1,15 +1,21 @@
 <template>
-    <div class="fillcontain">
-        home
+    <div class="fillcontain home_page">
+        <head-top></head-top>
     </div>
 </template>
 
 <script>
+	import headTop from '../components/headTop'
     export default {
-    	
+    	components: {
+    		headTop,
+    	}
     }
 </script>
 
 <style lang="less">
 	@import '../style/mixin';
+	.home_page{
+		
+	}
 </style>
diff --git a/src/page/manage.vue b/src/page/manage.vue
index 0d2e62a01970b9f86f6afacc5637280df5671785..ffb2dbc6513e072ba6d44a2cc475b8e183f58b5f 100644
--- a/src/page/manage.vue
+++ b/src/page/manage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="home_page fillcontain">
+	<div class="manage_page fillcontain">
 		<el-row style="height: 100%;">
 	  		<el-col :span="4"  style="min-height: 100%; background-color: #324057;">
 				<el-menu default-active="manage" style="min-height: 100%;" theme="dark" router>
@@ -53,7 +53,7 @@
 
 <style lang="less" scoped>
 	@import '../style/mixin';
-	.home_page{
+	.manage_page{
 		
 	}
 </style>