From 3e4f557ad0b6bf1834671203181892016d296df2 Mon Sep 17 00:00:00 2001
From: tangjie <122778500@qq.com>
Date: Tue, 18 Aug 2026 09:46:10 +0800
Subject: [PATCH] style

---
 src/pages/Container/Driver/index.js           |  3 +-
 src/pages/Container/Institution/index.css     | 32 +++++++++----------
 .../Container/Supervision/Cockpit/index.css   | 30 ++++++++---------
 .../Container/Supervision/Cockpit/index.js    | 28 ++++++++--------
 4 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/src/pages/Container/Driver/index.js b/src/pages/Container/Driver/index.js
index b693920..d58b83a 100644
--- a/src/pages/Container/Driver/index.js
+++ b/src/pages/Container/Driver/index.js
@@ -78,7 +78,7 @@ const Driver = (props) => {
         }
 
         actionResultRef.current = await queryDriverConfig();
-        
+
       }
       catch (error) {
         setPageError(error?.message || "页面加载失败，请稍后重试");
@@ -137,7 +137,6 @@ const Driver = (props) => {
     <div className={`driver-container${isSupervision ? " driver-container--cockpit" : ""}`}>
       <Skeleton active loading={isLoading}>
         <div className="driver-container-content">
-
           {showContent && isInstitution && <Institution {...props} />}
           {showContent && isSupervision && <Cockpit {...props} />}
         </div>
diff --git a/src/pages/Container/Institution/index.css b/src/pages/Container/Institution/index.css
index f193675..f381e24 100644
--- a/src/pages/Container/Institution/index.css
+++ b/src/pages/Container/Institution/index.css
@@ -53,7 +53,7 @@
 .dashboard-block-head > div {
   display: flex;
   gap: 1.4rem;
-  font-size: 0.7rem;
+  font-size: 0.88rem;
   color: #64748b;
 }
 
@@ -79,8 +79,8 @@
 }
 
 .dashboard-status-grid article > i {
-  width: 34px;
-  height: 34px;
+  width: 38px;
+  height: 38px;
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -88,8 +88,8 @@
   color: #fff;
   font-style: normal;
   font-weight: 700;
-  font-size: 13px;
-  flex: 0 0 34px;
+  font-size: 16px;
+ 
 }
 
 .dashboard-status-grid .blue { background: #4098f7; }
@@ -105,13 +105,13 @@
 }
 
 .dashboard-status-grid span {
-  font-size: 0.7rem;
+  font-size: 1rem;
   color: #64748b;
 }
 
 .dashboard-status-grid strong {
-  font-size: 1rem;
-  margin-top: 0.15rem;
+  font-size: 1.25rem;
+  /* margin-top: 0.15rem; */
   color: #1e293b;
 }
 
@@ -149,7 +149,7 @@
   color: #fff;
   font-style: normal;
   font-weight: 700;
-  font-size: 13px;
+  font-size: 14px;
   flex: 0 0 34px;
 }
 
@@ -163,7 +163,7 @@
 }
 
 .dashboard-reminder-grid span {
-  font-size: 0.68rem;
+  font-size: 0.88rem;
   color: #64748b;
 }
 
@@ -222,7 +222,7 @@
   justify-content: center;
   gap: 0.8rem;
   flex-wrap: wrap;
-  font-size: 0.62rem;
+  font-size: 0.88rem;
   color: #64748b;
   margin-top: 8px;
 }
