shuinichang_/src/views/lll/ZNYW.vue

<template>
  <div class="box">
    <div class="left">
      <img src="../../assets/img/标题/智能运维.png" class="title" />
      <div class="hbsj">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>环保数据</p>
        </div>
        <div class="btns">
          <div>一号窑系统</div>
          <div>二号窑系统</div>
          <div>三号窑系统</div>
        </div>
        <div class="date">
          <div class="one">
            <div>
              <span>SO2折算值：</span>
              <span>0.47</span>
            </div>
            <div>
              <span>颗粒折算值：</span>
              <span>0.20</span>
            </div>
            <div>
              <span>NOX折算值：</span>
              <span>41.42</span>
            </div>
            <div>
              <span>CO折算值：</span>
              <span>219.70</span>
            </div>
          </div>
          <div class="one">
            <div>
              <span>实际值：</span>
              <span>0.60</span>
            </div>
            <div>
              <span>实际值：</span>
              <span>0.26</span>
            </div>
            <div>
              <span>实际值：</span>
              <span>52.78</span>
            </div>
            <div>
              <span>实际值：</span>
              <span>280.00</span>
            </div>
          </div>
          <div class="one">
            <div>
              <span>O2:：</span>
              <span>6.98</span>
            </div>
            <div>
              <span>流量：</span>
              <span style="color: red">615218.94</span>
            </div>
            <div>
              <span>流速：</span>
              <span>18.74</span>
            </div>
            <div>
              <span>压力：</span>
              <span>-0.07</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script></script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-top: 500px;
  box-sizing: border-box;
}
.left {
  width: 1237px;
  height: 2500px;
  margin-left: 61px;
  background-image: url("../../assets/img/侧边.png");
  padding-left: 59px;
  padding-right: 45px;
  box-sizing: border-box;
  .title {
    margin-top: 15px;
    margin-left: 60px;
  }
  .hbsj {
    position: relative;
    margin-top: 56px;
    .imgBox {
      height: 93px;
      width: 1156px;
      p {
        position: absolute;
        color: #fff;
        top: 20px;
        left: 50px;
        font-size: 30px;
        font-family: "MicrosoftYaHei";
      }
    }
    .btns {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
      margin-bottom: 50px;
      padding-left: 149px;
      padding-right: 124px;
      box-sizing: border-box;
      div {
        width: 211px;
        height: 55px;
        background: #3ce9c2;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #36ffd3;
        font-size: 20px;
        font-family: "MicrosoftYaHei";
        color: #ffffff;
        line-height: 55px;
        text-align: center;
      }
    }
    .date {
      width: 1132px;
      height: 400px;
      background: linear-gradient(NaNdeg, #1e5181 0%);
      border: 1px solid #135064;
      border-image: radial-gradient(circle, rgba(30, 81, 129, 1)) 1 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #fff;
      .one {
        height: 100%;
        div {
          height: 68px;
          width: 313px;
          line-height: 68px;
          font-size: 20px;
          font-family: "MicrosoftYaHei";
          display: flex;
          margin: 20px;
          justify-content: space-between;
          background: linear-gradient(#38b7a1 20%, #38b7a1 0%);
          border-left: 5px solid #28a896;
          padding-left: 16px;
          padding-right: 16px;
          color: #fff;
          box-sizing: border-box;
          span:nth-of-type(2) {
            color: #28ff50;
          }
        }
      }
    }
  }
}
</style>