Add user info in Header

src/components/common/header.vue

@@ -1,69 +1,76 @@
 <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() {
+        data() {
-       return {
+            return {
-        sName: 'abcd'
+                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() {
-            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) {
+        methods:{
-            setCookie(name, '1', -1);
+            handleCommand(command) {
+                if(command == 'loginout'){
+                    console.log(1)
+                    this.$router.push('/login');
+                }
+            },
+            loginOut(){
+
+            }
         }
     }
-}
 </script>
 <style scoped>
-.header {
+    .header {
-    position: relative;
+        position: relative;
-    -webkit-box-sizing: border-box;
+        box-sizing: border-box;
-       -moz-box-sizing: border-box;
+        padding-left: 50px;
-            box-sizing: border-box;
+        width: 100%;
-    padding-left: 50px;
+        height: 70px;
-    width: 100%;
+        font-size: 22px;
-    height: 70px;
+        line-height: 70px;
-    font-size: 22px;
+        color: #fff;
-    line-height: 70px;
+        background-color: #242f42;
-    color: #fff;
+    }
-    background-color: #242f42;
+
-}
+    .user-info {
-.m-logbar {
+        float: right;
-    float: right;
+        padding-right: 50px;
-    padding-right: 20px;
+        font-size: 16px;
-    font-size: 16px;
+        color: #fff;
-    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>