update EquipmentPIcs
This commit is contained in:
parent
a4c1438e59
commit
fa2505d5a2
4
.env.dev
4
.env.dev
@ -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'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
|
@ -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>
|
||||||
|
@ -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;'
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
Loading…
Reference in New Issue
Block a user