From 9e4cab9fc513bdde476f4078e16c05d0a3cd0dfb Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期三, 17 八月 2022 19:18:47 +0800 Subject: [PATCH] Default Changelist --- src/views/intellectInspect/intelligentLine/index.vue | 74 ++++++++++++++++++++++++++++--------- 1 files changed, 56 insertions(+), 18 deletions(-) diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue index da39b51..4c8f6e2 100644 --- a/src/views/intellectInspect/intelligentLine/index.vue +++ b/src/views/intellectInspect/intelligentLine/index.vue @@ -23,7 +23,9 @@ <div class="line-map" v-if="dataList && dataList.length > 0"> <div class="line-item" v-for="(item, index) in dataList" :key="index"> <div class="picbox"> - <img src="../../../assets/loginPage/equipment.jpg"/> + <div class="imgbox"> + <img :src="item.rfidImage==null?defaultImg:item.rfidImage"/> + </div> <p> RFID: <span>{{ item.rfid }}</span> </p> @@ -103,7 +105,8 @@ socket: any; socketData: string; data: Array<any>; - id: string + id: string; + defaultImg: string } export default { name: 'intelligentLine', @@ -119,7 +122,8 @@ socketData: '', socket: null, data: [], - id: '' + id: '', + defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href }); onMounted(() => { @@ -261,23 +265,35 @@ .picbox { width: 100%; - height: 180px; + height: 200px; padding: 10px; - margin-bottom: 40px; + margin-bottom: 20px; box-sizing: border-box; - - img { - display: block; + .imgbox{ width: 100%; - height: 100px; - margin-bottom: 8px; + height: 120px; + position: relative; + margin-bottom: 10px; border-radius: 4px; + overflow: hidden; + img { + display: block; + width: 100%; + height: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + } } + p { font-size: 14px; white-space: nowrap; color: rgba(255, 255, 255, 0.8); - margin-top: 10px; + margin-bottom: 4px; span { color: #fff; } @@ -287,7 +303,7 @@ .item { width: calc((100vw - 40px) / 6); height: calc((100vh - 130px) / 5); - padding: 0 20px 20px 50px; + padding: 0 40px 20px 50px; position: relative; box-sizing: border-box; border-left: 1px solid #36fcfc; @@ -462,13 +478,24 @@ padding: 10px; margin-bottom: 40px; box-sizing: border-box; - - img { - display: block; + .imgbox{ width: 100%; height: 100px; + position: relative; margin-bottom: 6px; border-radius: 4px; + overflow: hidden; + img { + display: block; + width: 100%; + height: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + } } p { font-size: 14px; @@ -661,13 +688,24 @@ padding: 10px; margin-bottom: 30px; box-sizing: border-box; - - img { - display: block; + .imgbox{ width: 100%; height: 80px; + position: relative; margin-bottom: 10px; border-radius: 4px; + overflow: hidden; + img { + display: block; + width: 100%; + height: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + } } p { font-size: 12px; -- Gitblit v1.9.2