style:产线运行看板大屏-任务列表、能耗监测样式优化

main
黄伟杰 6 days ago
parent 4ba8cc96bf
commit 0aeb381c76

@ -7,18 +7,9 @@
</div>
<div class="tabs">
<el-select
v-model="selectedEnergyTypeId"
placeholder="请选择"
style="width: 120px"
size="small"
@change="getChartData"
>
<el-option
v-for="item in energyTypes"
:key="item.id"
:label="item.name"
:value="item.id"
/>
v-model="selectedEnergyTypeId" placeholder="请选择" style="width: 120px" size="small"
@change="getChartData">
<el-option v-for="item in energyTypes" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</div>
@ -142,22 +133,24 @@ onUnmounted(() => {
background-color: rgba(2, 6, 23, 0.3);
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4) inset;
}
:deep(.el-select .el-input__inner) {
color: #e5f0ff;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.9) inset !important;
}
.card {
height: 100%;
background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));
border-radius: 8px;
border: 1px solid rgba(30,64,175,0.85);
border: 1px solid rgba(30, 64, 175, 0.85);
box-shadow:
0 18px 45px rgba(15,23,42,0.95),
0 0 0 1px rgba(15,23,42,1),
inset 0 0 0 1px rgba(56,189,248,0.05);
0 18px 45px rgba(15, 23, 42, 0.95),
0 0 0 1px rgba(15, 23, 42, 1),
inset 0 0 0 1px rgba(56, 189, 248, 0.05);
position: relative;
display: flex;
flex-direction: column;
@ -172,7 +165,7 @@ onUnmounted(() => {
width: 12px;
height: 12px;
border-radius: 2px;
border: 1px solid rgba(56,189,248,0.75);
border: 1px solid rgba(56, 189, 248, 0.75);
opacity: 0.6;
pointer-events: none;
}
@ -216,8 +209,8 @@ onUnmounted(() => {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(56,189,248,0.95);
box-shadow: 0 0 12px rgba(56,189,248,0.45);
border: 1px solid rgba(56, 189, 248, 0.95);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}
.tabs {
@ -226,7 +219,7 @@ onUnmounted(() => {
gap: 10px;
font-size: 11px;
font-weight: 600;
color: rgba(148,163,184,0.95);
color: rgba(148, 163, 184, 0.95);
}
.tab {
@ -234,14 +227,14 @@ onUnmounted(() => {
user-select: none;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(148,163,184,0.4);
background: rgba(2,6,23,0.2);
border: 1px solid rgba(148, 163, 184, 0.4);
background: rgba(2, 6, 23, 0.2);
}
.tab.active {
border-color: rgba(56,189,248,0.85);
border-color: rgba(56, 189, 248, 0.85);
color: #e0f2fe;
box-shadow: 0 0 14px rgba(56,189,248,0.35);
box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}
.panel-body {
@ -255,4 +248,15 @@ onUnmounted(() => {
height: 100%;
min-height: 160px;
}
:deep(.el-select__wrapper) {
background-color: transparent;
border: 1px solid rgba(56, 189, 248, 0.55);
box-shadow: 0 0 18px rgba(56, 189, 248, 0.35);
color: #94a3b8;
}
:deep(.el-select__placeholder) {
color: #94a3b8;
}
</style>

@ -234,10 +234,13 @@ onUnmounted(() => {
.table-body {
padding: 0;
overflow-x: auto;
overflow-y: hidden;
}
.task-table {
width: 100%;
min-width: 450px;
font-size: 12px;
/* Element Plus Table Variables Override */
--el-table-bg-color: transparent;
@ -260,6 +263,22 @@ onUnmounted(() => {
display: none;
}
/* 横向滚动条样式,贴合深色大屏风格,仅在任务列表区域生效 */
.table-body::-webkit-scrollbar {
height: 6px;
}
.table-body::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.9);
border-radius: 999px;
}
.table-body::-webkit-scrollbar-thumb {
background: linear-gradient(to right, rgba(56, 189, 248, 0.85), rgba(59, 130, 246, 0.8));
border-radius: 999px;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
/* Header Styles */
.task-table :deep(thead th.el-table__cell) {
background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 90%) !important;

Loading…
Cancel
Save