实时报警进度条样式修改

src/views/homeIndex/components/RealTimeAlarm.vue

@@ -5,7 +5,7 @@
             <div class="header-item">设备类型</div>
             <div class="header-item">设备IMEI</div>
             <div class="header-item">报警事件</div>
-            <div class="header-item">报警位置</div>
+            <div class="header-item ">报警位置</div>
         </div>
         <div class="alarm-table-body" ref="tableBody"
             :style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
@@ -18,11 +18,11 @@
                         0: '强制报警',
                         1: '撞击闯入',
                         2: '自动报警',
-                    3: '电子围栏告警'
-                    }[item.deviceAction]}}
-                  
+                        3: '电子围栏告警'
+                    }[item.deviceAction] }}
+
                 </div>
-                <div class="item-cell">{{ item.location }}</div>
+                <div class="item-cell loaction">{{ item.location }}</div>
             </div>
         </div>
     </div>
@@ -79,12 +79,31 @@ onMounted(() => {
     color: #fff;
 }
 
+/* Webkit浏览器滚动条样式 */
+.alarm-table-body::-webkit-scrollbar {
+    width: 8px;
+}
+
+.alarm-table-body::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 4px;
+}
+
+.alarm-table-body::-webkit-scrollbar-thumb {
+    background: #267AD0;
+    border-radius: 4px;
+}
+
+.alarm-table-body::-webkit-scrollbar-thumb:hover {
+    background: #267AD0;
+}
+
 .alarm-item {
     display: flex;
     border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
     font-size: 0.6vw;
     align-items: center;
-    padding: 0.5vw;
+    padding: 0.8vw;
 }
 
 .item-cell {
@@ -92,6 +111,9 @@ onMounted(() => {
     text-align: center;
 }
 
+// .item-cell.loaction{
+//     color: #267AD0;
+// }
 .alarm-event {
     color: #ff5252;
     /* 报警事件红色显示 */