feat: 右上角个人信息组件

src/components/userInfo.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="user-info">
+    <img class="avatar" :src="head" alt="" />
+    <div class="nickName">{{nickName}}</div>
+    <i class="iconfont icon-show_drop-down"></i>
+    <ui class="menu">
+      <li><span @click="onClickPersonalCenter">个人中心</span></li>
+      <li><span class="warn" @click="onClickLogout" >退出登录</span></li>
+    </ui>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      nickName: '',
+      head: '',
+    }
+  },
+  methods: {
+    onClickPersonalCenter() {
+      window.location.href = '/#/information'
+    },
+    onClickLogout() {
+      // localStorage.removeItem('address')
+      // localStorage.removeItem('token')
+      // localStorage.removeItem('info')
+      // localStorage.removeItem('currentName')
+      localStorage.setItem('token', '')
+      window.location.href = '/#/'
+    }
+  },
+  mounted() {
+    const userInfo = JSON.parse(localStorage.getItem('info'))
+    this.nickName = userInfo.nickName
+    this.head = userInfo.head
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+.user-info {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 80%;
+  .avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    margin-right: 8px;
+  }
+  .nickName {
+    color: #323233;
+    font-size: 14px;
+    margin-right: 5px;
+  }
+  .icon-show_drop-down {
+    color: #323233;
+    font-size: 10px;
+  }
+  &:hover {
+    .menu {
+      display: block;
+    }
+  }
+  .menu {
+    display: none;
+    position: absolute;
+    padding: 0 16px;
+    background: #fff;
+    box-shadow: 0px 2px 12px 0px rgba(50, 50, 51, 0.12);
+    top: 50px;
+    right: -14px;
+    &:hover{
+      display: block;
+    }
+    // 菜单的箭头
+    &::before {
+      border: 7px solid transparent;
+      border-bottom: 7px solid #fff;
+      width: 0;
+      height: 0px;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      top: -14px;
+      right: 12px;
+    }
+    li {
+      display: block;
+      padding: 11px 20px;
+      border-bottom: solid 1px #EBEDF0;
+      &:last-child {
+        border-bottom: none;
+      }
+      span {
+        font-size: 16px;
+        color: #323233;
+        cursor: pointer;
+        word-break: keep-all;
+        &.warn {
+          color: #FA5555;
+        }  
+      }
+    }
+  }
+}
+</style>

src/framework/material/header.vue

@@ -9,19 +9,17 @@
           {{ item.name }}
         </li>
       </ul>
-      <div class="user">
-        <!-- <div>
-          <img :src="require('@/assets/images/icons/img_logo.png')" alt="" />
-          <span>简体中文</span>
-        </div> -->
-        <img title="回到个人中心" @click="backtoInfo" :src="userInfo.head||$thumb" alt="" />
-      </div>
+      <user-info class="user-info"></user-info>
     </div>
   </div>
 </template>
 
 <script>
+import UserInfo from "@/components/userInfo.vue";
 export default {
+  components: {
+    UserInfo,
+  },
   data() {
     return {
       active:{},
@@ -43,17 +41,6 @@ export default {
       ],
     };
   },
-  computed:{
-    userInfo(){
-      let info = {}
-      try {
-       info = JSON.parse(localStorage.getItem('info')) || {}
-      } catch (e) {
-        info= {}
-      }
-      return info
-    }
-  },
   watch:{
     '$route.meta':{
       deep:true,
@@ -65,9 +52,6 @@ export default {
     }
   },
   methods:{
-    backtoInfo(){
-      window.location.href = '/#/information'
-    },
     handleItem(item){
       this.$router.push(item.path)
     }
@@ -130,23 +114,9 @@ export default {
         }
       }
     }
-    .user {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      border-radius: 50%;
-      width: 32px;
-      height: 32px;
-      overflow: hidden;
-      > img {
-        cursor: pointer;
-        height: 100%;
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        left: 50%;
-      }
+    .user-info {
+      margin-left: auto;
+      margin-right: 0;
     }
   }
 }