rankItem.vue

<template>
  <div class="rank-item">
    <span :class="['item-flex-1', 'index', `color-rank-${RankIndex}`]">
      {{ RankIndex > 9 ? RankIndex : "0" + RankIndex }}
    </span>
    <div style="flex:1">
      <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
    </div>
    <span class="userName" style="flex:2;text-align:center">135****4857</span>
    <span style="flex:2;text-align:center">25%</span>
    <span class="item-flex-1" style="color:#fc5202">￥125</span>
  </div>
</template>

<script>
export default {
  name: "RankItem",
  props: {
    RankIndex: {
      type: Number
    }
  }
};
</script>

<style lang="scss" scoped>
.rank-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  font-family: PingFang-SC-Medium;
  font-size: 14px;
  .index {
    font-family: PingFang-SC-Bold;
    color: #999999;
  }
  .color-rank-1 {
    color: #fe0000;
  }
  .color-rank-2 {
    color: #fcb202;
  }
  .color-rank-3 {
    color: #00a0e9;
  }
}
.item-flex-1 {
  flex: 1;
  text-align: center;
}
.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
</style>