github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-28 21:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化移动端

Browse Source
This commit is contained in:
kuaifan 2022-05-12 00:15:09 +08:00
parent 4da73dd144
commit 117fd62c44
9 changed files with 85 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
resources/assets/js/components/Mobile/Back.vue
View File

@ -3,10 +3,12 @@
</template>
<script>
import {mapState} from "vuex";
export default {
name: "MobileBack",
props: {
disabled: {
showTabbar: {
type: Boolean,
default: false
},
@ -37,16 +39,17 @@ export default {
},
computed: {
...mapState(['cacheDrawerOverlay']),
style() {
return {
top: this.y + 'px',
left: !this.disabled && this.x > 30 && this.show ? 0 : '-50px',
left: this.x > 30 && this.show ? 0 : '-50px',
}
},
},
methods: {
// 获取坐标
getXY(event) {
let touch = event.touches[0]
this.x = touch.clientX
@ -55,19 +58,40 @@ export default {
touchstart(event) {
this.getXY(event)
// 判断是否是边缘滑动
this.show = !this.disabled && this.x < 30;
this.show = this.canBack() && this.x < 30;
},
touchmove(event) {
this.getXY(event)
},
touchend() {
// 判断停止时的位置偏移
if (this.x > 90 && this.show) {
this.goBack();
if (this.x > 90) {
this.onBack();
}
this.x = 0
this.show = false
},
canBack() {
if (!this.showTabbar) {
return true;
}
if (this.$Modal.visibles().length > 0) {
return true;
}
return this.cacheDrawerOverlay.length > 0;
},
onBack() {
if (this.$Modal.removeLast()) {
return;
}
if (this.cacheDrawerOverlay.length > 0) {
this.cacheDrawerOverlay[this.cacheDrawerOverlay.length - 1].close();
return;
}
if (this.show) {
this.goBack();
}
}
},
};
</script>

2
resources/assets/js/pages/manage.vue
View File

@ -355,7 +355,7 @@
<!--移动端选项卡-->
<MobileTabbar v-if="showMobileTabbar"/>
<MobileBack :disabled="showMobileTabbar"/>
<MobileBack :showTabbar="showMobileTabbar"/>
</div>
</template>

3
resources/assets/js/pages/manage/components/ProjectPanel.vue
View File

@ -4,6 +4,9 @@
<div class="project-head">
<div class="project-titbox">
<div class="project-title">
<div class="project-back" @click="goBack">
<i class="taskfont">&#xe72d;</i>
</div>
<h1>{{projectData.name}}</h1>
<label v-if="projectData.top_at" class="top-text">{{$L('置顶')}}</label>
<div v-if="loading" class="project-load"><Loading/></div>

6
resources/assets/sass/components/mobile.scss vendored
View File

@ -4,9 +4,9 @@
left: 0;
bottom: 0;
right: 0;
background-color: #f3f6fe;
background-color: #f8f8f8;
box-shadow: 0 0 2px rgba(28, 34, 43, 0.15);
z-index: 98;
z-index: 9998;
> ul {
display: flex;
align-items: center;
@ -47,7 +47,7 @@
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.1);
z-index: 99;
z-index: 9999;
border-radius: 50%;
transform: translate(-460px, -50%);
transition: left 0.2s;

19
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -826,9 +826,10 @@
@media (max-width: 768px) {
.dialog-wrapper {
.dialog-nav {
height: 60px;
height: 52px;
padding: 0;
justify-content: center;
background-color: #f8f8f8;
&.completed {
&:after {
@ -846,7 +847,7 @@
bottom: 0;
right: 0;
margin: 0;
width: 60px;
width: 52px;
display: flex;
align-items: center;
justify-content: center;
@ -859,7 +860,7 @@
}
}
.dialog-block {
margin: 0 60px;
margin: 0 52px;
justify-content: center;
.dialog-avatar {
display: none;
@ -879,8 +880,16 @@
padding: 0 14px;
}
.dialog-footer {
padding: 0 20px;
margin-bottom: 16px;
background-color: #f8f8f8;
padding: 8px 10px;
margin-bottom: 0;
.dialog-input {
.chat-input-wrapper {
padding-left: 6px;
padding-right: 8px;
background-color: #ffffff;
}
}
}
}
}

16
resources/assets/sass/pages/components/project-list.scss vendored
View File

@ -1,13 +1,11 @@
.project-list {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
.list-search {
position: sticky;
top: 0;
z-index: 1;
width: 100%;
flex-shrink: 0;
display: flex;
@ -15,11 +13,11 @@
justify-content: center;
height: 54px;
padding: 0 12px;
background-color: #ffffff;
background-color: #f8f8f8;
.search-wrapper {
flex: 1;
background-color: #F7F7F7;
background-color: #ffffff;
padding: 0 8px;
margin: 0 4px;
border-radius: 12px;
@ -39,12 +37,14 @@
> ul {
flex: 1;
height: 0;
overflow: auto;
background-color: #f8f8f8;
> li {
margin: 16px;
padding: 16px;
background: #F9FAFB;
box-shadow: 0 0 4px rgba(28, 34, 43, 0.1);
margin: 16px;
border-radius: 12px;
background-color: #ffffff;
list-style: none;
.project-h1 {
font-size: 16px;

18
resources/assets/sass/pages/components/project-panel.scss vendored
View File

@ -15,6 +15,9 @@
.project-title {
display: flex;
align-items: center;
.project-back {
display: none;
}
> h1 {
color: #333333;
font-size: 28px;
@ -1024,14 +1027,25 @@
@media (max-width: 768px) {
.project-panel {
.project-head {
margin: 24px 24px 0;
margin: 12px 16px 0;
.project-titbox {
display: block;
margin-bottom: 16px;
.project-title {
float: left;
padding-bottom: 8px;
.project-back {
display: flex;
align-items: center;
justify-content: center;
margin-left: -16px;
width: 52px;
> i {
font-size: 26px;
}
}
> h1 {
font-size: 24px;
font-size: 22px;
}
}
.project-icons {

2
resources/assets/sass/pages/page-login.scss vendored
View File

@ -7,7 +7,7 @@
display: flex;
align-items: center;
justify-content: center;
background-color: #F3F6FE;
background-color: #f8f8f8;
.login-body {
display: flex;
flex-direction: column;

9
resources/assets/sass/pages/page-messenger.scss vendored
View File

@ -410,6 +410,15 @@
.page-messenger {
.messenger-wrapper {
.messenger-select {
.messenger-search {
background-color: #f8f8f8;
.search-wrapper {
background-color: #ffffff;
}
}
.messenger-nav {
background-color: #f8f8f8;
}
.messenger-menu {
border-top: 0;
height: 60px;