perf: 页面高度足够时只滚动项目部分
This commit is contained in:
kuaifan
parent
35b1c12bb5
commit
ea028ea1a1
@ -54,7 +54,7 @@
|
||||
<DropdownItem divided name="signout" style="color:#f40">{{$L('退出登录')}}</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<ul class="overlay-y" @scroll="listScroll()">
|
||||
<ul :class="overlayClass" @scroll="handleClickTopOperateOutside">
|
||||
<li @click="toggleRoute('dashboard')" :class="classNameRoute('dashboard')">
|
||||
<i class="taskfont"></i>
|
||||
<div class="menu-title">{{$L('仪表盘')}}</div>
|
||||
@ -73,20 +73,14 @@
|
||||
<i class="taskfont"></i>
|
||||
<div class="menu-title">{{$L('文件')}}</div>
|
||||
</li>
|
||||
<li class="menu-project" ref="projectWrapper">
|
||||
<ul>
|
||||
<li ref="projectWrapper" class="menu-project">
|
||||
<ul :class="overlayClass" @scroll="handleClickTopOperateOutside">
|
||||
<li
|
||||
v-for="(item, key) in projectLists"
|
||||
:key="key"
|
||||
:class="classNameRoute('project/' + item.id, openMenu[item.id])"
|
||||
:class="classNameProject(item)"
|
||||
@click="toggleRoute('project/' + item.id)"
|
||||
@contextmenu.prevent.stop="handleRightClick($event, item)"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
top: item.top_at,
|
||||
operate: item.id == topOperateItem.id && topOperateVisible
|
||||
}">
|
||||
@contextmenu.prevent.stop="handleRightClick($event, item)">
|
||||
<div class="project-h1">
|
||||
<em @click.stop="toggleOpenMenu(item.id)"></em>
|
||||
<div class="title">{{item.name}}</div>
|
||||
@ -104,7 +98,6 @@
|
||||
<Progress :percent="item.task_percent" :stroke-width="6" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Loading v-if="loadIng > 0"/>
|
||||
@ -125,7 +118,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-if="projectTotal > 50"
|
||||
v-if="projectTotal > 20"
|
||||
class="manage-project-search"
|
||||
:class="{loading:projectKeyLoading > 0}">
|
||||
<Input prefix="ios-search" v-model="projectKeyValue" :placeholder="$L('共' + projectTotal + '个项目，搜索...')" clearable />
|
||||
@ -309,6 +302,7 @@ export default {
|
||||
|
||||
reportTabs: "my",
|
||||
reportUnreadNumber: 0,
|
||||
|
||||
topOperateStyles: {},
|
||||
topOperateVisible: false,
|
||||
topOperateItem: {},
|
||||
@ -452,6 +446,13 @@ export default {
|
||||
return {
|
||||
maxHeight: (innerHeight - (innerHeight > 900 ? 200 : 70) - 20) + 'px'
|
||||
}
|
||||
},
|
||||
|
||||
overlayClass() {
|
||||
return {
|
||||
'overlay-y': true,
|
||||
'overlay-none': this.topOperateVisible === true,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -610,10 +611,20 @@ export default {
|
||||
this.visibleMenu = visible
|
||||
},
|
||||
|
||||
classNameRoute(path, openMenu) {
|
||||
classNameRoute(path) {
|
||||
return {
|
||||
"active": this.curPath == '/manage/' + path,
|
||||
};
|
||||
},
|
||||
|
||||
classNameProject(item) {
|
||||
let path = 'project/' + item.id;
|
||||
let openMenu = this.openMenu[item.id];
|
||||
return {
|
||||
"active": this.curPath == '/manage/' + path,
|
||||
"open-menu": openMenu === true,
|
||||
"top": item.top_at,
|
||||
"operate": item.id == this.topOperateItem.id && this.topOperateVisible
|
||||
};
|
||||
},
|
||||
|
||||
@ -810,9 +821,10 @@ export default {
|
||||
}
|
||||
document.addEventListener(visibilityChangeEvent, visibilityChangeListener);
|
||||
},
|
||||
|
||||
handleRightClick(event, item) {
|
||||
this.handleClickTopOperateOutside();
|
||||
this.topOperateItem = $A.isJson(item) ? item : {};
|
||||
this.topOperateItem = item;
|
||||
this.$nextTick(() => {
|
||||
const projectWrap = this.$refs.projectWrapper;
|
||||
const projectBounding = projectWrap.getBoundingClientRect();
|
||||
@ -823,6 +835,7 @@ export default {
|
||||
this.topOperateVisible = true;
|
||||
})
|
||||
},
|
||||
|
||||
handleClickTopOperateOutside() {
|
||||
this.topOperateVisible = false;
|
||||
},
|
||||
@ -835,15 +848,10 @@ export default {
|
||||
},
|
||||
}).then(() => {
|
||||
this.$store.dispatch("getProjects").catch(() => {});
|
||||
this.$Modal.remove();
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg, 301);
|
||||
this.$Modal.remove();
|
||||
});
|
||||
},
|
||||
listScroll() {
|
||||
this.topOperateVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
58
resources/assets/sass/pages/page-manage.scss
vendored
58
resources/assets/sass/pages/page-manage.scss
vendored
@ -100,11 +100,14 @@
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
> li {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
height: 30px;
|
||||
color: #6b6e72;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@ -128,27 +131,35 @@
|
||||
margin-left: 12px;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 12px;
|
||||
}
|
||||
&.active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
&.menu-project {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
padding: 14px 0 0;
|
||||
padding: 10px 0 0;
|
||||
cursor: default;
|
||||
> ul {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 4px auto;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
margin: 3px auto;
|
||||
border: 2px solid transparent;
|
||||
.project-h1 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px 0 30px;
|
||||
padding: 0 8px 0 28px;
|
||||
border-radius: 4px;
|
||||
> em {
|
||||
position: absolute;
|
||||
@ -187,7 +198,7 @@
|
||||
.project-h2 {
|
||||
display: none;
|
||||
margin: 16px 4px;
|
||||
padding: 0 8px 0 26px;
|
||||
padding: 0 8px 0 24px;
|
||||
cursor: default;
|
||||
> p {
|
||||
display: flex;
|
||||
@ -226,11 +237,11 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.top {
|
||||
&.top {
|
||||
background-color: #EEEFF1;
|
||||
}
|
||||
.operate {
|
||||
border:1px solid $primary-color;
|
||||
&.operate {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -247,15 +258,12 @@
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.manage-project-search {
|
||||
width: 80%;
|
||||
padding: 0 3px;
|
||||
margin: 12px 0 -2px;
|
||||
margin: 8px 0 -2px;
|
||||
border-radius: 12px;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
@ -338,6 +346,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 640px) {
|
||||
.page-manage {
|
||||
.manage-box-menu {
|
||||
> ul {
|
||||
overflow: auto !important;
|
||||
&.overlay-y {
|
||||
overflow-y: overlay !important;
|
||||
}
|
||||
> li {
|
||||
&.menu-project {
|
||||
> ul {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.manage-project-search {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-manage {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user