Fix Bug #568: 修复门诊日结页面排版混乱问题 - 使用CSS Grid确保列对齐

- 使用 CSS Grid (grid-template-columns: repeat(4, 1fr)) 替代 flexbox
- 确保所有行的列宽一致,解决3项行与4项行不对齐问题
- 固定 label 宽度为 120px,保持标签对齐
- 移除 flex-wrap,使用网格布局自动换行

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-22 10:32:05 +08:00
parent 0a4b901300
commit c11fe3f0af

View File

@@ -275,23 +275,22 @@ getPharmacyCabinetLists();
margin: 16px 0;
}
.report-row {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 12px 0;
gap: 8px 0;
gap: 8px 16px;
}
.report-item {
flex: 1;
display: flex;
align-items: center;
box-sizing: border-box;
padding-right: 16px;
margin-bottom: 8px;
}
.label {
display: inline-block;
width: 120px;
flex-shrink: 0;
color: #606266;
white-space: nowrap;
min-width: 100px;
text-align: right;
}
.value {