update EquipmentPIcs

This commit is contained in:
lb 2023-08-21 14:05:15 +08:00
parent a4c1438e59
commit fa2505d5a2
3 changed files with 55 additions and 6 deletions

View File

@ -5,8 +5,8 @@ ENV = 'development'
VUE_APP_TITLE = 芋道管理系统 VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
VUE_APP_BASE_API = 'http://192.168.1.49:48080' # VUE_APP_BASE_API = 'http://192.168.1.49:48080'
# VUE_APP_BASE_API = 'http://192.168.0.33:48080' VUE_APP_BASE_API = 'http://192.168.0.33:48080'
# VUE_APP_BASE_API = 'http://192.168.1.188:48080' # VUE_APP_BASE_API = 'http://192.168.1.188:48080'
# 路由懒加载 # 路由懒加载

View File

@ -7,7 +7,12 @@
<template> <template>
<div class="equipment-pics"> <div class="equipment-pics">
<img v-for="url,idx in images" :key="url" :src="url" alt="" /> <div v-for="(url, idx) in images" :key="url">
<img :src="url" alt="" />
<div class="big-img">
<img :src="url" alt="">
</div>
</div>
</div> </div>
</template> </template>
@ -20,7 +25,7 @@ export default {
return { return {
images: Array(10) images: Array(10)
.fill(1) .fill(1)
.map((_, index) => `../assets/eq${index + 1}.jpg`), .map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
}; };
}, },
computed: {}, computed: {},
@ -30,8 +35,48 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.equipment-pics { .equipment-pics {
background: #fcfcfc; // background: #cfcfcf;
padding: 12px; padding: 12px;
margin: 8px; // margin: 8px;
display: flex;
overflow-x: auto;
}
.equipment-pics > div {
height: 100px;
position: relative;
cursor: pointer;
}
.equipment-pics > div:not(:last-child) {
margin-right: 12px;
}
.equipment-pics > div > img {
height: 95%;
}
.equipment-pics > div > .big-img {
display: none;
position: fixed;
// inset: 0;
// margin: auto;
top: 0;
right: 0;
width: 640px;
height: 480px;
background: #000;
overflow: hidden;
}
.equipment-pics > div:hover > .big-img {
display: flex;
align-items: center;
justify-content: center;
}
.equipment-pics > div > .big-img > img {
height: 99%;
width: 99%;
} }
</style> </style>

View File

@ -300,6 +300,10 @@ export default {
label: '设备图片', label: '设备图片',
prop: 'fileUrls', prop: 'fileUrls',
subcomponent: EquipmentPics, subcomponent: EquipmentPics,
pictures: async () => {
// some async request
return []
},
style: 'overflow-x: auto;' style: 'overflow-x: auto;'
}, },
], ],