完成用户页面UI

src/pages/index.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
+import UserHeader from "@/components/UserHeader.vue";
 
 const userInfo = ref({
   name: "打酱油·路过",
@@ -10,11 +11,6 @@ const userInfo = ref({
   rankTotal: 1320,
 });
 
-const toUserPage = () => {
-  uni.navigateTo({
-    url: "/pages/user",
-  });
-};
 const toFristTryPage = () => {
   uni.navigateTo({
     url: "/pages/first-try",
@@ -35,36 +31,7 @@ const toFriendBattlePage = () => {
 <template>
   <view class="root-container">
     <AppBackground />
-    <!-- 用户信息区 -->
-    <view class="user-info">
-      <view class="avatar" @click="toUserPage">
-        <image src="../static/avatar-frame.png" mode="widthFix" />
-        <image src="/static/avatar.png" mode="widthFix" />
-      </view>
-      <view class="user-details">
-        <view class="user-name">
-          <text>{{ userInfo.name }}</text>
-          <image src="../static/vip1.png" mode="widthFix" />
-        </view>
-        <view class="user-stats">
-          <text class="level-tag">钻石1级</text>
-          <text class="level-tag">{{ userInfo.level }}</text>
-          <view class="rank-tag">
-            <view :style="{ width: '40%' }" />
-            <text>158/1928</text>
-          </view>
-        </view>
-      </view>
-      <view class="rank-info">
-        <image src="../static/global-rank.png" mode="widthFix" />
-        <text>本赛季全国</text>
-        <text class="rank-number"
-          >第<text :style="{ color: '#ffd700' }"
-            >{{ userInfo.rank }}/{{ userInfo.rankTotal }}</text
-          >名</text
-        >
-      </view>
-    </view>
+    <UserHeader showRank />
 
     <view class="container">
       <!-- 功能区域 -->
@@ -165,119 +132,13 @@ const toFriendBattlePage = () => {
 
 <style scoped>
 .root-container {
-  height: 100vh;
+  height: calc(100vh - 45px);
   color: white;
   position: relative;
+  padding-top: 45px;
 }
 
 /* 用户信息样式 */
-.user-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  width: 72vw;
-  height: 90px;
-  padding-left: 15px;
-}
-
-.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;
-  padding-left: 5px;
-}
-
-.user-name {
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.user-name > image {
-  margin-left: 5px;
-  width: 24px;
-}
-
-.user-stats {
-  display: flex;
-  gap: 5px;
-}
-
-.level-tag {
-  text-align: center;
-  line-height: 16px;
-}
-.level-tag:first-child {
-  width: 45px;
-  background: #5f51ff;
-}
-.level-tag:nth-child(2) {
-  width: 36px;
-  background: #09c504;
-}
-
-.level-tag,
-.rank-tag {
-  border-radius: 12px;
-  font-size: 10px;
-}
-
-.rank-tag {
-  position: relative;
-  background-color: #00000038;
-  width: 56px;
-  height: 16px;
-}
-
-.rank-tag > view:first-child {
-  background: #ffa711;
-  height: 100%;
-  border-radius: 12px;
-}
-
-.rank-tag > text {
-  position: absolute;
-  top: 0;
-  left: 5px;
-  line-height: 16px;
-}
-
-.rank-info {
-  text-align: left;
-  font-size: 10px;
-  position: relative;
-  padding: 5px;
-  color: #b3b3b3;
-}
-
-.rank-info > image {
-  position: absolute;
-  top: -4px;
-  left: -12px;
-  width: 112%;
-}
-
-.rank-number {
-  display: block;
-}
 
 .container {
   height: calc(100vh - 220px);