Add user info in Header

src/components/common/header.vue

@@ -1,56 +1,43 @@
 <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>
 
 <script>
-export default {
+    export default {
         data() {
             return {
                 sName: 'abcd'
             }
         },
-    created() {
+        methods:{
-       let arr = document.cookie.split('; ');
+            handleCommand(command) {
-       let bArr = arr[arr.length - 1];
+                if(command == 'loginout'){
-       let sArr = bArr.split('=');
+                    console.log(1)
-       let sUserName = sArr[0];
+                    this.$router.push('/login');
-       this.sName = sUserName;
+                }
             },
-    methods: {
+            loginOut(){
-        handleLogout() {
+
-            let self = this,param = {
-                username: 'admin',
-                password: 'admin'
-            }
-            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) {
-            setCookie(name, '1', -1);
     }
-    }
-}
 </script>
 <style scoped>
-.header {
+    .header {
         position: relative;
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
         box-sizing: border-box;
         padding-left: 50px;
         width: 100%;
@@ -59,11 +46,31 @@ export default {
         line-height: 70px;
         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>