<template>
|
|
<b-card style="height:100%" class="overflow-hidden">
|
<h4 class="fw900">
|
学生今日考勤
|
</h4>
|
<div class="grid-content bg-purple">
|
</div>
|
<!-- <div class="overflow-auto row py-4 px-2 bg-white" style="height:15vh">
|
<div class="col-md-12 col-lg-4 mb-4" v-for="(item,index) in list" :key="index">
|
<b-card no-body>
|
<div class="pl10 pr10 pt10 pr">
|
<span class="studentClass-title">
|
{{item&&item.label?item.label:''}}
|
</span>
|
<div class="d-flex align-items-center pt-4">
|
<div class="media-body line-height-condenced ml-4 text-center">
|
<div class="text-light small">应到人数</div>
|
<h3 class="fw900">{{item.yindao}}</h3>
|
</div>
|
<div class="media-body line-height-condenced ml-4 text-center">
|
<div class="text-light small">实到人数</div>
|
<h3 class="fw900 text-primary">{{item.shidao}}</h3>
|
</div>
|
<div class="media-body line-height-condenced ml-4 text-center">
|
<div class="text-light small">未到人数</div>
|
<h3 class="fw900 text-danger">{{item.weidao}}</h3>
|
</div>
|
</div>
|
</div>
|
</b-card>
|
</div>
|
</div> -->
|
<div class="overflow-auto row px-2 pt-1 bg-white" style="height:15vh">
|
<div class="col-md-12 col-lg-4 mb-4" v-for="(item,index) in list" :key="index">
|
<div class="bg-lighter">
|
<div class="pl20 pr20 pt20 pr">
|
<h5 class="text-primary fw900">
|
{{item&&item.label?item.label:''}}
|
</h5>
|
<div class="d-flex align-items-center">
|
<div class="media-body line-height-condenced ml-4 text-center">
|
<div class="text-dark small mb-1">应到人数</div>
|
<h3 class="f40 text-primary">{{item.yindao}}</h3>
|
</div>
|
<div class="media-body line-height-condenced ml-4 text-center">
|
<div class="text-dark small mb-1">实到人数</div>
|
<h3 class="f40 text-success">{{item.shidao}}</h3>
|
</div>
|
<div class="media-body line-height-condenced ml-4 text-center">
|
<div class="text-dark small mb-1">未到人数</div>
|
<h3 class="f40 text-warning">{{item.weidao}}</h3>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</b-card>
|
|
</template>
|
|
<script>
|
import { Row, Col, Tooltip, Table, TableColumn } from 'element-ui'
|
|
export default {
|
data() {
|
return {
|
list: [{
|
label: '初一年级',
|
yindao: 64,
|
shidao: 35,
|
weidao: 16
|
},
|
{
|
label: '初二年级',
|
yindao: 78,
|
shidao: 69,
|
weidao: 9
|
},
|
{
|
label: '初三年级',
|
yindao: 82,
|
shidao: 79,
|
weidao: 3
|
},
|
{
|
label: '初四年级',
|
yindao: 88,
|
shidao: 49,
|
weidao: 17
|
}]
|
}
|
},
|
methods: {
|
|
},
|
created() {
|
|
},
|
components: {
|
elRow: Row,
|
elCol: Col,
|
elTooltip: Tooltip,
|
elTable: Table,
|
elTableColumn: TableColumn
|
}
|
|
}
|
|
</script>
|
<style>
|
.studentClass-title{
|
position: absolute;
|
left: 0;
|
top: -20px;
|
font-size: 14px;
|
/* height: 20px;
|
line-height: 20px; */
|
text-align: center;
|
font-weight: 900;
|
background: #5c8a9a;
|
padding: 2px 12px;
|
color: #fff;
|
}
|
.fw900{
|
font-weight: 900;
|
}
|
</style>
|
