vue 新闻列表滚动效果

<div class="scroll-wrap">
            <div class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
              <p v-for="item in prizeList"><a :href="item.src">{{item.name}}</a></p>
   <div>

<div>

export default {
    name: 'complexTable',
    data() {
      return {
        prizeList: [
          { name: '城轨采购网',src:'http://www.railunique.com'},
          { name: '天津地铁电子采购平台',src:'http://www.railunique.com' },
          { name: '南昌地铁',src:'http://www.railunique.com' },
          { name: '南昌地铁',src:'http://www.railunique.com' },
          { name: '兰州地铁招标信息',src:'http://www.railunique.com' },
          { name: '西安公共资源交易中心',src:'http://www.railunique.com' },
        ],

        activeIndex: 0,

         intnum: undefined

      }
    },
    computed: {
      top() {
        return - this.activeIndex * 50 + 'px';
      }

    },

        created() {
  this.ScrollUp();
},
methods: {
ScrollUp(){
this.intnum = setInterval(_ => {
  if (this.activeIndex < this.prizeList.length) {
this.activeIndex += 1;
  } else {
this.activeIndex = 0;
  }
}, 1000);

  },

  Stop(){
clearInterval(this.intnum);
},
  Up(){
this.ScrollUp();
}
  }
   

  }

<style>
  .scroll-wrap{
    height: 150px;、、
    overflow: hidden;
  }
  .scroll-content {
    position: relative;
    transition: top 0.5s;
  }
  .scroll-content p{
    line-height: 50px;
    text-align: center;

  }

</style>