完成我的成长脚印UI

src/components/Avatar.vue

@@ -0,0 +1,87 @@
+<script setup>
+defineProps({
+  src: {
+    type: String,
+    default: "",
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  frame: {
+    type: Boolean,
+    default: false,
+  },
+  rank: {
+    type: Number,
+    default: 0,
+  },
+});
+</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" />
+  </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 {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  border: 1px solid #fff;
+}
+</style>