完成我的成长脚印UI

src/components/AppBackground.vue

@@ -11,7 +11,7 @@ const bgs = ref(["../static/app-bg.png", "../static/app-bg2.png"]);
 
 <template>
   <view class="background">
-    <image class="bg-image" :src="bgs[type]" mode="aspectFill" />
+    <image class="bg-image" :src="bgs[type]" mode="widthFix" />
     <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>
@@ -27,11 +27,8 @@ const bgs = ref(["../static/app-bg.png", "../static/app-bg2.png"]);
 }
 
 .bg-image {
-  position: absolute;
   width: 100%;
   height: 100%;
-  left: 0;
-  top: 0;
 }
 
 .bg-overlay {
@@ -42,8 +39,8 @@ const bgs = ref(["../static/app-bg.png", "../static/app-bg2.png"]);
   top: 0;
   background: linear-gradient(
     to bottom,
-    rgba(26, 26, 26, 0.8),
-    rgba(0, 0, 0, 0.8)
+    rgba(26, 26, 26, 0.2),
+    rgba(0, 0, 0, 0.2)
   );
 }
 </style>

src/components/AppFooter.vue

@@ -1,16 +1,16 @@
 <script setup>
-import { ref } from "vue";
-
-const activeTab = ref("member");
-
 const tabs = [
-  { id: "member", image: "../static/tab-vip.png" },
-  { id: "growth", image: "../static/tab-grow.png" },
-  { id: "shop", image: "../static/tab-mall.png" },
+  { image: "../static/tab-vip.png" },
+  { image: "../static/tab-grow.png" },
+  { image: "../static/tab-mall.png" },
 ];
 
-function handleTabClick(tabId) {
-  activeTab.value = tabId;
+function handleTabClick(index) {
+  if (index === 1) {
+    uni.navigateTo({
+      url: "/pages/my-growth",
+    });
+  }
 }
 </script>
 
@@ -19,10 +19,9 @@ function handleTabClick(tabId) {
     <image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
     <view
       v-for="(tab, index) in tabs"
-      :key="tab.id"
+      :key="index"
       class="tab-item"
-      :class="{ active: activeTab === tab.id }"
-      @click="handleTabClick(tab.id)"
+      @click="handleTabClick(index)"
     >
       <image
         :src="tab.image"

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>

src/components/Container.vue

@@ -7,7 +7,7 @@ defineProps({
     default: "",
   },
   bgType: {
-    type: String,
+    type: Number,
     default: 0,
   },
 });

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;