Fix Bug #568: 修复门诊日结页面排版混乱 - 使用Grid布局确保标签值对齐
根因: 1. repeat(auto-fit, minmax(220px, 1fr)) 导致列数不可预测(1200px容器可能产生5列) 2. .report-item 使用 flex 布局,不同行的标签宽度不一致导致对不齐 3. .label 固定 width: 140px 无法适配所有中文标签长度 修复: 1. 改用 repeat(4, 1fr) 确保固定4列布局,span-2 正常工作 2. .report-item 改用 display: grid + grid-template-columns: 120px 1fr, 标签列统一120px宽度,所有标签值对齐 3. .label 移除固定宽度,由Grid自动对齐 4. 移动端响应式使用 grid-template-columns: 100px 1fr 适配 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -298,30 +298,31 @@ getPharmacyCabinetLists();
|
|||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
.cols-4 {
|
.cols-4 {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
grid-template-columns: repeat(4, 1fr);
|
||||||
}
|
}
|
||||||
.span-2 {
|
.span-2 {
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
.report-item {
|
.report-item {
|
||||||
display: flex;
|
display: grid;
|
||||||
align-items: center;
|
grid-template-columns: 120px 1fr;
|
||||||
|
align-items: baseline;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
display: inline-block;
|
|
||||||
width: 140px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: #606266;
|
color: #606266;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
padding-right: 4px;
|
||||||
}
|
}
|
||||||
.value {
|
.value {
|
||||||
color: #303133;
|
color: #303133;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex: 1;
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.divider {
|
.divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
@@ -343,8 +344,8 @@ getPharmacyCabinetLists();
|
|||||||
.span-2 {
|
.span-2 {
|
||||||
grid-column: span 1;
|
grid-column: span 1;
|
||||||
}
|
}
|
||||||
.label {
|
.report-item {
|
||||||
width: 100px;
|
grid-template-columns: 100px 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user