no message

src/App.vue

@@ -2,20 +2,20 @@
   <div id="app">
     <TopContainer></TopContainer>
     <BHeader></BHeader>
-    <Content></Content>
+    <BContent></BContent>
   </div>
 </template>
 
 <script>
 import TopContainer from 'components/common/TopContainer.vue'
 import BHeader from 'components/common/BHeader.vue'
-import Content from 'components/content/Content.vue'
+import BContent from 'components/content/BContent.vue'
 export default {
   name: 'app',
   components: {
     TopContainer,
     BHeader,
-    Content
+    BContent
   }
 }
 </script>

src/components/banner/Banner.vue

@@ -16,11 +16,11 @@
 					</span>
 				</div>
 				<ul class="slide-bar">
-					<li bar="bar"></li>
-					<li bar="bar"></li>
-					<li bar="bar"></li>
-					<li bar="bar"></li>
-					<li bar="bar"></li>
+					<li class="on"></li>
+					<li></li>
+					<li></li>
+					<li></li>
+					<li></li>
 				</ul>
 			</div>
 		</div>
@@ -56,7 +56,7 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped="">
+<style lang="stylus" scoped>
 	.banner
 		height 220px
 		width 440px
@@ -124,4 +124,6 @@ export default {
 						height 18px
 						margin 2px 2px
 						background url(../../assets/images/icons.png) -855px -790px no-repeat
+						&.on
+							background-position -855px -727px
 </style>

src/components/content/Content.vue → src/components/content/BContent.vue

@@ -6,7 +6,7 @@
 					<Banner></Banner>
 				</div>
 				<div class="b-r">
-					
+					<BContentTop></BContentTop>
 				</div>
 			</div>
 		</div>
@@ -16,14 +16,16 @@
 
 <script>
 import Banner from 'components/banner/Banner'
+import BContentTop from 'components/contentTop/BContentTop'
 export default {
 	components: {
-		Banner
+		Banner,
+		BContentTop
 	}
 }
 </script>
 
-<style lang="stylus" scoped="">
+<style lang="stylus" scoped>
 	.content
 		zoom 1
 		.container-top

src/components/contentTop/BContentTop.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="top-list-wrapper">
+		<ul class="top-list" clearfix>
+			<BContentTopItem></BContentTopItem>
+		</ul>
+		<div style="display: none;">昨日</div>
+		<div style="display: none;">一周</div>
+	</div>
+</template>
+
+<script>
+import BContentTopItem from 'components/contentTop/BContentTopItem'
+export default {
+	components: {
+		BContentTopItem
+	}
+}
+</script>
+
+<style lang="stylus" scoped>
+	.top-list-wrapper
+		position relative
+		height 240px
+		overflow hidden
+		margin-left 20px
+</style>

src/components/contentTop/BContentTopItem.vue

@@ -0,0 +1,84 @@
+<template>
+	<li class="top-item">
+		<div class="v-item">
+			<a href="/video/av8815046/" target="_blank" title="【阴阳师/狗博】射杀恋人之日【ALeo维】">
+				<div class="preview">
+					<img src="//i0.hdslb.com/bfs/archive/dcf689fdc2e4560a08c272471bfb91e2a0656f64.jpg@320w_200h.webp" alt="【阴阳师/狗博】射杀恋人之日【ALeo维】">
+				</div>
+				<div class="mask">
+				</div>
+				<div class="info">
+					<div class="t">【阴阳师/狗博】射杀恋人之日【ALeo维】</div>
+					<span class="up">up主：要小心有毒的橙汁</span>
+					<span class="play">播放:46022</span>
+				</div>
+			</a>
+		</div>
+	</li>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus" scoped>
+	.top-item
+		float left
+		width 180px
+		margin-bottom 20px
+		.v-item
+			width 160px
+			height 100px
+			position relative
+			.preview
+				height 100px
+				background 0
+				overflow hidden
+				border-radius 4px
+			img
+				height 100%
+				margin 0 auto
+				display block
+				width 160px
+				opacity 1
+			.mask
+				position absolute
+				width 100%
+				height 100%
+				top 0px
+				left 0px
+				z-index 1
+				background rgba(0,0,0,0.7)
+				transition .3s all linear
+				border-radius 4px
+			.info
+				padding 10px 0 3px
+				height 18px
+				position absolute
+				width 100%
+				bottom 0
+				left 0px
+				z-index 1
+				background linear-gradient(transparent,rgba(0,0,0,0.1) 20%,rgba(0,0,0,0.2) 35%,rgba(0,0,0,0.6) 65%,rgba(0,0,0,0.9))
+				border-radius 0 0 4px 4px
+				.t
+					height 18px
+					line-height 18px
+					overflow hidden
+					color #fff
+					color #fff
+					margin 0 5px
+					word-break break-all
+					word-wrap break-word
+				p
+					color #99a2aa
+					margin 5px 5px 0
+					transition .2s all linear
+					.up
+						margin-top 10px
+						text-overflow ellipsis
+						overflow hidden
+						white-space nowrap
+</style>