github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-16 14:12:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化设置页面

Browse Source
This commit is contained in:
Pang 2023-12-16 21:22:26 +08:00
parent ab3a82300c
commit f411f17386
3 changed files with 154 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
resources/assets/js/components/Mobile/NavTitle.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div class="mobile-nav-box">
<slot name="left">
<div class="nav-back" @click="onBack"><i class="taskfont">&#xe676;</i></div>
</slot>
<div class="nav-title">{{title}}</div>
<slot name="right"/>
</div>
</template>
<style lang="scss" scoped>
.mobile-nav-box {
display: flex;
align-items: center;
height: 44px;
padding: 0 15px;
background: #fff;
position: relative;
.nav-back {
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 44px;
> i {
font-size: 22px;
font-weight: 500;
color: #333;
}
}
.nav-title {
flex: 1;
font-size: 16px;
font-weight: 500;
color: #333;
text-align: center;
}
}
</style>
<script>
export default {
name: "MobileNavTitle",
props: {
title: {
default: ""
},
beforeBack: {
type: Function,
}
},
methods: {
onBack() {
if (typeof this.beforeBack === "function") {
const before = this.beforeBack();
if (before && before.then) {
before.then(() => {
this.goBack()
})
}
return
}
this.goBack()
}
},
};
</script>

26
resources/assets/js/pages/manage/setting/index.vue
View File

@ -4,16 +4,13 @@
<div class="setting-head"> <div class="setting-head">
<div class="setting-titbox"> <div class="setting-titbox">
<div class="setting-title"> <div class="setting-title">
<div v-if="showMobileBox" class="common-nav-back portrait" @click="goForward({name: 'manage-application'},true)"><i class="taskfont">&#xe676;</i></div>
<h1>{{settingTitleName}}</h1> <h1>{{settingTitleName}}</h1>
<div v-if="!showMobileBox" class="setting-more" @click="goBack()">
<Icon type="md-close" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="setting-box" :class="{'show-mobile-box':showMobileBox}"> <div class="setting-box">
<div class="setting-menu"> <div class="setting-menu">
<MobileNavTitle :title="$L('设置')"/>
<ul> <ul>
<li <li
v-for="(item, key) in menu" v-for="(item, key) in menu"
@ -33,12 +30,15 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="setting-content"> <transition name="mobile-dialog">
<div class="setting-content-title">{{titleNameRoute}}</div> <div v-if="showContent" class="setting-content">
<div class="setting-content-view"> <MobileNavTitle :title="settingTitleName"/>
<router-view class="setting-router-view"></router-view> <div class="setting-content-title">{{titleNameRoute}}</div>
<div class="setting-content-view">
<router-view class="setting-router-view"></router-view>
</div>
</div> </div>
</div> </transition>
</div> </div>
</div> </div>
</template> </template>
@ -47,8 +47,10 @@
import {mapState} from "vuex"; import {mapState} from "vuex";
import {Store} from "le5le-store"; import {Store} from "le5le-store";
import axios from "axios"; import axios from "axios";
import MobileNavTitle from "../../../components/Mobile/NavTitle.vue";
export default { export default {
components: {MobileNavTitle},
data() { data() {
return { return {
version: window.systemInfo.version version: window.systemInfo.version
@ -66,8 +68,8 @@ export default {
return this.$route.name return this.$route.name
}, },
showMobileBox() { showContent() {
return this.routeName === 'manage-setting' return this.$route.path.match(/^\/manage\/setting\/\w+$/)
}, },
menu() { menu() {

91
resources/assets/sass/pages/page-setting.scss vendored
View File

@ -33,6 +33,9 @@
height: 0; height: 0;
display: flex; display: flex;
padding-bottom: 16px; padding-bottom: 16px;
.mobile-nav-box {
display: none;
}
.setting-menu { .setting-menu {
width: 200px; width: 200px;
flex-shrink: 0; flex-shrink: 0;
@ -374,27 +377,18 @@
body.window-portrait { body.window-portrait {
.page-setting { .page-setting {
background-color: #f8f8f8;
.setting-head { .setting-head {
margin: 24px 16px 16px; display: none;
.setting-titbox {
.setting-title {
.setting-more {
display: flex;
font-size: 24px;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
}
}
}
} }
.setting-box { .setting-box {
position: relative; position: relative;
&.show-mobile-box { .mobile-nav-box {
.setting-menu { display: flex;
transform: translateX(0); position: sticky;
} top: 0;
z-index: 3;
background-color: #f8f8f8;
} }
.setting-menu { .setting-menu {
position: absolute; position: absolute;
@ -402,20 +396,49 @@ body.window-portrait {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 9; z-index: 1;
background-color: #ffffff;
transform: translateX(-120%);
> ul { > ul {
padding: 12px 32px; padding: 20px 0;
> li { > li {
padding: 0 8px; position: relative;
&:hover { padding: 0 32px;
background-color: transparent; line-height: 48px;
margin: 0;
background-color: #ffffff;
&:after {
content: "";
position: absolute;
top: 0;
left: 32px;
right: 0;
z-index: 1;
height: 1px;
transform: scaleY(0.5);
background-color: #F4F4F5;
}
&:first-child {
&:after {
display: none;
}
}
&.divided {
margin-top: 20px;
&:before,
&:after {
display: none;
}
} }
} }
} }
} }
.setting-content { .setting-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: #ffffff;
.setting-content-title { .setting-content-title {
display: none; display: none;
} }
@ -431,7 +454,25 @@ body.window-portrait {
} }
&.submit { &.submit {
.ivu-tabs{ .ivu-tabs{
padding: 0 16px 16px 12px; padding: 0;
.ivu-tabs-bar {
margin-bottom: 0;
}
.ivu-tabs-content {
.ivu-tabs-tabpane {
.setting-component-item {
.ivu-form {
padding-top: 16px;
}
.setting-footer {
margin: 0;
}
}
}
}
}
.setting-footer {
padding: 16px 24px;
} }
} }
} }