assess-app/components/en-utils/en-image-video/en-image-video.vue

<template>
	<view>
		<view class="row image-box">
			<view class="image-item m-r20 m-t20" mode="aspectFill" v-for="(item,index) in imgList">
				<image class="image r-10 " :src="item.url" :style="[{width},{height}]" @click="onPreviewImage(item)">
				</image>
				<image class="wh-45 video-icon" src="/static/img/task/play.png" mode="aspectFill" v-if="item.type == 2">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			is_both: {
				type: Boolean,
				default: false
			},
			width: {
				type: String,
				default: '130rpx'
			},
			height: {
				type: String,
				default: '130rpx'
			},
			img: {
				default: []
			},
			previewImage: {
				default: []
			}
		},
		data() {
			return {
				imgList: [{
					url: '/static/img/index/top-nav.png',
					type: 1
				}, {
					url: '/static/img/index/top-nav.png',
					type: 2
				}, {
					url: '/static/img/index/top-nav.png',
					type: 1
				}, {
					url: '/static/img/index/top-nav.png',
					type: 2
				}, {
					url: '/static/img/index/top-nav.png',
					type: 2
				}, ]
			}
		},
		mounted() {},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.image-box {
		flex-wrap: wrap;
	}

	.image-item {
		position: relative;

		.image {
			display: block;
		}

		.video-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>