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="imgBaseUrl + prizeVos.headImage"
        alt="用户头像"
      />
    </div>
    <span class="userName" style="flex:2;text-align:center">{{
      prizeVos.userId
    }}</span>
    <span style="flex:2;text-align:center">{{ prizeVos.growthRate }}%</span>
    <span class="item-flex-1" style="color:#fc5202"
      >￥{{ prizeVos.awardMoney }}</span
    >
  </div>
</template>

<script>
export default {
  name: "RankItem",
  props: {
    RankIndex: {
      type: Number
    },
    prizeVos: {
      type: Object
    }
  },
  data() {
    return {
      imgBaseUrl: ""
    };
  },
  created() {
    this.imgBaseUrl = process.env.VUE_APP_BASE_URL;
  }
};
</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>