修改平台概览UI样式

src/components/map/controls/VehicleLabelSystem.vue

@@ -126,10 +126,6 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
   // 有告警时，显示完整的Tab栏
   let html = `
     <div class="label-container">
-      <div class="label-header">
-        <span class="vehicle-id">${vehicleId}</span>
-        <span class="vehicle-speed">${formattedSpeed}</span>
-      </div>
       <div class="label-tabs">
         <div class="tab-buttons">
           <button class="tab-button ${hasWarning ? 'active' : 'disabled'}" data-tab="warning" data-vehicle="${vehicleId}">
@@ -157,6 +153,10 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
     const warningMessage = alertInfo?.description || '与其他车辆距离过近，请注意避让！';
     activeTabContent = `
       <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="warning" data-vehicle="${vehicleId}">
+        <div class="alert">
+            <img src="../../../assets/images/select_icon.png">
+            <span>冲突预警</span>
+        </div>
         <div class="alert-message">${warningMessage}</div>
       </div>
     `;
@@ -168,6 +168,7 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
     const alarmMessage = alertInfo?.description || '与其他车辆存在冲突风险！';
     activeTabContent += `
       <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="alarm" data-vehicle="${vehicleId}">
+        <div class="alert">冲突告警</div>
         <div class="alert-message">${alarmMessage}</div>
       </div>
     `;
@@ -180,6 +181,7 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
     const actualValue = alertInfo?.actualValue || vehicle.actualValue || speed;
     activeTabContent += `
       <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="speed" data-vehicle="${vehicleId}">
+          <div class="alert">超速告警</div>
         <div class="speed-info">
           <div>规定速度: <span class="limit-value">${limitValue}km/h</span></div>
           <div>当前速度: <span class="actual-value">${actualValue.toFixed(1)}km/h</span></div>
@@ -194,6 +196,7 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
     const boundaryMessage = alertInfo?.description || '车辆已进入禁行区域！';
     activeTabContent += `
       <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="boundary" data-vehicle="${vehicleId}">
+        <div class="alert">越界告警</div>
         <div class="alert-message">${boundaryMessage}</div>
       </div>
     `;
@@ -204,9 +207,14 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
   html += `
         </div>
       </div>
-    </div>
   `;
-  
+  html+=`
+   <div class="label-header">
+        <span class="vehicle-id">${vehicleId}</span>
+        <span class="vehicle-speed">${formattedSpeed}</span>
+      </div>
+      </div>
+      `
   return html;
 }
 
@@ -336,12 +344,13 @@ defineExpose({
 }
 
 .label-container {
-  background-color: rgba(37, 37, 37, 0.7);
-  border-radius: 4px;
+  background: linear-gradient(to top,#93B0DB,#497CC9);
+  border-radius: 6px;
   color: #fff;
   padding: 10px;
+  padding-bottom: 0px;
   min-width: 170px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 10px 15px rgba(2, 2, 2, 0.25);
 }
 
 /* 简化标签样式 */
@@ -355,7 +364,7 @@ defineExpose({
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
   padding-bottom: 5px;
 }
 
@@ -367,12 +376,13 @@ defineExpose({
 
 .vehicle-id {
   font-weight: bold;
-  font-size: 14px;
+  font-size: 15px;
 }
 
 .vehicle-speed {
-  font-size: 12px;
-  color: #ccc;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.65);
+  font-weight: bold;
 }
 
 /* 标签页按钮样式 */
@@ -416,8 +426,8 @@ defineExpose({
 
 /* 标签图标样式 */
 .tab-icon {
-  width: 16px;
-  height: 16px;
+  width: 13px;
+  height: 13px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
@@ -449,16 +459,23 @@ defineExpose({
 
 /* 告警消息样式 */
 .alert-message {
-  font-size: 12px;
+  font-size: 10px;
+  font-weight: Medium;
   line-height: 1.4;
   padding: 5px;
-  border-radius: 3px;
-  /* background-color: rgba(255, 255, 255, 0.1); */
+  border-radius: 2px;
+  background-color: rgba(82, 122, 181, 1);
+}
+/* 具体告警提示 */
+.alert{
+  font-size: 10px;
+  font-weight: bold;
+  margin: 5px;
 }
 
 /* 超速信息样式 */
 .speed-info {
-  font-size: 12px;
+  font-size: 8px;
   line-height: 1.4;
 }
 

src/views/platform/index.vue

@@ -301,16 +301,17 @@ watch(() => mapRef.value?.map, (newMap) => {
 /* 告警统计卡片 */
 .alarm-stats-card {
   position: absolute;
-  top: 25%;
-  left: 20px;
-  width: 240px;
-  background-color: rgba(41, 44, 56, 0.85);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  top: 182px;
+  left: 28px;
+  width: 246px;
+  height: 142px;
+  background: linear-gradient(to top,#94B0DB,#4F81CC,#3D629A);
+  border-radius: 9px;
+  box-shadow: 0 10px 15px rgba(2, 2, 2, 0.25);
   color: #fff;
   z-index: 1000;
   backdrop-filter: blur(5px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 0.5px solid rgba(222, 213, 213, 0.53);
   overflow: hidden;
 }
 
@@ -319,19 +320,20 @@ watch(() => mapRef.value?.map, (newMap) => {
   justify-content: space-between;
   align-items: center;
   padding: 6px 10px; /* 减小内边距 */
-  background-color: rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  // background-color: rgba(0, 0, 0, 0.2);
+  border-bottom: 0.5px solid rgba(222, 213, 213, 0.53);
 }
 
 .stats-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: bold;
+  color: rgba(255, 255, 255, 1);
 }
 
 .stats-time {
-  font-size: 12px;
-  color: #A0A8B7;
-  font-family: 'Courier New', monospace;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.65);
+  font-family: 'PingFang SC', monospace;
 }
 
 .stats-content {
@@ -358,11 +360,13 @@ watch(() => mapRef.value?.map, (newMap) => {
   // }
   
   &.has-new {
-    background-color: rgba(255, 77, 79, 0.15);
+    // background-color: rgba(255, 77, 79, 0.15);
+    // 线性渐变角度
+    background: linear-gradient(135deg,rgba(240, 97, 97, 1) ,rgba(237, 180, 180, 0.48));
     animation: pulse 1.5s infinite;
     
     .stats-count {
-      color: #FF4D4F;
+      color: rgba(204, 14, 14, 1);
     }
   }
 }
@@ -370,8 +374,8 @@ watch(() => mapRef.value?.map, (newMap) => {
 .stats-icon {
 
   margin-right: 10px; /* 图标和文字之间的间距 */
-  width: 32px;
-  height: 32px;
+  width: 39px;
+  height: 39px;
   object-fit: contain;
   // border:1px solid red;
 }
@@ -380,19 +384,24 @@ watch(() => mapRef.value?.map, (newMap) => {
 .stats-text {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  width: 40px;
+  height: 37px;
 }
 
 .stats-count {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: bold;
-  line-height: 1;
+  width: 18px;
+  height: 20px;
+  color: rgba(255, 255, 255, 1);
 }
 
 .stats-label {
-  font-size: 12px;
-  color: #A0A8B7;
+  font-size: 10px;
+  color: rgba(255, 255, 255, 1);
   margin-top: 2px;
+  width: 40px;
+  height: 20px;
 }
 
 .new-badge {