yos_web/src/views/homePage/modules/user.vue

<template>
  <el-card v-if="data" shadow="none">
    <div slot="header">数据概况</div>
    <el-row>
      <el-col :span="8">
        <p class="info ">员工总数</p>
        <p class="num">{{data.employees}}</p>
      </el-col>
      <el-col :span="8">
        <p class="info">用户数</p>
        <p class="num">{{data.users}}</p>
      </el-col>
      <el-col :span="8">
        <p class="info">在线用户数</p>
        <p class="num">{{data.onlineUsers}}</p>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props:['data']
}

</script>
<style>
.el-card__header {
  padding: 10px 16px !important;
}
</style>
<style scoped>
.info{
  font-size: 14px;
  text-align:center;
  margin-bottom:10px;
}
.num{
  font-size: 30px;
  font-family: HelveticaNeue-, HelveticaNeue;
  font-weight: normal;
  color: #333333;
  line-height: 38px;
  text-align: center;
}
</style>