修改element-ui中el-calendar（日历）的样式

效果图如下：

<template>
  <div class="dashboard-container">
    <el-card style="width: 350px; height: auto; border-radius: 8px">
      <div class="custom-style">
        <p class="new-data">{{ newDate }}</p>
        <el-calendar ref="calendar" v-model="value" />
      </div>
    </el-card>
  </div>
</template>
<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      value: new Date()
    }
  },
  computed: {
    newDate() {
      return this.formatDate(this.value)
    }
  },
  methods: {
    formatDate(value) {
      const date = new Date(value)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${year}年${month < 10 ? '0' + month : month}月${
        day < 10 ? '0' + day : day
      }日`
    }
  }
}
</script>

<style lang="scss">

// 自定义样式
.custom-style {
    .new-data {
        position: absolute;
        margin: 0;
        line-height: 26px;
    }

    .el-calendar__title {
        opacity: 0;
    }

    // 上个月、下个月按钮样式
    .el-button-group>.el-button:first-child:before {
        content: "";
        display: inline-block;
        width: 6px !important;
        height: 6px !important;
        border: transparent;
        border-top: 1px solid #6e6c6c;
        border-right: 1px solid #6e6c6c;
        transform: rotate(-135deg);
        /* 可根据需要调整间距 */
    }

    .el-button-group>.el-button:last-child:before {
        content: "";
        display: inline-block;
        width: 6px !important;
        height: 6px !important;
        border: transparent;
        border-top: 1px solid #6e6c6c;
        border-right: 1px solid #6e6c6c;
        transform: rotate(45deg);
    }

    .el-button-group>.el-button:not(:first-child):not(:last-child) {
        color: #444444;
    }

    .el-button-group>.el-button:first-child span,
    .el-button-group>.el-button:last-child span {
        display: none;
    }

    .el-button-group>.el-button:not(:last-child) {
        margin-right: -15px;
    }

    // 去除文字
    .el-button-group>.el-button:not(:first-child):not(:last-child) {
        span {
            display: none;
        }
    }

    .el-button-group>.el-button {
        border: 0;
        background: transparent;
    }

    .el-calendar-table__row td {
        // 去掉边框
        border: none !important;

        // 缩小高度
        .el-calendar-day {
            height: 32px;
            line-height: 18px;
            // 设置居中
            text-align: center;
        }
    }

    // 自定义选中、悬浮颜色
    .el-calendar-table .el-calendar-day:hover {
        color: #fff;
        background-color: #ff5e78 !important;
    }

    .el-calendar-table .is-today {
        color: #303133;
    }

    .el-backtop,
    .el-calendar-table td.is-today {
        color: #ff5e78;
    }

    .el-calendar-table .is-selected {
        color: #fff !important;
        background-color: #ff5e78 !important;
    }

    .el-calendar__header {
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
        border: none;
    }
}
</style>