<template>
  <div class="mode-info-module">
    <common-title title="系统模式信息"></common-title>    
    <div class="visualization-common-border box">
      <div>
        <div class="itemHead">温度</div>
        <div class="item">
          <div id="demo1">温度：</div>
          <div>输出：</div>
        </div>
        <div class="item">
          <div id="demo1">升温
            <div class="img"></div>
          </div>
          <div>降温
            <div class="img2"></div>
          </div>
        </div>
        <div class="item">
          <div id="demo1">温度设定：(123)℃</div>
          <div>斜率设定：(123)℃/min</div>
        </div>
        <div class="item">
          <div id="demo1">起始温度：(123)℃</div>
          <div>目标温度：(123)℃</div>
        </div>
        <div class="itemHead">辐照</div>
        <div class="item">
          <div id="demo1">辐照强度：(0)W/㎡</div>
          <div>吹风</div>
        </div>
        <div class="item">
          <div id="demo1">时间 30min</div>
          <div>辐照强度设定：(0)W/㎡</div>
        </div>
      </div>
      <div>
        <div class="itemHead">湿度</div>
        <div class="item">
          <div id="demo1">湿度：80%</div>
          <div>输出：80%</div>
        </div>
        <div class="item">
          <div id="demo1">加湿
            <div class="img"></div>
          </div>
          <div>除湿
            <div class="img2"></div>
          </div>
        </div>
        <div class="item">
          <div>湿度设定：(123)%/min</div>
        </div>
        <div class="item">
          <div id="demo1">起始湿度：(123)%</div>
          <div>目标湿度：(123)%</div>
        </div>
        <div class="itemHead">淋雨</div>
        <div class="item">
          <div id="demo1">中雨</div>
          <div>暴雨</div>
        </div>
        <div class="item">
          <div id="demo1">时间 30min</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonTitle from '../components/commonTitle.vue'

export default {
  components: { commonTitle },
  name: '',
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped>
  @import '~@assets/less/uStyle.less';
</style>
<style lang="less" scoped>
  .mode-info-module{
    width: 100%;
    height: 100%;
  }
  .box {
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    /* row (默认值) : 主轴为水平万向，起点在左端。*/
    flex-direction: row;
  }
  .box>div{
    width: 50%;
    height: 89%;
    margin: 3%;
    // border: 1px solid rgb(255, 255, 255);
    // background-color: yellowgreen;
    // border: 1px solid red;
  }
  .itemHead{
    width: 100%;
    height: 10%;
    // border: 1px solid rgb(255, 255, 255);
    margin-bottom: 2.5%;
    background-color: #094F8D;
    color: #0CB8FE;
    padding-left: 3%;
    border-radius: 2px;
    display: flex;
    align-items: center;
  }
  .item{
    width: 100%;
    height: 10%;
    // border: 1px solid rgb(255, 255, 255);
    margin-bottom: 2.5%;
    background-color: #072A54;
    color: #FEFFFE;
    padding-left: 3%;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
  }
  .item>div{
    width: 50%;
    height: 100%;
    font-size: 10px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
  }
  .item>div#demo1{
    width: 46%;
    height: 100%;
    font-size: 10px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
  }
  .item>div{
    width: 52%;
    height: 100%;
    font-size: 10px;
    // border: 1px solid rgb(255, 255, 255);
    display: flex;
    align-items: center;
  }
  .img{
    width: 23%;
    height: 100%;
    margin-left: 10%;
    background: url(../../../../assets/visualization/taiyang.png);
    background-size: cover;
  }
  .img2{
    width: 19%;
    height: 100%;
    margin-left: 10%;
    // border: 1px solid rgb(255, 255, 255);
    background: url(../../../../assets/visualization/lvtaiyang.png);
    background-size: cover;
  }
</style>
