<template>
  <el-card shadow="hover" class="pb-4">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="text-sm text-gray-400">在线数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
        <div class="line-wrap bg-green-50">
          <div class="line bg-green-300" style="width: 80%"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="text-sm text-gray-400">离线数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
        <div class="line-wrap bg-purple-50">
          <div class="line bg-purple-300" style="width: 80%"></div>
        </div>
      </el-col>
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">故障数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
        <div class="line-wrap bg-yellow-50">
          <div class="line bg-yellow-300" style="width: 80%"></div>
        </div>
      </el-col>
      <el-col :span="12" class="mt-10">
        <div class="text-sm text-gray-400">报警数量</div>
        <div class="text-gray-500 text-4xl mt-1 mb-3">12</div>
        <div class="line-wrap bg-red-50">
          <div class="line bg-red-300" style="width: 80%"></div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
.line-wrap {
  position: relative;
  width: 60%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.line {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
</style>