@@ -257,7 +257,7 @@
 .dashboard-project-table th,
 .dashboard-project-table td {
   padding: 0.65rem 0.55rem;
-  font-size: 0.7rem;
+  font-size: 0.88rem;
 }
 
 .dashboard-project-table th {
@@ -291,7 +291,7 @@
   padding: 0.42rem 0.85rem;
   border: 1px solid var(--color-border, #e2e8f0);
   border-radius: 8px;
-  font-size: 0.78rem;
+  font-size: 0.88rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -314,7 +314,7 @@
 }
 .btn-ghost:hover { background: #f1f5f9; color: #1e293b; }
 
-.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.7rem; }
+.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.88rem; }
 
 .dashboard-btn-ghost {
   display: inline-flex;
@@ -323,7 +323,7 @@
   padding: 0.3rem 0.75rem;
   border: none;
   border-radius: 8px;
-  font-size: 0.7rem;
+  font-size: 0.88rem;
   font-weight: 500;
   cursor: pointer;
   background: transparent;
@@ -343,7 +343,7 @@
   padding: 0.3rem 0.75rem;
   border: none;
   border-radius: 8px;
-  font-size: 0.7rem;
+  font-size: 0.88rem;
   font-weight: 500;
   cursor: pointer;
   text-decoration: none;
diff --git a/src/pages/Container/Supervision/Cockpit/index.css b/src/pages/Container/Supervision/Cockpit/index.css
index c7ee99a..f657769 100644
--- a/src/pages/Container/Supervision/Cockpit/index.css
+++ b/src/pages/Container/Supervision/Cockpit/index.css
@@ -184,16 +184,16 @@
   box-shadow: inset 0 0 14px rgba(46, 204, 255, .34);
 }
 
