地图

ZZJ

2021-12-03 1706494087a9f8fd22f691d279e9ef7756cd316d

 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;