<template>
  <div style="margin:10px;padding:10px" :class="classArr[INDEX]">
    <el-row >
      <el-col >
          <el-col :span="24" style="text-align:center;font-size: 20px;">
              <div style="">
                <span>{{VALUE}}</span><span>{{UNITF}}</span></br>
                <span>{{NAME}}</span>
              </div>
         </el-col>
          <!-- <el-col :span="24" style="text-align:center;font-size: 16px;"></br><span>{{NAME}}</span></el-col>          -->
      </el-col>
    </el-row>
  </div>
</template>
<<script>
export default {
  props: ['VALUE', 'UNITF', 'NAME', 'INDEX'],
  data () {
    return {
      msg: '',
      proWidth: 100,
      classArr: ['Blue', 'Warning', 'Success', 'Danger']
    }
  }
}
</script>
<style scoped>
 .Warning{
    background:  #F7BA2A
 }
 .Blue{
    background:  #1D8CE0 
 }
 .Danger{
    background:  #FF4949
 }
 .Success{
    background:  #13CE66   
 } 
</style>

