shuiwu/src/system/IOT/IoTdashboard/modules/productInfo.vue

<template>
  <div style="padding-right: 10px;">
    <a-card title="产品数量" :bordered="false">
    <a-row>
      <a-col :span="8">
        <div class="item">
          <p class="title">产品总数</p>
          <countUp v-if="data.prodcut" :endVal="data.prodcut && data.prodcut.total"></countUp>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="item">
          <p class="title">正常数量</p>
          <countUp v-if="data.prodcut" :endVal="data.prodcut && data.prodcut.used"></countUp>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="item">
          <p class="title">禁用数量</p>
          <countUp v-if="data.prodcut" :endVal="data.prodcut && data.prodcut.unused"></countUp>
        </div>
      </a-col>
    </a-row>
  </a-card>
  </div>
  
</template>

<script setup>
import countUp from './countUp.vue'
import {ref, defineProps, defineEmits} from 'vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
let emit = defineEmits([])
let props = defineProps(['data'])
</script>

<style scoped>
  .item {
    background: linear-gradient(to right,rgba(235, 245, 253, 1),rgba(255, 255, 255, 1));
    padding: 12rem 12rem 0 12rem;
    box-shadow: 0px 0px 6rem 1px rgba(0,70,132,0.2);
    margin-right: 16rem;
  }
  .title {
    font-size: 14rem;
    margin-bottom: 0px;
  }
  .item p:last-child {
    font-weight: bold;
    font-size: 30rem;
    margin-bottom: 0 !important;
  }
  /deep/.ant-card-head-title {
    font-size: 16rem !important;
  }
  /deep/.ant-card-body {
    padding: 24rem !important;
  }
  /deep/.ant-card-head-title {
    padding-bottom: 10rem !important;
  }
</style>