直接放代码
<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写的