complete of row rank

src/components/contentRow/BContentRow.vue

@@ -36,7 +36,7 @@ export default {
 		])
 	},
 	mounted() {
-		// console.log(this.categoryId)
+		console.log(this.categoryId)
 		this.$store.dispatch('getContentRank', this.categoryId)
 	},
 	components: {

src/components/contentRow/BRowRankBody.vue

@@ -1,47 +1,48 @@
 <template>
 	<div class="b-body">
 		<div class="r-list-body">
-			<div class="r-list-wrapper">
-				<ul class="rlist">
-					<li :class="{on: item === 1}" data-gk="524601" data-sc="31945" data-pl="4" data-dm="7122" data-up="凉风有性胖次君" data-subtitle="" data-lm="综合" data-tg="2017-03-17 20:28" data-txt="x" data-yb="11063" v-for="item in rank.hot.list">
-						<i class="number n">
-							1
+			<div class="r-list-wrapper" ref="listWrapper">
+				<ul class="rlist" v-if="rank.hot" @click="one">
+					<li :class="{on: index === 0}" v-for="(item, index) in rank.hot.list">
+						<i class="number" :class="{n: index === 0 || index === 1 || index === 2}">
+							{{index + 1}}
 						</i>
 						<div class="preview">
-							<a href="/video/av9211860/" title="tttttt" target="_blank">
-								<img data-img="" src="//i1.hdslb.com/bfs/archive/96c58de8d469364c105d15357d03ecedd1c207bd.jpg@320w_200h.webp" loaded="loaded" :alt="item.title" style="opacity: 1;">
+						<!-- :alt="item.title" -->
+							<a href="/video/av9211860/" :title="item.title" target="_blank">
+								<img data-img="" :src="item.pic" loaded="loaded"  style="opacity: 1;">
 								</a>
 						</div>
-						<a class="rl-info" href="/video/av9211860/" title="【Lex】震惊！这部讲述打飞机的漫画，竟被称为神作 播放:736312 11:30" target="_blank">	
-							<div class="title t">【Lex】震惊！这部讲述打飞机的漫画，竟被称为神作
+						<a class="rl-info" href="/video/av9211860/" :title="item.title + item.pts" target="_blank">	
+							<div class="title t">{{item.title}}
 							</div>
 							<div class="i">
-								<b class="pts" title="综合评分: 85.2万">综合评分：85.2万
+								<b class="pts" :title="item.pts">综合评分：{{item.pts}}
 								</b>
-							</div>{{xx}}
+							</div>
+						</a>
+					</li>
+				</ul>
+				<ul class="rlist" v-if="rank.hot_original" @click="two">
+					<li :class="{on: index === 0}" v-for="(item, index) in rank.hot.list">
+						<i class="number" :class="{n: index === 0 || index === 1 || index === 2}">
+							{{index + 1}}
+						</i>
+						<div class="preview">
+						<!-- :alt="item.title" -->
+							<a href="/video/av9211860/" :title="item.title" target="_blank">
+								<img data-img="" :src="item.pic" loaded="loaded"  style="opacity: 1;">
+								</a>
+						</div>
+						<a class="rl-info" href="/video/av9211860/" :title="item.title + item.pts" target="_blank">	
+							<div class="title t">{{item.title}}
+							</div>
+							<div class="i">
+								<b class="pts" :title="item.pts">综合评分：{{item.pts}}
+								</b>
+							</div>
 						</a>
 					</li>
-					<li data-gk="524601" data-sc="31945" data-pl="4" data-dm="7122" data-up="凉风有性胖次君" data-subtitle="" data-lm="综合" data-tg="2017-03-17 20:28" data-txt="素材/全体四月新番 番剧名已经标在视频右下角
-微博@凉风有性胖次君 http://weibo.com/10112015
-动画游戏女装群：14483912（已满） 550767352（新群）" data-yb="11063" class="off"><i class="number n2">2</i><div class="preview"><a href="/video/av9220925/" title="卧槽！还是有超级福利番的嘛！一口气看完四月新番 播放:524601 18: 0" target="_blank"><img data-img="" src="//i2.hdslb.com/bfs/archive/05b94975d45b655d0999da6a075509f468a9871b.jpg@320w_200h.webp" loaded="loaded" alt="卧槽！还是有超级福利番的嘛！一口气看完四月新番" style="opacity: 1;"></a></div><a class="rl-info" href="/video/av9220925/" title="卧槽！还是有超级福利番的嘛！一口气看完四月新番 播放:524601 18: 0" target="_blank"><div class="title t">卧槽！还是有超级福利番的嘛！一口气看完四月新番</div><div class="i"><b class="pts" title="综合评分: 72.4万">综合评分：72.4万</b></div></a></li>
-<li data-gk="475338" data-sc="24731" data-pl="24" data-dm="31259" data-up="長門有C" data-subtitle="" data-lm="综合" data-tg="2017-03-17 19:06" data-txt="2017年春季刊(2017年四月新番介绍) | 本期原档及BGM包稍后放出 | 期刊列表mylist20949 | 说来已是第24期视频了，感谢各位六年间的支持~今年也开始随缘直播了，有兴趣的可以关注下(･∀･)" data-yb="22379" class="off"><i class="number n3">3</i><div class="preview"><a href="/video/av9218963/" title="[2017春]新番介绍 播放:475338 89:44" target="_blank"><img data-img="" src="//i1.hdslb.com/bfs/archive/f4ded754559240fc2865068c56e425161458e703.jpg@320w_200h.webp" loaded="loaded" alt="[2017春]新番介绍" style="opacity: 1;"></a></div><a class="rl-info" href="/video/av9218963/" title="[2017春]新番介绍 播放:475338 89:44" target="_blank"><div class="title t">[2017春]新番介绍</div><div class="i"><b class="pts" title="综合评分: 62.4万">综合评分：62.4万</b></div></a></li>
-<li data-gk="245010" data-sc="7879" data-pl="0" data-dm="3571" data-up="いこじで" data-subtitle="" data-lm="综合" data-tg="2017-03-17 18:17" data-txt="源视频:https://www.youtube.com/watch?v=9GEDHNNMF2U&amp;amp;amp;amp;t=33s
-源作者:ViniiTube （视频开头便是作者名称）
-素材为:青之驱魔师  海贼王  寄生兽  龙珠  东京食尸鬼  路人超能100  新世纪福音战士  银魂  火影忍者  进击的巨人 
-一觉睡醒发现视频被撤回了
-于是吧源视频地址找了几遍
-终于找到了  本视频为TouTube转载
-" data-yb="2002" class="off"><i class="number">4</i><div class="preview"><a href="/video/av9218128/" title="十大动漫怒火时刻 播放:245010 14:29" target="_blank"><img data-img="" src="//i0.hdslb.com/bfs/archive/ece21164f9c9b4fc33734a82f9aba48588b1b5e0.jpg@320w_200h.webp" loaded="loaded" alt="十大动漫怒火时刻" style="opacity: 1;"></a></div><a class="rl-info" href="/video/av9218128/" title="十大动漫怒火时刻 播放:245010 14:29" target="_blank"><div class="title t">十大动漫怒火时刻</div><div class="i"><b class="pts" title="综合评分: 29.5万">综合评分：29.5万</b></div></a></li>
-<li data-gk="160897" data-sc="3815" data-pl="2" data-dm="1229" data-up="文曰小强" data-subtitle="" data-lm="综合" data-tg="2017-03-17 17:13" data-txt="精分少女开魔眼，
-痴汉少年求跪舔。
-杀人跳楼怪事多，
-苦逼Boss没露脸！
-空之境界 X Fate/Grand Order首次联动
-" data-yb="1552" class="off"><i class="number">5</i><div class="preview"><a href="/video/av9216390/" title="【文曰小强】7分钟看完《空之境界》TV版1~13集 播放:160897 7:24" target="_blank"><img data-img="" src="//i2.hdslb.com/bfs/archive/763746a0cce439369fe8bc2819d18abcd6cfb6a3.jpg@320w_200h.webp" loaded="loaded" alt="【文曰小强】7分钟看完《空之境界》TV版1~13集" style="opacity: 1;"></a></div><a class="rl-info" href="/video/av9216390/" title="【文曰小强】7分钟看完《空之境界》TV版1~13集 播放:160897 7:24" target="_blank"><div class="title t">【文曰小强】7分钟看完《空之境界》TV版1~13集</div><div class="i"><b class="pts" title="综合评分: 18.2万">综合评分：18.2万</b></div></a></li><li data-gk="149063" data-sc="4028" data-pl="0" data-dm="2055" data-up="至尊帝王" data-subtitle="" data-lm="综合" data-tg="2017-03-17 08:10" data-txt="youtube 火影疾风传10场燃爆的战斗盘点，一起来回顾下吧！
-by:ViniiTube
-Top 10 Naruto Shippuden Fights
-https://www.youtube.com/watch?v=n-9X9ZGlX2o&amp;amp;t=369s" data-yb="430" class="off"><i class="number">6</i><div class="preview"><a href="/video/av9208644/" title="【TOP10】火影十大燃爆的战斗盘点 播放:149063 17:34" target="_blank"><img data-img="" src="//i2.hdslb.com/bfs/archive/e165f77a89c502a92e432bf46e76681b6019a775.jpg@320w_200h.webp" loaded="loaded" alt="【TOP10】火影十大燃爆的战斗盘点" style="opacity: 1;"></a></div><a class="rl-info" href="/video/av9208644/" title="【TOP10】火影十大燃爆的战斗盘点 播放:149063 17:34" target="_blank"><div class="title t">【TOP10】火影十大燃爆的战斗盘点</div><div class="i"><b class="pts" title="综合评分: 17.6万">综合评分：17.6万</b></div></a></li><li data-gk="132005" data-sc="2331" data-pl="0" data-dm="462" data-up="十六夜樱神" data-subtitle="" data-lm="综合" data-tg="2017-03-17 02:23" data-txt="转载自https://youtu.be/0GtIiF2NA88 出自琉璃神社
-如有侵权必删" data-yb="393" class="off"><i class="number">7</i><div class="preview"><a href="/video/av9207504/" title="盤點動漫中的啪啪啪鏡頭(｡･ω･｡)ﾉ 播放:132005 1:32" target="_blank"><img data-img="" src="//i1.hdslb.com/bfs/archive/89c43bafb42156f1ce297da7139f91359752c1a3.jpg@320w_200h.webp" loaded="loaded" alt="盤點動漫中的啪啪啪鏡頭(｡･ω･｡)ﾉ" style="opacity: 1;"></a></div><a class="rl-info" href="/video/av9207504/" title="盤點動漫中的啪啪啪鏡頭(｡･ω･｡)ﾉ 播放:132005 1:32" target="_blank"><div class="title t">盤點動漫中的啪啪啪鏡頭(｡･ω･｡)ﾉ</div><div class="i"><b class="pts" title="综合评分: 14.6万">综合评分：14.6万</b></div></a></li>
 				</ul>
 			</div>
 		</div>
@@ -60,9 +61,17 @@ export default {
 	},
 	computed: {
 		xx() {
-			console.log(JSON.stringify(this.rank))
+			console.log(JSON.stringify(this.rank.hot.list))
 			return 'xx'
 		}
+	},
+	methods: {
+		one() {
+			this.$refs.listWrapper.style.marginLeft = '0%'
+		},
+		two() {
+			this.$refs.listWrapper.style.marginLeft = '-100%'
+		}
 	}
 }
 </script>
@@ -79,12 +88,15 @@ export default {
 			.r-list-wrapper
 				width 200%
 				margin-left 0%
+				overflow hidden
 				.rlist
 					padding-bottom 15px
 					padding-top 20px
 					min-height 278px
+					max-height 278px
 					width 50%
 					float left
+					overflow hidden
 					li
 						overflow hidden
 						margin-top 20px