devInfo.vue 1.61 KB
<template>
  <div class="devinfo-box">
    <div class="item-box">
      <div class="icon el-icon-cpu"></div>
      <div class="item-info-box">
        <div>分析资源</div>
        <div><span>64</span></div>
      </div>
    </div>
    <div class="item-box">
      <div class="icon el-icon-view"></div>
      <div class="item-info-box">
        <div>运行路数</div>
        <div> <span>47</span></div>
      </div>
    </div>
    <div class="item-box">
      <div class="icon el-icon-bell"></div>
      <div class="item-info-box">
        <div>运行异常</div>
        <div><span>6</span></div>
      </div>
    </div>
    <div class="item-box">
      <div class="icon el-icon-s-order"></div>
      <div class="item-info-box">
        <div>信息存储量</div>
        <div><span>1.2</span> T</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped="scoped" lang="stylus">
.devinfo-box {
  width: 8vw;
  height: 28vh;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.19);
  overflow hidden
  .item-box{
    margin-top 2vh
    overflow hidden
  }
  .item-box:first-child{
    margin-top 2vh
  }
}
.icon{
  margin-left .6vw
  width 1.7vw
  height 3.5vh
  float left
  font-size 28px
  line-height 3.5vh
  text-align center
  color  #3BB7FF
  background:rgba(179,229,252,.21);
}
.item-info-box{
  float left
  margin-left 1vw
  width 4vw
  div:first-child{
    color:rgba(102,102,102,1)
  }
  div:last-child span{
    color:rgba(68,68,68,1);
    font-size 20px
    line-height 2.5vh
    letter-spacing 20
  }
}
</style>