shoot-miniprograms/src/components/Avatar.vue

<script setup>
defineProps({
  src: {
    type: String,
    default: "",
  },
  onClick: {
    type: Function,
    default: () => {},
  },
  frame: {
    type: Boolean,
    default: false,
  },
  rank: {
    type: Number,
    default: 0,
  },
  size: {
    type: Number,
    default: 45,
  },
});
</script>

<template>
  <view class="avatar" @click="onClick">
    <image
      v-if="frame"
      src="../static/avatar-frame.png"
      mode="widthFix"
      class="avatar-frame"
    />
    <image
      v-if="rank === 1"
      src="../static/champ1.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <image
      v-if="rank === 2"
      src="../static/champ2.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <image
      v-if="rank === 3"
      src="../static/champ3.png"
      mode="widthFix"
      class="avatar-rank"
    />
    <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
    <image
      :src="src"
      mode="widthFix"
      :style="{ width: size + 'px', height: size + 'px' }"
    />
  </view>
</template>

<style scoped>
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-frame {
  position: absolute;
  width: 55px;
  height: 55px;
}
.avatar-rank,
.rank-view {
  position: absolute;
  width: 20px;
  height: 15px;
  top: -6px;
  right: -4px;
}
.rank-view {
  background-color: #6d6d6d;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.avatar > image:last-child {
  border-radius: 50%;
  border: 1px solid #fff;
}
</style>