src/views/screen/components/screen-face/index.vue
@@ -1,6 +1,6 @@
<template>
  <div class="face-container">
    <wrapper-title :title="'人脸设备数据'"></wrapper-title>
    <wrapper-title :title="'人脸设备数据'" :path="'/monitorServe/face'"></wrapper-title>
    <div class="face-content">
      <div class="data-plane">
@@ -11,7 +11,7 @@
            </div>
            <div class="data-info">
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
              <div class="data-num type1" v-roll>{{ 1123 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -22,8 +22,8 @@
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
              <div class="data-lable">正常数</div>
              <div class="data-num type2" v-roll>{{ 2000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -34,8 +34,8 @@
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
              <div class="data-lable">异常数</div>
              <div class="data-num type3" v-roll>{{ 1000 }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -62,10 +62,6 @@
  },
  methods: {
    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
    }
  },
  mounted() {
@@ -84,8 +80,10 @@
.face-content {
  flex: 1;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);
  background: url("../../../../assets/images/screen/cardBg.png");
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  .plane {
    margin-bottom: 10px;
@@ -113,6 +111,16 @@
          font-size: 24px;
          color: #fff;
        }
        .type1 {
          color: #287cfa;
        }
        .type2 {
          color: #0cd81d;
        }
        .type3 {
          color: #e20c0c
        }
      }
    }
  }
@@ -126,4 +134,4 @@
.width-img {
  width: 100%;
}
</style>
</style>