-.life-stat p { margin: 0 0 3px; color: #cde9ff; font-size: 11px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
-.life-stat strong { color: #20caff; font-size: 13px; font-family: Arial, sans-serif; }
+.life-stat p { margin: 0 0 3px; color: #cde9ff; font-size: 14px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
+.life-stat strong { color: #20caff; font-size: 14px; font-family: Arial, sans-serif; }
 .progress-list { padding: 2px 8px 10px; border-top: 1px solid rgba(54, 142, 219, .18); }
-.progress-row { height: 31px; display: grid; grid-template-columns: 122px 1fr 34px; align-items: center; gap: 8px; font-size: 11px; color: #e2f5ff; }
+.progress-row { height: 31px; display: grid; grid-template-columns: 122px 1fr 34px; align-items: center; gap: 8px; font-size: 14px; color: #e2f5ff; }
 .progress-track { height: 9px; border-radius: 999px; background: rgba(5, 35, 83, .88); overflow: hidden; box-shadow: inset 0 0 9px rgba(5, 17, 44, .9); }
 .progress-track i { display: block; height: 100%; border-radius: inherit; box-shadow: 0 0 8px currentColor; }
-.progress-row b { color: #e8f8ff; font-size: 11px; }
+.progress-row b { color: #e8f8ff; font-size: 14px; }
 .industry-chart { height: 178px; }
 
-.risk-panel h3 { margin: 0 0 8px; color: #eaf9ff; font-size: 12px; font-weight: 700; }
+.risk-panel h3 { margin: 0 0 8px; color: #eaf9ff; font-size: 14px; font-weight: 700; }
 .risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .risk-item {
   min-height: 38px;
@@ -207,7 +207,7 @@
 }
 .risk-item:nth-child(3), .risk-item:nth-child(4) { border-color: rgba(255, 207, 43, .45); background: linear-gradient(90deg, rgba(116, 89, 15, .54), rgba(6, 32, 73, .62)); }
 .risk-item:nth-child(5) { grid-column: 1 / -1; }
-.risk-item span { color: #e8f7ff; font-size: 11px; line-height: 1.3; }
+.risk-item span { color: #e8f7ff; font-size: 14px; line-height: 1.3; }
 .risk-item b { color: #21caff; font-size: 17px; }
 .risk-pie { height: 118px; }
 
@@ -220,9 +220,9 @@
   box-shadow: inset 0 0 20px rgba(42, 208, 255, .16), 0 0 10px rgba(0, 161, 255, .18);
 }
 .kpi-card::before { content: ""; position: absolute; top: -1px; left: 28px; width: 54px; height: 4px; background: repeating-linear-gradient(90deg, #2adfff 0 9px, transparent 9px 15px); }
-.kpi-card p { margin: 0 0 6px; text-align: center; color: #d6f7ff; font-weight: 700; font-size: 12px; }
+.kpi-card p { margin: 0 0 6px; text-align: center; color: #d6f7ff; font-weight: 700; font-size: 14px; }
 .kpi-card strong { font-size: 22px; color: #fff; letter-spacing: 1px; }
-.kpi-card span { float: right; margin-top: 7px; color: #d9ebff; font-size: 11px; }
+.kpi-card span { float: right; margin-top: 7px; color: #d9ebff; font-size: 14px; }
 .kpi-card b { color: #fff; }
 
 .map-shell { flex: 1; min-height: 456px; position: relative; }
@@ -238,12 +238,12 @@
   box-shadow: inset 0 0 18px rgba(18, 195, 255, .38), 0 0 10px rgba(0, 132, 255, .34);
 }
 .map-card strong { display: block; font-size: 14px; margin-bottom: 5px; }
-.map-card span { font-size: 12px; }
+.map-card span { font-size: 14px; }
 .map-card--1 { left: 45%; top: 45%; }
 .map-card--2 { right: 4%; top: 54%; }
 .map-card--3 { left: 42%; bottom: 13%; }
 .map-card--4 { right: 13%; bottom: 12%; }
-.map-legend { position: absolute; left: 36px; bottom: 34px; margin: 0; padding: 0; list-style: none; color: #d8ebff; font-size: 12px; }
+.map-legend { position: absolute; left: 36px; top: 34px; margin: 0; padding: 0; list-style: none; color: #d8ebff; font-size: 14px; }
 .map-legend li { margin: 7px 0; display: flex; align-items: center; gap: 8px; }
 .map-legend li::before { content: ""; width: 12px; height: 4px; background: #c9ec75; }
 .map-legend li:nth-child(2)::before { background: #ffe376; }
@@ -253,10 +253,10 @@
 .todo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
 .todo-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: 18px 18px; align-items: center; column-gap: 8px; }
 .todo-item span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 16px; background: radial-gradient(circle, rgba(73, 198, 255, .5), rgba(7, 51, 112, .95)); border: 1px solid rgba(69, 204, 255, .64); box-shadow: inset 0 0 15px rgba(53, 202, 255, .3); }
-.todo-item p { margin: 0; color: #d8edff; font-size: 11px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
+.todo-item p { margin: 0; color: #d8edff; font-size: 14px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
 .todo-item b { color: #13c8ff; font-size: 15px; }
 .period-tabs { position: absolute; left: 14px; top: 42px; display: flex; z-index: 2; }
-.period-tabs span { width: 34px; height: 19px; display: grid; place-items: center; color: #d8f2ff; border: 1px solid rgba(46, 159, 232, .48); background: rgba(7, 37, 88, .6); font-size: 11px; cursor: pointer; }
+.period-tabs span { width: 34px; height: 19px; display: grid; place-items: center; color: #d8f2ff; border: 1px solid rgba(46, 159, 232, .48); background: rgba(7, 37, 88, .6); font-size: 14px; cursor: pointer; }
 .period-tabs span + span { border-left: none; }
 .period-tabs span.active { background: rgba(5, 126, 176, .5); color: #fff; }
 .line-chart { height: 176px; }
@@ -264,7 +264,7 @@
 .review-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; }
 .review-stat { display: flex; align-items: center; gap: 8px; min-width: 0; }
 .review-stat span { width: 37px; height: 37px; display: grid; place-items: center; color: #20d3ff; font-size: 17px; border-radius: 50%; background: radial-gradient(circle, rgba(26, 188, 255, .35), rgba(5, 37, 93, .9)); border: 2px solid rgba(35, 210, 255, .65); }
-.review-stat p { margin: 0; color: #e1f5ff; font-size: 12px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
+.review-stat p { margin: 0; color: #e1f5ff; font-size: 14px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
 .review-stat b { color: #18c9ff; font-size: 15px; }
 .review-stat b.danger { color: #ff3e53; }
 .review-pie { height: 144px; }
@@ -272,7 +272,7 @@
 .process-grid { height: 128px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 52px); gap: 18px 28px; align-content: center; }
 .process-node { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #078bff; background: linear-gradient(180deg, rgba(12, 71, 150, .72), rgba(2, 24, 69, .85)); box-shadow: inset 0 0 18px rgba(13, 146, 255, .25); }
 .process-node strong { color: #16d3ff; font-size: 18px; line-height: 20px; }
-.process-node span { color: #fff; font-size: 12px; }
+.process-node span { color: #fff; font-size: 14px; }
 .process-node i { position: absolute; right: -26px; top: 50%; width: 22px; height: 16px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(25, 210, 255, .85)); clip-path: polygon(0 0, 70% 50%, 0 100%, 30% 50%); }
 .process-node:nth-child(5) i { right: 50%; top: 60px; transform: translateX(50%) rotate(90deg); }
 .process-node:nth-child(n+6) i { right: auto; left: -26px; transform: translateY(-50%) rotate(180deg); }
@@ -310,7 +310,7 @@
 }
 
 .map-summary span {
-  font-size: 12px;
+  font-size: 14px;
   color: #d9f2ff;
 }
 
diff --git a/src/pages/Container/Supervision/Cockpit/index.js b/src/pages/Container/Supervision/Cockpit/index.js
index a1a9697..f8a1041 100644
--- a/src/pages/Container/Supervision/Cockpit/index.js
+++ b/src/pages/Container/Supervision/Cockpit/index.js
@@ -188,18 +188,18 @@ function LifecyclePanel({ data, loading }) {
   const barOption = useMemo(() => ({
     color: ['#1aa7ff', '#d7a92c'],
     grid: { left: 28, right: 10, top: 20, bottom: 42 },
-    legend: { right: 8, top: 0, itemWidth: 10, itemHeight: 6, textStyle: { color: '#b9d8ff', fontSize: 10 } },
+    legend: { right: 8, top: 0, itemWidth: 10, itemHeight: 6, textStyle: { color: '#b9d8ff', fontSize: 14 } },
     tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
     xAxis: {
       type: 'category',
       data: industryList.map(item => item.industryName),
-      axisLabel: { color: '#b9cfff', fontSize: 10, interval: 0, rotate: 0, width: 38, overflow: 'break' },
+      axisLabel: { color: '#b9cfff', fontSize: 14, interval: 0, rotate: 0, width: 38, overflow: 'break' },
       axisLine: { lineStyle: { color: '#17416e' } },
       axisTick: { show: false },
     },
     yAxis: {
       type: 'value', max: 220, splitNumber: 4,
-      axisLabel: { color: '#b9cfff', fontSize: 10 },
+      axisLabel: { color: '#b9cfff', fontSize: 14 },
       splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .2)', type: 'dashed' } },
     },
     series: [
@@ -240,7 +240,7 @@ function RiskPanel({ data, loading }) {
   const pieOption = useMemo(() => ({
     color: ['#5f8cff', '#e96fff', '#5fd8ae', '#b6a0ff'],
     tooltip: { trigger: 'item', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
-    legend: { orient: 'vertical', right: 2, top: 'center', itemWidth: 10, itemHeight: 6, textStyle: { color: '#c6dcff', fontSize: 10 } },
+    legend: { orient: 'vertical', right: 2, top: 'center', itemWidth: 10, itemHeight: 6, textStyle: { color: '#c6dcff', fontSize: 14 } },
     series: [{ type: 'pie', radius: ['46%', '70%'], center: ['30%', '55%'], avoidLabelOverlap: true, label: { show: false }, data: data.riskPie }],
   }), [data.riskPie]);
 
@@ -282,7 +282,7 @@ function KpiCards({ data, loading }) {
 // ==================== 地图区域分布 ====================
 function MapSection({ data, loading }) {
   const [selectedAreaName, setSelectedAreaName] = useState('重庆市');
-  const zoomRef = useRef(1.1);
+  const zoomRef = useRef(1.3);
   const chartInstanceRef = useRef(null);
   const { regionList, regionSummary, mapScatterPoints } = data;
 
@@ -330,14 +330,14 @@ function MapSection({ data, loading }) {
       borderColor: '#1aa7ff',
       borderWidth: 1,
       padding: [8, 10],
-      textStyle: { color: '#eaf9ff', fontSize: 12 },
+      textStyle: { color: '#eaf9ff', fontSize: 14 },
       formatter: params => {
         const item = params.data || statMap.get(params.name);
         if (!item) return params.name;
         // 随地图缩放比例同步缩放悬浮框字体
         const z = zoomRef.current || 1;
-        const fs = Math.max(10, Math.round(12 * z));
-        const title = Math.round(13 * z);
+        const fs = Math.max(14, Math.round(14 * z));
+        const title = Math.round(14 * z);
         return `<div style="font-size:${fs}px;line-height:1.7">
           <strong style="font-size:${title}px">${params.name}</strong><br/>
           评价项目数：${item.evalProjectCount || 0}<br/>
@@ -356,7 +356,7 @@ function MapSection({ data, loading }) {
     geo: {
       map: 'chongqing',
       roam: true,
-      zoom: 1.1,
+      zoom: 1.0,
       top: 10,
       bottom: 0,
       left: 0,
@@ -376,7 +376,7 @@ function MapSection({ data, loading }) {
         label: { show: true, color: '#061a35', fontWeight: 700 },
         itemStyle: { areaColor: '#31d6ff', borderColor: '#ffffff', borderWidth: 2.2 },
       },
-      label: { show: true, color: '#244269', fontSize: 10 },
+      label: { show: true, color: '#244269', fontSize: 14 },
     },
     series: [
       {
@@ -486,10 +486,10 @@ function ReviewLinePanel({ data, period, onPeriodChange, loading }) {
     return {
       color: ['#0da5ff', '#29e487', '#ffb74d', '#ce93d8', '#4dd0e1', '#f48fb1'],
       grid: { left: 34, right: 12, top: 28, bottom: 32 },
-      legend: { right: 0, top: 0, itemWidth: 14, itemHeight: 4, textStyle: { color: '#c6dcff', fontSize: 10 } },
+      legend: { right: 0, top: 0, itemWidth: 14, itemHeight: 4, textStyle: { color: '#c6dcff', fontSize: 14 } },
       tooltip: { trigger: 'axis', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
-      xAxis: { type: 'category', boundaryGap: false, data: trendBuckets, axisLabel: { color: '#c6dcff', fontSize: 10 }, axisLine: { lineStyle: { color: '#17416e' } }, axisTick: { show: false } },
-      yAxis: { type: 'value', min: 0, max: 100, splitNumber: 5, axisLabel: { color: '#c6dcff', fontSize: 10 }, splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .22)', type: 'dashed' } } },
+      xAxis: { type: 'category', boundaryGap: false, data: trendBuckets, axisLabel: { color: '#c6dcff', fontSize: 14 }, axisLine: { lineStyle: { color: '#17416e' } }, axisTick: { show: false } },
+      yAxis: { type: 'value', min: 0, max: 100, splitNumber: 5, axisLabel: { color: '#c6dcff', fontSize: 14 }, splitLine: { lineStyle: { color: 'rgba(78, 143, 219, .22)', type: 'dashed' } } },
       series: seriesConfig,
     };
   }, [trendBuckets, trendSeries]);
@@ -526,7 +526,7 @@ function ReviewProgressPanel({ data, loading }) {
   const pieOption = useMemo(() => ({
     color: ['#1677ff', '#00c089', '#ff7a1a', '#f7cb16', '#ab5fde'],
     tooltip: { trigger: 'item', backgroundColor: 'rgba(3, 25, 66, .92)', borderColor: '#1aa7ff', textStyle: { color: '#dff7ff' } },
-    legend: { orient: 'vertical', right: 0, top: 'center', itemWidth: 10, itemHeight: 8, textStyle: { color: '#c6dcff', fontSize: 10 } },
+    legend: { orient: 'vertical', right: 0, top: 'center', itemWidth: 10, itemHeight: 8, textStyle: { color: '#c6dcff', fontSize: 14 } },
     series: [{ type: 'pie', radius: ['32%', '68%'], center: ['28%', '56%'], label: { show: false }, data: reviewPieItems.map(item => ({ name: item.name, value: item.value })) }],
   }), [reviewPieItems]);