mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-14 12:42:51 +00:00
perf: 优化设置页面
This commit is contained in:
Pang
parent
ab3a82300c
commit
f411f17386
74
resources/assets/js/components/Mobile/NavTitle.vue
Normal file
74
resources/assets/js/components/Mobile/NavTitle.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="mobile-nav-box">
|
||||
<slot name="left">
|
||||
<div class="nav-back" @click="onBack"><i class="taskfont"></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>
|
||||
@ -4,16 +4,13 @@
|
||||
<div class="setting-head">
|
||||
<div class="setting-titbox">
|
||||
<div class="setting-title">
|
||||
<div v-if="showMobileBox" class="common-nav-back portrait" @click="goForward({name: 'manage-application'},true)"><i class="taskfont"></i></div>
|
||||
<h1>{{settingTitleName}}</h1>
|
||||
<div v-if="!showMobileBox" class="setting-more" @click="goBack()">
|
||||
<Icon type="md-close" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-box" :class="{'show-mobile-box':showMobileBox}">
|
||||
<div class="setting-box">
|
||||
<div class="setting-menu">
|
||||
<MobileNavTitle :title="$L('设置')"/>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, key) in menu"
|
||||
@ -33,12 +30,15 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="setting-content">
|
||||
<div class="setting-content-title">{{titleNameRoute}}</div>
|
||||
<div class="setting-content-view">
|
||||
<router-view class="setting-router-view"></router-view>
|
||||
<transition name="mobile-dialog">
|
||||
<div v-if="showContent" class="setting-content">
|
||||
<MobileNavTitle :title="settingTitleName"/>
|
||||
<div class="setting-content-title">{{titleNameRoute}}</div>
|
||||
<div class="setting-content-view">
|
||||
<router-view class="setting-router-view"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -47,8 +47,10 @@
|
||||
import {mapState} from "vuex";
|
||||
import {Store} from "le5le-store";
|
||||
import axios from "axios";
|
||||
import MobileNavTitle from "../../../components/Mobile/NavTitle.vue";
|
||||
|
||||
export default {
|
||||
components: {MobileNavTitle},
|
||||
data() {
|
||||
return {
|
||||
version: window.systemInfo.version
|
||||
@ -66,8 +68,8 @@ export default {
|
||||
return this.$route.name
|
||||
},
|
||||
|
||||
showMobileBox() {
|
||||
return this.routeName === 'manage-setting'
|
||||
showContent() {
|
||||
return this.$route.path.match(/^\/manage\/setting\/\w+$/)
|
||||
},
|
||||
|
||||
menu() {
|
||||
|
||||
91
resources/assets/sass/pages/page-setting.scss
vendored
91
resources/assets/sass/pages/page-setting.scss
vendored
@ -33,6 +33,9 @@
|
||||
height: 0;
|
||||
display: flex;
|
||||
padding-bottom: 16px;
|
||||
.mobile-nav-box {
|
||||
display: none;
|
||||
}
|
||||
.setting-menu {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
@ -374,27 +377,18 @@
|
||||
|
||||
body.window-portrait {
|
||||
.page-setting {
|
||||
background-color: #f8f8f8;
|
||||
.setting-head {
|
||||
margin: 24px 16px 16px;
|
||||
.setting-titbox {
|
||||
.setting-title {
|
||||
.setting-more {
|
||||
display: flex;
|
||||
font-size: 24px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
.setting-box {
|
||||
position: relative;
|
||||
&.show-mobile-box {
|
||||
.setting-menu {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.mobile-nav-box {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.setting-menu {
|
||||
position: absolute;
|
||||
@ -402,20 +396,49 @@ body.window-portrait {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
background-color: #ffffff;
|
||||
transform: translateX(-120%);
|
||||
z-index: 1;
|
||||
> ul {
|
||||
padding: 12px 32px;
|
||||
padding: 20px 0;
|
||||
> li {
|
||||
padding: 0 8px;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
padding: 0 32px;
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
background-color: #ffffff;
|
||||
.setting-content-title {
|
||||
display: none;
|
||||
}
|
||||
@ -431,7 +454,25 @@ body.window-portrait {
|
||||
}
|
||||
&.submit {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user