UI完善

src/components/Avatar.vue

@@ -20,7 +20,16 @@ defineProps({
     type: Number,
     default: 45,
   },
+  borderColor: {
+    type: Number,
+    default: 0,
+  },
 });
+const borderColors = {
+  0: "#fff",
+  1: "#64BAFF",
+  2: "#FF6767",
+};
 </script>
 
 <template>
@@ -29,7 +38,10 @@ defineProps({
       v-if="frame"
       src="../static/avatar-frame.png"
       mode="widthFix"
-      :style="{ width: Number(size) + 10 + 'px', height: Number(size) + 10 + 'px' }"
+      :style="{
+        width: Number(size) + 10 + 'px',
+        height: Number(size) + 10 + 'px',
+      }"
       class="avatar-frame"
     />
     <image
@@ -54,7 +66,12 @@ defineProps({
     <image
       :src="src"
       mode="widthFix"
-      :style="{ width: size + 'px', height: size + 'px' }"
+      :style="{
+        width: size + 'px',
+        height: size + 'px',
+        borderColor: borderColors[borderColor],
+      }"
+      class="avatar-image"
     />
   </view>
 </template>
@@ -85,7 +102,7 @@ defineProps({
   border-top-left-radius: 50%;
   border-bottom-right-radius: 50%;
 }
-.avatar > image:last-child {
+.avatar-image {
   border-radius: 50%;
   border: 1px solid #fff;
 }