头部导航添加个人信息

src/components/AppHeader.vue

@@ -20,21 +20,71 @@
                     <i class="el-icon-trophy"></i>积分排行
                 </div>
             </router-link> -->
+            <div class="userInfo flex-center">
+                <el-avatar fit="fill" :size="50" :src="avatarUrl"></el-avatar>
+                <div class="nameAndIntegral">
+                    <div>姓名: {{ dataInfo.userName }}</div>
+                    <div>积分: <span class="blue">{{ dataInfo.surplusIntegral }}</span></div>
+                </div>
+            </div>
         </nav>
     </div>
 </template>
 <script>
+import { useInfo } from "@/api/allApi";
 export default {
     props:['visible'],
+    data() {
+        return {
+            dataInfo:{},
+            avatarUrl: "",
+        };
+    },
+    created() {
+        this.getUserInfo();
+    },
+    methods: {
+        goToSignIn(){
+            this.$router.push({
+                path: '/home/signIn',
+            });
+        },
+        getUserInfo(){
+            useInfo().then(response=>{
+                this.dataInfo = response.data.data;
+                this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
+            })
+        },
+    },
 }
 </script>
 
 <style>
 .logo{
     position: absolute;
-    left: 120px;
+    left: 80px;
     width: 160px;
 }
+.userInfo{
+    position: absolute;
+    right: 80px;
+    
+}
+.flex-center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.nameAndIntegral{
+    margin-left: 10px;
+    font-size: 14px;
+    color: #252933;
+    line-height: px;
+    line-height: 23px;
+}
+.blue {
+    color: #1e80ff;
+}
 .header-box {
   display: flex;
   justify-content: center;

src/components/SiderInfo.vue

@@ -32,8 +32,8 @@
                 <!-- <div class="info-item">
                     <div class="item-title">排行：</div>
                     <div class="item-content blue">{{ dataInfo.nowtop }}</div>
-                </div> -->
-                <!-- <div class="info-item">
+                </div>
+                <div class="info-item">
                     <div class="item-title">勋章：</div>
                     <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div> -->
@@ -56,8 +56,8 @@
                 <!-- <div class="info-item">
                     <div class="item-title">排行：</div>
                     <div class="item-content blue">{{ dataInfo.nowtop }}</div>
-                </div> -->
-                <!-- <div class="info-item">
+                </div>
+                <div class="info-item">
                     <div class="item-title">勋章：</div>
                     <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div> -->