html结构

    <div class="box-cp" id="nav">
        <div v-for="item,index in dataContainer.info.depts" class="item">
            <img class="img" src="../../../../assets/images/qi.jpg" fit="cover" />
            <div class="right">
                <div class="content">{{ item.deptName }}</div>
                <div class="describe">{{ item.honor }}</div>
            </div>
        </div>
    </div>

滚动函数 直接执行这个函数就行

        const dataContainer = reactive({ 
            address: 0,
            interval: null,
        });
        function scrollInit() {  
            //获取最外层dom
            const nav = document.getElementById("nav") 
            function start() {
                dataContainer.interval = setInterval(() => {
                    nav.scrollLeft += dataContainer.address ? -1 : 1
                    // 这一步判断如果滚动到最右边时往回滚
                    if (nav.scrollLeft + nav.clientWidth == nav.scrollWidth) dataContainer.address = 1
                    // 这一步判断如果回滚到最左边就切换状态往右滚
                    if (nav.scrollLeft == 0) dataContainer.address = 0
                }, 50)
            } 
            start()  
            // 鼠标悬停时停止滚动
            nav.addEventListener("mouseenter", () => {
                clearInterval(dataContainer.interval);
            }); 
            // 鼠标移开时继续滚动
            nav.addEventListener("mouseleave", start);
        } 
        nextTick(() => { 
            scrollInit() 
        })  
        return {
            dataContainer
        };