mes_mobile/pages/person/alarm.vue

<template>
	<!-- 设备报警 -->
	<view class="page_padding">
		<view class="content_layout" @click="cancelLongpress">
			<view class="item_layout" v-for="(item, index) in list" :key="index">
				<view :class="islongpress?'longpress_style':''" @longpress="longpress" @click="deleteAlarm">
					<image :src="item.url"  class="img_style" mode=""></image>
				</view>
				<view class="font13 flex_layout">
					<text class="flex1">{{item.name}}</text>
					<text>{{item.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				islongpress:false,
				list:[
					{name:'周边侵入警报',time:'2023-09-01',url:'../../static/logo.png'},
					{name:'周边侵入警报',time:'2023-09-01',url:'../../static/logo.png'},
					{name:'周边侵入警报',time:'2023-09-01',url:'../../static/logo.png'},
				]
			}
		},
		methods: {
			longpress(){
				console.log('长按事件')
				this.islongpress = true
			},
			//取消
			cancelLongpress(){
				this.islongpress = false
			},
			//删除警告
			deleteAlarm(){
				if(this.islongpress){
					console.log('删除')
				}
			},
		}
	}
</script>

<style>
/* .content_layout{display: flex;flex-flow: wrap;}
.item_layout{width: 50%;} */
.content_layout{ 
	display: grid;
	grid-template-columns: 1fr 1fr;/* 每一列占一行的一半 */
	grid-gap: 10px; /* 可选的间距 */
}
.img_style{height: 110px;width: 100%;}
.longpress_style{background-color: #000;
    opacity: 0.2;}
</style>