vue 公告滑动效果

适应只显示一条

<div class="marquee_box">
    <ul class="marquee_list" :class="{marquee_top:animate}">
        <li v-for="(item, index) in marqueeList" 
        @mouseenter="mouseenter"
        @mouseleave="mouseleave">
            <div class="avatar-box">
                <img src="" alt="">
            </div>
            <div class="marquee-content">
                <span>{{item.name}}</span>
                <span>为你助力</span>
                <span> {{item.amount}}</span>
            </div>
        </li>
    </ul>
    </div>

data() {
            return {
                show: true,
                animate: false,
                timer:null,
                marqueeList: [
                    {
                        name: 'XXX',
                        amount: '0.01元'
                    },
                    {
                        name: 'XXX',
                        amount: '20元'
                    },
                ]
            };
        },
        created(){
            this.timer=setInterval(this.showMarquee, 2000)
        },
        methods: {
            close() {
                this.show = false;
            },
            mouseenter() {
                console.log('1111')
                clearInterval(this.timer)
            },
            mouseleave(){
                this.timer=setInterval(this.showMarquee, 2000)
            },
            showMarquee() {
                this.animate = true;
                setTimeout(()=>{
                    this.marqueeList.push(this.marqueeList[0]);
                    this.marqueeList.shift();
                    this.animate = false;
                },500)
            },
        },

样式
.marquee_box{
    display: block;
    position: relative;
    width: 252px;
    margin:0 auto;
    height: 30px;
    overflow: hidden;
    .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: -40px
    }

    .marquee_list li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        margin-bottom:10px;
        display: flex;
        .avatar-box{
            width:40px;
            img{
                display: inline-block;
                width:30px;
                height:30px;
                border-radius: 50%;
                background-color: #CCC;
            }
        }
        .marquee-content{
            flex:1;
        }
    }

    .marquee_list li span {
        padding: 0 2px;
    }
}