Add user info in Header

src/components/common/header.vue

@@ -1,9 +1,16 @@
 <template>
     <div class="header">
-        内容管理系统
+        后台管理系统
-        <div class="m-logbar">
+        <div class="user-info">
-            <span class="logInfo" admin="admin">username </span>您好 |
+            <el-dropdown trigger="click" @command="handleCommand">
-            <span class="logout" @click="handleLogout">退出</span>
+                <span class="el-dropdown-link">
+                    <img class="user-logo" src="../../../static/img/img.jpg">
+                    linxin
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
         </div>
     </div>
 </template>
@@ -15,33 +22,15 @@ export default {
                 sName: 'abcd'
             }
         },
-    created() {
-       let arr = document.cookie.split('; ');
-       let bArr = arr[arr.length - 1];
-       let sArr = bArr.split('=');
-       let sUserName = sArr[0];
-       this.sName = sUserName;
-    },
         methods:{
-        handleLogout() {
+            handleCommand(command) {
-            let self = this,param = {
+                if(command == 'loginout'){
-                username: 'admin',
+                    console.log(1)
-                password: 'admin'
+                    this.$router.push('/login');
                 }
-            self.$http.post(server + '/user/logout',param).then((res) => {
-                if(res.ok){
-                    let response = res.data;
-                    if(response.code == '200') {
-                        location.href = '#/login';
-                        this.removeCookie(this.sName)
-                    }else {
-                        location.href = '#/login';
-                    }
-                }
-            })
             },
-        removeCookie(name) {
+            loginOut(){
-            setCookie(name, '1', -1);
+
             }
         }
     }
@@ -49,8 +38,6 @@ export default {
 <style scoped>
     .header {
         position: relative;
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
         box-sizing: border-box;
         padding-left: 50px;
         width: 100%;
@@ -60,10 +47,30 @@ export default {
         color: #fff;
         background-color: #242f42;
     }
-.m-logbar {
+
+    .user-info {
         float: right;
-    padding-right: 20px;
+        padding-right: 50px;
         font-size: 16px;
         color: #fff;
     }
+    .user-info .el-dropdown-link{
+        position: relative;
+        display: inline-block;
+        padding-left: 50px;
+        color: #fff;
+        cursor: pointer;
+        vertical-align: middle;
+    }
+    .user-info .user-logo{
+        position: absolute;
+        left:0;
+        top:15px;
+        width:40px;
+        height:40px;
+        border-radius: 50%;
+    }
+    .el-dropdown-menu__item{
+        text-align: center;
+    }
 </style>