From dff9fb32c1bac52d378a6d196f670b92610c01d3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期四, 16 十二月 2021 17:21:49 +0800
Subject: [PATCH] 自适应2
---
src/pages/internetEquipment/module/realTimeModule.vue | 51 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 35 insertions(+), 16 deletions(-)
diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue
index 140629d..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 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="'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>
@@ -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: 13px;
+ margin-right: 10px;
}
+
+ .real-time-item:last-child {
+ margin-right: auto;
+ }
+
.warnArea {
width: 167px;
height: 104px;
--
Gitblit v1.8.0