样式优化

src/components/QcDashboard.vue

@@ -477,6 +477,7 @@ onBeforeUnmount(() => {
 
 /* ======== 顶部信息栏 ======== */
 .header {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -489,12 +490,16 @@ onBeforeUnmount(() => {
 }
 
 .title {
-    font-size: clamp(17px, 1.8vw, 24px);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: clamp(17px, 1.8vw, 28px);
     font-weight: 700;
     letter-spacing: 2px;
     color: #fff;
     text-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
     white-space: nowrap;
+    pointer-events: none;
 }
 
 .header-left,
@@ -502,7 +507,7 @@ onBeforeUnmount(() => {
     display: flex;
     gap: clamp(10px, 1.2vw, 18px);
     flex-wrap: nowrap;
-    font-size: clamp(10px, 1vw, 13px);
+    font-size: clamp(10px, 1vw, 15px);
     color: var(--text-dim);
     align-items: center;
 }
@@ -523,7 +528,7 @@ onBeforeUnmount(() => {
     align-items: center;
     gap: clamp(14px, 1.5vw, 24px);
     padding: 3px 18px;
-    font-size: clamp(10px, 0.95vw, 12px);
+    font-size: clamp(10px, 0.95vw, 14px);
     color: var(--text-dim);
     flex-shrink: 0;
 }
@@ -642,25 +647,25 @@ onBeforeUnmount(() => {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: clamp(15px, 1.4vw, 18px);
-    height: clamp(15px, 1.4vw, 18px);
+    width: clamp(15px, 1.4vw, 20px);
+    height: clamp(15px, 1.4vw, 20px);
     border-radius: 4px;
     background: rgba(56, 189, 248, 0.15);
     color: var(--accent);
-    font-size: clamp(9px, 0.9vw, 11px);
+    font-size: clamp(9px, 0.9vw, 12px);
     font-weight: 700;
     flex-shrink: 0;
 }
 
 .step-mini-name {
-    font-size: clamp(10px, 1vw, 13px);
+    font-size: clamp(10px, 1vw, 16px);
     color: var(--text);
     white-space: nowrap;
     text-align: center;
 }
 
 .step-mini-badge {
-    font-size: clamp(8px, 0.8vw, 10px) !important;
+    font-size: clamp(8px, 0.8vw, 12px) !important;
     padding: 1px 4px !important;
 }
 
@@ -683,7 +688,7 @@ onBeforeUnmount(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: clamp(12px, 1.3vw, 16px);
+    font-size: clamp(12px, 1.3vw, 18px);
     font-weight: 600;
     margin-bottom: 4px;
     padding-bottom: 6px;
@@ -702,10 +707,10 @@ onBeforeUnmount(() => {
 .steps-header,
 .step-row {
     display: grid;
-    grid-template-columns: 32px 1fr 80px 56px;
+    grid-template-columns: repeat(4, 1fr);
     align-items: center;
     gap: 2px;
-    font-size: clamp(10px, 1.1vw, 14px);
+    font-size: clamp(10px, 1.1vw, 16px);
     text-align: center;
 }
 
@@ -713,10 +718,10 @@ onBeforeUnmount(() => {
     color: var(--text-dim);
     font-weight: 500;
     padding: 0 4px;
-    height: clamp(28px, 3.2vh, 40px);
+    height: clamp(28px, 3.2vh, 44px);
     border-bottom: 1px solid var(--border);
     flex-shrink: 0;
-    font-size: clamp(11px, 1.2vw, 14px);
+    font-size: clamp(11px, 1.2vw, 16px);
     line-height: 1;
 }
 
@@ -764,8 +769,8 @@ onBeforeUnmount(() => {
 }
 
 .ring {
-    width: clamp(70px, 8vw, 110px);
-    height: clamp(70px, 8vw, 110px);
+    width: clamp(70px, 8vw, 130px);
+    height: clamp(70px, 8vw, 130px);
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -775,28 +780,28 @@ onBeforeUnmount(() => {
 }
 
 .ring-inner {
-    width: clamp(54px, 6.2vw, 86px);
-    height: clamp(54px, 6.2vw, 86px);
+    width: clamp(54px, 6.2vw, 100px);
+    height: clamp(54px, 6.2vw, 100px);
     border-radius: 50%;
     background: #0b1730;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    font-size: clamp(10px, 1.2vw, 14px);
+    font-size: clamp(10px, 1.2vw, 16px);
 }
 
 .ring-inner span:first-child { font-weight: 700; }
 .ring-pass  { color: var(--success); }
 .ring-fail  { color: var(--danger); }
-.ring-sub   { color: var(--text-dim); font-size: clamp(7px, 0.75vw, 9px); }
+.ring-sub   { color: var(--text-dim); font-size: clamp(7px, 0.75vw, 10px); }
 
 .status-detail {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: clamp(6px, 0.8vw, 12px);
-    font-size: clamp(13px, 1.5vw, 18px);
+    font-size: clamp(13px, 1.5vw, 22px);
 }
 
 .status-detail li {
@@ -825,8 +830,8 @@ onBeforeUnmount(() => {
     gap: clamp(3px, 0.4vw, 6px);
 }
 
-.stat-label  { font-size: clamp(11px, 1.2vw, 14px); color: var(--text-dim); }
-.stat-value  { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; }
+.stat-label  { font-size: clamp(11px, 1.2vw, 16px); color: var(--text-dim); }
+.stat-value  { font-size: clamp(20px, 2.2vw, 36px); font-weight: 700; }
 .stat-value.accent { color: var(--accent-strong); }
 .stat-value.warn   { color: var(--warn); }