77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<template>
|
|
<Card title="标养室培养">
|
|
<div class="environment">
|
|
<div class="item">
|
|
<div class="icon temperature"></div>
|
|
<div class="info">
|
|
<div class="label">室内温度</div>
|
|
<div class="value"><span>26</span> ℃</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="icon humidity"></div>
|
|
<div class="info">
|
|
<div class="label">室内湿度</div>
|
|
<div class="value"><span>26</span> %</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="icon spray"></div>
|
|
<div class="info">
|
|
<div class="label">喷淋次数</div>
|
|
<div class="value"><span>26</span> 次</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../components/Card.vue'
|
|
export default {
|
|
components: { Card }
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.environment {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
display: flex;
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.icon {
|
|
margin-right: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
&.temperature {
|
|
background: url(../assets/images/quality/i-temperature.png) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&.humidity {
|
|
background: url(../assets/images/quality/i-humidity.png) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
&.spray {
|
|
background: url(../assets/images/quality/i-spray.png) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.info {
|
|
.value {
|
|
margin-top: 4px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
span {
|
|
color: #f7d502;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|