You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.6 KiB
114 lines
2.6 KiB
1 year ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view v-for="(item, index) in list" :key="index" class="alarm-box">
|
||
|
|
<view
|
||
|
|
class="alarm-left"
|
||
|
|
:style="`borderColor: ${colorList[item.title6]} `"
|
||
|
|
>
|
||
|
|
<i>{{ item.title5 }}</i>
|
||
|
|
<i>{{ item.title6 }}</i>
|
||
|
|
</view>
|
||
|
|
<view class="alarm-center">
|
||
|
|
<text>{{ item.title1 }}</text>
|
||
|
|
<text>品牌:{{ item.title2 }}</text>
|
||
|
|
<text>型号:{{ item.title3 }}</text>
|
||
|
|
<text>报警时间:{{ item.title4 }}</text>
|
||
|
|
<view class="alarm-center-btn">一键报送</view>
|
||
|
|
</view>
|
||
|
|
<view class="alarm-right"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
colorList: {
|
||
|
|
特别严重: "rgba(189,49,36,1)",
|
||
|
|
严重: "rgba(233,157,66,1)",
|
||
|
|
},
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
title1: "通风柜",
|
||
|
|
title2: "德力西",
|
||
|
|
title3: "FSAJ",
|
||
|
|
title4: "2024-08-09",
|
||
|
|
title5: "一级",
|
||
|
|
title6: "特别严重",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title1: "通风柜",
|
||
|
|
title2: "德力西",
|
||
|
|
title3: "FSAJ",
|
||
|
|
title4: "2024-08-09",
|
||
|
|
title5: "一级",
|
||
|
|
title6: "严重",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.alarm-box {
|
||
|
|
margin: 0 40rpx 32rpx;
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
.alarm-left {
|
||
|
|
width: 160rpx;
|
||
|
|
height: 160rpx;
|
||
|
|
text-align: center;
|
||
|
|
border: 16rpx solid rgba(189, 49, 36, 1);
|
||
|
|
border-radius: 50%;
|
||
|
|
margin: 36rpx 36rpx 36rpx 48rpx;
|
||
|
|
i {
|
||
|
|
display: block;
|
||
|
|
text-align: center;
|
||
|
|
&:nth-child(1) {
|
||
|
|
color: rgba(16, 16, 16, 1);
|
||
|
|
font-size: 28rpx;
|
||
|
|
padding-top: 30rpx;
|
||
|
|
}
|
||
|
|
&:nth-child(2) {
|
||
|
|
color: rgba(190, 190, 190, 1);
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.alarm-center {
|
||
|
|
flex: 1;
|
||
|
|
color: rgba(154, 154, 154, 1);
|
||
|
|
font-size: 24rpx;
|
||
|
|
position: relative;
|
||
|
|
text {
|
||
|
|
display: block;
|
||
|
|
line-height: 40rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
&:nth-child(1) {
|
||
|
|
color: rgba(0, 0, 0, 1);
|
||
|
|
font-size: 28rpx;
|
||
|
|
padding: 28rpx 0 8rpx 0;
|
||
|
|
}
|
||
|
|
&:nth-child(2) {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.alarm-center-btn {
|
||
|
|
width: 160rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
background-color: rgba(58, 98, 215, 0.16);
|
||
|
|
color: rgba(58, 98, 215, 1);
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 60rpx;
|
||
|
|
text-align: center;
|
||
|
|
position: absolute;
|
||
|
|
top: 80rpx;
|
||
|
|
right: 40rpx;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|