rowitem

src/components/contentRow/BContentRow.vue

@@ -22,4 +22,8 @@ export default {
 <style lang="stylus" scoped>
 	.b-section-body
 		zoom 1
+		.b-l
+			float left
+			width 700px
+			
 </style>

src/components/contentRow/BRowBody.vue

@@ -16,5 +16,12 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-	
+	.b-body
+		margin-right -20px
+		clear both
+		.v-list
+			width 100%
+			height 316px
+			overflow hidden
+			padding-top 20px
 </style>

src/components/contentRow/BRowItem.vue

@@ -1,19 +1,18 @@
 <template>
-	<li>
-		<div class="v">
+	<li class="item-li">
+		<div class="v m300">
 			<!-- 上部分 -->
 			<a class="preview cover-preview" href="">
-						<!-- item 左上角的奖牌 -->
+				<!-- item 左上角的奖牌 -->
 				<div class="medal"></div>
 				<div class="original"></div>
-
-				<div class="border">/div>
+				<!-- 边框 -->
+				<div class="border"></div>
 				<!-- 背景图片 -->
 				<img src="//i1.hdslb.com/bfs/archive/a5383ac22cb31e24a5b7be56c9105a6ee1034ee8.jpg@320w_200h.webp">
 				<!-- 内容预览 -->
 				<div class="back">
-					<div>
-								
+					<div>	
 					</div>
 				</div>
 				<!-- 预览进度控制 -->
@@ -25,7 +24,7 @@
 				</div>
 				<!-- 视频时间 -->
 				<div class="x">
-					<b class="x2"></b>
+					<b class="x2">12.00</b>
 				</div>
 			</a>
 					<!-- 下部分 -->
@@ -35,8 +34,7 @@
 					<span>
 						<i class="b-icon b-icon-v-play"></i>
 								38.6万
-						</span>
-					<span>
+						</span><span>
 						<i class="b-icon b-icon-v-dm"></i>
 								2594
 					</span>
@@ -53,5 +51,135 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-	
+	.item-li
+		float left
+		margin 0 20px 20px 0
+		.v
+			position relative
+			width 160px
+			height 148px
+			font-size 12px
+			overflow hidden
+			.x
+				visibility visible
+				opacity 1
+			.cover-preview
+				position relative
+				.back
+					position absolute
+					top 0px
+					left 0px
+					width 100%
+					height 100%
+					opacity 0
+					z-index 0
+				.fore
+					position absolute
+					top 0px
+					left 0px
+					width 100%
+					height 100%
+					opacity 0
+					z-index 0
+					transition opacity .2s
+					background-color rgba(0,0,0,0.2)
+					.bar
+						margin 5px
+						height 2px
+						background-color rgba(255,255,255,0.4)
+						border-radius 1px
+						opacity 0
+						transition opacity .2s .3s
+						div
+							height 2px
+							border-radius 1px
+				.x
+					position absolute
+					z-index 4
+					top 0px
+					left 0px
+					bottom 0px
+					right 0px
+					line-height 20px
+					width 100%
+					height 100%
+					background rgba(0,0,0,0.2)
+					overflow hidden
+					transition .2s
+					border-top-left-radius 4px
+					.x2
+						position absolute
+						right 0
+						bottom 0px
+						margin 0 5px 0 5px
+						font-weight normal
+						font-family tahoma,arial,'宋体',sans-serif
+						color #fff
+			.preview
+				width 160px
+				height 100px
+				display block
+				overflow hidden
+				text-align center
+				transition .2s all linear
+				box-sizing border-box
+				z-index 0
+				border-radius 4px
+				-webkit-mask-image -webkit-radial-gradient(circle, white, black)
+				.medal
+					position absolute
+					left 0
+					top 0px
+					width 40px
+					height 24px
+					background url(../../assets/images/icons.png) no-repeat
+					z-index 5
+					pointer-events: none
+					background-position -849px -148px
+					transition opacity .2x
+					opacity 1
+				img
+					width 100%
+					height 100%
+					display block
+					margin 0 auto
+					outline 0
+			.t
+				margin-bottom 8px
+				padding-top 8px
+				height 20px
+				line-height 20px
+				transition all .2s linear
+				color #222
+				word-wrap break-word
+				word-break break-all
+				overflow hidden
+				text-align left
+			.i
+				margin 0
+				font-size 12px
+				line-height 12px
+				span
+					display inline-block
+					vertical-align top
+					color #99a2aa
+					width 80px
+					white-space nowrap
+					overflow hidden
+					text-overflow ellipsis
+					line-height 12px
+					height 14px
+					.b-icon
+						display inline-block
+						width 12px
+						height 12px
+						vertical-align middle
+						background url(../../assets/images/icons.png) no-repeat
+						vertical-align top
+						margin-right 5px
+						&.b-icon-v-play
+							background-position -282px -90px
+						&.b-icon-v-dm
+							background-position -282px -218px
+
 </style>