vue自定义大屏内容从上往下滚动

话不多说，先上效果图
这就是最终效果，每次都是加一条新的数据，而且有滚动效果，源代码如下：

<template>
  <div class="warning">
    <div class="title">预警信息</div>
    <div class="content">
      <div class="warn-header">
        <div class="name">参数名称</div>
        <div class="name">当前值</div>
        <div class="name">异常原因</div>
      </div>
      <div class="warn-content">
        <div class="item-content animation" :key="warnKey">
          <div class="item" v-for="(item, index) in dataList" :key="index">
            <div class="param-name width-value">
              <div class="name">
                <img src="@/assets/warning/warn.png" />
                <div class="data">{{ item.name }}</div>
              </div>
              <div class="date">
                {{ item.date }}
              </div>
            </div>
            <div class="warn-value width-value">
              <div class="data">{{ item.value }}</div>
              <div class="time">{{ item.time }}</div>
            </div>
            <div class="cause width-value">
              {{ item.cause }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          name: '瞬时气温(℃)',
          date: '2023-03-01',
          value: '3',
          time: '13:22:32',
          cause: '低于下限值',
        },
        {
          id: 2,
          name: '网络上行速率',
          date: '2023-03-01',
          value: '10.1',
          time: '13:22:32',
          cause: '低于下限值',
        },
        {
          id: 3,
          name: '瞬时风速(m/s)',
          date: '2023-03-01',
          value: '14.8',
          time: '13:22:32',
          cause: '低于下限值',
        },
        {
          id: 4,
          name: '气压/hpa',
          date: '2023-03-01',
          value: '101.4',
          time: '13:22:32',
          cause: '低于下限值',
        },
        {
          id: 5,
          name: '气压/hpa',
          date: '2023-03-01',
          value: '101.52',
          time: '13:22:32',
          cause: '低于下限值',
        },
        {
          id: 6,
          name: '气压/hpa',
          date: '2023-03-01',
          value: '101.52',
          time: '13:22:32',
          cause: '低于下限值',
        },
        {
          id: 7,
          name: '气压/hpa',
          date: '2023-03-01',
          value: '101.52',
          time: '13:22:32',
          cause: '低于下限值',
        },
        {
          id: 8,
          name: '气压/hpa',
          date: '2023-03-01',
          value: '101.52',
          time: '13:22:32',
          cause: '低于下限值',
        },
      ],
      warnKey: 0,
      warnId: null,
      timesKill: null,
      timesKill1: null,
      caseList: [],
    };
  },
  mounted() {
    this.setWarnDataList();
    this.setAddWarnData();
  },
  beforeUnmount() {
    // 清除定时器
    clearInterval(this.timesKill);
    clearInterval(this.timesKill1);
  },
  methods: {
    getWarnData() {
      if (this.warnId != null) {
        this.caseList.unshift({
          id: new Date().getTime(),
          name: '最新预警消息' + Math.floor(Math.random() * 2),
          date: moment(new Date()).format('YYYY-MM-DD'),
          value: Math.floor(Math.random() * 1000),
          time: moment(new Date()).format('HH:mm:ss'),
          cause: '低于下限值',
        });
      } else {
        this.dataList.splice(5);
        this.warnId = this.dataList[0].id;
      }
    },
    addWarnData() {
      setTimeout(() => {
        if (this.caseList.length > 0) {
          let newArr = this.caseList.splice(0, 1);
          this.dataList = newArr.concat(this.dataList);
          this.warnKey += 1;
        }
      }, 1000);
    },
    setWarnDataList() {
      // console.log('最新数组是', this.caseList);
      this.timesKill = setInterval(this.getWarnData, 5000);
    },
    setAddWarnData() {
      this.timesKill1 = setInterval(this.addWarnData, 5000);
    },
  },
};
</script>

<style lang="scss" scoped>
.warning {
  .title {
  }
  .content {
    margin-top: 15px;
    .warn-header {
      display: flex;
      justify-content: space-around;
      font-size: 18px;
    }
    .warn-content {
      width: 100%;
      height: 330px;
      overflow: hidden;
      .item-content {
        position: relative;
        .item {
          background-image: url('../../../../assets/warning/bg-warn.png');
          background-repeat: no-repeat;
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 56px;
          margin-top: 10px;
          margin-left: 10px;
          margin-right: 10px;
          .param-name {
            .name {
              height: 30px;
              line-height: 30px;
              display: flex;
              align-items: center;
              .data {
                font-size: 16px;
                height: 24px;
                color: #fbd607;
              }
            }
            .date {
              font-size: 14px;
              color: #a8d3dc;
              margin-left: -15px;
            }
          }
          .width-value {
            width: 150px;
            text-align: center;
          }
          .warn-value {
            .data {
              font-size: 16px;
            }
            .time {
              color: #a8d3dc;
              font-size: 14px;
            }
          }
        }
      }
    }
    .animation {
      animation-name: example;
      animation-duration: 0.5s;
    }

    @keyframes example {
      from {
        left: 0;
        top: -56px;
      }

      to {
        left: 0px;
        top: 0;
      }
    }
  }
}
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
v-leave-active {
  transition: opacity 1s;
}
</style>

css那边有些没用的我没删掉，到时候你们看着删除就好了，以上就是有关vue自定义内容滚动效果。哪里写的不好的地方，请大佬们见谅！