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