large_screen/src/views/gas/configImg/center.vue

<template>
  <div id="center">
    <div class="middle_top_list">
      <div class="list_title">瓦斯泵工作时间</div>
      <div class="list_num list_num1"><span class="counter-value">{{workTime}}</span></div>

    </div>
    <div class="middle_top_list">
      <div class="list_title">瓦斯泵平均功率</div>
      <div class="list_num list_num2"><span class="counter-value">{{averagePower}}</span></div>
    </div>
    <div class="middle_top_list">
      <div class="list_title">管道瓦斯含量</div>
      <div class="list_num list_num2"><span class="counter-value">{{gasContent}}</span></div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      workTime:0.6,
      averagePower:20,
      gasContent:30,

    };
  },
   mounted() {
    let interval = setInterval(() => {
      this.workTime = this.getRandomNumWithDecimals(1,2.00)
      this.averagePower = this.getRandomNumWithDecimals(20,30)
      this.gasContent = this.getRandomNumWithDecimals(10,25)

    }, 3000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(interval);
    });
  },
};
</script>

<style lang="scss" scoped>
#center {
  // margin: auto;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  padding:6px;
  margin:5px;
  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
  background-size: 100%;
  // border:3px solid #96c2f1;background:#77bedf;
  // padding:6px;border:3px solid #96c2f1;background:#eff7ff
  // background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  // background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

}
.middle_top_list {
  float: left;
  width: 35.2%;
  height: 18%;
  margin-top: 10%;
  margin-left: 28%;
  text-align: center;
  color: #4ADEFE;
}
.middle_top_list span {
  color: #F3DB5C;
}
.list_title {
  font-size: 18px;
  margin-top: -15%;
}
/* .control{
  margin-top: 20px;
} */
.list_num {
  margin-top: 3%;
  font-size: 16px;
}
.list_num span {
  font-size: 30px;
}
</style>