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

@@ -0,0 +1,32 @@
+<!-- 
+    filename: EquipmentAssets.vue
+    author: liubin
+    date: 2023-08-22 11:11:18
+    description: 设备资产
+-->
+
+<template>
+    <div class="equipment-assets"></div>
+</template>
+
+<script>
+export default {
+    name: "EquipmentAssets",
+    components: {},
+    props: {},
+    data() {
+        return {}
+    },
+    computed: {},
+    methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.equipment-assets {
+    background: #f1f1f1;
+    padding: 12px;
+    min-height: 128px;
+    margin-top: 8px;
+}
+</style>

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

@@ -8,10 +8,11 @@
 <template>
 	<div class="equipment-pics">
 		<div v-for="(url, idx) in images" :key="url">
-			<img :src="url" alt="" />
+			<img :src="url" :alt="url" />
-			<div class="big-img">
+			<figure class="big-img">
-				<img :src="url" alt="">
+				<img :src="url" :alt="url">
-			</div>
+				<figcaption>{{ desc[idx] }}</figcaption>
+			</figure>
 		</div>
 	</div>
 </template>
@@ -23,6 +24,20 @@ export default {
 	props: {},
 	data() {
 		return {
+			desc: [
+				'车间设备 - 1',
+				'车间设备 - 2',
+				'车间设备 - 3',
+				'车间设备 - 4',
+				'车间设备 - 5',
+				'车间设备 - 6',
+				'车间设备 - 7',
+				'车间设备 - 8',
+				'车间设备 - 9',
+				'车间设备 - 10',
+				'车间设备 - 11',
+				'车间设备 - 12',
+			],
 			images: Array(10)
 				.fill(1)
 				.map((_, index) => require(`../assets/eq${index + 1}.jpg`)),
@@ -56,7 +71,7 @@ export default {
 	height: 95%;
 }
 
-.equipment-pics > div > .big-img {
+.equipment-pics > div > figure {
 	display: none;
 	position: fixed;
 	// inset: 0;
@@ -69,14 +84,23 @@ export default {
 	overflow: hidden;
 }
 
-.equipment-pics > div:hover > .big-img {
+.equipment-pics > div:hover > figure {
+	margin: 0;
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }
 
-.equipment-pics > div > .big-img > img {
+.equipment-pics > div > figure > img {
-	height: 99%;
+	flex: 1;
-	width: 99%;
+}
+
+.equipment-pics > div > figure > figcaption {
+	height: 24px;
+	margin-top: 8px;
+	font-size: 18px;
+	line-height: 1;
+	color: #fff;
 }
 </style>

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

@@ -46,6 +46,7 @@ import moment from 'moment';
 import basicPageMixin from '@/mixins/lb/basicPageMixin';
 import { getAccessToken } from '@/utils/auth';
 import EquipmentPics from './components/EquipmentPics';
+import EquipmentAssets from './components/EquipmentAssets';
 
 import {
 	createEquipment,
@@ -291,6 +292,7 @@ export default {
 						key: 'eq-assets',
 						label: '设备资料',
 						prop: 'fileNames',
+						subcomponent: EquipmentAssets,
 					},
 				],
 				[