<template>
|
<div class="item">
|
<div class="item-air">
|
<div class="gas">
|
<div class="gas-t">CH₄</div>
|
<div class="gas-CH">
|
<img src="@/assets/images/screen/CH4.png" alt="" />
|
</div>
|
<div class="gas-data"><span>1.1</span>%LEL</div>
|
</div>
|
<div class="gas">
|
<div class="gas-t">H₂S</div>
|
<div class="gas-H2">
|
<img src="@/assets/images/screen/H2S.png" alt="" />
|
</div>
|
<div class="gas-data"><span>1.2</span>%LEL</div>
|
</div>
|
</div>
|
<div class="item-address">
|
安装位置：重庆市丰都县龙城大道435号安装位置：重庆市丰都县龙城大道435号
|
</div>
|
<div class="status">
|
<span>运行状态：</span>
|
<span class="val">正常运行</span>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
|
</script>
|
|
<style lang="scss" scoped>
|
.item{
|
width: 144px;
|
height: 164px;
|
border-radius: 10px;
|
background: radial-gradient( rgba(50,154,196,0.5) 0%, rgba(21,74,131,0.5) 100%);
|
box-shadow: inset 0px 0px 10px 0px rgba(50,154,196,0.8);
|
padding: 8px;
|
box-sizing: border-box;
|
.item-air{
|
display: flex;
|
justify-content: center;
|
gap: 0.3rem;
|
.gas{
|
width: 60px;
|
height: 67px;
|
background-image: url('@/assets/images/screen/bg-air.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
padding: 0.2rem;
|
box-sizing: border-box;
|
font-size: 0.6rem;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.gas-CH{
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
img{
|
width: 28px;
|
height: 30px;
|
}
|
}
|
.gas-H2{
|
height: 30px;
|
line-height: 40px;
|
text-align: center;
|
img{
|
width: 25px;
|
height: 16px;
|
}
|
}
|
.gas-data{
|
text-align: center;
|
span{
|
font-size: 0.7rem;
|
}
|
}
|
}
|
}
|
.item-address{
|
font-size: 0.8rem;
|
margin-top: 0.6rem;
|
width: 100%;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.status{
|
font-size: 0.8rem;
|
margin-top: 0.6rem;
|
.val{
|
color: rgb(40, 250, 40);
|
font-size: 0.8rem;
|
}
|
}
|
}
|
</style>
|
