平台概览ui修改

src/components/map/controls/VehicleLabelSystem.vue

@@ -11,7 +11,8 @@ const props = defineProps({
   map: Object,
   vehicles: Object
 });
-
+// 导入图片
+const select_icon = '../../../assets/images/select_icon.png';
 // 存储标签覆盖物
 const vehicleLabels = ref({});
 // 添加标签更新时间记录
@@ -129,17 +130,13 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
     <div class="label-container">
       <div class="label-tabs">
         <div class="tab-buttons">
-          <button class="tab-button ${hasWarning ? 'active' : 'disabled'}" data-tab="warning" data-vehicle="${vehicleId}">
-            <i class="tab-icon warning-icon"></i>
+          <button class="tab-button ${hasWarning ? 'warning-icon' : 'unwarning-icon'}" data-tab="warning" data-vehicle="${vehicleId}">
           </button>
-          <button class="tab-button ${hasAlarm ? 'active' : 'disabled'}" data-tab="alarm" data-vehicle="${vehicleId}">
-            <i class="tab-icon alarm-icon"></i>
+          <button class="tab-button ${hasAlarm ? 'alarm-icon' : 'unalarm-icon'}" data-tab="alarm" data-vehicle="${vehicleId}">
           </button>
-          <button class="tab-button ${hasSpeedViolation ? 'active' : 'disabled'}" data-tab="speed" data-vehicle="${vehicleId}">
-            <i class="tab-icon speed-icon"></i>
+          <button class="tab-button ${hasSpeedViolation ? 'speed-icon ' : 'unspeed-icon '}" data-tab="speed" data-vehicle="${vehicleId}">
           </button>
-          <button class="tab-button ${hasUnauthorizedEntry ? 'active' : 'disabled'}" data-tab="boundary" data-vehicle="${vehicleId}">
-            <i class="tab-icon boundary-icon"></i>
+          <button class="tab-button ${hasUnauthorizedEntry ? 'boundary-icon' : 'unboundary-icon'}" data-tab="boundary" data-vehicle="${vehicleId}">
           </button>
         </div>
         <div class="tab-content">
