修改登录添加头像

src/views/index.vue

@@ -36,11 +36,14 @@
     <div class="content">
       <!-- 头部 -->
       <div class="header">
-        <div class="login">
+        <div class="login_btn" v-if="2 == 3">
           <el-button type="text" @click="handlePage">登录</el-button>
           <i class="mark">|</i>
           <el-button type="text" @click="handlePage">注册</el-button>
         </div>
+        <div class="avatar-wrapper" v-else>
+          <img :src="avatar" class="user-avatar" />
+        </div>
         <div class="img2_box">
           <img src="@/assets/image/02.png" alt="" />
           <div class="search">
@@ -130,6 +133,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
   name: 'home',
   data() {
@@ -168,6 +172,9 @@ export default {
       path: this.$route.path == '/' ? '/home' : this.$route.path
     };
   },
+  computed: {
+    ...mapGetters(['sidebar', 'avatar', 'device'])
+  },
   methods: {
     handlePage() {
       this.$router.push({ path: '/login' });
@@ -216,7 +223,8 @@ export default {
     height: 206px;
     padding: 0 100px;
     background-image: url(../assets/image/01.png);
-    .login {
+    .login_btn {
+      height: 60px;
       text-align: right;
       .el-button {
         font-size: 16px;
@@ -228,11 +236,22 @@ export default {
         margin: 0 14px;
       }
     }
+    .avatar-wrapper {
+      text-align: right;
+
+      .user-avatar {
+        vertical-align: middle;
+        cursor: pointer;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+      }
+    }
     .img2_box {
       display: flex;
       justify-content: space-between;
       height: 63px;
-      margin-top: 75px;
+      margin-top: 55px;
       img {
         width: 392px;
         height: 100%;