|
|
@@ -4,6 +4,7 @@
|
|
|
<div class="title">CocoClass后台管理</div>
|
|
|
<div class="person">
|
|
|
<div class="person_name">{{ userinfo ? userinfo.username : '' }}</div>
|
|
|
+ <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container">
|
|
|
@@ -25,22 +26,35 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
+import { mapGetters, mapActions } from 'vuex';
|
|
|
|
|
|
export default {
|
|
|
name: "HomeView",
|
|
|
computed: {
|
|
|
...mapGetters(['userinfo']),
|
|
|
},
|
|
|
- data() {
|
|
|
- return {};
|
|
|
+ methods: {
|
|
|
+ ...mapActions({
|
|
|
+ logout: 'user/logout'
|
|
|
+ }),
|
|
|
+ async handleLogout() {
|
|
|
+ this.$confirm('确定退出吗', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(async () => {
|
|
|
+ await this.logout();
|
|
|
+ this.$router.push('/login');
|
|
|
+ }).catch(() => {
|
|
|
+ // 取消操作
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
.body {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -62,22 +76,24 @@ export default {
|
|
|
}
|
|
|
.person {
|
|
|
margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.person > .person_name {
|
|
|
font-size: 15px;
|
|
|
color: black;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
-.container{
|
|
|
+.container {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: calc(100% - 50px);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.table-container {
|
|
|
- width: calc(100% - 180px);
|
|
|
- overflow: hidden;
|
|
|
- height: 100%;
|
|
|
+ width: calc(100% - 180px);
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.left {
|
|
|
width: 180px;
|
|
|
@@ -92,7 +108,6 @@ export default {
|
|
|
width: 100%;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
-
|
|
|
.menu_left {
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
@@ -104,7 +119,6 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
-
|
|
|
.router-link-active {
|
|
|
background-color: #3d67bc;
|
|
|
color: rgb(255, 255, 255);
|
