css实现排行榜样式（vue组件）

先看效果图：

<template>
  <div class="lawyer-refund-wrap">
    <div class="content">
      <div
        v-for="(item, index) in dataList" :key="index"
        :style="{'width': `calc(100% - ${(index + 1) * 10}px)`}"
        class="card-item"
      >
        <div class="left">
          <div class="number">{{ index + 1 }}div>
          <div class="team-name">{{ item.name }}div>
        div>
        <div class="right">
          <div class="case-num">结案数量：{{ item.num }}件div>
          <div class="refund-money">回款金额：{{ item.amount }}万元div>
        div>
      div>
    div>
  div>
template>

<script>
export default {
  data () {
    return {
      dataList: [
        {
          'name': '徐春雷团队',
          'num': 900,
          'amount': 900
        },
        {
          'name': '张三团队',
          'num': 800,
          'amount': 800
        },
        {
          'name': '李四团队',
          'num': 700,
          'amount': 700
        },
        {
          'name': '王五团队',
          'num': 600,
          'amount': 600
        },
        {
          'name': '徐春雷团队',
          'num': 500,
          'amount': 500
        },
        {
          'name': '徐春雷团队',
          'num': 900,
          'amount': 900
        },
        {
          'name': '张三团队',
          'num': 800,
          'amount': 800
        },
        {
          'name': '李四团队',
          'num': 700,
          'amount': 700
        },
        {
          'name': '王五团队',
          'num': 600,
          'amount': 600
        },
        {
          'name': '徐春雷团队',
          'num': 500,
          'amount': 500
        }
      ]
    }
  }
}
script>

<style scoped lang="scss">
  .lawyer-refund-wrap {
    background: #fff;
    border: 1px solid #ebeaf0;
    border-radius: 4px;
    .content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 15px 50px;
      .card-item {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        background-color: #e7ebf1;
        padding: 10px 50px 10px 20px;
        border-radius: 4px;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          border-bottom: 40px solid white;
          border-left: 10px solid transparent;
        }
        &:nth-child(1) {
          .number {
            color: red;
          }
        }
        &:nth-child(2) {
          .number {
            color: #e5794a;
          }
        }
        &:nth-child(3) {
          .number {
            color: #2893e0;
          }
        }
        .left, .right {
          display: flex;
        }
        .number {
          margin-right: 10px;
        }
        .team-name {
          margin-right: 100px;
        }
        .case-num {
          margin-right: 20px;
        }
        .refund-money {}
      }
    }
  }
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142