cuihongwei/QingAnVue2TV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tighten equipment status layout

Browse Source
This commit is contained in:
Cui Hongwei
2026-07-19 10:32:53 +08:00
parent 1c5a2e5b7c
commit cbe3cae3bd
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/qingAn.vue
View File

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