devInfo.vue 2.01 KB
<template>
  <div class="devinfo-box">
    <div class="item-box">
      <div class="item-info-box">
        <div>分析资源</div>
        <div><span>{{workers.video_free + workers.video_busy}}</span></div>
      </div>
    </div>
    <div class="item-box">
      <div class="item-info-box">
        <div>运行路数</div>
        <div> <span>{{taskstatus.running}}</span></div>
      </div>
    </div>
    <div class="item-box">
      <div class="item-info-box">
        <div>运行异常</div>
        <div><span>6</span></div>
      </div>
    </div>
    <div class="item-box">
      <div class="item-info-box">
        <div>信息存储量</div>
        <div><span>1.2</span> T</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin  from "../../assets/js/mixin";

export default {
  mixins:[mixin],
  data() {
    return {
   
    };
  },
  methods:{
    
  },
  created() {
  
  }
};
</script>

<style scoped="scoped" lang="stylus">
.devinfo-box {
  margin-top 10vh
  .item-box{
    margin-top 2vh
    overflow hidden
  }
  .item-box:first-child{
    margin-top 2vh
  }
}
.item-info-box{
  height 45px;
  color #000
  width 8vw
  border-bottom 1px solid #E5E5E5
  float left
  display flex
  margin-left 1vw
  font-size 16px;
  div:first-child{
    flex 1
    color:rgba(102,102,102,1)
  }
  div:last-child{
    color:rgba(68,68,68,1);
    width 3vw
    line-height 2.5vh
    letter-spacing 20
    span {
      font-size 20px
      display inline-block
      width 1.5vw
      font-weight 600
    }
  }
}
.item-box:nth-child(1) {
  .item-info-box{
      div:last-child{
        span{
          color #FF9630
        }
      }
  }
}
.item-box:nth-child(2) {
  .item-info-box{
      div:last-child{
        span{
          color #3BB7FF
        }
      }
  }
}
.item-box:nth-child(3) {
  .item-info-box{
      div:last-child{
        span{
          color #0069FF
        }
      }
  }
}
.item-box:nth-child(4) {
  .item-info-box{
      div:last-child{
        span{
          color #7460EE
        }
      }
  }
}
</style>