a half of menu

src/components/common/BHeader.vue

@@ -7,14 +7,17 @@
   		<div class="banner-title">哔哩哔哩 (゜-゜)つロ 干杯~</div>
       <search class="msearch"></search>
   	</div>
+    <BMenu></BMenu>
   </div>
 </template>
 
 <script>
-import Search from './Search.vue'
+import Search from 'components/common/Search'
+import BMenu from 'components/common/BMenu'
 export default {
   components: {
-    Search
+    Search,
+    BMenu
   }
 }
 </script>
@@ -24,15 +27,13 @@ export default {
     background transparent no-repeat center -10px
     position relative
     margin -42px auto 0
-    &:after
-      content ''
-      display block
-      visibility hidden
-      height 0px
-      clear both
-      font-size 0
     .header-layer
     	height 170px
+      position absolute
+      top 0px
+      left 0px
+      width 100%
+      z-index 10
     .header-link
     	position absolute
     	top 0px
@@ -45,15 +46,7 @@ export default {
     	margin 0 auto
     	position relative
     	height 170px
-    	top -170px
     	transition .2s height
-      &:after
-        content ""
-        display block
-        visibility hidden
-        height 0px
-        clear both
-        font-size 0
     	.logo
     		position absolute
     		width 220px

src/components/common/BMenu.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="menu">
+		<div class="menu-wrapper">
+			<ul class="nav-menu">
+				<BMenuItem v-for="i in itemNum"></BMenuItem>
+			</ul>
+			<div class="menu-r"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import BMenuItem from 'components/common/BMenuItem'
+export default {
+	data() {
+		return {
+			itemNum: [1, 2, 3, 4, 5]
+		}
+	},
+	components: {
+		BMenuItem
+	}
+}
+</script>
+
+<style lang="stylus" scoped>
+	.menu
+		width 100%
+		background #fff
+		.menu-wrapper
+			position relative
+			width 980px
+			margin 0 auto
+			padding 6px 0
+			z-index 100
+			.nav-menu
+				zoom 1
+				display inline-block
+				vertical-align top
+				height 50px
+			.menu-r
+				position absolute
+				right 0px
+				top 0px
+				height 50px
+				padding 6px 0
+</style>

src/components/common/BMenuItem.vue

@@ -0,0 +1,25 @@
+<template>
+	<li class="m-i">
+		<a href="">
+			<em>首页</em>
+		</a>
+	</li>
+</template>
+
+<script>
+export default {
+	
+}
+</script>
+
+<style lang="stylus" scoped>
+	.m-i
+		float left
+		position relative
+		font-size  14px
+		display block
+		height 50px
+		em
+			font-style normal
+			font-weight normal
+</style>

src/components/common/Menu.vue

@@ -1,23 +0,0 @@
-<template>
-	<div class="menu">
-		<div class="menu-wrapper"></div>
-	</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="stylus" scoped>
-	.menu
-		width 100%
-		background #fff
-		.menu-wrapper
-			position relative
-			width 980px
-			margin 0 auto
-			padding 6px 0
-			z-index 100
-</style>

src/components/common/MenuItem.vue

@@ -1,13 +0,0 @@
-<template>
-	<li></li>
-</template>
-
-<script>
-export default {
-	
-}
-</script>
-
-<style lang="stylus" scoped="">
-	
-</style>