退出登录

src/pages/Home.vue

@@ -3,9 +3,17 @@
         <Layout :style="{minHeight: '100vh'}">
             <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
 
-                <div style="margin-top: 40px;margin-bottom: 20px;font-weight: bold;font-size: 30px;color: #ffffff;">
-                    <Avatar size="36"></Avatar>
-                    <span>拓客营销</span>
+                <div style="margin: 40px 0 20px 20px;font-weight: bold;font-size: 30px;color: #ffffff;">
+                    <Poptip placement="bottom-start" width="200" :offset="-8">
+                        <img src="../../static/img/avatar.png" style="width: 32px;vertical-align: middle;cursor: pointer"/>
+                        <div slot="content">
+                            <div style="cursor: pointer;" @click="logoutClick">
+                                <span class="logout-span">退出登录</span>
+                                <img class="logout-img" src="../../static/img/logout.png"/>
+                            </div>
+                        </div>
+                    </Poptip>
+                    <span class="project-title">拓客营销</span>
                 </div>
 
                 <Menu ref="menu" :active-name="selectedItemName" :open-names="openName" theme="dark" width="auto"
@@ -296,6 +304,14 @@
                     this.selectedSubMenu = "";
                 }
                 this.$router.push(this.breadcrumbUrl);
+            },
+            //登出
+            logoutClick: function () {
+                sessionStorage.setItem("loginInfo", "");
+                sessionStorage.setItem("userId", "");
+                sessionStorage.setItem("roleCode", "");
+                this.$router.push('/login');
+                this.$Message.info("登出成功");
             }
         },
 
@@ -336,4 +352,19 @@
         vertical-align: middle;
         font-size: 22px;
     }
+    /*项目标题*/
+    .project-title{
+        font-size: 24px;
+        margin-left: 15px;
+    }
+    /*退出登入*/
+    .logout-span{
+        font-size: 15px;
+        vertical-align: middle;
+        color: #535353;
+    }
+    .logout-img{
+        vertical-align: middle;
+        margin-left: 80px;
+    }
 </style>