完成我的成长脚印UI

src/components/UserHeader.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import Avatar from "@/components/Avatar.vue";
 const props = defineProps({
   showRank: {
     type: Boolean,
@@ -8,11 +9,11 @@ const props = defineProps({
   user: {
     type: Object,
     default: () => ({
-      nickName:'',
-      lvl:0,
-      points:0,
-      rankLvl:0,
-      lvlPoints:0,
+      nickName: "",
+      lvl: 0,
+      points: 0,
+      rankLvl: 0,
+      lvlPoints: 0,
     }),
   },
 });
@@ -33,10 +34,7 @@ const toUserPage = () => {
 
 <template>
   <view class="container" :style="{ width: containerWidth }">
-    <view class="avatar" @click="toUserPage">
-      <image src="../static/avatar-frame.png" mode="widthFix" />
-      <image src="../static/avatar.png" mode="widthFix" />
-    </view>
+    <Avatar frame="true" src="../static/avatar.png" :onClick="toUserPage" />
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>
@@ -72,25 +70,6 @@ const toUserPage = () => {
   color: #fff;
 }
 
-.avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.avatar > image:first-child {
-  position: absolute;
-  width: 55px;
-  height: 55px;
-}
-
-.avatar > image {
-  width: 45px;
-  height: 45px;
-  border-radius: 50%;
-}
-
 .user-details {
   display: flex;
   flex-direction: column;