直接放代码

<template>
  <div>
    <!-- 事件监控 -->
    <div class="eventWrapper">
      <div class="title">
        <div>
          <img src="@/assets/images/index/index_jiankong.png" class="bgImg" />
          <span style="fontsize: 17px; line-height: 40px">事件监控</span>
        </div>
        <div style="float: right; margin-right: 20px" @click="rollback">
          {{ queryEvent.date }}
        </div>
      </div>
      <div
        :class="{
          calendarWrapper: true,
          animation: !openIn,
          height1: openIn,
          animationOut: openIn,
        }"
      >
        <el-calendar :first-day-of-week="7">
          <template slot="dateCell" slot-scope="scope">
            <div class="dbClick" @click="getEvent(scope.data.day)">
              {{ scope.data.day.slice(-2) }}
            </div>
          </template>
        </el-calendar>
        <div class="btn1" @click="switchTo">
          <img
            :class="{ arrows: !openIn }"
            src="@/assets/images/index/index_arrowdown.png"
            alt=""
          />
        </div>
      </div>
      <ul
        class="infinite-list"
        :class="{
          listItemOut: openIn,
          listItemIn: !openIn,
          listItem: openIn,
          listItem2: !openIn,
        }"
        v-infinite-scroll="load"
        style="overflow: auto"
      >
        <li
          v-for="(item, index) in eventList"
          :key="index"
          :class="{ 'infinite-list-item': true, listTwo: index % 2 == 1 }"
        >
          <span
            :class="{
              piece: true,
              color1: item.title.slice(0, 2) == '新增',
              color2: item.title.slice(0, 2) == '修改',
              color3: item.title.slice(0, 2) == '删除',
            }"
          ></span>
          <div style="margin-left: 15px; margin-top: -20px">
            {{ item.title }} - {{ item.operName }}
          </div>
          <div style="margin-left: 15px">工作单位：{{ item.deptName }}</div>
          <div class="time" style="margin-left: 15px">
            {{ item.operTime }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { eventMonitoringInfo } from "@/api/index.js";
export default {
  data() {
    return {
      queryEvent: {
        date: "",
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      eventList: [],
      openIn: true,
    };
  },
  created() {
    this.queryEvent.date = this.getTime();
    this.getEvent();
  },
  methods: {
    getEvent(date) {
      if (date) {
        this.queryEvent.date = date;
      }
      this.queryEvent.pageNum = 1;
      eventMonitoringInfo(this.queryEvent).then((res) => {
        this.eventList = res.rows;
        this.queryEvent.total = Math.ceil(res.total / this.queryEvent.pageSize);
      });
    },
    getTime() {
      var date = new Date();
      var day = ("0" + date.getDate()).slice(-2);
      var month = ("0" + (date.getMonth() + 1)).slice(-2);
      var today = date.getFullYear() + "-" + month + "-" + day;
      return today;
    },
    rollback() {
      this.queryEvent.date = this.getTime();
    },
    switchTo() {
      this.openIn = !this.openIn;
    },
    load() {
      this.queryEvent.pageNum++;
      console.log(this.queryEvent.pageNum);
      if (this.queryEvent.total >= this.queryEvent.pageNum) {
        eventMonitoringInfo(this.queryEvent).then((res) => {
          this.eventList.push(...res.rows);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$eventWidth: 40vh;
$eventHeight: 76vh;
.eventWrapper {
  min-width: 320px;
  min-height: 662px;
  width: $eventWidth;
  height: 75vh;
  position: relative;
  .title {
    width: 300px;
    position: absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px 0;
    z-index: 99;
    div:first-child {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      .bgImg {
        margin-right: 10px;
      }
    }
  }
  // 高度固定
  .height1 {
    height: 131px;
  }
  // 箭头翻转
  .arrows {
    transform: rotateZ(180deg);
  }
  .calendarWrapper {
    // background-color: red;
    max-height: 330px;
    overflow: hidden;
    position: relative;
    transform: max-height 4s;
    .btn1 {
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 20px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .dbClick {
    height: 35px;
  }
  // 下边Ul
  .listItem {
    height: calc(75vh - #{132px});
  }
  .listItem2 {
    height: calc(75vh - #{330px});
  }
  .infinite-list {
    // width: 300px;
    // border: 1px solid red;
    // height: calc(75vh - #{330px});
    margin: 0;
    padding: 0;
    background: rgba(122, 122, 122, 0.5);
    overflow-y: auto;
  }
  .listTwo {
    background: rgba(122, 122, 122, 0.5);
  }
  .infinite-list-item {
    padding: 10px 15px;
    list-style: none;
    // height: 70px;
    .piece {
      width: 10px;
      height: 10px;
      display: inline-block;
    }
    .time {
      font-size: 15px;
      color: rgb(177, 177, 177);
    }
    .color1 {
      background: rgb(76, 141, 149); //新增
    }
    .color2 {
      background: rgb(194, 155, 116); //修改
    }
    .color3 {
      background: rgb(192, 110, 120); //删除
    }
  }
  .animation {
    animation: exampleIn 1s;
  }
  .animationOut {
    animation: exampleOut 1s;
  }
  @keyframes exampleIn {
    from {
      height: 131px;
    }
    to {
      height: 330px;
    }
  }
  @keyframes exampleOut {
    from {
      height: 330px;
    }
    to {
      height: 131px;
    }
  }
  .listItemIn {
    animation: listItemIn 1s;
  }
  .listItemOut {
    animation: listItemOut 1s;
  }
  // 下边list高度变化
  @keyframes listItemIn {
    from {
      height: calc(75vh - #{132px});
    }
    to {
      height: calc(75vh - #{330px});
    }
  }
  @keyframes listItemOut {
    from {
      height: calc(75vh - #{330px});
    }
    to {
      height: calc(75vh - #{132px});
    }
  }
}
</style>
<style scoped>
>>> .el-calendar-table .el-calendar-day:hover {
  background-color: #a4aab1;
}
>>> .el-calendar {
  background: rgba(122, 122, 122, 0.5);
}
>>> .el-calendar-table .el-calendar-day {
  height: 35px !important;
}
>>> .el-calendar-day {
  padding: 0;
}
>>> .el-calendar-table td.is-selected {
  background: rgb(165, 165, 165);
}
>>> .el-calendar__header {
  display: none;
}
>>> .el-calendar__body {
  border: none;
  padding: 40px 15px 45px 15px;
}
>>> .el-calendar-table td {
  text-align: center;
  border: 0;
}
>>> .el-calendar-table td,
>>> .el-calendar-table tr td:first-child,
>>> .el-calendar-table tr:first-child td {
  text-align: center;
  border: none;
}
>>> .el-calendar-table td:hover {
  border-bottom: none;
  border-right: none;
}
>>> .is-today {
  color: rgb(0, 162, 255) !important;
}
>>> thead th {
  color: azure;
}
>>> .eventWrapper .dbClick {
  line-height: 35px;
}
>>> thead th:first-child,
>>> tr td:first-child {
  color: rgb(158, 131, 106);
}
>>> thead th:last-child,
>>> tr td:last-child {
  color: rgb(158, 131, 106);
}
</style>

 下边有一个折叠的动画css写的