mes_mobile/pages/person/alarm.vue

61 lines
1.5 KiB
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>