117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<template>
|
||
<div class="question-list-root">
|
||
<div class="login-status">
|
||
<img class="logo-img" src="/imgs/Logo.jpg" alt="logo" />
|
||
<div class="login-info">
|
||
您好，{{ userInfo?.username }}
|
||
<img class="login-info-img" src="/imgs/avatar.png" />
|
||
<span class="logout" @click="handleLogout">退出</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-content">
|
||
<div class="top">
|
||
<h2>问卷列表</h2>
|
||
<el-button class="create-btn" type="default" @click="onCreate">
|
||
<i class="iconfont icon-chuangjian"></i>
|
||
<span>创建问卷</span>
|
||
</el-button>
|
||
</div>
|
||
<base-list />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import baseList from './components/baseList.vue';
|
||
import { mapState, mapActions } from 'vuex';
|
||
export default {
|
||
components: { baseList },
|
||
name: 'listPage',
|
||
computed: {
|
||
...mapState('user', ['userInfo']),
|
||
},
|
||
methods: {
|
||
...mapActions('user', ['logout']),
|
||
onCreate() {
|
||
this.$router.push('/create');
|
||
},
|
||
handleLogout() {
|
||
this.logout();
|
||
this.$router.replace({ name: 'login' });
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||
.question-list-root {
|
||
height: 100%;
|
||
background-color: #f6f7f9;
|
||
.login-status {
|
||
background: #fff;
|
||
color: #4a4c5b;
|
||
padding: 0 20px;
|
||
height: 56px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.logo-img {
|
||
width: 90px;
|
||
}
|
||
|
||
.login-info {
|
||
display: flex;
|
||
align-items: center;
|
||
.login-info-img {
|
||
margin-left: 10px;
|
||
height: 30px;
|
||
margin-top: -6px;
|
||
}
|
||
|
||
.logout {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
span {
|
||
cursor: pointer;
|
||
color: #faa600;
|
||
}
|
||
}
|
||
|
||
.list-content {
|
||
height: calc(100% - 56px);
|
||
padding: 20px;
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
|
||
h2 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.create-btn {
|
||
width: 132px;
|
||
height: 32px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #4a4c5b;
|
||
color: #fff;
|
||
|
||
.icon-chuangjian {
|
||
padding-right: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|