From f908e50d3930b63c74ed599c82567780ffce8609 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 17 十二月 2021 14:32:38 +0800
Subject: [PATCH] 按钮
---
src/pages/internetEquipment/module/realTimeModule.vue | 53 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 36 insertions(+), 17 deletions(-)
diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue
index 190a5e0..198a452 100644
--- a/src/pages/internetEquipment/module/realTimeModule.vue
+++ b/src/pages/internetEquipment/module/realTimeModule.vue
@@ -1,17 +1,27 @@
<template>
<div class="real-time-module">
<div class="title">瀹炴椂鎶撴媿棰勮</div>
- <div class="real-time-item" v-for="(item, index) in warnArr" :key="index">
- <img src="/images/settings/background.png" 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="'http://192.168.8.10:9000' + 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>
@@ -20,7 +30,7 @@
import warnDescription from "@/pages/internetEquipment/components/warnDescription";
export default {
props: {
- warnArr: {
+ boundArr: {
type: Array,
},
},
@@ -32,10 +42,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 +50,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: 14px;
+ margin-right: 10px;
}
+
+ .real-time-item:last-child {
+ margin-right: auto;
+ }
+
.warnArea {
width: 167px;
height: 104px;
--
Gitblit v1.8.0