fix(signing): 修复长文书滚动布局
This commit is contained in:
@@ -169,6 +169,9 @@ defineExpose({ getDocumentElement })
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作按钮常驻顶部,文书在自己的滚动区里滚:
|
||||||
|
长文书不再把整页顶下去,左栏与按钮也不会滚出视野 -->
|
||||||
|
<div class="detail-body">
|
||||||
<!-- 任务接口只返回模板版本哈希,正文由 API 层按哈希补回;
|
<!-- 任务接口只返回模板版本哈希,正文由 API 层按哈希补回;
|
||||||
补不到时如实提示并给出占位版式,不退化成"看起来像真文书"的假纸样 -->
|
补不到时如实提示并给出占位版式,不退化成"看起来像真文书"的假纸样 -->
|
||||||
<SigningDocumentInteractive
|
<SigningDocumentInteractive
|
||||||
@@ -196,6 +199,7 @@ defineExpose({ getDocumentElement })
|
|||||||
:can-download="canDownloadArtifact"
|
:can-download="canDownloadArtifact"
|
||||||
@download="emit('downloadArtifact', $event)"
|
@download="emit('downloadArtifact', $event)"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div v-else class="detail-empty">
|
<div v-else class="detail-empty">
|
||||||
@@ -207,12 +211,25 @@ defineExpose({ getDocumentElement })
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.detail-panel {
|
.detail-panel {
|
||||||
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文书 + 留痕 + 产物的滚动区:flex 子项必须 min-height: 0 才肯被压到内容高度以下,
|
||||||
|
否则它会撑到内容高度,overflow 永远触发不了(与用户权限面板同一处理) */
|
||||||
|
.detail-body {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
padding-right: 3px;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-actions {
|
.task-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -272,7 +289,8 @@ defineExpose({ getDocumentElement })
|
|||||||
|
|
||||||
.detail-empty {
|
.detail-empty {
|
||||||
display: grid;
|
display: grid;
|
||||||
min-height: 560px;
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
padding: 40px 24px;
|
padding: 40px 24px;
|
||||||
color: var(--mut);
|
color: var(--mut);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -296,7 +314,8 @@ defineExpose({ getDocumentElement })
|
|||||||
|
|
||||||
.detail-loading {
|
.detail-loading {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 680px;
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
}
|
}
|
||||||
@@ -316,7 +335,7 @@ defineExpose({ getDocumentElement })
|
|||||||
|
|
||||||
.detail-loading__paper {
|
.detail-loading__paper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 560px;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes skeleton-shimmer {
|
@keyframes skeleton-shimmer {
|
||||||
@@ -329,6 +348,19 @@ defineExpose({ getDocumentElement })
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
/* 窄屏堆叠后不再锁高度,恢复自然流式布局,由外层滚动 */
|
||||||
|
.detail-body {
|
||||||
|
flex: none;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-empty,
|
||||||
|
.detail-loading {
|
||||||
|
min-height: 560px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
.task-action-meta {
|
.task-action-meta {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -126,12 +126,16 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.task-list-panel {
|
.task-list-panel {
|
||||||
|
display: flex;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
min-height: 0;
|
||||||
|
flex-direction: column;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-list-heading {
|
.task-list-heading {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
@@ -150,8 +154,10 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 列表自己滚:高度由工作区剩余空间决定,不再按 100vh 硬算 */
|
||||||
.task-items {
|
.task-items {
|
||||||
max-height: calc(100vh - 270px);
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
padding-right: 3px;
|
padding-right: 3px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
@@ -314,6 +320,7 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
|
|||||||
|
|
||||||
.task-pagination {
|
.task-pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 9px 10px;
|
padding: 9px 10px;
|
||||||
@@ -399,7 +406,9 @@ function getVisitClass(type: SigningTaskRecord['visitType']) {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 窄屏堆叠后父级不再锁高度,列表要自己给个上限,否则整页被拉得很长 */
|
||||||
.task-items {
|
.task-items {
|
||||||
|
flex: none;
|
||||||
max-height: 420px;
|
max-height: 420px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -918,12 +918,22 @@ onMounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* 工作区吃满可视高度:文书在自己的滚动区里滚,页面本身不再滚。
|
||||||
|
外层 Container 仍是滚动容器,这里只是不去撑高它 */
|
||||||
.signing-page {
|
.signing-page {
|
||||||
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
flex-direction: column;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.signing-page > * {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.page-intro {
|
.page-intro {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
@@ -963,8 +973,11 @@ onMounted(() => {
|
|||||||
|
|
||||||
.task-workspace {
|
.task-workspace {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
align-items: flex-start;
|
align-items: stretch;
|
||||||
|
/* 视口过矮时保底:宁可让外层滚动,也不把工作区压到看不见文书 */
|
||||||
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-workspace > * {
|
.task-workspace > * {
|
||||||
@@ -972,8 +985,14 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
|
/* 窄屏两栏改上下堆叠,此时不再锁死高度,交回外层自然滚动 */
|
||||||
|
.signing-page {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.task-workspace {
|
.task-workspace {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-workspace > * {
|
.task-workspace > * {
|
||||||
|
|||||||
Reference in New Issue
Block a user