Kaynağa Gözat

fix: 监控大屏文字对比度优化——标签加亮加粗,暗色背景可读性提升

lq 1 ay önce
ebeveyn
işleme
5ca67a784a
1 değiştirilmiş dosya ile 13 ekleme ve 14 silme
  1. 13 14
      frontend/src/view/dashboard/index.vue

+ 13 - 14
frontend/src/view/dashboard/index.vue

@@ -110,13 +110,12 @@ onUnmounted(() => clearInterval(timer))
 /* === Theme tokens === */
 /* === Theme tokens === */
 .monitor {
 .monitor {
   --bg:    #0c1922;
   --bg:    #0c1922;
-  --panel: #111f2b;
-  --text:  #d4dfe8;
-  --muted: #6b7f94;
-  --green: #00d68f;
+  --panel: #152534;
+  --text:  #e2ecf5;
+  --muted: #8ca8c4;
+  --green: #00e6a0;
   --amber: #fca33b;
   --amber: #fca33b;
   --red:   #ff4757;
   --red:   #ff4757;
-  --cyber: #00d68f;
 
 
   background: var(--bg);
   background: var(--bg);
   min-height: 100vh;
   min-height: 100vh;
@@ -141,7 +140,7 @@ onUnmounted(() => clearInterval(timer))
   box-shadow: 0 0 6px var(--green);
   box-shadow: 0 0 6px var(--green);
 }
 }
 .is-critical .bar-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
 .is-critical .bar-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
-.bar-label { font-size: 16px; font-weight: 600; letter-spacing: .04em; }
+.bar-label { font-size: 17px; font-weight: 700; letter-spacing: .04em; color: #e8f0f8; }
 .bar-right { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
 .bar-right { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
 .bar-status { color: var(--green); }
 .bar-status { color: var(--green); }
 .is-critical .bar-status { color: var(--red); }
 .is-critical .bar-status { color: var(--red); }
@@ -172,8 +171,8 @@ onUnmounted(() => clearInterval(timer))
 
 
 /* Label */
 /* Label */
 .readout-label {
 .readout-label {
-  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
-  color: var(--muted); margin: 0 0 10px; font-weight: 500;
+  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
+  color: #a0bedb; margin: 0 0 10px; font-weight: 600;
 }
 }
 
 
 /* Value */
 /* Value */
@@ -208,8 +207,8 @@ onUnmounted(() => clearInterval(timer))
   padding: 20px 24px 16px;
   padding: 20px 24px 16px;
 }
 }
 .panel-title {
 .panel-title {
-  margin: 0 0 14px; font-size: 12px; text-transform: uppercase;
-  letter-spacing: .1em; color: var(--muted); font-weight: 500;
+  margin: 0 0 14px; font-size: 13px; text-transform: uppercase;
+  letter-spacing: .08em; color: #a0bedb; font-weight: 600;
 }
 }
 .device-grid {
 .device-grid {
   display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
   display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
@@ -227,13 +226,13 @@ onUnmounted(() => clearInterval(timer))
   box-shadow: 0 0 5px var(--green); flex-shrink: 0;
   box-shadow: 0 0 5px var(--green); flex-shrink: 0;
 }
 }
 .device-indicator.offline { background: var(--red); box-shadow: 0 0 5px var(--red); }
 .device-indicator.offline { background: var(--red); box-shadow: 0 0 5px var(--red); }
-.device-channel { font-weight: 600; font-size: 13px; min-width: 80px; }
+.device-channel { font-weight: 600; font-size: 13px; min-width: 80px; color: #dce8f2; }
 .device-dir {
 .device-dir {
-  font-size: 11px; color: var(--muted); background: #162330;
+  font-size: 11px; color: #8aa8c2; background: #162330;
   padding: 2px 8px; border-radius: 3px;
   padding: 2px 8px; border-radius: 3px;
 }
 }
-.device-name { color: var(--muted); font-size: 13px; margin-left: auto; }
-.device-empty { color: var(--muted); font-size: 13px; font-style: italic; padding: 8px; }
+.device-name { color: #849eb6; font-size: 13px; margin-left: auto; }
+.device-empty { color: #8aa8c2; font-size: 13px; padding: 8px; }
 
 
 /* === Responsive === */
 /* === Responsive === */
 @media (max-width: 900px) {
 @media (max-width: 900px) {