1v1排位数据交互完善

src/pages/ranking.vue

@@ -1,6 +1,11 @@
 <script setup>
 import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
 import { ref } from "vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
 const selectedIndex = ref(0);
 
@@ -27,11 +32,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
       <view class="ranking-my-data">
         <view>
           <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>
-            <text>打酱油·路过</text>
+            <Avatar :src="user.avatarUrl" frame :size="30" />
+            <text>{{ user.nickName }}</text>
           </view>
           <view class="ranking-season">
             <text>第14赛季</text>
@@ -166,22 +168,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
   color: #fff;
   font-size: 14px;
 }
-.avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 15px;
-}
-.avatar > image:first-child {
-  position: absolute;
-  width: 40px;
-  height: 40px;
-}
-.avatar > image {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
+.user-info > text {
+  margin-left: 15px;
 }
 .ranking-season {
   display: flex;