mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-10 18:02:55 +00:00
feat: 使用 CSS 变量动态调整窗口高度,优化各组件的最大高度设置
This commit is contained in:
parent
ff53e1fac3
commit
d88349b6f7
@ -182,6 +182,8 @@ export default {
|
||||
|
||||
rootStyle() {
|
||||
return {
|
||||
'--window-width': `${this.windowWidth}px`,
|
||||
'--window-height': `${this.windowHeight}px`,
|
||||
'--window-scroll-y': `${this.windowScrollY}px`,
|
||||
'--status-bar-height': `${this.safeAreaSize.top}px`,
|
||||
'--status-bar-color': this.statusColor || '#ffffff',
|
||||
|
||||
@ -845,9 +845,9 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: calc(100vh - 344px);
|
||||
max-height: calc(var(--window-height, 100vh) - 344px);
|
||||
@media (height <= 900px) {
|
||||
max-height: calc(100vh - 214px);
|
||||
max-height: calc(var(--window-height, 100vh) - 214px);
|
||||
}
|
||||
|
||||
.ai-assistant-output {
|
||||
|
||||
@ -194,11 +194,11 @@
|
||||
|
||||
.search-list {
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 305px);
|
||||
max-height: calc(var(--window-height, 100vh) - 305px);
|
||||
overscroll-behavior: contain;
|
||||
|
||||
@media (height <= 900px) {
|
||||
max-height: calc(100vh - 175px);
|
||||
max-height: calc(var(--window-height, 100vh) - 175px);
|
||||
}
|
||||
|
||||
> ul {
|
||||
|
||||
@ -236,10 +236,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
max-height: calc(100vh - 410px);
|
||||
max-height: calc(var(--window-height, 100vh) - 410px);
|
||||
|
||||
@media (height <= 900px) {
|
||||
max-height: calc(100vh - 280px);
|
||||
max-height: calc(var(--window-height, 100vh) - 280px);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.dialog-droup-word-chain {
|
||||
.ivu-modal-body {
|
||||
max-height: calc(100vh - 260px);
|
||||
max-height: calc(var(--window-height, 100vh) - 260px);
|
||||
overflow: auto;
|
||||
padding-top: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
@ -58,7 +58,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 265px);
|
||||
max-height: calc(var(--window-height, 100vh) - 265px);
|
||||
|
||||
.source {
|
||||
margin-right: 32px;
|
||||
|
||||
@ -955,7 +955,7 @@
|
||||
}
|
||||
|
||||
.project-panel-project-menu-dropdown {
|
||||
max-height: calc(100vh - 120px);
|
||||
max-height: calc(var(--window-height, 100vh) - 120px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -963,7 +963,7 @@
|
||||
.project-panel-more-dropdown-warp {
|
||||
height: 400px;
|
||||
min-height: 120px;
|
||||
max-height: calc(100vh - 250px);
|
||||
max-height: calc(var(--window-height, 100vh) - 250px);
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
@ -548,7 +548,7 @@
|
||||
.taskflow-config-more-dropdown-warp {
|
||||
height: 400px;
|
||||
min-height: 180px;
|
||||
max-height: calc(100vh - 250px);
|
||||
max-height: calc(var(--window-height, 100vh) - 250px);
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -235,10 +235,10 @@
|
||||
.dialog-list {
|
||||
padding: 0 12px;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 310px);
|
||||
max-height: calc(var(--window-height, 100vh) - 310px);
|
||||
|
||||
@media (height <= 900px) {
|
||||
max-height: calc(100vh - 180px);
|
||||
max-height: calc(var(--window-height, 100vh) - 180px);
|
||||
}
|
||||
|
||||
.dialog-item {
|
||||
|
||||
@ -90,7 +90,7 @@
|
||||
.approve-mains {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
height: calc(100vh - 190px - var(--status-bar-height) - var(--navigation-bar-height));
|
||||
height: calc(var(--window-height, 100vh) - 190px - var(--status-bar-height) - var(--navigation-bar-height));
|
||||
position: relative;
|
||||
|
||||
.approve-main-left {
|
||||
|
||||
2
resources/assets/sass/pages/page-manage.scss
vendored
2
resources/assets/sass/pages/page-manage.scss
vendored
@ -339,7 +339,7 @@
|
||||
}
|
||||
&.ivu-dropdown {
|
||||
.ivu-select-dropdown {
|
||||
max-height: calc(100vh - 120px);
|
||||
max-height: calc(var(--window-height, 100vh) - 120px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
2
resources/assets/sass/root.scss
vendored
2
resources/assets/sass/root.scss
vendored
@ -1,4 +1,6 @@
|
||||
:root {
|
||||
--window-width: 100vw;
|
||||
--window-height: 100vh;
|
||||
--window-scroll-y: 0px;
|
||||
--status-bar-height: 0px;
|
||||
--status-bar-color: #ffffff;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user