rewrite drawer
This commit is contained in:
parent
b248d01e29
commit
74c1ee143e
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="bg"></div>
|
||||
<Drawer></Drawer>
|
||||
<!-- 缓存 -->
|
||||
<keep-alive>
|
||||
<router-view v-if="this.$route.meta.keepAlive"></router-view>
|
||||
@ -13,10 +14,12 @@
|
||||
|
||||
<script>
|
||||
import FooterNav from "@/components/FooterNav.vue";
|
||||
import Drawer from "@/components/Drawer.vue";
|
||||
export default {
|
||||
name: "grade",
|
||||
components: {
|
||||
FooterNav,
|
||||
Drawer
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export const api = axios.create({
|
||||
baseURL: 'https://beta.powerrain.cn/api/',
|
||||
// baseURL: 'https://beta.powerrain.cn/api/',
|
||||
// baseURL: 'https://coc.powerrain.cn/api/',
|
||||
// baseURL: window.location.origin + '/api/',
|
||||
baseURL: window.location.origin + '/api/',
|
||||
// baseURL: 'http://152.136.99.231:8001' + '/api/',
|
||||
//baseURL: 'http://127.0.0.1:5000/api',
|
||||
headers: {
|
||||
|
||||
@ -1,8 +1,328 @@
|
||||
<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.0</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>
|
||||
<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()
|
||||
}
|
||||
},
|
||||
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>
|
||||
<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>
|
||||
/*
|
||||
这个页面需要进行absolute处理
|
||||
整体用left：width进行隐藏
|
||||
drawer为最高显示级别，分配z-index：200~250
|
||||
将挂载在app上，任何页面都能打开
|
||||
* 账户页面
|
||||
* 账号密码 自动保存
|
||||
* 头像 默认 logo
|
||||
* 昵称 默认 小樱桃001
|
||||
* 隐藏周末
|
||||
课表小游戏
|
||||
退出登录
|
||||
*/
|
||||
@ -18,7 +18,9 @@ export default new Vuex.Store({
|
||||
// 当前页面
|
||||
current_page: null,
|
||||
// 游戏
|
||||
schedule_game: null,
|
||||
schedule_game: null,
|
||||
// 展开抽屉
|
||||
drawer_state: false,
|
||||
},
|
||||
mutations: {
|
||||
// 设置用户信息
|
||||
@ -48,6 +50,10 @@ export default new Vuex.Store({
|
||||
// 设置游戏
|
||||
SET_SCHEDULE_GAME(state, schedule_game) {
|
||||
state.schedule_game = schedule_game
|
||||
},
|
||||
// 设置抽屉状态
|
||||
SET_DRAWER_STATE(state, drawer_state) {
|
||||
state.drawer_state = drawer_state
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -85,6 +91,11 @@ export default new Vuex.Store({
|
||||
setScheduleGame({ commit }, arg) {
|
||||
commit('SET_SCHEDULE_GAME', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
// 设置抽屉状态
|
||||
setDrawerState({ commit }, arg) {
|
||||
commit('SET_DRAWER_STATE', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
|
||||
@ -48,6 +48,7 @@ $black: #333;
|
||||
$white: #fff;
|
||||
$LAFPurple: #ab64f6;
|
||||
$LAFBlue: #61dbf7;
|
||||
$background: #374046;
|
||||
$gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
|
||||
// $gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
|
||||
$gradualOrange: linear-gradient(45deg, #ed1c24, #ff9700);
|
||||
|
||||
1
src/svg/game.svg
Normal file
1
src/svg/game.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1583479211377" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M957.43 619.895l-51.343-258.142c-16.349-82.199-96.979-136.073-179.176-119.725h-0.001c-64.211 12.772-73.433 30.396-120.63 70.734-35.765 30.568-152.429 30.568-188.194 0-47.196-40.338-56.42-57.962-120.63-70.734-82.198-16.348-162.826 37.526-179.176 119.725L66.937 619.895c-16.348 82.197 37.527 162.826 119.725 179.177h0.001c82.197 16.348 162.826-37.528 179.176-119.725l1.277-6.419h290.138l1.277 6.419c16.349 82.197 96.978 136.073 179.176 119.725 82.196-16.35 136.072-96.98 119.723-179.177zM378.245 490.103h-66.627v66.627c0 14.718-11.933 26.651-26.651 26.651s-26.651-11.933-26.651-26.651v-66.627h-66.627c-14.718 0-26.651-11.933-26.651-26.651s11.933-26.651 26.651-26.651h66.627v-66.627c0-14.718 11.933-26.651 26.651-26.651s26.651 11.933 26.651 26.651v66.627h66.627c14.718 0 26.651 11.933 26.651 26.651-0.001 14.718-11.934 26.651-26.651 26.651z m361.188-133.955c24.402 0 44.184 19.782 44.184 44.184s-19.782 44.184-44.184 44.184-44.184-19.782-44.184-44.184 19.782-44.184 44.184-44.184z m-97.836 158.193c-21.133-12.201-28.374-39.224-16.173-60.357 12.201-21.133 39.224-28.374 60.357-16.173 21.133 12.201 28.374 39.224 16.173 60.357-12.201 21.134-39.224 28.374-60.357 16.173z m136.101 59.572c-12.201 21.133-39.224 28.374-60.357 16.173-21.133-12.201-28.374-39.224-16.173-60.357s39.224-28.374 60.357-16.173c21.134 12.202 28.374 39.224 16.173 60.357z m75.745-75.744c-12.201 21.133-39.224 28.374-60.357 16.173-21.133-12.201-28.374-39.224-16.173-60.357 12.201-21.133 39.224-28.374 60.357-16.173 21.133 12.201 28.374 39.224 16.173 60.357z" fill="#f37b1d" p-id="2970"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
src/svg/logout.svg
Normal file
1
src/svg/logout.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1583480142279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2852" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M398.933333 896h-151.466666C181.333333 896 128 842.666667 128 776.533333V247.466667C128 181.333333 181.333333 128 247.466667 128h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666666h-151.466666c-19.2 0-34.133333 14.933333-34.133334 34.133334v531.2c0 19.2 14.933333 34.133333 34.133334 34.133333h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 40.533333-42.666667 40.533333zM663.466667 744.533333c-10.666667 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l160-160-160-160c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733333 0l189.866667 189.866666c17.066667 17.066667 17.066667 42.666667 0 59.733334l-189.866667 189.866666c-8.533333 8.533333-19.2 12.8-29.866666 12.8z" p-id="2853" fill="#e54d42"></path><path d="M853.333333 554.666667H398.933333c-23.466667 0-42.666667-19.2-42.666666-42.666667s19.2-42.666667 42.666666-42.666667H853.333333c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667z" p-id="2854" fill="#e54d42"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -2,7 +2,7 @@
|
||||
<div class="schedule">
|
||||
<header>
|
||||
<div class="w">
|
||||
<i class="el-icon-s-operation more" @click="drawer = true"></i>
|
||||
<i class="el-icon-s-operation more" @click="openDrawer()"></i>
|
||||
<div class="left-box" @click="changeWeek('left')">
|
||||
<i class="el-icon-arrow-left icon" v-show="show_week!==1"></i>
|
||||
</div>
|
||||
@ -19,7 +19,7 @@
|
||||
<div class="week-title" v-for="i in hide_weekend? 5:7" :class="highlightWeek == i%7? 'highlight':''" :key="i">{{week_day[i-1]}}</div>
|
||||
</nav>
|
||||
<div class="main">
|
||||
<v-touch @swiperight="drawer = true">
|
||||
<v-touch @swiperight="openDrawer()">
|
||||
<aside>
|
||||
<div class="lesson-title" v-for="i in 12" :key="i">{{i}}</div>
|
||||
</aside>
|
||||
@ -42,21 +42,6 @@
|
||||
</div>
|
||||
</v-touch>
|
||||
</div>
|
||||
<el-drawer custom-class="drawer"
|
||||
:visible.sync="drawer" direction="ltr" :withHeader="false">
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<div class="text-box">第{{show_week}}周</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="options-w">
|
||||
<div class="options" @click="goToGame()">课表小游戏<hr/></div>
|
||||
<div class="options" @click="hide_weekend = !hide_weekend">隐藏周末<hr/></div>
|
||||
<div class="options" @click="reflash">获取新数据<hr/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<!-- 课表点击弹窗 -->
|
||||
<div class="dialog" v-show="detail" @touchmove.prevent>
|
||||
<div class="w">
|
||||
@ -107,8 +92,6 @@ export default {
|
||||
show_week: 1,
|
||||
// 最大周数
|
||||
max_week: 22,
|
||||
// 抽屉开关
|
||||
drawer: false,
|
||||
// 课程详情兼dialog开关
|
||||
detail: false,
|
||||
// 隐藏周末
|
||||
@ -136,7 +119,7 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setCurrentPage"]),
|
||||
...mapActions(["setCurrentPage", "setDrawerState"]),
|
||||
|
||||
// 初始化课表
|
||||
init(lock = false) {
|
||||
@ -172,7 +155,6 @@ export default {
|
||||
|
||||
// 刷新信息
|
||||
reflash() {
|
||||
this.drawer = false;
|
||||
this.$router.push({ name: "login" });
|
||||
},
|
||||
|
||||
@ -203,7 +185,6 @@ export default {
|
||||
|
||||
// 跳转到游戏
|
||||
goToGame() {
|
||||
this.drawer = false;
|
||||
this.$router.push('/game')
|
||||
},
|
||||
|
||||
@ -221,7 +202,12 @@ export default {
|
||||
// 开学后
|
||||
this.current_week = Math.floor(days / 7) + 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 打开抽屉
|
||||
openDrawer() {
|
||||
this.setDrawerState([true, this])
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init(true);
|
||||
@ -361,44 +347,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.drawer {
|
||||
.main {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #f8f8f8;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.header {
|
||||
background: $gradualLoginSubmit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1.2rem;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.text-box {
|
||||
font-size: .5rem;
|
||||
}
|
||||
}
|
||||
.body {
|
||||
display: flex;
|
||||
.options-w {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin-bottom: 20px;
|
||||
.options {
|
||||
margin: 10px;
|
||||
font-size: .4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user