complete top-container ui

src/App.vue

@@ -1,16 +1,18 @@
 <template>
   <div id="app">
     <TopContainer></TopContainer>
+    <BHeader class="bheader"></BHeader>
   </div>
 </template>
 
 <script>
 import TopContainer from 'components/common/TopContainer.vue'
-
+import BHeader from 'components/common/BHeader.vue'
 export default {
   name: 'app',
   components: {
-    TopContainer
+    TopContainer,
+    BHeader
   }
 }
 </script>
@@ -28,4 +30,11 @@ export default {
     min-width 990px
     tap-highlight-color transparent
     -webkit-tap-highlight-color transparent
+    .bheader
+      background-image url('http://i0.hdslb.com/bfs/archive/4b9c7031618e743f3ed3e13f74ebc0130c55d981.jpg')
+      background transparent no-repeat center -10px
+      position relative
+      margin -42px auto 0
+      background-color red
+      height 200px
 </style>

src/components/common/Header.vue → src/components/common/BHeader.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="header">
+  	<span>你大爷</span>
   </div>
 </template>
 
@@ -9,6 +10,6 @@ export default {
 }
 </script>
 
-<style>
+<style lang="stylus">
 
 </style>

src/components/common/PostMaterial.vue

@@ -0,0 +1,77 @@
+<template>
+	<ul class="s-menu">
+		<li>
+			<a href="http://member.bilibili.com/v/video/submit.html" target="_blank">
+				<i class="b-icon b-icon-vp"></i>
+				<em>视频投稿</em>
+			</a>
+		</li>
+		<li>
+			<a href="http://member.bilibili.com/v/#!/article" target="_blank">
+				<i class="b-icon b-icon-vm"></i>
+				<em>投稿管理</em>
+			</a>
+		</li>
+		<li>
+			<a href="http://member.bilibili.com/v/" target="_blank">
+				<i class="b-icon b-icon-vc"></i>
+				<em>创作中心</em>
+			</a>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus" scoped>
+	.s-menu
+		position absolute
+		display block
+		top 42px
+		right 0px
+		z-index 15
+		width 216px
+		border 0
+		transition .2s
+		border-radius 0 0 4px 4px
+		background-color #fff
+		box-shadow rgba(0, 0, 0, 0.16) 2px 4px
+		overflow hidden
+		li
+			cursor pointer
+			text-align center
+			width 72px
+			height 64px
+			transition .1s
+			float left
+			list-style-type none
+			em
+				display block
+				font-style normal
+				font-weight normal
+			a
+				display block
+				color #f25d8e
+				padding 14px 12px 0 12px
+				line-height 1
+				.b-icon
+					display inline-block
+					vertical-align middle
+					width 20px
+					height 20px
+					margin 0 auto 8px
+					background url(../../assets/images/icons.png)
+					&.b-icon-vp
+						background-position -471px -919px
+					&.b-icon-vm
+						background-position -471px -982px
+					&.b-icon-vc
+						background-position -471px -1753px
+
+
+
+</style>

src/components/common/Search.vue

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

src/components/common/TopContainer.vue

@@ -44,7 +44,10 @@
                 <span>注册</span>
               </a>
             </li>
-            <li class="u-i b-post"></li>
+            <li class="u-i b-post">
+              <a class="i-link" href="http://member.bilibili.com/v/video/submit.html" target="_blank" @mouseenter="isShowPostMenu = !isShowPostMenu" @mouseleave="isShowPostMenu = !isShowPostMenu">投稿</a>
+              <PostMaterial v-show="isShowPostMenu"></PostMaterial>
+            </li>
           </ul>
         </div>
       </div>
@@ -53,8 +56,21 @@
 </template>
 
 <script>
+import PostMaterial from './PostMaterial.vue'
 export default {
-
+  data() {
+    return {
+      isShowPostMenu: false
+    }
+  },
+  components: {
+    PostMaterial
+  },
+  methods: {
+    showPostMenu() {
+      this.isShowPostMenu = !this.isShowPostMenu
+    }
+  }
 }
 </script>
 
@@ -173,18 +189,48 @@ export default {
         .uns_box
           float right
           font-size 12px
-          li[guest]
-            display none
-            .u-i
-              float left
-              text-align center
-              height 42px
-              line-height 42px
-              position relative
           ul
-            .menu
+            &.menu
               float left
               position relative
-
-
+            li
+              list-style-type none
+              &.u-i
+                float left
+                text-align center
+                height 42px
+                line-height 42px
+                position relative
+                a.i-link
+                  display block
+                  color #222
+                &#i_menu_login_reg
+                  padding 0 10px
+                  .i-link
+                    display inline-block
+                    padding 0 10px
+                    color #222
+                    span
+                      display block
+                      margin 0px
+                      padding 0px
+                  .s-line
+                    display inline-block
+                    border-left 1px solid #222
+                    height 12px
+                    margin-top 16px
+                    vertical-align top
+                &.b-post
+                  margin-right 0px
+                  a.i-link
+                    margin 0px
+                    padding 0px
+                    width 58px
+                    position relative
+                    z-index 100
+                    background url(../../assets/images/b-post.png) center center no-repeat
+                    height 48px
+                    border-radius 0 0 5px 5px
+                    color #fff!important
+                    font-size 14px
 </style>