mschool/src/views/student-manage/component/Attendance.tsx

import { defineComponent } from 'vue';
import styles from '../index.module.less';

export default defineComponent({
  name: 'Attendance',
  setup() {
    return () => (
      <div class={styles.attendance}>
        <div class={styles.attendanceTitle}><span>本学期作业</span></div>
        <div class={styles.items}>
          <div class={styles.item}>
            <div>
              <span style={{ color: '#FC1A19' }}>12</span>/16
            </div>
            <div class={styles.label}>出勤情况</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#00B2A7' }}>12</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>正常出勤</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#4498F5' }}>12</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>迟到</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#F08226' }}>12</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>请假</div>
          </div>

          <div class={styles.item}>
            <div>
              <span style={{ color: '#FC1A19' }}>12</span>
              <span class={styles.ci}>次</span>
            </div>
            <div class={styles.label}>旷课</div>
          </div>
        </div>
      </div>
    );
  }
});