fix: tighten equipment status layout

This commit is contained in:
Cui Hongwei
2026-07-19 10:32:53 +08:00
parent 1c5a2e5b7c
commit cbe3cae3bd

View File

@@ -133,7 +133,6 @@
<div class="qa-panel-body equipment-body">
<div class="equipment-head">
<span>设备</span>
<span>产量</span>
<span>联动信号</span>
<span>状态</span>
</div>
@@ -147,7 +146,6 @@
:class="{ 'equipment-row--alarm': item.type === 'alarm' }"
>
<strong class="equipment-name">{{ item.name }}</strong>
<span class="equipment-count">{{ item.actual }}</span>
<div class="equipment-tags">
<span v-for="tag in item.tags" :key="tag.text" class="status-pill status-pill--compact" :class="`status-pill--${tag.type}`">
{{ tag.text }}
@@ -2428,7 +2426,7 @@ body,
.equipment-head,
.equipment-row {
display: grid;
grid-template-columns: 68px 56px minmax(104px, 1fr) 50px;
grid-template-columns: 112px minmax(128px, 1fr) 50px;
align-items: center;
gap: 8px;
}
@@ -2510,9 +2508,9 @@ body,
.assist-head,
.assist-status-row {
display: grid;
grid-template-columns: 118px minmax(108px, 1fr) 50px;
grid-template-columns: 86px minmax(0, 1fr) 52px;
align-items: center;
gap: 8px;
gap: 6px;
}
.assist-head {
@@ -2539,7 +2537,7 @@ body,
.assist-status-row {
position: relative;
min-height: 0;
padding: 0 8px;
padding: 0 6px;
border: 1px solid rgba(114, 206, 255, 0.18);
background:
linear-gradient(180deg, rgba(20, 42, 62, 0.58), rgba(4, 14, 27, 0.72)),
@@ -2559,16 +2557,30 @@ body,
}
.assist-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
min-width: 0;
overflow: hidden;
}
.assist-tags .status-pill {
min-width: 0;
width: 100%;
padding-left: 3px;
padding-right: 3px;
font-size: 10px;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.assist-status {
justify-self: end;
min-width: 40px;
min-width: 0;
width: 100%;
padding-left: 4px;
padding-right: 4px;
}
.storage-groups {