sz-team/supervision-test-frontend-repo
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(dq): 优化审批历史界面间距，减少贴边感

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
wsm
2026-07-14 09:44:42 +08:00
co-authored by Claude Opus 4.7
parent dca130323c
commit 5e9e35b9f9
1 changed files with 55 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/super/bpm/process/personalOffice/myHandleTask/content/TaskApprovalHistoryContent.vue
+55 -48
View File
@@ -352,63 +352,70 @@ export default {
},
};
</script>
<style lang="less" scoped>
.approval-history-pane {
height: 100%;
padding: 4px 0;
}
.approval-history-pane {
height: 100%;
// 1. 增加 padding，16px 左右，24px 上下，给四周留出足够的呼吸感
padding: 16px 24px;
box-sizing: border-box;
background-color: #fff; // 确保有纯白背景，防止透出底色显得贴边
}
.approval-history-filter {
margin-bottom: 8px;
padding: 4px 0;
}
.approval-history-filter {
margin-bottom: 16px; // 2. 增加过滤栏和下方表格的间距
padding: 12px 16px;
background-color: #fafafa; // 3. 给过滤区域加一个浅色微背景框，视觉上更有层次感
border-radius: 4px;
}
.approval-history-filter__dept {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
line-height: 24px;
}
.approval-history-filter__main {
display: flex;
align-items: flex-start;
gap: 8px;
}
.approval-history-filter__dept-text {
color: rgba(0, 0, 0, 0.85);
}
.approval-history-filter__label {
flex: 0 0 auto;
line-height: 32px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500; // 稍微加粗标签
}
.approval-history-filter__assignee-btn {
margin-left: auto;
}
.approval-history-filter__checkboxes {
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 6px 12px;
min-width: 0;
padding-top: 5px;
.approval-history-filter__main {
display: flex;
align-items: flex-start;
gap: 8px;
:deep(.ant-checkbox-wrapper) {
margin-left: 0;
}
}
.approval-history-filter__label {
flex: 0 0 auto;
line-height: 32px;
color: rgba(0, 0, 0, 0.85);
}
.approval-history-filter__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
line-height: 32px;
}
.approval-history-filter__checkboxes {
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 6px 12px;
min-width: 0;
padding-top: 5px;
.approval-history-filter__dept {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px; // 稍微拉开上下两排过滤器的距离
line-height: 24px;
border-top: 1px dashed #f0f0f0; // 加一条虚线分割，更美观
padding-top: 12px;
}
:deep(.ant-checkbox-wrapper) {
margin-left: 0;
}
}
.approval-history-filter__dept-text {
color: rgba(0, 0, 0, 0.85);
}
.approval-history-filter__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
line-height: 32px;
}
.approval-history-filter__assignee-btn {
margin-left: auto;
}
</style>