排行榜样式

<div style="padding: 10px;">
	<el-row :gutter="20" class="section-top">
		<el-col :xs="24" :sm="12" :lg="6" class="">
			<el-card class="panel-card" :body-style="{padding: '10px'}">
				<div slot="header" class="clearfix">拉新裂变<el-link type="info" style="float: right" @click="linkTo('/member/referrer')">明细 >></el-link></div>
				<div class="list"
					v-for="(item, index) in newUserList" 
					:key="index" 
					:class="{last : index + 1 == newUserList.length}">
					<span class="index" :class="'index'+(index+1)">{{index+1}}</span>
					<!-- 没有统计时占空位 -->
					<div class="label-empty" v-if="JSON.stringify(item) == '{}'"> -</div>
					<div class="label" v-else>
						<div class="img"><img :src="item.HeadImgURL" class="img" /></div>
						<div class="name">
							<h4>{{item.CustName}}</h4>
							<h5>{{item.Mobile}}</h5>
						</div>
					</div>
					<div class="value" v-if="JSON.stringify(item) != '{}'" >{{item.Total || 0}}人</div>
				</div>
			</el-card>
		</el-col>
	<el-row>
<div>
<style>
.section-top {
	padding: 20px;
}

.list {
	padding: 5px 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #ddd;
	&.last {
		border-bottom: none;
	}
	.index {
		color: #fff;
		text-align: center;
		width: 20px;
		height: 20px;
		line-height: 20px;
		background: #9195A3;
		border-radius: 4px;
		&.index1 {
			background: #FE2D46;
		}
		&.index2 {
			background: #F60;
		}
		&.index3 {
			background: #FAA90E;
		}
	}
	.label {
		font-size: 13px;
		flex: 2;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		.img {
			margin: 0 5px;
			img {
				width: 35px;
				height: 35px;
				border-radius: 50%;
			}
		}
		.name {
			flex: 1;
		}
		h4,h5 {
			margin: 0;
			font-weight: normal;
		}
	}
	.value {
		flex: 1;
		text-align: right;
	}
	.label-empty {
		flex: 1;
		height: 35px;
		line-height: 35px;
		font-size: 13px;
		text-align: center;
	}
}
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
}
.clearfix:after {
	clear: both;
}
</style>