<template>
<div id="box">
<div id="con1" ref="con1" :class="{anim:animate==true}" style="color:white" @mouseenter="mEnter" @mouseleave="mLeave">
<div v-for='item in items'>
      <span>{{item.name}}</span>
       <span style="margin-left:3rem;color:#A8A8A8">统计时间:{{item.time}}</span>
</div>
</div>
</div>
</template>

<script>
export default {
        data () {
            return {
                animate:false,
                items:[ //消息列表对应的数组
                    {name:"1.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
                    {name:"2.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
                    {name:"3.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
                    {name:"4.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
                    {name:"5.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
                    {name:"6.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
                    {name:"7.xx船在xx监测点检测燃油含硫量为xx",time:'2021年7月1日'},
                ],
            }
        },
        mounted () {

                this.timer1= setInterval(this.scroll,3000)

        },

        methods: {
            scroll(){
                    let con1 = this.$refs.con1;
                //     console.log(con1);
                    con1.style.marginTop='-29rem';
                    this.animate=!this.animate;
                    var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
                    setTimeout(function(){
                    that.items.push(that.items[0]);
                    that.items.shift();
                    con1.style.marginTop='0px';
                    that.animate=!that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
                    },500)
            },
            mEnter () {     
                    clearInterval(this.timer1) 
            },
            mLeave () {            
                    this.timer1= setInterval(this.scroll,3000)           
            },

        },
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
margin: 0 ;
padding: 0;
}
#box{
width: 100rem;
height: 50rem;
line-height: 14rem;
overflow: hidden;
padding-left: 15rem;
font-size: 5rem;
transition: all 0.5s;
}
.anim{
transition: all 0.5s;
}
#con1 li{
list-style: none;
line-height: 10rem;
height: 10rem;
} 
</style>