完成用户页面UI

src/components/UserHeader.vue

@@ -0,0 +1,169 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  showRank: {
+    type: Boolean,
+    default: false,
+  },
+});
+const userInfo = ref({
+  name: "打酱油·路过",
+  level: "L100",
+  rank: 1928,
+  rankTotal: 1320,
+});
+const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
+const toUserPage = () => {
+  // 获取当前页面路径
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  
+  // 如果当前不是用户页面才进行跳转
+  if (currentPage.route !== 'pages/user') {
+    uni.navigateTo({
+      url: "/pages/user",
+    });
+  }
+};
+</script>
+
+<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>
+    <view class="user-details">
+      <view class="user-name">
+        <text>{{ containerWidth }}</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 v-if="showRank === true" 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>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  width: 72vw;
+  padding-left: 15px;
+  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;
+  padding-left: 10px;
+}
+
+.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: 30px;
+  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;
+  color: #b3b3b3;
+  padding-left: 8px;
+}
+
+.rank-info > image {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  width: 90px;
+}
+
+.rank-number {
+  display: block;
+}
+</style>