zjugis_OA/client/src/views/OaSystem/home/components/CardItemFive copy 2.vue

<template>
  <div class="FiveDetailBox">
    <el-calendar ref="calendar">
      <template #header="{ date }">
        <div class="calendarHeader">
          <el-icon class="icon1" @click="selectDate('prev-month')"><ArrowLeftBold /></el-icon>
          <span class="title">{{ date }}</span>
          <el-icon class="icon1" @click="selectDate('next-month')"><ArrowRightBold /></el-icon>
        </div>
      </template>
      <template #date-cell="{ data }">
        <p :class="`isSelected_${mockData[data.day] ? mockData[data.day]['s'] : '0'}`">
          {{ data.day.split('-').slice(1)[1] }}
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script setup lang="ts">
import type { CalendarDateType, CalendarInstance } from 'element-plus'
const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

const mockData = ref({
  '2023-11-01': {
    s: 1 //1 未填 2 已填 3 请假
  },
  '2023-11-02': {
    s: 2 //1 未填 2 已填 3 请假
  },
  '2023-11-03': {
    s: 2 //1 未填 2 已填 3 请假
  }
})
</script>

<style lang="scss" scoped>
@import '../common.scss';
.FiveDetailBox {
  height: 100%;
  .calendarHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    padding: 20px 20px 0px 20px;
    .icon1 {
      cursor: pointer;
      color: #8b969c;
    }
  }
  ::v-deep {
    .el-calendar {
      .el-calendar__header {
        border: 0px;
      }
      .el-calendar__body {
        padding-bottom: 15px;
      }
      .el-calendar-table {
        td {
          border: 0px;
        }
        .el-calendar-day {
          height: auto;
          text-align: center;
          border: 0px;
          background: none;
          margin: auto;
          &:hover,
          &:active {
            background: none;
          }
        }
        .is-selected {
          background: none;
        }
        .is-today {
          &.is-selected {
            background: none;
          }
          .el-calendar-day {
            border-radius: 50%;
            background: none;
            color: #303133;
          }
        }
      }
    }
  }
  //控制不同状态的颜色
  .isSelected_1 {
    border: 1px solid #f83535;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 2px;
    color: #f83535;
    position: relative;
    &:hover {
      &::after {
        display: block;
        content: '补填';
        position: absolute;
        top: 0px;
        padding: 3px 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        text-align: center;
        margin: auto;
        font-size: 14px;
        background-color: #fff;
      }
    }
  }
  .isSelected_2 {
    color: #2e77e6;
  }
}
</style>