告警统计UI修改

src/views/platform/index.vue

@@ -16,7 +16,7 @@
       </div>
       <div class="stats-content">
         <div class="stats-item" :class="{ 'has-new': hasNewWarning }">
-          <i class="stats-icon warning-icon">⚠</i>
+          <img src="../../assets/images/count1.png" class="stats-icon">
           <div class="stats-text">
             <span class="stats-count">{{ warningCount }}</span>
             <span class="stats-label">冲突预警</span>
@@ -24,7 +24,7 @@
           <span v-if="hasNewWarning" class="new-badge"></span>
         </div>
         <div class="stats-item" :class="{ 'has-new': hasNewAlert }">
-          <i class="stats-icon alert-icon">🚨</i>
+          <img src="../../assets/images/count2.png" class="stats-icon">
           <div class="stats-text">
             <span class="stats-count">{{ alertCount }}</span>
             <span class="stats-label">冲突告警</span>
@@ -32,7 +32,7 @@
           <span v-if="hasNewAlert" class="new-badge"></span>
         </div>
         <div class="stats-item" :class="{ 'has-new': hasNewBoundary }">
-          <i class="stats-icon boundary-icon">🚧</i>
+          <img src="../../assets/images/count3.png" class="stats-icon">
           <div class="stats-text">
             <span class="stats-count">{{ boundaryCount }}</span>
             <span class="stats-label">越界告警</span>
@@ -40,7 +40,7 @@
           <span v-if="hasNewBoundary" class="new-badge"></span>
         </div>
         <div class="stats-item" :class="{ 'has-new': hasNewSpeed }">
-          <i class="stats-icon speed-icon">⚡</i>
+          <img src="../../assets/images/count4.png" class="stats-icon">
           <div class="stats-text">
             <span class="stats-count">{{ speedCount }}</span>
             <span class="stats-label">超速告警</span>
@@ -338,22 +338,24 @@ watch(() => mapRef.value?.map, (newMap) => {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
-  background-color: rgba(255, 255, 255, 0.05);
+  // background-color: rgba(255, 255, 255, 0.05);
   padding: 1px;
 }
 
 .stats-item {
+  
   position: relative;
   padding: 8px 10px; /* 减小内边距 */
   display: flex;
   flex-direction: row; /* 改为水平布局 */
   align-items: center;
-  background-color: rgba(41, 44, 56, 0.95);
+  // background-color: rgba(41, 44, 56, 0.95);
   transition: all 0.3s ease;
   
-  &:hover {
-    background-color: rgba(52, 122, 226, 0.1);
-  }
+  // &:hover {
+    
+  //   background-color: rgba(52, 122, 226, 0.1);
+  // }
   
   &.has-new {
     background-color: rgba(255, 77, 79, 0.15);
@@ -366,36 +368,14 @@ watch(() => mapRef.value?.map, (newMap) => {
 }
 
 .stats-icon {
-  font-size: 16px;
+
   margin-right: 10px; /* 图标和文字之间的间距 */
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  // border:1px solid red;
 }
 
-.warning-icon {
-  color: #FFA500;
-  background-color: rgba(255, 165, 0, 0.2);
-}
-
-.alert-icon {
-  color: #FF4D4F;
-  background-color: rgba(255, 77, 79, 0.2);
-}
-
-.boundary-icon {
-  color: #FF6B6B;
-  background-color: rgba(255, 107, 107, 0.2);
-}
-
-.speed-icon {
-  color: #FFD700;
-  background-color: rgba(255, 215, 0, 0.2);
-}
 
 .stats-text {
   display: flex;