@@ -155,7 +152,7 @@ function createLabelContent(vehicleId, speed, alertInfo = {}) {
     activeTabContent = `
       <div class="tab-pane ${!activeTabFound ? 'active' : ''}" data-tab-content="warning" data-vehicle="${vehicleId}">
         <div class="alert">
-            <img src="${selectIcon}" />
+          <img src="${selectIcon}" alt="Select">
             <span>冲突预警</span>
         </div>
         <div class="alert-message">${warningMessage}</div>
@@ -169,7 +166,10 @@ 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">
+            <img src="${selectIcon}" alt="Select">
+            <span>冲突告警</span>
+        </div>
         <div class="alert-message">${alarmMessage}</div>
       </div>
     `;
@@ -182,7 +182,10 @@ 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="alert">
+            <img src="${selectIcon}" alt="Select">
+            <span>超速告警</span>
+        </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>
@@ -197,7 +200,10 @@ 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">
+            <img src="${selectIcon}" alt="Select">
+            <span>越界告警</span>
+        </div>
         <div class="alert-message">${boundaryMessage}</div>
       </div>
     `;
@@ -345,7 +351,7 @@ defineExpose({
 }
 
 .label-container {
-  background: linear-gradient(to top,#93B0DB,#497CC9);
+  background: linear-gradient(to top,#616D80,#2D405C);
   border-radius: 6px;
   color: #fff;
   padding: 10px;
@@ -377,11 +383,11 @@ defineExpose({
 
 .vehicle-id {
   font-weight: bold;
-  font-size: 15px;
+  font-size: 16px;
 }
 
 .vehicle-speed {
-  font-size: 10px;
+  font-size: 12px;
   color: rgba(255, 255, 255, 0.65);
   font-weight: bold;
 }
@@ -391,12 +397,12 @@ defineExpose({
   display: flex;
   gap: 5px;
   margin-bottom: 8px;
+  justify-content: space-around;
+  align-items: center;
 }
 
 .tab-button {
-  background-color: rgba(80, 80, 80, 0.5);
   border: none;
-  border-radius: 4px;
   width: 24px;
   height: 24px;
   display: flex;
@@ -404,9 +410,10 @@ defineExpose({
   justify-content: center;
   cursor: pointer;
   padding: 0;
+  background: transparent;
 }
 
-.tab-button.active {
+/* .tab-button.active {
   background-color: rgba(52, 152, 219, 0.7);
 }
 
@@ -423,33 +430,50 @@ defineExpose({
 .tab-button.disabled .tab-icon {
   opacity: 0.5;
   filter: grayscale(100%);
-}
+} */
 
 /* 标签图标样式 */
-.tab-icon {
+/* .tab-icon {
   width: 13px;
   height: 13px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
-}
+}  */
 
 .warning-icon {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFA500"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
+  background-image: url(../../../assets/images/select_warning.png);
+  background-size: cover;
+}
+.unwarning-icon {
+  background-image: url(../../../assets/images/unselect_warning.png);
+  background-size: 100% 100%;
 }
 
 .alarm-icon {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF4D4F"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>');
+  background-image: url(../../../assets/images/select_alarm.png);
+ background-size: cover;
+}
+.unalarm-icon {
+  background-image: url(../../../assets/images/unselect_alarm.png);
+  background-size: 100% 100%;
 }
-
 .speed-icon {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFD700"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
+  background-image: url(../../../assets/images/select_speed.png);
+  background-size: cover;
+}
+.unspeed-icon {
+  background-image: url(../../../assets/images/unselect_speed.png);
+  background-size: 100% 100%;
 }
-
 .boundary-icon {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF6B6B"><path d="M3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2zm16 14H5V5h14v14z"/></svg>');
+  background-image: url(../../../assets/images/select_boundary.png);
+  background-size: cover;
+}
+.unboundary-icon {
+  background-image: url(../../../assets/images/unselect_boundary.png);
+  background-size: 100% 100%;
 }
-
 .tab-pane {
   display: none;
 }
@@ -460,23 +484,23 @@ defineExpose({
 
 /* 告警消息样式 */
 .alert-message {
-  font-size: 10px;
+  font-size: 12px;
   font-weight: Medium;
   line-height: 1.4;
   padding: 5px;
   border-radius: 2px;
-  background-color: rgba(82, 122, 181, 1);
+  background-color: rgba(138, 149, 166, 0.51);
 }
 /* 具体告警提示 */
 .alert{
-  font-size: 10px;
+  font-size: 14px;
   font-weight: bold;
   margin: 5px;
 }
 
 /* 超速信息样式 */
 .speed-info {
-  font-size: 8px;
+  font-size: 12px;
   line-height: 1.4;
 }
 

src/views/platform/index.vue

@@ -301,11 +301,11 @@ watch(() => mapRef.value?.map, (newMap) => {
 /* 告警统计卡片 */
 .alarm-stats-card {
   position: absolute;
-  top: 182px;
+  top: 177px;
   left: 28px;
   width: 246px;
-  height: 142px;
-  background: linear-gradient(to top,#94B0DB,#4F81CC,#3D629A);
+  height: 147px;
+  // background: linear-gradient(to top,#94B0DB,#4F81CC,#3D629A);
   border-radius: 9px;
   box-shadow: 0 10px 15px rgba(2, 2, 2, 0.25);
   color: #fff;
@@ -319,28 +319,30 @@ watch(() => mapRef.value?.map, (newMap) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 6px 10px; /* 减小内边距 */
-  // background-color: rgba(0, 0, 0, 0.2);
+  padding: 4px 10px; /* 减小内边距 */
+  background-color: #343744;
   border-bottom: 0.5px solid rgba(222, 213, 213, 0.53);
 }
 
 .stats-title {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: bold;
   color: rgba(255, 255, 255, 1);
 }
 
 .stats-time {
-  font-size: 10px;
+  font-size: 12px;
   color: rgba(255, 255, 255, 0.65);
   font-family: 'PingFang SC', monospace;
 }
 
 .stats-content {
+  width: 246px;
+  height: 116px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
-  // background-color: rgba(255, 255, 255, 0.05);
+  background-color: #424851;
   padding: 1px;
 }
 
@@ -351,6 +353,8 @@ watch(() => mapRef.value?.map, (newMap) => {
   display: flex;
   flex-direction: row; /* 改为水平布局 */
   align-items: center;
+  width: 123px;
+  height: 58px;
   // background-color: rgba(41, 44, 56, 0.95);
   transition: all 0.3s ease;
   
@@ -384,23 +388,25 @@ watch(() => mapRef.value?.map, (newMap) => {
 .stats-text {
   display: flex;
   flex-direction: column;
-  width: 40px;
+  width: 56px;
   height: 37px;
+  justify-content: center;
 }
 
 .stats-count {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: bold;
-  width: 18px;
+  width: 20px;
   height: 20px;
   color: rgba(255, 255, 255, 1);
 }
 
 .stats-label {
-  font-size: 10px;
+  font-size: 14px;
+  font-weight: bold;
   color: rgba(255, 255, 255, 1);
   margin-top: 2px;
-  width: 40px;
+  width: 56px;
   height: 20px;
 }