12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <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>
|