show image for loding

src/components/live/BLiveRank.vue

@@ -16,10 +16,14 @@
 		<div class="b-body">
 			<div class="r-list-body">
 				<div class="r-list-wrapper">
+					<ul class="r-list-live" style="display: none;">
+						<BLiveRankItem v-for="(item, index ) in ranklist" :rank="item" :index="index"></BLiveRankItem>
+					</ul>
 					<ul class="r-list-live">
-						<BLiveRankItem v-for="item in ranklist" :rank="item"></BLiveRankItem>
+						<li class="no-data">
+							<span>没有数据</span>
+						</li>
 					</ul>
-					<ul class="r-list-live"></ul>
 					<ul class="r-list-live">
 						<div class="mini-preview-wrapper">
 							<div class="mini-preview-list-wrapper">
@@ -117,13 +121,27 @@ export default {
 							border-top 0
 							border-left-color transparent
 							border-right-color transparent
+			&:after
+				content ''
+				display block
+				visibility hidden
+				font-size 0
+				height 0
+				clear both
 		.b-body
 			clear both
 			.r-list-body
 				zoom 1
 				overflow hidden
+				&:after
+					content ''
+					display block
+					visibility hidden
+					height 0
+					font-size 0
+					clear both
 				.r-list-wrapper
-					margin-left 0%
+					margin-left -100%
 					width 200%
 					&:after
 						content ''
@@ -137,5 +155,34 @@ export default {
 						width 50%
 						padding-top 20px
 						float left
+						.no-data
+							text-align center!important
+							width 100%!importang
+							height 100%!important
+							padding 0!important
+							margin 0!important
+							line-height 100px!important
+							color #99a2aa!important
+							float none!important
+							span
+								display inline-block
+								vertical-align middle
+								height 20px
+								line-height 20px
+							&:before
+								content ''
+								display inline-block
+								vertical-align middle
+								width 20px
+								height 20px
+								background url(../../assets/images/state.png) no-repeat center -598px
+								margin-right 5px	
+			&:after
+				content ''
+				display block
+				visibility hidden
+				font-size 0
+				height 0
+				clear both
 
 </style>

src/components/live/BLiveRankItem.vue

@@ -1,16 +1,16 @@
 <template>
 	<li class="live-item">
 		<div class="r-item r-ranking">
-			<div class="lv-num n1">1</div>
-			<a href="" class="preview" target="_blank" :title="渗透之C君">
-				<img :src="rank.face" alt="渗透之C君">
+			<div class="lv-num" :class="{n: index === 0 || index === 1 || index === 2}">{{index + 1}}</div>
+			<a href="" class="preview" target="_blank" :title="rank.uname">
+				<img :src="rank.face" :alt="rank.uname">
 			</a>
-			<a href="" target="_blank" title="渗透之C君">
+			<a href="" target="_blank" :title="rank.uname">
 				<div class="r-i">
 					<p class="r-i-t">
 						<span class="u-name">{{rank.uname}}</span>
 						<span class="u-online">
-							<i class="b-icon b-icon-live-online"></i><em>{{rank.online / 10000}}万</em>
+							<i class="b-icon b-icon-live-online"></i><em>{{online}}万</em>
 						</span>
 						<div class="r-i-st">
 							{{rank.title}}
@@ -27,6 +27,14 @@ export default {
 	props: {
 		rank: {
 			type: Object
+		},
+		index: {
+
+		}
+	},
+	methods: {
+		online() {
+			return this.rank.online / 10000
 		}
 	}
 }
@@ -55,7 +63,7 @@ export default {
 				z-index 20
 				padding 0 3px 0 3px
 				font-weight bolder
-				&.n1
+				&.n
 					background-color #f25d8e
 			.preview
 				display block