dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterRightsRankGrade.vue

<template>
	<div class="userCenterRightsRankGrade">
		<div v-for="(item,index) in gradeList" :style="{width:`${100 / gradeList.length}%`}" :class="[index==grade?'active':index+1==grade?'prep':'',index%2==1?'top':'bottom']">
			<div class="colorBar"></div>
		</div>
	</div>
</template>

<script>
export default {
	name: "userCenterRightsRankGrade",
	props:{
		grade:{
			type:[Number, String],
			default: 0,
		},
		gradeList:{
			type:Array,
			default:() => {
				return [
					{
						icon:'api/file/pub/def/user.png',
						name:'白银用户',
					},
					{
						icon:'api/file/pub/def/user.png',
						name:'黄金用户',
					},
					{
						icon:'api/file/pub/def/user.png',
						name:'白金用户',
					},
					{
						icon:'api/file/pub/def/user.png',
						name:'钻石用户',
					},
				];
			}
		}
	},
	methods:{

	}
}
</script>

<style scoped lang="less">
.userCenterRightsRankGrade{
	width: 100%;
	box-sizing: border-box;
	height: 170px;
	padding: 0 95px;
	>div{
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}

	.colorBar{
		height: 5px;
		background-color: #F00;
		width: 90%;
	}

	.top{
		.colorBar{
			transform: rotate(-10deg);
		}
	}
	.bottom{
		.colorBar{
			transform: rotate(10deg);
		}
	}
}
</style>