添加页面代码

src/components/Avatar.vue

@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    default: "",
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  size: {
+    type: Number,
+    default: 45,
+  },
+  borderColor: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <view class="avatar" @click="onClick">
+    <image
+      :src="src || '../static/user-icon.png'"
+      mode="widthFix"
+      :style="{
+        width: size + 'px',
+        height: size + 'px',
+        minHeight: size + 'px',
+        borderColor: borderColor || '#fff',
+      }"
+      class="avatar-image"
+    />
+  </view>
+</template>
+
+<style scoped>
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.avatar-image {
+  border-radius: 50%;
+  border: 1px solid #fff;
+}
+</style>