From 1706494087a9f8fd22f691d279e9ef7756cd316d Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 03 十二月 2021 18:15:21 +0800
Subject: [PATCH] 地图

---
 src/pages/internetEquipment/module/realTimeModule.vue |   47 +++++++++++++++++++++++++++++++----------------
 1 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue
index 140629d..80bdda4 100644
--- a/src/pages/internetEquipment/module/realTimeModule.vue
+++ b/src/pages/internetEquipment/module/realTimeModule.vue
@@ -1,17 +1,23 @@
 <template>
   <div class="real-time-module">
     <div class="title">瀹炴椂鎶撴媿棰勮</div>
-    <div class="real-time-item" v-for="(item, index) in boundArr" :key="index">
-      <img :src="item.snap_shot" alt="" class="warnArea" />
-      <warnDescription
-        :warnDes="{
-          code: item.device_sn,
-          time: item.updated_at,
-          longitude: item.lng,
-          latitude: item.lat,
-          warn: '鏈湪鐢靛瓙鍥存爮鍖哄煙',
-        }"
-      />
+    <div class="real-time-list">
+      <div
+        class="real-time-item"
+        v-for="(item, index) in boundArr"
+        :key="index"
+      >
+        <img :src="item.snap_shot" alt="" class="warnArea" />
+        <warnDescription
+          :warnDes="{
+            code: item.device_sn,
+            time: item.updated_at,
+            longitude: item.lng,
+            latitude: item.lat,
+            warn: '鏈湪鐢靛瓙鍥存爮鍖哄煙',
+          }"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -32,10 +38,7 @@
 
 <style scoped lang="scss">
 .real-time-module {
-  display: flex;
-  flex-wrap: wrap;
   padding: 20px;
-  padding-right: 0px;
   width: 570px;
   height: 292px;
   background-color: #fff;
@@ -43,17 +46,29 @@
   border-radius: 15px;
   overflow-y: scroll;
 
+  .real-time-list {
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: repeat(auto-fill, 170px);
+    grid-gap: 10px;
+  }
+
   .title {
     margin-bottom: 10px;
     font-size: 14px;
     font-weight: 700;
-    width: 530px;
+    width: 100%;
     text-align: left;
   }
 
   .real-time-item {
-    margin-right: 13px;
+    margin-right: 10px;
   }
+
+  .real-time-item:last-child {
+    margin-right: auto;
+  }
+
   .warnArea {
     width: 167px;
     height: 104px;

--
Gitblit v1.8.0