动态文字向上滚动广播中奖信息代码

<template>
 
 
  <div class="roll-msg">
    <div class="popup">
      <div class="box">
        <ul class="lb" :class="{marquee_top:animate}">
          <li v-for="(item, index) in undergroundDataList" >{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
    props:['list'],
  data() {
    return {
      animate: false,
     list:[{1:4},{2:2}],
     undergroundDataList:["恭喜***获得10积分", "恭喜***获得20积分", "恭喜***获得40积分"]
    };
  },
  methods: {
 
  },
  mounted() {
this.diaoyong()
  },

  methods: {
    diaoyong(){
          let that = this;
    console.log(that);
    const timer = setInterval(() => {
      this.animate = true;
 
      setTimeout(() => {
        that.undergroundDataList.push(this.undergroundDataList[0]);
        that.undergroundDataList.shift();
        that.animate = false;
        // console.log(Math.random());
      }, 500);
    }, 3000);
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
    }
  }
};
</script>
 
<style lang="less" scoped>
div,
ul,
li,
span,
img {
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
}
 
.marquee {
  width: 100%;
  height: 50px;
  align-items: center;
  color: #3a3a3a;
  background-color: #b3effe;
  display: flex;
  box-sizing: border-box;
}
 
.marquee_title {
  padding: 0 20px;
  height: 30px;
  font-size: 14px;
  border-right: 1px solid #d8d8d8;
  align-items: center;
}
 
.marquee_box {
  display: block;
  position: relative;
  width: 60%;
  height: 30px;
  overflow: hidden;
}
 
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
 
.marquee_top {
  transition: all 0.5s;
  margin-top: -22px;
}
 
.marquee_list li {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 20px;
}
 
.marquee_list li span {
  padding: 0 2px;
}
 
.red {
  color: #ff0101;
}
 
.roll-msg {
  position: absolute;
  top: 0.4rem;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
 
  .popup {
    border-radius: 20px;
    width: 45%;
    height: 1.2rem;
    min-width: 150px;
    align-items: center;
    color: #fff;
    background-color: rgb(10, 10, 10, 0.1);
    opacity: 0.7;
    display: flex;
    box-sizing: border-box;
 
    .box {
      display: block;
      position: relative;
      padding: 0 .3rem;
      width: 100%;
      height: 30px;
      overflow: hidden;
 
      .lb {
          width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
 
        li{
            display: flex;
            justify-content: center;
            margin-top: 7px;
        }
      }
    }
  }
}
</style>