menduner/src/views/recruit/personal/PersonalCenter/student/InternshipReport/index.vue

<template>
	<!-- 筛选 -->
	<div>筛选</div>
	<v-divider class="my-3"></v-divider>
	<!-- 实习报告 -->
	<div>
		<div v-for="item in items" :key="item.date" class="mb-3">
			<div class="title-date">{{ item.date }}</div>
			<div class="d-flex flex-wrap">
				<img 
					v-for="(src, index) in item.arr" 
					:key="index" 
					:src="src" 
					@click="handlePreview(item.arr, index)" 
					class="cursor-pointer" 
					style="width: 200px; height: 250px;"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
defineOptions({ name: 'InternshipReport' })
import { ref } from 'vue'
import { usePersonCenterStore } from '@/store/personCenter'

const items = ref([
	{
		date: '2025-02-21',
		arr: [
			'https://minio.citupro.com/dev/huomiao/report.png',
			'https://minio.citupro.com/dev/huomiao/report1.png',
			'https://minio.citupro.com/dev/huomiao/report2.png'
		]
	},
	{
		date: '2025-02-25',
		arr: [
			'https://minio.citupro.com/dev/huomiao/report.png',
			'https://minio.citupro.com/dev/huomiao/report1.png',
			'https://minio.citupro.com/dev/huomiao/report2.png'
		]
	},
	{
		date: '2025-03-01',
		arr: [
			'https://minio.citupro.com/dev/huomiao/report.png',
			'https://minio.citupro.com/dev/huomiao/report1.png',
			'https://minio.citupro.com/dev/huomiao/report2.png'
		]
	}
])

// 预览
const personCenterStore = usePersonCenterStore()
const handlePreview = (arr, index) => {
	personCenterStore.setPreviewData(arr, index)
}
</script>

<style scoped lang="scss">
.title-date {
	border-left: 5px solid var(--v-primary-base);
	padding-left: 12px;
	line-height: 17px;
}
</style>