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

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

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

@ -234,10 +234,13 @@ onUnmounted(() => {
.table-body { .table-body {
padding: 0; padding: 0;
overflow-x: auto;
overflow-y: hidden;
} }
.task-table { .task-table {
width: 100%; width: 100%;
min-width: 450px;
font-size: 12px; font-size: 12px;
/* Element Plus Table Variables Override */ /* Element Plus Table Variables Override */
--el-table-bg-color: transparent; --el-table-bg-color: transparent;
@ -260,6 +263,22 @@ onUnmounted(() => {
display: none; 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 */ /* Header Styles */
.task-table :deep(thead th.el-table__cell) { .task-table :deep(thead th.el-table__cell) {
background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 90%) !important; background: radial-gradient(circle at 0 0, rgba(56,189,248,0.18), transparent 90%) !important;

Loading…
Cancel
Save