用的引用vue文件方式写的，可以改成组件代码
html代码：

<div class="cont">
    <div class="contlist" ref='contlist' @mouseover="stopScroll" @mouseout="startScroll">
        <ul>
            <li v-for="(item, index) in list" :key="index">
                {{ index + 1 }} 、<em>{{ item.name }}</em> {{ item.time }}
            </li>
        </ul>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                {{ index + 1 }} 、<em>{{ item.name }}</em> {{ item.time }}
            </li>
        </ul>
    </div>
</div>

js 代码：

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                {name: '负限位报警', time: '2019-12-18 16:20:34'},
                {name: '水位报警', time: '2019-12-18 16:20:34'},
                {name: '正限位报警', time: '2019-12-18 16:20:34'},
                {name: '温度报警', time: '2019-12-18 16:20:34'},
                {name: '回架报警', time: '2019-12-18 16:20:34'},
            ],
            scrollW: 0, //记录滚动到哪了
        },
        methods: {
            //鼠标悬停，停止滚动
            stopScroll () {
                var target = this.$refs.contlist;
                clearInterval(this.scrollTime)
            },
            //鼠标移开 ，接着滚动
            startScroll () {
                var target = this.$refs.contlist;
                this.scrollW = target.offsetLeft; // 移开时记录向左移动的距离
                this.scroll()
            },
            //循环滚动
            scroll (){
                var that = this; //因为定时器里要使用vue对象时不能用this, 在定时器中的 this 代表
                var target = this.$refs.contlist; 
                var initLeft = 0;
                if(this.scrollW < 0){
                    initLeft = this.scrollW * (-1)
                }
                //定时器
                this.scrollTime = setInterval(function(){
                    initLeft ++;
                    if(initLeft >= target.offsetWidth / 2 ){
                        initLeft = 0;
                    }
                    target.style.left = '-'+ initLeft +'px';//获取不到translateX的值改用 left
                    
                    //target.style = 'transform: translateX(-'+ initLeft +'px)';
                },16)
            }
        },
        mounted() {
            //实例挂载完毕前
            //调用滚动代码
            this.scroll()
        }
    })
</script>

css 代码：

<style type="text/css">
    ul,li,em{
        margin:0;
        padding: 0;
    }
    .cont{
        height: 20px;
        background-color:#000;
        color: #fff;
        overflow: hidden;
        position: relative;
    }
    .contlist{
        position: absolute;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
    }
    .contlist ul{
        display: flex;
        flex-direction: row;
    }
    .contlist ul li{
        font-size: 12px;
        margin-right: 25px;
        height: 20px;
        line-height: 20px;
        display: flex;
        flex-direction: row;
    }
    .contlist ul li em{
        color:#f80;
        font-size: 12px;
        padding-right: 10px;
    }
</style>