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
<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> |