328 lines
7.8 KiB
Vue
328 lines
7.8 KiB
Vue
<template>
|
||
<div class="drawer">
|
||
<div class="mask" :class="mask_class" @click="closeDrawer()" v-if="drawer_state">
|
||
<div class="w">
|
||
<!-- 抽屉主体 -->
|
||
<div class="main" :class="main_class" @click.stop>
|
||
<div class="title">
|
||
<div class="logo-box">
|
||
<img src="../assets/logo.png" alt />
|
||
</div>
|
||
<p class="app-name">Co-Create</p>
|
||
<p class="version">Version 2.0.1</p>
|
||
</div>
|
||
<div class="list">
|
||
<!-- <div class="list-item">
|
||
<icon class="info" name="info"></icon>
|
||
<p>账户设置</p>
|
||
</div> -->
|
||
<div class="list-item" @click="goToGame()">
|
||
<icon class="game" name="game"></icon>
|
||
<p>课表小游戏</p>
|
||
</div>
|
||
<div class="list-item"
|
||
v-clipboard:copy="'https://canary.lacus.site'"
|
||
v-clipboard:success="onCopyUrl"
|
||
v-clipboard:error="onErrorUrl">
|
||
<icon class="game" name="canary"></icon>
|
||
<p>Canary密码本</p>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-box" v-if="user_info">
|
||
<div class="logout-dialog to-show" v-if="dialog_state">
|
||
<p class="label">警告</p>
|
||
<p class="content">该操作将清除您所有的个人信息，是否继续</p>
|
||
<div class="confirm-box">
|
||
<p class="cancel" @click="dialog_state = false">取消</p>
|
||
<p class="confirm" @click="logout">继续</p>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-button" @click="dialog_state = true">
|
||
<icon class="logout" name="logout"></icon>
|
||
<p>退出登录</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapActions } from "vuex";
|
||
import { getGradeInitData } from '@/lib/utils.js'
|
||
|
||
export default {
|
||
name: "footerNav",
|
||
data() {
|
||
return {
|
||
mask_class: '',
|
||
main_class: '',
|
||
dialog_state: false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(["drawer_state","user_info"])
|
||
},
|
||
methods: {
|
||
...mapActions(["setDrawerState","setUserInfo",'setGrade','setSchedule']),
|
||
// 初始化
|
||
init() {
|
||
// 刷新本页vuex
|
||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||
},
|
||
|
||
closeDrawer() {
|
||
this.dialog_state = false
|
||
this.mask_class = 'to-shallow'
|
||
this.main_class = 'to-left'
|
||
setTimeout(()=>{
|
||
this.setDrawerState([false, this])
|
||
}, 300)
|
||
},
|
||
// 刷新信息
|
||
reflash() {
|
||
this.setDrawerState([false, this])
|
||
this.$router.push({ name: "login" });
|
||
},
|
||
// 跳转到游戏
|
||
goToGame() {
|
||
this.setDrawerState([false, this])
|
||
this.$router.push('/game')
|
||
},
|
||
// 退出登录
|
||
logout() {
|
||
this.setUserInfo([null, this])
|
||
this.setGrade([getGradeInitData(), this])
|
||
this.setSchedule([null, this])
|
||
this.closeDrawer()
|
||
},
|
||
onCopyUrl(e) {
|
||
this.$message.success("网址复制成功！");
|
||
},
|
||
onErrorUrl(e) {
|
||
this.$message.success("网址复制失败！");
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
},
|
||
watch: {
|
||
drawer_state: function() {
|
||
if(this.drawer_state) {
|
||
// 展开
|
||
this.init()
|
||
this.mask_class = 'to-deep'
|
||
this.main_class = 'to-right'
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss" type="text/scss">
|
||
@import "../style/main";
|
||
.drawer {
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
z-index: 200;
|
||
.w {
|
||
width: 100%;
|
||
max-width: 500px;
|
||
margin: 0 auto;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.main {
|
||
position: absolute;
|
||
width: 6rem;
|
||
height: 100%;
|
||
background: #fff;
|
||
.title {
|
||
background: url(../assets/mine_bg.jpg);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 4em;
|
||
padding-top: 0.5rem;
|
||
.logo-box {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
margin: 0 auto;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
img {
|
||
width: 1.8rem;
|
||
height: 1.8rem;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.app-name {
|
||
text-align: center;
|
||
font-size: 0.5rem;
|
||
margin-top: 0.3rem;
|
||
color: #fff;
|
||
}
|
||
.version {
|
||
text-align: center;
|
||
font-size: 0.3rem;
|
||
color: #eee;
|
||
margin-top: 0.1rem;
|
||
}
|
||
}
|
||
.list {
|
||
padding: 0.5rem;
|
||
box-sizing: border-box;
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
height: 1rem;
|
||
.info {
|
||
height: 0.5rem;
|
||
width: 0.5rem;
|
||
margin-right: 0.3rem;
|
||
}
|
||
.game {
|
||
height: 0.6rem;
|
||
width: 0.6rem;
|
||
margin-left: -0.05rem;
|
||
margin-right: 0.25rem;
|
||
}
|
||
p {
|
||
font-size: 0.4rem;
|
||
}
|
||
}
|
||
}
|
||
.bottom-box {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
.logout-dialog {
|
||
margin: .5rem;
|
||
-moz-box-shadow:3px 4px 11px $home-card-boxshadow-color; -webkit-box-shadow:3px 4px 11px $home-card-boxshadow-color; box-shadow:3px 4px 11px $home-card-boxshadow-color;
|
||
border-radius: .1rem;
|
||
padding: .3rem;
|
||
box-sizing: border-box;
|
||
border: 1px solid $home-card-border-color;
|
||
.label {
|
||
font-size: .4rem;
|
||
}
|
||
.content {
|
||
font-size: .3rem;
|
||
margin-top: .3rem;
|
||
}
|
||
.confirm-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
font-size: .3rem;
|
||
margin-top: .3rem;
|
||
.cancel {
|
||
color: #989898;
|
||
margin-right: .3rem;
|
||
}
|
||
.confirm {
|
||
color: $red;
|
||
}
|
||
}
|
||
}
|
||
.bottom-button {
|
||
width: 6rem;
|
||
height: 1rem;
|
||
padding: 0 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
.logout {
|
||
height: 0.6rem;
|
||
width: 0.6rem;
|
||
margin-left: -0.05rem;
|
||
margin-right: 0.25rem;
|
||
}
|
||
p {
|
||
font-size: 0.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.to-right {
|
||
animation: toRight 0.5s ease;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
.to-left {
|
||
animation: toLeft 0.3s ease;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
.to-deep {
|
||
animation: toDeep 0.5s ease;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
.to-shallow {
|
||
animation: toShallow 0.3s ease;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
.to-show {
|
||
animation: toShow 0.3s ease;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
|
||
@keyframes toRight {
|
||
0% {
|
||
left: -6rem;
|
||
}
|
||
100% {
|
||
left: 0;
|
||
}
|
||
}
|
||
@keyframes toLeft {
|
||
0% {
|
||
left: 0;
|
||
}
|
||
100% {
|
||
left: -6rem;
|
||
}
|
||
}
|
||
@keyframes toDeep {
|
||
0% {
|
||
background: rgba(0, 0, 0, 0);
|
||
}
|
||
100% {
|
||
background: rgba(0, 0, 0, 0.4);
|
||
}
|
||
}
|
||
@keyframes toShallow {
|
||
0% {
|
||
background: rgba(0, 0, 0, 0.4);
|
||
}
|
||
100% {
|
||
background: rgba(0, 0, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes toShow {
|
||
0% {
|
||
opacity: .3;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style> |