fix contentTop

src/components/content/BContent.vue

@@ -40,6 +40,5 @@ export default {
 			.b-r
 				float right
 				width 540px
-				height 220px
-				background-color green
+				height auto
 </style>

src/components/contentTop/BContentTop.vue

@@ -2,9 +2,13 @@
 	<div class="top-list-wrapper">
 		<ul class="top-list" clearfix>
 			<BContentTopItem></BContentTopItem>
+			<BContentTopItem></BContentTopItem>
+			<BContentTopItem></BContentTopItem>
+			<BContentTopItem></BContentTopItem>
+			<BContentTopItem></BContentTopItem>
 		</ul>
-		<div style="display: none;">昨日</div>
-		<div style="display: none;">一周</div>
+		<div class="prev">一周</div>
+    <div class="next">昨日</div>
 	</div>
 </template>
 
@@ -25,4 +29,34 @@ export default {
 		margin-left 20px
 		.top-list
 			margin-right -20px
+		.prev, .next
+			display none
+			position absolute
+			background-color rgba(0,0,0,0.6)
+			background-image url(http://static.hdslb.com/images/v3images/icons2.png)
+			background-repeat no-repeat
+			width 20px
+			top 50%
+			margin-top -30px
+			cursor pointer
+			font-size 12px
+			color #fff
+			z-index 99
+			text-align center
+			line-height 16px
+			user-select none
+		.prev
+			left 0px
+			border-radius 0 2px 2px 0
+			background-position 6px -1211px
+			padding 13px 5px 13px 10px
+		.next
+			right 0px
+			border-radius 2px 0 0 2px
+			background-position 25px -1262px
+			padding 13px 10px 13px 5px
+		&:hover .prev, &:hover .next
+			display block
+		.prev:hover, .next:hover
+			background-color rgba(0,0,0,0.8)
 </style>

src/components/contentTop/BContentTopItem.vue

@@ -47,23 +47,22 @@ export default {
 				position absolute
 				width 100%
 				height 100%
+				opacity 0
+				visibility hidden
 				top 0px
 				left 0px
 				z-index 1
 				background rgba(0,0,0,0.7)
 				transition .3s all linear
 				border-radius 4px
-			.t
-				height 18px
-				line-height 18px
-				overflow hidden
-				color #fff
-				margin 0 5px
-				word-break break-all
-				word-wrap break-word
+				&:hover
+					visibility visible
+					opacity 1
+					transition none
 			.info
 				padding 10px 0 3px
 				height 18px
+				overflow hidden
 				position absolute
 				width 100%
 				bottom 0
@@ -75,10 +74,34 @@ export default {
 					color #99a2aa
 					margin 5px 5px 0
 					transition .2s all linear
+					opacity 0
 					height 16px
 					&.up
 						margin-top 10px
 						text-overflow ellipsis
 						overflow hidden
 						white-space nowrap
+				.t
+					height 18px
+					line-height 18px
+					overflow hidden
+					color #fff
+					margin 0 5px
+					word-break break-all
+					word-wrap break-word
+			&:hover .mask
+				visibility visible
+				opacity 1
+				transition none
+			&:hover .info 
+				padding 0
+				height 100%
+				background 0
+			&:hover .info p
+				opacity 1
+				transition .3s all linear
+			&:hover .t
+				margin-top 10px
+				height 36px
+
 </style>