UI细节调整

src/pages/rank-list.vue

@@ -1,17 +1,17 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import Avatar from "@/components/Avatar.vue";
-import { getRankListAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, rankData } = storeToRefs(store);
 
 const isIos = ref(true);
 const selectedIndex = ref(0);
-const rankData = ref({});
 
 onMounted(async () => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
-  const rankList = await getRankListAPI();
-  rankData.value = rankList;
 });
 
 const handleSelect = (index) => {
@@ -111,15 +111,16 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
     </view>
     <view class="my-rank-data">
       <image src="../static/modal-content-bg.png" mode="widthFix" />
-      <text>123</text>
-      <Avatar src="../static/avatar.png" />
+      <text>{{ user.ranking }}</text>
+      <Avatar :src="user.avatar" />
       <view class="rank-item-content">
-        <text>打酱油大声路过</text>
-        <text>钻石3级，20场</text>
+        <text class="truncate">{{ user.nickName }}</text>
+        <text>{{ user.lvlName }}，20场</text>
       </view>
       <text class="rank-item-integral"
-        ><text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-          >9999</text
+        ><text
+          :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
+          >{{ user.scores }}</text
         >分</text
       >
     </view>
@@ -227,6 +228,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
   color: #fff;
   font-size: 14px;
   margin-bottom: 3px;
+  width: 120px;
 }
 .rank-list-item > text:last-child {
   margin-right: 10px;