inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <div class="rank">
3     <h4 class="title">{{ title }}</h4>
4     <ul class="list">
5       <li :key="index" v-for="(item, index) in list">
6         <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
7         <span>{{ item.name }}</span>
8         <span>{{ item.total }}</span>
9       </li>
10     </ul>
11   </div>
12 </template>
13
14 <script>
15 export default {
16   name: 'RankList',
17   // ['title', 'list']
18   props: {
19     title: {
20       type: String,
21       default: ''
22     },
23     list: {
24       type: Array,
25       default: null
26     }
27   }
28 }
29 </script>
30
31 <style lang="less" scoped>
32
33   .rank {
34     padding: 0 32px 32px 72px;
35
36     .list {
37       margin: 25px 0 0;
38       padding: 0;
39       list-style: none;
40
41       li {
42         margin-top: 16px;
43
44         span {
45           color: rgba(0, 0, 0, .65);
46           font-size: 14px;
47           line-height: 22px;
48
49           &:first-child {
50             background-color: #f5f5f5;
51             border-radius: 20px;
52             display: inline-block;
53             font-size: 12px;
54             font-weight: 600;
55             margin-right: 24px;
56             height: 20px;
57             line-height: 20px;
58             width: 20px;
59             text-align: center;
60           }
61           &.active {
62             background-color: #314659;
63             color: #fff;
64           }
65           &:last-child {
66             float: right;
67           }
68         }
69       }
70     }
71   }
72
73   .mobile .rank {
74     padding: 0 32px 32px 32px;
75   }
76
77 </style>