feat：模具管理-维修单添加结果列

src/api/mold/moldrepair/index.ts

@@ -50,6 +50,10 @@ export const MoldRepairApi = {
     return await request.download({ url: `/mes/mold-repair/export-excel`, params })
   },
 
+  updateMoldRepairStatus: async (data: any) => {
+    return await request.put({ url: `/mes/mold-repair/updateMoldRepairStatus`, data })
+  },
+
   getMoldRepairLineListByRepairId: async (repairId) => {
     return await request.get({ url: `/mes/mold-repair/mold-repair-line/list-by-repair-id?repairId=` + repairId })
   },

src/locales/en.ts

@@ -1886,6 +1886,10 @@ export default {
       finishDate: 'Finish Date',
       confirmDate: 'Acceptance Date',
       repairResult: 'Repair Result',
+      repairResultPending: 'Pending Repair',
+      repairResultOk: 'Pass',
+      repairResultNg: 'Fail',
+      repairStatus: 'Result',
       status: 'Order Status',
       statusPending: 'Pending',
       statusDone: 'Completed',
@@ -1942,10 +1946,15 @@ export default {
       subjectCode: 'Repair Code',
       subjectName: 'Repair Name',
       subjectContent: 'Repair Content',
+      remark: 'Remark',
+      result: 'Result',
+      resultOk: 'Pass',
+      resultNg: 'Fail',
       addLine: 'Add Repair Item',
       placeholderSubjectCode: 'Please input repair code',
       placeholderSubjectName: 'Please input repair name',
       placeholderSubjectContent: 'Please input repair content',
+      placeholderRemark: 'Please input remark',
       validatorRepairIdRequired: 'Repair order id can not be empty',
       validatorSubjectIdRequired: 'Item id can not be empty',
       validatorSubjectCodeRequired: 'Item code can not be empty',

src/locales/zh-CN.ts

@@ -1468,6 +1468,10 @@ export default {
       finishDate: '完成日期',
       confirmDate: '验收日期',
       repairResult: '维修结果',
+      repairResultPending: '待维修',
+      repairResultOk: '通过',
+      repairResultNg: '不通过',
+      repairStatus: '结果',
       status: '单据状态',
       statusPending: '待完成',
       statusDone: '已完成',
@@ -1524,10 +1528,15 @@ export default {
       subjectCode: '维修编码',
       subjectName: '维修名称',
       subjectContent: '维修内容',
+      remark: '备注',
+      result: '结果',
+      resultOk: '通过',
+      resultNg: '不通过',
       addLine: '添加维修项目',
       placeholderSubjectCode: '请输入维修编码',
       placeholderSubjectName: '请输入维修名称',
       placeholderSubjectContent: '请输入维修内容',
+      placeholderRemark: '请输入备注',
       validatorRepairIdRequired: '维修单ID不能为空',
       validatorSubjectIdRequired: '项目ID不能为空',
       validatorSubjectCodeRequired: '项目编码不能为空',

src/views/Home/Index.vue

@@ -766,6 +766,24 @@ const getKanban = async () => {
 getAllApi()
 </script>
 <style scoped>
+
+
+@media (width <= 768px) {
+	.home-welcome {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.home-welcome-left {
+		max-width: 100%;
+		margin-bottom: 12px;
+	}
+
+	.home-welcome-right img {
+		width: 100%;
+	}
+}
+
 .home-page {
 	display: flex;
 	flex-direction: column;
@@ -945,10 +963,12 @@ getAllApi()
 	top: 50%;
 	transform: translateY(-50%);
 }
+
 /* 左箭头往右移动 */
 .progress-carousel :deep(.el-carousel__arrow--left) {
   transform: translate(30px, -50%); /* X轴移动30px，Y轴居中 */
 }
+
 /* 右箭头往左移动 */
 .progress-carousel :deep(.el-carousel__arrow--right) {
   transform: translate(-30px, -50%); /* X轴移动-30px，Y轴居中 */
@@ -1055,20 +1075,4 @@ getAllApi()
 	font-size: 12px;
 	color: #909399;
 }
-
-@media (width <= 768px) {
-	.home-welcome {
-		flex-direction: column;
-		align-items: flex-start;
-	}
-
-	.home-welcome-left {
-		max-width: 100%;
-		margin-bottom: 12px;
-	}
-
-	.home-welcome-right img {
-		width: 100%;
-	}
-}
 </style>

src/views/mold/moldrepair/MoldRepairForm.vue

@@ -115,7 +115,7 @@
     </el-form>
     <el-tabs v-model="subTabsName">
       <el-tab-pane :label="t('MoldManagement.MoldRepair.tabMoldRepairLine')" name="moldRepairLine">
-        <MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" />
+        <MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" :line-mode="lineMode" />
       </el-tab-pane>
     </el-tabs>
     <template #footer>
@@ -168,6 +168,17 @@ const moldLoading = ref(false)
 const moldOptions = ref<{ label: string; value: number; raw?: MoldVO }[]>([])
 const moldOptionsLoaded = ref(false)
 
+const lineMode = computed(() => {
+  if (formType.value === 'repair') return 'repair' as const
+  if (formType.value === 'update') {
+    const v = formData.value.status === '' || formData.value.status === null || formData.value.status === undefined
+      ? undefined
+      : String(formData.value.status)
+    if (v === '1') return 'readonlyWithResult' as const
+  }
+  return 'edit' as const
+})
+
 const users = ref<UserVO[]>([])
 
 const ensureUsersLoaded = async () => {
@@ -244,6 +255,54 @@ const formRules = reactive({
   repairCode: [{ required: true, message: t('MoldManagement.MoldRepair.validatorRepairCodeRequired'), trigger: 'blur' }],
   repairName: [{ required: true, message: t('MoldManagement.MoldRepair.validatorRepairNameRequired'), trigger: 'blur' }],
   moldId: [{ required: true, message: t('MoldManagement.MoldRepair.validatorMoldRequired'), trigger: 'change' }],
+  requireDate: [
+    {
+      validator: (_: any, value: any, callback: any) => {
+        if (formType.value === 'repair' && !value) {
+          callback(new Error(t('MoldManagement.MoldRepair.validatorRequireDateRequired')))
+          return
+        }
+        callback()
+      },
+      trigger: 'change',
+    },
+  ],
+  finishDate: [
+    {
+      validator: (_: any, value: any, callback: any) => {
+        if (formType.value === 'repair' && !value) {
+          callback(new Error(t('MoldManagement.MoldRepair.validatorFinishDateRequired')))
+          return
+        }
+        callback()
+      },
+      trigger: 'change',
+    },
+  ],
+  confirmDate: [
+    {
+      validator: (_: any, value: any, callback: any) => {
+        if (formType.value === 'repair' && !value) {
+          callback(new Error(t('MoldManagement.MoldRepair.validatorConfirmDateRequired')))
+          return
+        }
+        callback()
+      },
+      trigger: 'change',
+    },
+  ],
+  repairResult: [
+    {
+      validator: (_: any, value: any, callback: any) => {
+        if (formType.value === 'repair' && !value) {
+          callback(new Error(t('MoldManagement.MoldRepair.validatorRepairResultRequired')))
+          return
+        }
+        callback()
+      },
+      trigger: 'blur',
+    },
+  ],
 })
 const formRef = ref()
 
@@ -379,7 +438,25 @@ const submitForm = async () => {
       ;(data as any).status = 1
     }
     ;(data as any).moldId = formData.value.moldId
-    ;(data as any).moldRepairLines = moldRepairLineFormRef.value.getData()
+    const lineList = moldRepairLineFormRef.value.getData() || []
+
+    if (formType.value === 'repair') {
+      const requireDate = (data as any).requireDate
+      const finishDate = (data as any).finishDate
+      const confirmDate = (data as any).confirmDate
+      const repairResult = (data as any).repairResult
+      const updateReqVOList = lineList
+      await MoldRepairApi.updateMoldRepairStatus({
+        id: (data as any).id,
+        requireDate,
+        finishDate,
+        confirmDate,
+        repairResult,
+        updateReqVOList,
+      })
+      message.success(t('common.updateSuccess'))
+    } else {
+      ;(data as any).moldRepairLines = lineList
       if (formType.value === 'create') {
         await MoldRepairApi.createMoldRepair(data)
         message.success(t('common.createSuccess'))
@@ -387,6 +464,7 @@ const submitForm = async () => {
         await MoldRepairApi.updateMoldRepair(data)
         message.success(t('common.updateSuccess'))
       }
+    }
     dialogVisible.value = false
     emit('success')
   } finally {

src/views/mold/moldrepair/components/MoldRepairLineForm.vue

@@ -40,6 +40,35 @@
           </el-form-item>
         </template>
       </el-table-column>
+      <el-table-column
+        v-if="props.lineMode === 'repair' || props.lineMode === 'readonlyWithResult'"
+        :label="t('MoldManagement.MoldRepairLine.remark')"
+        min-width="180"
+      >
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.remark`" :rules="formRules.remark" class="mb-0px!">
+            <el-input
+              v-model="row.remark"
+              :placeholder="t('MoldManagement.MoldRepairLine.placeholderRemark')"
+              :disabled="props.lineMode !== 'repair'"
+            />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="props.lineMode === 'repair' || props.lineMode === 'readonlyWithResult'"
+        :label="t('MoldManagement.MoldRepairLine.result')"
+        min-width="170"
+      >
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.result`" :rules="formRules.result" class="mb-0px!">
+            <el-radio-group v-model="row.result" :disabled="props.lineMode !== 'repair'">
+              <el-radio :value="1">{{ t('MoldManagement.MoldRepairLine.resultOk') }}</el-radio>
+              <el-radio :value="2">{{ t('MoldManagement.MoldRepairLine.resultNg') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </template>
+      </el-table-column>
     </el-table>
   </el-form>
   <el-row justify="center" class="mt-3">
@@ -53,6 +82,7 @@ const { t } = useI18n()
 
 const props = defineProps<{
   repairId: undefined
+  lineMode?: 'edit' | 'repair' | 'readonlyWithResult'
 }>()
 const formLoading = ref(false)
 const formData = ref([])
@@ -61,6 +91,30 @@ const formRules = reactive({
   subjectId: [{ required: true, message: t('MoldManagement.MoldRepairLine.validatorSubjectIdRequired'), trigger: 'blur' }],
   subjectCode: [{ required: true, message: t('MoldManagement.MoldRepairLine.validatorSubjectCodeRequired'), trigger: 'blur' }],
   subjectContent: [{ required: true, message: t('MoldManagement.MoldRepairLine.validatorSubjectContentRequired'), trigger: 'blur' }],
+  remark: [
+    {
+      validator: (_: any, value: any, callback: any) => {
+        if (props.lineMode === 'repair' && !value) {
+          callback(new Error(t('MoldManagement.MoldRepairLine.validatorRemarkRequired')))
+          return
+        }
+        callback()
+      },
+      trigger: 'blur',
+    },
+  ],
+  result: [
+    {
+      validator: (_: any, value: any, callback: any) => {
+        if (props.lineMode === 'repair' && (value === undefined || value === null || value === '')) {
+          callback(new Error(t('MoldManagement.MoldRepairLine.validatorResultRequired')))
+          return
+        }
+        callback()
+      },
+      trigger: 'change',
+    },
+  ],
 })
 const formRef = ref()
 
@@ -95,6 +149,7 @@ const handleAdd = () => {
     malfunctionUrl: undefined,
     repairDes: undefined,
     remark: undefined,
+    result: undefined,
   }
   row.repairId = props.repairId
   formData.value.push(row)

src/views/mold/moldrepair/index.vue

@@ -137,6 +137,13 @@
         :formatter="dateFormatter2" min-width="130"
       />
       <el-table-column :label="t('MoldManagement.MoldRepair.repairResult')" align="center" prop="repairResult" min-width="160" />
+      <el-table-column :label="t('MoldManagement.MoldRepair.repairStatus')" align="center" prop="repairStatus" min-width="120">
+        <template #default="scope">
+          <el-tag :type="getResultTagType(scope.row.repairStatus)" effect="light">
+            {{ getResultLabel(scope.row.repairStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
       <el-table-column :label="t('MoldManagement.MoldRepair.acceptUser')" align="center" prop="acceptedBy" min-width="140" />
       <el-table-column :label="t('MoldManagement.MoldRepair.confirmUserShort')" align="center" prop="confirmBy" min-width="140" />
       <el-table-column :label="t('MoldManagement.MoldRepair.status')" align="center" prop="status" min-width="130">
@@ -220,6 +227,22 @@ const statusOptions = [
   { label: t('MoldManagement.MoldRepair.statusDone'), value: '1' }
 ]
 
+const getResultLabel = (value: any) => {
+  const v = value === '' || value === null || value === undefined ? undefined : String(value)
+  if (v === '0') return t('MoldManagement.MoldRepair.repairResultPending')
+  if (v === '1') return t('MoldManagement.MoldRepair.repairResultOk')
+  if (v === '2') return t('MoldManagement.MoldRepair.repairResultNg')
+  return '-'
+}
+
+const getResultTagType = (value: any) => {
+  const v = value === '' || value === null || value === undefined ? undefined : String(value)
+  if (v === '1') return 'success'
+  if (v === '2') return 'danger'
+  if (v === '0') return 'info'
+  return 'info'
+}
+
 const getStatusLabel = (value: any) => {
   const v = value === '' || value === null || value === undefined ? undefined : String(value)
   if (v === '0') return t('MoldManagement.MoldRepair.statusPending')

src/views/report/dashboardList/index.vue

@@ -516,21 +516,21 @@ onMounted(() => {
 }
 
 .dashboard-card-title {
+  margin-bottom: 4px;
+  overflow: hidden;
   font-size: 14px;
   font-weight: 600;
   color: var(--el-text-color-primary);
-  margin-bottom: 4px;
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .dashboard-card-remark {
+  overflow: hidden;
   font-size: 12px;
   color: var(--el-text-color-secondary);
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .dashboard-card-actions {

src/views/report/dashboardPage/dashboard1/components/DashboardHeader.vue

@@ -103,22 +103,22 @@ onUnmounted(() => {
 
 <style scoped>
 header {
-  height: var(--header-h);
   position: relative;
   z-index: 2;
   display: flex;
-  align-items: center;
+  height: var(--header-h);
   padding: 0 18px;
   background:
-    linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85)),
-    radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.22), transparent 60%);
-  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
-  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.9);
+    linear-gradient(to bottom, rgb(15 23 42 / 95%), rgb(15 23 42 / 85%)),
+    radial-gradient(circle at 50% 0, rgb(56 189 248 / 22%), transparent 60%);
+  border-bottom: 1px solid rgb(148 163 184 / 35%);
+  box-shadow: 0 10px 35px rgb(15 23 42 / 90%);
+  align-items: center;
 }
 
 .header-inner {
-  width: 100%;
   display: grid;
+  width: 100%;
   grid-template-columns: 320px 1fr 320px;
   align-items: center;
   gap: 12px;
@@ -134,8 +134,8 @@ header {
 .time {
   font-size: 22px;
   font-weight: 800;
-  color: #e0f2fe;
   letter-spacing: 1px;
+  color: #e0f2fe;
 }
 
 .date {
@@ -153,9 +153,9 @@ header {
 
 .title-wrap {
   position: relative;
+  display: flex;
   width: min(980px, 100%);
   height: 64px;
-  display: flex;
   align-items: center;
   justify-content: center;
 }
@@ -175,10 +175,10 @@ header {
   font-size: 28px;
   font-weight: 900;
   letter-spacing: 3px;
+  text-shadow: 0 0 20px rgb(56 189 248 / 65%);
   background: linear-gradient(to bottom, #e0f2fe, #60a5fa);
-  -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
-  text-shadow: 0 0 20px rgba(56, 189, 248, 0.65);
 }
 
 .header-right {
@@ -191,22 +191,22 @@ header {
 
 .back-btn {
   display: flex;
-  align-items: center;
-  gap: 6px;
   padding: 6px 16px;
-  border-radius: 4px;
-  background: rgba(30, 64, 175, 0.3);
-  border: 1px solid rgba(56, 189, 248, 0.3);
-  color: #e0f2fe;
   font-size: 14px;
+  color: #e0f2fe;
   cursor: pointer;
+  background: rgb(30 64 175 / 30%);
+  border: 1px solid rgb(56 189 248 / 30%);
+  border-radius: 4px;
   transition: all 0.3s;
+  align-items: center;
+  gap: 6px;
 }
 
 .back-btn:hover {
-  background: rgba(30, 64, 175, 0.6);
-  border-color: rgba(56, 189, 248, 0.8);
-  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
+  background: rgb(30 64 175 / 60%);
+  border-color: rgb(56 189 248 / 80%);
+  box-shadow: 0 0 10px rgb(56 189 248 / 40%);
 }
 
 .weather {
@@ -238,7 +238,7 @@ header {
   color: var(--muted);
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .title {
     font-size: 24px;
   }
@@ -252,7 +252,7 @@ header {
   }
 }
 
-@media (max-width: 1366px) {
+@media (width <= 1366px) {
   .title {
     font-size: 20px;
     letter-spacing: 3px;

src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue

@@ -141,31 +141,31 @@ onMounted(() => {
 
 <style scoped>
 .card {
+  position: relative;
+  display: flex;
   height: 100%;
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  min-height: 0;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
   border-radius: 8px;
-  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);
-  position: relative;
-  display: flex;
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
   flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 12px;
   height: 12px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -178,27 +178,27 @@ onMounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .panel-title {
   display: flex;
-  align-items: center;
-  gap: 10px;
   padding: 10px 12px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
   font-size: 16px;
   font-weight: 900;
   color: #e5f0ff;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
+  align-items: center;
+  gap: 10px;
 }
 
 .title-dot {
   width: 10px;
   height: 10px;
+  border: 1px solid rgb(56 189 248 / 95%);
   border-radius: 50%;
-  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 rgb(56 189 248 / 45%);
 }
 
 .panel-body {
@@ -222,23 +222,23 @@ onMounted(() => {
 .gauge {
   width: 110px;
   height: 110px;
-  border-radius: 50%;
   padding: 8px;
+  border-radius: 50%;
   box-sizing: border-box;
 }
 
 .gauge-inner {
+  display: flex;
   width: 100%;
   height: 100%;
+  text-align: center;
+  background: rgb(2 6 23 / 92%);
+  border: 1px solid rgb(148 163 184 / 25%);
   border-radius: 50%;
-  background: rgba(2,6,23,0.92);
-  border: 1px solid rgba(148,163,184,0.25);
-  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
-  text-align: center;
 }
 
 .gauge-value {
@@ -249,10 +249,10 @@ onMounted(() => {
 
 .gauge-label {
   font-size: 11px;
-  color: rgba(148,163,184,0.95);
+  color: rgb(148 163 184 / 95%);
 }
 
-@media (max-width: 1366px) {
+@media (width <= 1366px) {
   .gauge {
     width: 96px;
     height: 96px;

src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue

@@ -134,8 +134,8 @@ onUnmounted(() => {
 
 <style scoped>
 :deep(.el-select .el-input__wrapper) {
-  background-color: rgba(2, 6, 23, 0.3);
-  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4) inset;
+  background-color: rgb(2 6 23 / 30%);
+  box-shadow: 0 0 0 1px rgb(56 189 248 / 40%) inset;
 }
 
 :deep(.el-select .el-input__inner) {
@@ -143,35 +143,35 @@ onUnmounted(() => {
 }
 
 :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 rgb(56 189 248 / 90%) inset !important;
 }
 
 .card {
+  position: relative;
+  display: flex;
   height: 100%;
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));
+  min-height: 0;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
   border-radius: 8px;
-  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);
-  position: relative;
-  display: flex;
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
   flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 12px;
   height: 12px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56, 189, 248, 0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -184,19 +184,19 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .panel-title {
   display: flex;
-  align-items: center;
-  gap: 10px;
   padding: 10px 12px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
   font-size: 16px;
   font-weight: 900;
   color: #e5f0ff;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
+  align-items: center;
+  gap: 10px;
 }
 
 .panel-title-between {
@@ -212,9 +212,9 @@ onUnmounted(() => {
 .title-dot {
   width: 10px;
   height: 10px;
+  border: 1px solid rgb(56 189 248 / 95%);
   border-radius: 50%;
-  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 rgb(56 189 248 / 45%);
 }
 
 .tabs {
@@ -223,22 +223,22 @@ onUnmounted(() => {
   gap: 10px;
   font-size: 11px;
   font-weight: 600;
-  color: rgba(148, 163, 184, 0.95);
+  color: rgb(148 163 184 / 95%);
 }
 
 .tab {
-  cursor: pointer;
-  user-select: none;
   padding: 2px 8px;
+  cursor: pointer;
+  background: rgb(2 6 23 / 20%);
+  border: 1px solid rgb(148 163 184 / 40%);
   border-radius: 999px;
-  border: 1px solid rgba(148, 163, 184, 0.4);
-  background: rgba(2, 6, 23, 0.2);
+  user-select: none;
 }
 
 .tab.active {
-  border-color: rgba(56, 189, 248, 0.85);
   color: #e0f2fe;
-  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
+  border-color: rgb(56 189 248 / 85%);
+  box-shadow: 0 0 14px rgb(56 189 248 / 35%);
 }
 
 .panel-body {
@@ -254,10 +254,10 @@ onUnmounted(() => {
 }
 
 :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;
+  background-color: transparent;
+  border: 1px solid rgb(56 189 248 / 55%);
+  box-shadow: 0 0 18px rgb(56 189 248 / 35%);
 }
 
 :deep(.el-select__placeholder) {

src/views/report/dashboardPage/dashboard1/components/EventReminder.vue

@@ -177,31 +177,31 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
+  position: relative;
+  display: flex;
   height: 100%;
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  min-height: 0;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
   border-radius: 8px;
-  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);
-  position: relative;
-  display: flex;
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
   flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 12px;
   height: 12px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -214,20 +214,20 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .panel-title {
 	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 10px;
 	padding: 10px 12px;
-	border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 	font-size: 16px;
 	font-weight: 900;
 	color: #e5f0ff;
+	border-bottom: 1px solid rgb(41 54 95 / 90%);
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
 }
 
 .panel-title-left {
@@ -238,12 +238,12 @@ onUnmounted(() => {
 
 .panel-title-right {
 	display: inline-flex;
-	align-items: center;
-	gap: 6px;
 	padding: 2px 4px;
+	background: radial-gradient(circle at 0 0, rgb(56 189 248 / 18%), transparent 70%);
+	border: 1px solid rgb(56 189 248 / 50%);
 	border-radius: 999px;
-	border: 1px solid rgba(56, 189, 248, 0.5);
-	background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 70%);
+	align-items: center;
+	gap: 6px;
 }
 
 .panel-title-right :deep(.el-radio-group) {
@@ -251,27 +251,27 @@ onUnmounted(() => {
 }
 
 .panel-title-right :deep(.el-radio-button__inner) {
-	border: none;
-	box-shadow: none;
-	background: transparent;
-	color: rgba(148, 163, 184, 0.95);
 	padding: 4px 10px;
 	font-size: 12px;
+	color: rgb(148 163 184 / 95%);
+	background: transparent;
+	border: none;
+	box-shadow: none;
 }
 
 .panel-title-right :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
-	background: rgba(15, 23, 42, 0.9);
 	color: #e5f0ff;
-	box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.85);
+	background: rgb(15 23 42 / 90%);
 	border-radius: 999px;
+	box-shadow: 0 0 0 1px rgb(56 189 248 / 85%);
 }
 
 .title-dot {
   width: 10px;
   height: 10px;
+  border: 1px solid rgb(56 189 248 / 95%);
   border-radius: 50%;
-  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 rgb(56 189 248 / 45%);
 }
 
 .panel-body {
@@ -295,12 +295,12 @@ onUnmounted(() => {
 
 .event-row {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
   padding: 8px 10px;
+  background: rgb(15 23 42 / 70%);
+  border: 1px solid rgb(30 64 175 / 70%);
   border-radius: 6px;
-  border: 1px solid rgba(30,64,175,0.7);
-  background: rgba(15,23,42,0.7);
+  align-items: center;
+  justify-content: space-between;
 }
 
 .event-name {
@@ -314,8 +314,8 @@ onUnmounted(() => {
 .event-bullet {
   width: 12px;
   height: 12px;
-  border-radius: 50%;
   border: 3px solid;
+  border-radius: 50%;
   box-sizing: border-box;
 }
 
@@ -325,19 +325,19 @@ onUnmounted(() => {
 }
 
 .event-chart {
+  display: flex;
   height: 100%;
   min-height: 170px;
-  display: flex;
   min-height: 0;
 }
 
 .chart-container {
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
+  min-height: 0;
   align-items: center;
   justify-content: center;
-  min-height: 0;
 }
 
 .chart {
@@ -345,7 +345,7 @@ onUnmounted(() => {
   height: 100%;
 }
 
-@media (max-width: 1366px) {
+@media (width <= 1366px) {
   .body {
     grid-template-columns: 0.8fr 1.2fr;
   }

src/views/report/dashboardPage/dashboard1/components/PaymentMethod.vue

@@ -108,29 +108,29 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  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);
-  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);
   position: relative;
   display: flex;
-  flex-direction: column;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 8px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 12px;
   height: 12px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -143,17 +143,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding: 10px 12px 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding: 10px 12px 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -170,61 +170,61 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  min-height: 0;
   padding: 10px 12px 12px;
   overflow: hidden;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148,163,184,0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .alarm-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
-  flex-direction: column;
-  gap: 6px;
   height: 100%;
+  padding: 0;
+  margin: 0;
   overflow: hidden;
+  list-style: none;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .alarm-item {
   display: flex;
-  align-items: center;
-  gap: 8px;
   padding: 7px 8px;
-  border-radius: 6px;
-  background: rgba(15,23,42,0.92);
-  border: 1px solid rgba(30,64,175,0.9);
   font-size: 11px;
   color: #e5f0ff;
+  background: rgb(15 23 42 / 92%);
+  border: 1px solid rgb(30 64 175 / 90%);
+  border-radius: 6px;
   transition: background 0.3s, box-shadow 0.3s;
+  align-items: center;
+  gap: 8px;
   flex-shrink: 0;
 }
 
 .alarm-item.danger {
   border-left: 3px solid #ef4444;
-  box-shadow: 0 0 18px rgba(239,68,68,0.4);
+  box-shadow: 0 0 18px rgb(239 68 68 / 40%);
 }
 
 .alarm-item.warn {
   border-left: 3px solid #f59e0b;
-  box-shadow: 0 0 14px rgba(245,158,11,0.35);
+  box-shadow: 0 0 14px rgb(245 158 11 / 35%);
 }
 
 .alarm-item.safe {
   border-left: 3px solid #22c55e;
-  box-shadow: 0 0 12px rgba(34,197,94,0.35);
+  box-shadow: 0 0 12px rgb(34 197 94 / 35%);
 }
 
 .alarm-time {
@@ -234,23 +234,23 @@ onUnmounted(() => {
 }
 
 .alarm-msg {
-  flex: 1;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
 }
 
 .alarm-level {
-  flex: 0 0 auto;
-  border-radius: 999px;
   padding: 2px 6px;
-  border: 1px solid rgba(148,163,184,0.6);
   font-size: 10px;
+  border: 1px solid rgb(148 163 184 / 60%);
+  border-radius: 999px;
+  flex: 0 0 auto;
 }
 
 .animating-out {
-  transition: all 0.35s;
-  transform: translateY(-48px);
   opacity: 0;
+  transform: translateY(-48px);
+  transition: all 0.35s;
 }
 </style>

src/views/report/dashboardPage/dashboard1/components/ProductionTrend.vue

@@ -104,31 +104,31 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
+  position: relative;
+  display: flex;
   height: 100%;
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  min-height: 0;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
   border-radius: 8px;
-  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);
-  position: relative;
-  display: flex;
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
   flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 12px;
   height: 12px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -141,38 +141,38 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .panel-title {
   display: flex;
-  align-items: center;
-  gap: 10px;
   padding: 10px 12px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
   font-size: 16px;
   font-weight: 900;
   color: #e5f0ff;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
+  align-items: center;
+  gap: 10px;
 }
 
 .title-dot {
   width: 10px;
   height: 10px;
+  border: 1px solid rgb(56 189 248 / 95%);
   border-radius: 50%;
-  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 rgb(56 189 248 / 45%);
 }
 
 .tag {
-  margin-left: auto;
-  border-radius: 999px;
   padding: 2px 8px;
+  margin-left: auto;
   font-size: 11px;
   font-weight: 700;
-  border: 1px solid rgba(148,163,184,0.4);
-  color: rgba(148,163,184,0.95);
-  background: rgba(2,6,23,0.2);
+  color: rgb(148 163 184 / 95%);
+  background: rgb(2 6 23 / 20%);
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .panel-body {

src/views/report/dashboardPage/dashboard1/components/TaskList.vue

@@ -171,31 +171,31 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
+  position: relative;
+  display: flex;
   height: 100%;
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
+  min-height: 0;
+  overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
   border-radius: 8px;
-  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);
-  position: relative;
-  display: flex;
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
   flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 12px;
   height: 12px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -208,27 +208,27 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .panel-title {
   display: flex;
-  align-items: center;
-  gap: 10px;
   padding: 10px 12px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
   font-size: 16px;
   font-weight: 900;
   color: #e5f0ff;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
+  align-items: center;
+  gap: 10px;
 }
 
 .title-dot {
   width: 10px;
   height: 10px;
+  border: 1px solid rgb(56 189 248 / 95%);
   border-radius: 50%;
-  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 rgb(56 189 248 / 45%);
 }
 
 .panel-body {
@@ -239,22 +239,22 @@ onUnmounted(() => {
 
 .table-body {
   padding: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
 }
 
 .task-table {
-  width: 100%;
-  min-width: 450px;
-  font-size: 12px;
   /* Element Plus Table Variables Override */
   --el-table-bg-color: transparent;
   --el-table-tr-bg-color: transparent;
   --el-table-header-bg-color: transparent;
   --el-table-text-color: #e5f0ff;
   --el-table-header-text-color: #22d3ee;
-  --el-table-row-hover-bg-color: rgba(56, 189, 248, 0.12);
-  --el-table-border-color: rgba(30, 64, 175, 0.3);
+  --el-table-row-hover-bg-color: rgb(56 189 248 / 12%);
+  --el-table-border-color: rgb(30 64 175 / 30%);
+
+  width: 100%;
+  min-width: 450px;
+  font-size: 12px;
   background-color: transparent !important;
 }
 
@@ -274,52 +274,52 @@ onUnmounted(() => {
 }
 
 .table-body::-webkit-scrollbar-track {
-  background: rgba(15, 23, 42, 0.9);
+  background: rgb(15 23 42 / 90%);
   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));
+  background: linear-gradient(to right, rgb(56 189 248 / 85%), rgb(59 130 246 / 80%));
   border-radius: 999px;
-  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
+  box-shadow: 0 0 10px rgb(56 189 248 / 40%);
 }
 
 /* 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;
-  font-weight: 700;
-  border-bottom: 1px solid rgba(51,65,85,0.9) !important;
   padding: 8px 0;
+  font-weight: 700;
+  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 18%), transparent 90%) !important;
+  border-bottom: 1px solid rgb(51 65 85 / 90%) !important;
 }
 
 /* Cell Styles */
 .task-table :deep(td.el-table__cell) {
-  background-color: transparent !important;
-  border-bottom: 1px solid rgba(30,64,175,0.3) !important;
   padding: 8px 0;
   white-space: nowrap;
+  background-color: transparent !important;
+  border-bottom: 1px solid rgb(30 64 175 / 30%) !important;
 }
 
 /* Ensure code, name, type columns show ellipsis */
 .task-table :deep(td.el-table__cell:nth-child(1) .cell),
 .task-table :deep(td.el-table__cell:nth-child(2) .cell),
 .task-table :deep(td.el-table__cell:nth-child(3) .cell) {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Ensure finishStatus and result columns DO NOT show ellipsis */
 .task-table :deep(td.el-table__cell:nth-child(4) .cell),
 .task-table :deep(td.el-table__cell:nth-child(5) .cell) {
-  white-space: nowrap;
   overflow: visible;
   text-overflow: clip;
+  white-space: nowrap;
 }
 
 /* Hover Styles */
 .task-table :deep(tbody tr:hover > td.el-table__cell) {
-  background-color: rgba(56,189,248,0.1) !important;
+  background-color: rgb(56 189 248 / 10%) !important;
 }
 
 .status-cell {
@@ -328,8 +328,8 @@ onUnmounted(() => {
 
 .status-tag {
 	min-width: 60px;
+	padding: 0 10px;
 	text-align: center;
 	border-radius: 999px;
-	padding: 0 10px;
 }
 </style>

src/views/report/dashboardPage/dashboard1/index.vue

@@ -160,12 +160,19 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* Define CSS Variables locally for this dashboard */
+
+
+@keyframes scanDown {
+  0% { transform: translateY(-100%); }
+
+  100% { transform: translateY(260%); }
+}
+
 .dashboard-container {
   --bg: #050816;
   --bg-deep: #020617;
-  --card-bg: rgba(15, 23, 42, 0.86);
-  --border: rgba(56, 189, 248, 0.35);
+  --card-bg: rgb(15 23 42 / 86%);
+  --border: rgb(56 189 248 / 35%);
   --text: #e5f0ff;
   --muted: #94a3b8;
   --primary: #38bdf8;
@@ -179,37 +186,37 @@ onMounted(() => {
   --header-h: 86px;
 
   position: relative;
+  display: flex;
   width: 100%;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", Arial, sans-serif;
   color: var(--text);
   background-color: var(--bg-deep);
   background-image:
-    radial-gradient(circle at 20% 0, rgba(56, 189, 248, 0.26) 0, transparent 48%),
-    radial-gradient(circle at 80% 110%, rgba(129, 140, 248, 0.22) 0, transparent 52%),
+    radial-gradient(circle at 20% 0, rgb(56 189 248 / 26%) 0, transparent 48%),
+    radial-gradient(circle at 80% 110%, rgb(129 140 248 / 22%) 0, transparent 52%),
     linear-gradient(135deg, #020617 0%, #020617 45%, #020617 100%);
+  flex-direction: column;
 }
 
 .bg-grid {
   position: absolute;
-  inset: 0;
+  z-index: 0;
   pointer-events: none;
-  background-image: linear-gradient(rgba(15,23,42,0.8) 1px, transparent 1px),
-                    linear-gradient(90deg, rgba(15,23,42,0.8) 1px, transparent 1px);
+  background-image: linear-gradient(rgb(15 23 42 / 80%) 1px, transparent 1px),
+                    linear-gradient(90deg, rgb(15 23 42 / 80%) 1px, transparent 1px);
   background-size: 70px 70px;
   opacity: 0.55;
-  z-index: 0;
+  inset: 0;
 }
 
 .bg-scan {
   position: absolute;
-  inset: 0;
+  z-index: 0;
   overflow: hidden;
   pointer-events: none;
-  z-index: 0;
+  inset: 0;
 }
 
 .scan-line {
@@ -218,37 +225,32 @@ onMounted(() => {
   left: 0;
   width: 100%;
   height: 40%;
-  background: radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.38), transparent 70%);
+  background: radial-gradient(circle at 50% 0, rgb(56 189 248 / 38%), transparent 70%);
   opacity: 0.5;
   filter: blur(32px);
   animation: scanDown 16s linear infinite;
 }
 
-@keyframes scanDown {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(260%); }
-}
-
 main {
-  height: calc(100vh - var(--header-h));
-  padding: var(--gap);
-  box-sizing: border-box;
   position: relative;
   z-index: 1;
   display: flex;
+  height: calc(100vh - var(--header-h));
+  min-height: 0;
+  padding: var(--gap);
+  box-sizing: border-box;
   flex-direction: column;
   gap: var(--gap);
-  min-height: 0;
 }
 
 .layout {
-  flex: 1;
-  height: 100%;
   display: flex;
-  flex-direction: column;
-  gap: var(--gap);
   width: 100%;
+  height: 100%;
   min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--gap);
 }
 
 .main-row {
@@ -258,17 +260,17 @@ main {
 }
 
 .col {
+  display: flex;
   height: 100%;
   min-height: 0;
-  display: flex;
   flex-direction: column;
   gap: var(--gap);
 }
 
 .col-item {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
 }
 
 .col-item :deep(> *) {
@@ -277,28 +279,28 @@ main {
 }
 
 .center-shell {
-  flex: 1;
-  min-height: 0;
+  position: relative; /* 用于定位内部绝对定位的设备卡片 */
   display: flex;
+  min-height: 0;
+  padding: 10px;
+  background: rgb(2 6 23 / 18%);
+  border: 1px solid rgb(30 64 175 / 55%);
+  border-radius: 8px;
+  flex: 1;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
-  border: 1px solid rgba(30,64,175,0.55);
-  background: rgba(2,6,23,0.18);
-  padding: 10px;
-  position: relative; /* 用于定位内部绝对定位的设备卡片 */
 }
 
 .device-card {
   position: absolute;
   width: 18%; /* 约占宽度的1/5，留出间隔 */
   min-width: 120px;
-  background: rgba(15, 23, 42, 0.85);
-  border: 1px solid rgba(56, 189, 248, 0.4);
-  border-radius: 6px;
   padding: 8px;
   color: #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  background: rgb(15 23 42 / 85%);
+  border: 1px solid rgb(56 189 248 / 40%);
+  border-radius: 6px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
 }
 
 .top-card {
@@ -311,19 +313,19 @@ main {
 
 .device-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgb(56 189 248 / 30%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 6px;
-  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
-  padding-bottom: 4px;
 }
 
 .header-left {
   display: flex;
-  align-items: center;
+  margin-right: 8px;
   overflow: hidden;
+  align-items: center;
   flex: 1;
-  margin-right: 8px;
 }
 
 .header-right {
@@ -333,20 +335,20 @@ main {
 .device-dot {
   width: 0;
   height: 0;
+  margin-right: 6px;
+  border-color: transparent transparent transparent #38bdf8;
   border-style: solid;
   border-width: 4px 0 4px 6px;
-  border-color: transparent transparent transparent #38bdf8;
-  margin-right: 6px;
   flex-shrink: 0;
 }
 
 .device-name {
+  overflow: hidden;
   font-size: 14px;
   font-weight: bold;
   color: #e5f0ff;
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .device-id {
@@ -355,10 +357,10 @@ main {
 }
 
 .device-body {
-  font-size: 12px;
   height: 100px; /* 固定高度，内容不足留白，内容多则滚动 */
-  overflow-y: auto; /* 启用垂直滚动 */
   padding-right: 4px; /* 防止滚动条遮挡内容 */
+  overflow-y: auto; /* 启用垂直滚动 */
+  font-size: 12px;
 }
 
 /* 滚动条样式 */
@@ -367,7 +369,7 @@ main {
 }
 
 .device-body::-webkit-scrollbar-thumb {
-  background: rgba(56, 189, 248, 0.3);
+  background: rgb(56 189 248 / 30%);
   border-radius: 2px;
 }
 
@@ -383,21 +385,21 @@ main {
 }
 
 .device-row .label {
-  color: #94a3b8;
+  max-width: 60%;
   margin-right: 8px;
-  white-space: nowrap;
   overflow: hidden;
+  color: #94a3b8;
   text-overflow: ellipsis;
-  max-width: 60%;
+  white-space: nowrap;
 }
 
 .device-row .value {
+  overflow: hidden;
   color: #cbd5e1;
   text-align: right;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
 }
 
 .dashboard-center-image {
@@ -406,4 +408,6 @@ main {
   object-fit: contain;
 }
 
+/* Define CSS Variables locally for this dashboard */
+
 </style>

src/views/report/dashboardPage/dashboard8/components/DashboardHeader.vue

@@ -64,24 +64,24 @@ onUnmounted(() => {
 
 <style scoped>
 header {
-  height: var(--header-h);
   position: relative;
   z-index: 2;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  height: var(--header-h);
   padding: 0 24px;
   background:
-    linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85)),
-    radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.22), transparent 60%);
-  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
-  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.9);
+    linear-gradient(to bottom, rgb(15 23 42 / 95%), rgb(15 23 42 / 85%)),
+    radial-gradient(circle at 50% 0, rgb(56 189 248 / 22%), transparent 60%);
+  border-bottom: 1px solid rgb(148 163 184 / 35%);
+  box-shadow: 0 10px 35px rgb(15 23 42 / 90%);
+  align-items: center;
+  justify-content: center;
 }
 
 .header-inner {
-  max-width: 1920px;
-  width: 100%;
   display: flex;
+  width: 100%;
+  max-width: 1920px;
   align-items: center;
   justify-content: space-between;
 }
@@ -93,37 +93,37 @@ header {
 }
 
 .title-mark {
+  display: flex;
   width: 42px;
   height: 42px;
+  background: radial-gradient(circle at 30% 30%, rgb(56 189 248 / 35%), transparent 70%);
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 50%;
-  border: 1px solid rgba(56, 189, 248, 0.75);
-  display: flex;
+  box-shadow: 0 0 24px rgb(56 189 248 / 55%);
   align-items: center;
   justify-content: center;
-  background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.35), transparent 70%);
-  box-shadow: 0 0 24px rgba(56, 189, 248, 0.55);
 }
 
 .title-mark-icon {
-  color: var(--accent);
   font-size: 20px;
+  color: var(--accent);
 }
 
 .title {
   font-size: 32px;
   font-weight: 900;
   letter-spacing: 4px;
+  text-shadow: 0 0 20px rgb(56 189 248 / 65%);
   background: linear-gradient(to bottom, #e0f2fe, #60a5fa);
-  -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
-  text-shadow: 0 0 20px rgba(56, 189, 248, 0.65);
 }
 
 .sub-title {
-  font-size: 12px;
-  color: var(--muted);
   margin-top: 3px;
+  font-size: 12px;
   letter-spacing: 2px;
+  color: var(--muted);
 }
 
 .header-right {
@@ -136,19 +136,19 @@ header {
 
 .back-btn {
   display: inline-flex;
-  align-items: center;
-  gap: 4px;
   padding: 4px 12px;
-  border-radius: 999px;
-  border-color: rgba(56, 189, 248, 0.85);
-  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.22), transparent 70%);
   color: #e0f2fe;
-  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
+  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 22%), transparent 70%);
+  border-color: rgb(56 189 248 / 85%);
+  border-radius: 999px;
+  box-shadow: 0 0 18px rgb(56 189 248 / 45%);
+  align-items: center;
+  gap: 4px;
 }
 
 .back-btn:hover {
-  border-color: rgba(96, 165, 250, 0.95);
-  background: radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.35), transparent 70%);
+  background: radial-gradient(circle at 0 0, rgb(59 130 246 / 35%), transparent 70%);
+  border-color: rgb(96 165 250 / 95%);
 }
 
 .back-icon {
@@ -157,13 +157,13 @@ header {
 }
 
 .chip {
-  border-radius: 999px;
-  border: 1px solid rgba(148, 163, 184, 0.5);
-  padding: 4px 10px;
   display: inline-flex;
+  padding: 4px 10px;
+  background: rgb(15 23 42 / 75%);
+  border: 1px solid rgb(148 163 184 / 50%);
+  border-radius: 999px;
   align-items: center;
   gap: 6px;
-  background: rgba(15, 23, 42, 0.75);
 }
 
 .chip-icon {
@@ -171,18 +171,18 @@ header {
 }
 
 .chip-strong {
-  border-color: rgba(56, 189, 248, 0.8);
-  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.35), transparent 70%);
   color: #e0f2fe;
+  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 35%), transparent 70%);
+  border-color: rgb(56 189 248 / 80%);
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .title {
     font-size: 26px;
   }
 }
 
-@media (max-width: 1366px) {
+@media (width <= 1366px) {
   .title {
     font-size: 22px;
     letter-spacing: 3px;

src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue

@@ -136,30 +136,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -172,17 +172,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -199,9 +199,9 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
@@ -219,11 +219,11 @@ onUnmounted(() => {
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148,163,184,0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .metrics-grid {
@@ -234,11 +234,11 @@ onUnmounted(() => {
 }
 
 .metric-card {
-  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.16), transparent 70%);
-  border-radius: 8px;
-  border: 1px solid rgba(30,64,175,0.9);
-  padding: 6px 8px;
   display: flex;
+  padding: 6px 8px;
+  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 16%), transparent 70%);
+  border: 1px solid rgb(30 64 175 / 90%);
+  border-radius: 8px;
   flex-direction: column;
   gap: 4px;
 }
@@ -255,13 +255,15 @@ onUnmounted(() => {
 }
 
 .metric-value.accent { color: #22d3ee; }
+
 .metric-value.warn { color: #f59e0b; }
+
 .metric-value.ok { color: #22c55e; }
 
 .metric-extra {
+  display: flex;
   font-size: 11px;
   color: #94a3b8;
-  display: flex;
   justify-content: space-between;
 }
 
@@ -271,7 +273,7 @@ onUnmounted(() => {
   min-height: 180px;
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .chart { min-height: 160px; }
 }
 </style>

src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue

@@ -135,30 +135,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56, 189, 248, 0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -171,17 +171,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -204,19 +204,19 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148, 163, 184, 0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .chart {
@@ -230,10 +230,10 @@ onUnmounted(() => {
 }
 
 :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;
+  background-color: transparent;
+  border: 1px solid rgb(56 189 248 / 55%);
+  box-shadow: 0 0 18px rgb(56 189 248 / 35%);
 }
 
 :deep(.el-select__placeholder) {
@@ -241,22 +241,22 @@ onUnmounted(() => {
 }
 
 :deep(.energy-type-select .el-input__wrapper) {
+  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 22%), transparent 70%);
+  border-color: rgb(56 189 248 / 85%);
   border-radius: 999px;
-  border-color: rgba(56, 189, 248, 0.85);
-  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.22), transparent 70%);
-  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
+  box-shadow: 0 0 18px rgb(56 189 248 / 45%);
 }
 
 :deep(.energy-type-select .el-input__wrapper.is-focus) {
-  border-color: rgba(96, 165, 250, 0.95);
-  background: radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.35), transparent 70%);
+  background: radial-gradient(circle at 0 0, rgb(59 130 246 / 35%), transparent 70%);
+  border-color: rgb(96 165 250 / 95%);
 }
 
 :deep(.energy-type-select .el-input__inner) {
   color: #e0f2fe;
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .chart {
     min-height: 160px;
   }

src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue

@@ -136,30 +136,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -172,17 +172,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -199,9 +199,9 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
@@ -219,11 +219,11 @@ onUnmounted(() => {
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148,163,184,0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .metrics-grid {
@@ -234,11 +234,11 @@ onUnmounted(() => {
 }
 
 .metric-card {
-  background: radial-gradient(circle at 0 0, rgba(56,189,248,0.16), transparent 70%);
-  border-radius: 8px;
-  border: 1px solid rgba(30,64,175,0.9);
-  padding: 6px 8px;
   display: flex;
+  padding: 6px 8px;
+  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 16%), transparent 70%);
+  border: 1px solid rgb(30 64 175 / 90%);
+  border-radius: 8px;
   flex-direction: column;
   gap: 4px;
 }
@@ -255,13 +255,15 @@ onUnmounted(() => {
 }
 
 .metric-value.accent { color: #22d3ee; }
+
 .metric-value.warn { color: #f59e0b; }
+
 .metric-value.ok { color: #22c55e; }
 
 .metric-extra {
+  display: flex;
   font-size: 11px;
   color: #94a3b8;
-  display: flex;
   justify-content: space-between;
 }
 
@@ -271,7 +273,7 @@ onUnmounted(() => {
   min-height: 180px;
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .chart { min-height: 160px; }
 }
 </style>

src/views/report/dashboardPage/dashboard8/components/OpsTrend.vue

@@ -132,30 +132,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -168,17 +168,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -195,19 +195,19 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148,163,184,0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .chart {
@@ -216,7 +216,7 @@ onUnmounted(() => {
   min-height: 180px;
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .chart { min-height: 160px; }
 }
 
@@ -237,27 +237,27 @@ onUnmounted(() => {
 }
 
 .tab-btn {
-  cursor: pointer;
-  user-select: none;
-  border-radius: 999px;
-  border: 1px solid rgba(148, 163, 184, 0.55);
-  background: rgba(2, 6, 23, 0.28);
-  color: var(--muted);
   padding: 3px 8px;
   font-size: 10px;
   line-height: 1;
+  color: var(--muted);
+  cursor: pointer;
+  background: rgb(2 6 23 / 28%);
+  border: 1px solid rgb(148 163 184 / 55%);
+  border-radius: 999px;
   transition: border-color 0.25s, box-shadow 0.25s, color 0.25s, background 0.25s;
+  user-select: none;
 }
 
 .tab-btn:hover {
-  border-color: rgba(56, 189, 248, 0.9);
   color: #e0f2fe;
+  border-color: rgb(56 189 248 / 90%);
 }
 
 .tab-btn.active {
-  border-color: rgba(34, 211, 238, 0.9);
   color: #e0f2fe;
-  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
-  background: radial-gradient(circle at 0 0, rgba(34, 211, 238, 0.32), rgba(2, 6, 23, 0.2) 60%);
+  background: radial-gradient(circle at 0 0, rgb(34 211 238 / 32%), rgb(2 6 23 / 20%) 60%);
+  border-color: rgb(34 211 238 / 90%);
+  box-shadow: 0 0 14px rgb(34 211 238 / 45%);
 }
 </style>

src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue

@@ -118,30 +118,30 @@ onMounted(async () => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -154,17 +154,17 @@ onMounted(async () => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -181,19 +181,19 @@ onMounted(async () => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148,163,184,0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .chart {
@@ -202,7 +202,7 @@ onMounted(async () => {
   min-height: 180px;
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .chart { min-height: 160px; }
 }
 </style>

src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue

@@ -114,30 +114,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -150,17 +150,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -177,50 +177,52 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  overflow: hidden; /* Ensure list stays within */
+  flex: 1;
   flex-direction: column;
   gap: 8px;
-  overflow: hidden; /* Ensure list stays within */
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148,163,184,0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .alarm-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
   display: flex;
-  flex-direction: column;
-  gap: 6px;
   height: 100%;
+  padding: 0;
+  margin: 0;
   overflow: hidden;
+  list-style: none;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .alarm-item {
   display: flex;
-  align-items: center;
-  gap: 8px;
   padding: 7px 8px;
-  border-radius: 6px;
-  background: rgba(15,23,42,0.92);
-  border: 1px solid rgba(30,64,175,0.9);
   font-size: 11px;
   color: #e5f0ff;
+  background: rgb(15 23 42 / 92%);
+  border: 1px solid rgb(30 64 175 / 90%);
+  border-radius: 6px;
   transition: background 0.3s, box-shadow 0.3s;
+  align-items: center;
+  gap: 8px;
   flex-shrink: 0; /* Prevent shrinking */
 }
 
-.alarm-item.danger { border-left: 3px solid #ef4444; box-shadow: 0 0 18px rgba(239,68,68,0.4); }
-.alarm-item.warn { border-left: 3px solid #f59e0b; box-shadow: 0 0 14px rgba(245,158,11,0.35); }
-.alarm-item.safe { border-left: 3px solid #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.35); }
+.alarm-item.danger { border-left: 3px solid #ef4444; box-shadow: 0 0 18px rgb(239 68 68 / 40%); }
+
+.alarm-item.warn { border-left: 3px solid #f59e0b; box-shadow: 0 0 14px rgb(245 158 11 / 35%); }
+
+.alarm-item.safe { border-left: 3px solid #22c55e; box-shadow: 0 0 12px rgb(34 197 94 / 35%); }
 
 .alarm-time {
   width: 64px;
@@ -229,24 +231,24 @@ onUnmounted(() => {
 }
 
 .alarm-msg {
-  flex: 1;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
 }
 
 .alarm-level {
-  flex: 0 0 auto;
-  border-radius: 999px;
   padding: 2px 6px;
-  border: 1px solid rgba(148,163,184,0.6);
   font-size: 10px;
+  border: 1px solid rgb(148 163 184 / 60%);
+  border-radius: 999px;
+  flex: 0 0 auto;
 }
 
 /* Animation class */
 .animating-out {
-  transition: all 0.35s;
-  transform: translateY(-48px);
   opacity: 0;
+  transform: translateY(-48px);
+  transition: all 0.35s;
 }
 </style>

src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue

@@ -125,30 +125,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -161,17 +161,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -188,9 +188,9 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
@@ -204,11 +204,11 @@ onUnmounted(() => {
 }
 
 .tag {
-  border-radius: 999px;
   padding: 2px 6px;
   font-size: 10px;
-  border: 1px solid rgba(148,163,184,0.4);
   color: #94a3b8;
+  border: 1px solid rgb(148 163 184 / 40%);
+  border-radius: 999px;
 }
 
 .dot {
@@ -219,30 +219,30 @@ onUnmounted(() => {
 
 /* Scoped styles specific to this component but we expect common styles from parent */
 .table-shell {
-  flex: 1;
+  position: relative;
   min-height: 0;
   overflow: hidden;
-  position: relative;
+  flex: 1;
 }
 
 .task-table {
   width: 100%;
+  font-size: 12px;
   border-collapse: separate;
   border-spacing: 0 5px;
   table-layout: fixed;
-  font-size: 12px;
 }
 
 .task-table thead {
-  background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 70%);
+  background: radial-gradient(circle at 0 0, rgb(56 189 248 / 18%), transparent 70%);
 }
 
 .task-table thead th {
   padding: 6px 4px;
-  color: var(--accent);
   font-weight: 600;
+  color: var(--accent);
   text-align: center;
-  border-bottom: 1px solid rgba(51, 65, 85, 0.9);
+  border-bottom: 1px solid rgb(51 65 85 / 90%);
 }
 
 .task-table tbody {
@@ -260,28 +260,28 @@ onUnmounted(() => {
 
 .task-table tbody td {
   padding: 6px 4px;
-  text-align: center;
   color: var(--text);
-  background: rgba(15, 23, 42, 0.88);
+  text-align: center;
+  background: rgb(15 23 42 / 88%);
+  border: 1px solid rgb(30 64 175 / 70%);
   border-radius: 4px;
-  border: 1px solid rgba(30, 64, 175, 0.7);
 }
 
 .task-table tbody tr:nth-child(even) td {
-  background: rgba(15, 23, 42, 0.96);
+  background: rgb(15 23 42 / 96%);
 }
 
 .task-table tbody tr:hover td {
-  border-color: rgba(56, 189, 248, 0.95);
-  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
+  border-color: rgb(56 189 248 / 95%);
+  box-shadow: 0 0 14px rgb(56 189 248 / 45%);
 }
 
 .progress-bar {
   height: 6px;
-  background: rgba(15, 23, 42, 1);
-  border-radius: 999px;
   overflow: hidden;
-  border: 1px solid rgba(148, 163, 184, 0.45);
+  background: rgb(15 23 42 / 100%);
+  border: 1px solid rgb(148 163 184 / 45%);
+  border-radius: 999px;
 }
 
 .progress-fill {

src/views/report/dashboardPage/dashboard8/components/TodayOps.vue

@@ -108,30 +108,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -144,17 +144,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -171,23 +171,23 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
 
 .chip {
-  border-radius: 999px;
-  border: 1px solid rgba(148,163,184,0.5);
-  padding: 4px 10px;
   display: inline-flex;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: #94a3b8;
+  background: rgb(15 23 42 / 75%);
+  border: 1px solid rgb(148 163 184 / 50%);
+  border-radius: 999px;
   align-items: center;
   gap: 6px;
-  background: rgba(15,23,42,0.75);
-  color: #94a3b8;
-  font-size: 12px;
 }
 
 .chart {
@@ -196,7 +196,7 @@ onUnmounted(() => {
   min-height: 180px;
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .chart { min-height: 160px; }
 }
 </style>

src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue

@@ -96,30 +96,30 @@ onUnmounted(() => {
 
 <style scoped>
 .card {
-  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
-  border-radius: 10px;
-  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);
-  padding: 10px 10px 10px 10px;
   position: relative;
   display: flex;
-  flex-direction: column;
+  padding: 10px;
   overflow: hidden;
+  background: linear-gradient(135deg, rgb(15 23 42 / 96%), rgb(15 23 42 / 88%));
+  border: 1px solid rgb(30 64 175 / 85%);
+  border-radius: 10px;
+  box-shadow:
+    0 18px 45px rgb(15 23 42 / 95%),
+    0 0 0 1px rgb(15 23 42 / 100%),
+    inset 0 0 0 1px rgb(56 189 248 / 5%);
+  flex-direction: column;
 }
 
 .card::before,
 .card::after {
-  content: "";
   position: absolute;
   width: 13px;
   height: 13px;
+  pointer-events: none;
+  border: 1px solid rgb(56 189 248 / 75%);
   border-radius: 2px;
-  border: 1px solid rgba(56,189,248,0.75);
+  content: "";
   opacity: 0.6;
-  pointer-events: none;
 }
 
 .card::before {
@@ -132,17 +132,17 @@ onUnmounted(() => {
 .card::after {
   right: -1px;
   bottom: -1px;
-  border-left: none;
   border-top: none;
+  border-left: none;
 }
 
 .card-header {
   display: flex;
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgb(41 54 95 / 90%);
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
 }
 
 .card-title {
@@ -159,9 +159,9 @@ onUnmounted(() => {
 }
 
 .card-body {
-  flex: 1;
-  min-height: 0;
   display: flex;
+  min-height: 0;
+  flex: 1;
   flex-direction: column;
   gap: 8px;
 }
@@ -186,7 +186,7 @@ onUnmounted(() => {
   min-height: 180px;
 }
 
-@media (max-width: 1600px) {
+@media (width <= 1600px) {
   .chart { min-height: 160px; }
 }
 </style>

src/views/report/dashboardPage/dashboard8/index.vue

@@ -73,12 +73,23 @@ import EnergyTrend from './components/EnergyTrend.vue'
 </script>
 
 <style scoped>
-/* Define CSS Variables locally for this dashboard */
+
+
+@keyframes scanDown {
+  0% { transform: translateY(-100%); }
+
+  100% { transform: translateY(260%); }
+}
+
+@media (width <= 1366px) {
+  /* Adjust if needed, but flex: 1 should handle it automatically */
+}
+
 .dashboard-container {
   --bg: #050816;
   --bg-deep: #020617;
-  --card-bg: rgba(15, 23, 42, 0.86);
-  --border: rgba(56, 189, 248, 0.35);
+  --card-bg: rgb(15 23 42 / 86%);
+  --border: rgb(56 189 248 / 35%);
   --text: #e5f0ff;
   --muted: #94a3b8;
   --primary: #38bdf8;
@@ -92,37 +103,37 @@ import EnergyTrend from './components/EnergyTrend.vue'
   --header-h: 86px;
 
   position: relative;
+  display: flex;
   width: 100%;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft Yahei", Arial, sans-serif;
   color: var(--text);
   background-color: var(--bg-deep);
   background-image:
-    radial-gradient(circle at 20% 0, rgba(56, 189, 248, 0.26) 0, transparent 48%),
-    radial-gradient(circle at 80% 110%, rgba(129, 140, 248, 0.22) 0, transparent 52%),
+    radial-gradient(circle at 20% 0, rgb(56 189 248 / 26%) 0, transparent 48%),
+    radial-gradient(circle at 80% 110%, rgb(129 140 248 / 22%) 0, transparent 52%),
     linear-gradient(135deg, #020617 0%, #020617 45%, #020617 100%);
+  flex-direction: column;
 }
 
 .bg-grid {
   position: absolute;
-  inset: 0;
+  z-index: 0;
   pointer-events: none;
-  background-image: linear-gradient(rgba(15,23,42,0.8) 1px, transparent 1px),
-                    linear-gradient(90deg, rgba(15,23,42,0.8) 1px, transparent 1px);
+  background-image: linear-gradient(rgb(15 23 42 / 80%) 1px, transparent 1px),
+                    linear-gradient(90deg, rgb(15 23 42 / 80%) 1px, transparent 1px);
   background-size: 70px 70px;
   opacity: 0.55;
-  z-index: 0;
+  inset: 0;
 }
 
 .bg-scan {
   position: absolute;
-  inset: 0;
+  z-index: 0;
   overflow: hidden;
   pointer-events: none;
-  z-index: 0;
+  inset: 0;
 }
 
 .scan-line {
@@ -131,37 +142,32 @@ import EnergyTrend from './components/EnergyTrend.vue'
   left: 0;
   width: 100%;
   height: 40%;
-  background: radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.38), transparent 70%);
+  background: radial-gradient(circle at 50% 0, rgb(56 189 248 / 38%), transparent 70%);
   opacity: 0.5;
   filter: blur(32px);
   animation: scanDown 16s linear infinite;
 }
 
-@keyframes scanDown {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(260%); }
-}
-
 main {
-  flex: 1;
-  padding: 8px var(--gap) var(--gap);
   position: relative;
   z-index: 1;
   display: flex;
+  min-height: 0;
+  padding: 8px var(--gap) var(--gap);
+  flex: 1;
   flex-direction: column;
   gap: var(--gap);
-  min-height: 0;
 }
 
 .layout {
-  flex: 1;
   display: flex;
-  flex-direction: column;
-  gap: var(--gap);
-  max-width: 1920px;
-  margin: 0 auto;
   width: 100%; /* Ensure full width */
+  max-width: 1920px;
   min-height: 0;
+  margin: 0 auto;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--gap);
 }
 
 .row-1, .row-2, .row-3 {
@@ -188,7 +194,5 @@ main {
   height: 100% !important;
 }
 
-@media (max-width: 1366px) {
-  /* Adjust if needed, but flex: 1 should handle it automatically */
-}
+/* Define CSS Variables locally for this dashboard */
 </style>