maintenance_system/src/views/integratedManage/attendManage/components/rightBox/todayAttend.vue

<template>
    <div class="box">
        <TitleComponent title="今日出勤" :font-level="2" />
        <div class="todayAttend">
            <div class="todayAttendItem">
                <img :src="props.todayAttendData.attendance.icon" alt="" width="30px" height="30px">
                <div class="todayAttendItemInfo">
                    <span class="todayAttendItemTitle">出勤</span>
                    <span class="todayAttendItemNum">{{ props.todayAttendData.attendance.count }}人</span>
                </div>
            </div>
            <div class="todayAttendItem">
                <img :src="props.todayAttendData.late.icon" alt="" width="30px" height="30px">
                <div class="todayAttendItemInfo">
                    <span class="todayAttendItemTitle">迟到</span>
                    <span class="todayAttendItemNum">{{ props.todayAttendData.late.count }}人</span>
                </div>
            </div>
            <div class="todayAttendItem">
                <img :src="props.todayAttendData.earlyLeave.icon" alt="" width="30px" height="30px">
                <div class="todayAttendItemInfo">
                    <span class="todayAttendItemTitle">早退</span>
                    <span class="todayAttendItemNum">{{ props.todayAttendData.earlyLeave.count }}人</span>
                </div>
            </div>
            <div class="todayAttendItem">
                <img :src="props.todayAttendData.absent.icon" alt="" width="30px" height="30px">
                <div class="todayAttendItemInfo">
                    <span class="todayAttendItemTitle">缺勤</span>
                    <span class="todayAttendItemNum">{{ props.todayAttendData.absent.count }}人</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import TitleComponent from '@/components/TitleComponent/index.vue';

// 接收从父组件传入的数据
const props = defineProps({
  todayAttendData: {
    type: Object,
    default: () => ({})
  }
});
</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>