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>