门户页面用户信息对接

src/views/navigation.vue

@@ -15,11 +15,12 @@
                         </el-input>
                     </div>
                     <div class="top_one right">
-                        <div style="display: flex;width: 15vh;justify-content: flex-end;align-items: center;font-weight: 400;
+                        <div style="display: flex;width: 20vh;justify-content: flex-end;align-items: center;font-weight: 400;
                             font-size: 14px; text-overflow: ellipsis;">
-                            <el-avatar size="medium"
-                                src="https://hzl.willalp.com/static/img/profile.b87e3d56.jpg"></el-avatar>
-                            <span style="margin-left: 10%;cursor: pointer">用户名</span>
+                            <!-- <el-avatar size="medium"
+                                src="https://hzl.willalp.com/static/img/profile.b87e3d56.jpg"></el-avatar> -->
+                            <img :src="avatar" class="user-avatar" />
+                            <span class="user-nickname">{{ nickname }}</span>
                         </div>
 
                         <div style="margin-left: 10%;margin-right: 8%">
@@ -221,6 +222,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 import {
     getEnableList,
     getEnableListPic,
@@ -238,6 +240,9 @@ export default {
     name: "Navigation",
     components: {
     },
+    computed: {
+        ...mapGetters(["sidebar", "avatar", "nickname", "device"]),
+    },
     data() {
         return {
             detailTitle1: "",
@@ -419,7 +424,7 @@ export default {
     border: 2px solid #FFFFFF;
 }
 
-::v-deep .el-menu--horizontal > .el-menu-item {
+::v-deep .el-menu--horizontal>.el-menu-item {
     display: flex;
     height: 85%;
     align-items: center;
@@ -632,6 +637,18 @@ export default {
         font-style: normal;
         text-transform: none;
     }
+
+    .user-avatar {
+        cursor: pointer;
+        width: 30%;
+        height: 30%;
+        border-radius: 50%;
+    }
+
+    .user-nickname {
+        margin-left: 10%;
+        cursor: pointer;
+    }
 }
 
 .top_two {