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