71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="box">
|
||
|
|
<TitleComponent title="今日出勤" :font-level="2" />
|
||
|
|
<div class="todayAttend">
|
||
|
|
<div class="todayAttendItem">
|
||
|
|
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
|
||
|
|
<div class="todayAttendItemInfo">
|
||
|
|
<span class="todayAttendItemTitle">出勤</span>
|
||
|
|
<span class="todayAttendItemNum">150人</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="todayAttendItem">
|
||
|
|
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
|
||
|
|
<div class="todayAttendItemInfo">
|
||
|
|
<span class="todayAttendItemTitle">迟到</span>
|
||
|
|
<span class="todayAttendItemNum">150人</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="todayAttendItem">
|
||
|
|
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
|
||
|
|
<div class="todayAttendItemInfo">
|
||
|
|
<span class="todayAttendItemTitle">早退</span>
|
||
|
|
<span class="todayAttendItemNum">150人</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="todayAttendItem">
|
||
|
|
<img src="@/assets/demo/qin.png" alt="" width="30px" height="30px">
|
||
|
|
<div class="todayAttendItemInfo">
|
||
|
|
<span class="todayAttendItemTitle">缺勤</span>
|
||
|
|
<span class="todayAttendItemNum">150人</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.todayAttend {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.todayAttendItem {
|
||
|
|
width: 110px;
|
||
|
|
height: 100px;
|
||
|
|
background: #E5F0FF;
|
||
|
|
padding: 5px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
flex-direction: column;
|
||
|
|
.todayAttendItemInfo{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
.todayAttendItemTitle {
|
||
|
|
color: rgba(113, 128, 150, 1);
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.todayAttendItemNum {
|
||
|
|
font-size: 16px;
|
||
|
|
color: rgba(0, 30, 59, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|