update EquipmentPIcs

.env.dev

@@ -5,8 +5,8 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-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.1.49:48080'
+VUE_APP_BASE_API = 'http://192.168.0.33:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.188:48080'
 
 # 路由懒加载

src/views/core/base/equipment/components/EquipmentPics.vue

@@ -7,7 +7,12 @@
 
 <template>
 	<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>
 </template>
 
@@ -20,7 +25,7 @@ export default {
 		return {
 			images: Array(10)
 				.fill(1)
-				.map((_, index) => `../assets/eq${index + 1}.jpg`),
+				.map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
 		};
 	},
 	computed: {},
@@ -30,8 +35,48 @@ export default {
 
 <style scoped lang="scss">
 .equipment-pics {
-	background: #fcfcfc;
+	// background: #cfcfcf;
 	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>

src/views/core/base/equipment/index.vue

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