contentrow 分层

src/components/content/BContent.vue

@@ -19,7 +19,7 @@
 			<BLive></BLive>
 		</div>
 		<!-- 各分类具体内容 -->
-		<div class="container-row">
+		<div class="container-row"  v-for="x in list">
 			<BContentRow></BContentRow>
 		</div>
 	</div>
@@ -32,6 +32,11 @@ import BPromote from 'components/promote/BPromote'
 import BLive from 'components/live/BLive'
 import BContentRow from 'components/contentRow/BContentRow'
 export default {
+	data() {
+		return {
+			list: [0,1,1]
+		}
+	},
 	components: {
 		Banner,
 		BContentTop,

src/components/contentRow/BContentRow.vue

@@ -2,6 +2,7 @@
 	<div class="b-section-body">
 		<div class="b-l" style="width: 700px;">
 			<BRowHead></BRowHead>
+			<BRowBody></BRowBody>
 		</div>
 		<div class="b-r"></div>
 	</div>
@@ -9,9 +10,16 @@
 
 <script>
 import BRowHead from 'components/contentRow/BRowHead'
+import BRowBody from 'components/contentRow/BRowBody'
 export default {
 	components: {
-		BRowHead
+		BRowHead,
+		BRowBody
 	}
 }
-</script>
+</script>
+
+<style lang="stylus" scoped>
+	.b-section-body
+		zoom 1
+</style>

src/components/contentRow/BRowBody.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="b-body">
+		<ul class="vidbox v-list">
+			<BRowItem></BRowItem>
+		</ul>
+	</div>
+</template>
+
+<script>
+import BRowItem from 'components/contentRow/BRowItem'
+export default {
+	components: {
+		BRowItem
+	}
+}
+</script>
+
+<style lang="stylus" scoped>
+	
+</style>

src/components/contentRow/BRowHead.vue

@@ -16,8 +16,7 @@
 		</ul>
 		<div class="b-link-more">
 			<a href="/video/music.html">
-				更多
-				<i class="b-icon b-icon-arrow-r"></i>
+				更多<i class="b-icon b-icon-arrow-r"></i>
 			</a>
 		</div>
 		<div class="read-push" style="display: block;">
@@ -125,12 +124,13 @@ export default {
 				color #555
 				border-radius 4px
 				.b-icon-arrow-r
+					display inline-block
+					vertical-align middle
 					background url(../../assets/images/icons.png) no-repeat
-					background-position  -478px -218px
 					width 6px
 					height 12px
 					margin -2px 0 0 5px
-					vertical-align middle
+					background-position -478px -218px
 		.read-push
 			float right
 			cursor pointer
@@ -173,4 +173,21 @@ export default {
 				width 14px
 				height 14px
 				margin-top 1px
+			i
+				font-style normal
+				font-weight normal
+			.pmt-link
+				vertical-align top
+				height auto
+				display inline-block
+				padding 0 0 0 8px
+				border 0
+				a
+					max-width 192px
+					overflow hidden
+					white-space nowrap
+					text-overflow ellipsis
+					display block
+					line-height 16px
+					color #6d757a
 </style>

src/components/contentRow/BRowItem.vue

@@ -0,0 +1,57 @@
+<template>
+	<li>
+		<div class="v">
+			<!-- 上部分 -->
+			<a class="preview cover-preview" href="">
+						<!-- item 左上角的奖牌 -->
+				<div class="medal"></div>
+				<div class="original"></div>
+
+				<div class="border">/div>
+				<!-- 背景图片 -->
+				<img src="//i1.hdslb.com/bfs/archive/a5383ac22cb31e24a5b7be56c9105a6ee1034ee8.jpg@320w_200h.webp">
+				<!-- 内容预览 -->
+				<div class="back">
+					<div>
+								
+					</div>
+				</div>
+				<!-- 预览进度控制 -->
+				<div class="fore">
+					<span data-loading="false"></span> 
+					<div class="bar">
+						<div></div>
+					</div>
+				</div>
+				<!-- 视频时间 -->
+				<div class="x">
+					<b class="x2"></b>
+				</div>
+			</a>
+					<!-- 下部分 -->
+			<a href="">
+				<div class="t">【毁童年】震惊！哆啦A梦居然做过这种事！</div>
+				<div class="i">
+					<span>
+						<i class="b-icon b-icon-v-play"></i>
+								38.6万
+						</span>
+					<span>
+						<i class="b-icon b-icon-v-dm"></i>
+								2594
+					</span>
+				</div>
+			</a>
+		</div>
+	</li>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus" scoped>
+	
+</style>

src/components/rank/BRowRank.vue → src/components/contentRow/BRowRank.vue

@@ -3,8 +3,13 @@
 		
 	</div>
 </template>
+
 <script>
 export default {
-	
+
 }
-</script>
+</script>
+
+<style lang="stylus" scoped>
+	
+</style>

src/components/rank/BRankItem.vue → src/components/contentRow/BRowRankItem.vue

@@ -3,8 +3,13 @@
 		
 	</div>
 </template>
+
 <script>
 export default {
-	
+
 }
-</script>
+</script>
+
+<style lang="stylus" scoped>
+	
+</style>

src/components/rank/BRowItem.vue

@@ -1,10 +0,0 @@
-<template>
-	<div>
-		
-	</div>
-</template>
-<script>
-export default {
-	
-}
-</script>

static/css/reset.css

@@ -59,8 +59,8 @@ li {
     list-style: none;
 }
 
-::-webkit-scrollbar {
-    width: 5px;
+/*::-webkit-scrollbar {
+    width: 16px;
     height: 5px;
 }
 
@@ -79,7 +79,7 @@ li {
     width: 5px;
     background-color: rgba(125, 125, 125, 0.7);
     -webkit-border-radius: 6px;
-}
+}*/
 
 html, body {
     width: 100%;