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 | 110 ++++++++++++++++++++++++++++++++----------------------
1 files changed, 65 insertions(+), 45 deletions(-)
diff --git a/src/pages/internetEquipment/module/realTimeModule.vue b/src/pages/internetEquipment/module/realTimeModule.vue
index f0d8f92..198a452 100644
--- a/src/pages/internetEquipment/module/realTimeModule.vue
+++ b/src/pages/internetEquipment/module/realTimeModule.vue
@@ -1,62 +1,82 @@
<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="item.image" alt="" class="warnArea">
- <warnDescription
- :warnDes="{code:item.code,
- time:item.time,
- longitude:item.longitude,
- latitude:item.latitude,
- warn:item.warn}"/>
+ <div class="title">瀹炴椂鎶撴媿棰勮</div>
+ <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>
<script>
-import warnDescription from '@/pages/internetEquipment/components/warnDescription'
+import warnDescription from "@/pages/internetEquipment/components/warnDescription";
export default {
- props :{
- warnArr:{
- type: Array
- }
+ props: {
+ boundArr: {
+ type: Array,
},
- components :{
- warnDescription
- }
-}
+ },
+ components: {
+ warnDescription,
+ },
+};
</script>
<style scoped lang="scss">
.real-time-module {
- display: flex;
- flex-wrap: wrap;
- padding: 20px;
- padding-right: 0px;
- width: 570px;
- height: 292px;
- background-color: #fff;
- box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
- border-radius: 15px;
- overflow-y: scroll;
+ padding: 20px;
+ width: 570px;
+ height: 292px;
+ background-color: #fff;
+ box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
+ border-radius: 15px;
+ overflow-y: scroll;
- .title {
- margin-bottom: 10px;
- font-size: 14px;
- font-weight: 700;
- width: 530px;
- text-align: left;
- }
+ .real-time-list {
+ display: grid;
+ justify-content: space-between;
+ grid-template-columns: repeat(auto-fill, 170px);
+ grid-gap: 10px;
+ }
- .real-time-item {
- margin-right: 14px;
- }
- .warnArea {
- width: 167px;
- height: 104px;
- border-radius: 5px;
- }
+ .title {
+ margin-bottom: 10px;
+ font-size: 14px;
+ font-weight: 700;
+ width: 100%;
+ text-align: left;
+ }
+
+ .real-time-item {
+ margin-right: 10px;
+ }
+
+ .real-time-item:last-child {
+ margin-right: auto;
+ }
+
+ .warnArea {
+ width: 167px;
+ height: 104px;
+ border-radius: 5px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0