自上而下的间隔滚动

页面中（特别是首页）中的类表格或者文档信息类的滚动使用，具体UI需要根据设计图进行代码编写，动效可直接复用。

页面中使用的js为scroll.js，以往的笔记中有记录

组件代码：

<!--
 * @Author: menxiaojin
 * @Date: 2023-05-05 15:25:31
 * @LastEditors: menxiaojin
 * @LastEditTime: 2023-05-06 17:30:27
-->
<template>
<div class="tableScrollCock">
    <div class="tableTitle">
        <div v-for="(item,index) in titleList" :key="index" :class="item.class">{{item.name}}</div>
    </div>
    <div class="tableContent" :id="idOutBox" :style="{height:boxHeight}">
        <div :id="idNeiBox">
            <div class="tableBox" v-for="(item,index) in list" :key="index">
                <div class="titleNum">
                    {{index+1}}
                    <span class="numOne" v-if="index==0"></span>
                    <span class="numTwo" v-if="index==1"></span>
                    <span class="numThree" v-if="index==2"></span>
                </div>
                <div class="titleName">{{item.partyName}}</div>
                <div class="titleScore scoreOne" v-if="index==0">{{item.score}}</div>
                <div class="titleScore scoreTwo" v-if="index==1">{{item.score}}</div>
                <div class="titleScore scoreThree" v-if="index==2">{{item.score}}</div>
                <div class="titleScore" v-if="index!=0&&index!=1&&index!=2">{{item.score}}</div>
            </div>
        </div>

    </div>
</div>
</template>
<script>
import {scrollCustom} from './scroll'
export default {
    props:{
        titleList:{
            type:Array,
            default:()=>[
                {class:'titleNum',name:'排名'},{class:'titleName',name:'党群名称'},{class:'titleScore',name:'活力指数'}
            ]
        },
        idOutBox:{
           type:String,
           default:'tableScroll'
        },
        idNeiBox:{
           type:String,
           default:'tabkleContent'
        },
        list:{
            type:Array,
            default:()=>[
                {id:'',partyName:'林家村党组织',score:2060},{id:'',partyName:'辛店街道党组织',score:2060},{id:'',partyName:'六户村党组织',score:2060},
                {id:'',partyName:'牛庄镇东庞社区党',score:2060},{id:'',partyName:'百华石油技术开发',score:2060},{id:'',partyName:'天水社区党组织',score:2060}
            ]
        },
        boxHeight:{
            type:String,
            default:'175px'
        }
    },
    data() {
        return {
        }
    },
    created() {

    },
    methods: {

    },
    mounted() {
        //滚动
        scrollCustom(this.idOutBox, this.idNeiBox, 38, 500, 50)
    },
}
</script>

<style scoped lang="scss">
/* 活力分数排行榜 */
.tableScrollCock{
    margin-top: 10px;
    .tableTitle{
        width: 100%;
        height: 32px;
        display: flex;
        background: url('~@/assets/cockpit/tableTitle.png') no-repeat;
        background-size: 100% 100%;
        line-height: 28px;
        color: #AFBED8;
        font-size:14px;
        font-style: oblique;
        .titleNum{
            width: 80px;
            text-align: center;
        }
        .titleName{
            flex: 1;
            padding-left: 30px;
        }
        .titleScore{
            width: 100px;
            text-align: center;
        }
    }
    .tableContent{
        overflow: hidden;
    }
    .tableBox:nth-child(2n){
        background: url('~@/assets/cockpit/tableBg1.png') no-repeat;
        background-size: 100% 100%;
    }
    .tableBox{
        width: 100%;
        height: 28px;
        display: flex;
        background: url('~@/assets/cockpit/tableBg2.png') no-repeat;
        background-size: 100% 100%;
        line-height: 28px;
        color: #AFBED8;
        font-size:14px;
        font-style: oblique;
        margin-top: 10px;
        .titleNum{
            width: 80px;
            text-align: center;
            color: #FFFFFF;
            font-weight: 550;
            position: relative;
            z-index: 1;
            .numOne{
                width: 50px;
                height: 15px;
                // background: #FC1718;
                position: absolute;
                top:7px;
                left: 50%;
                margin-left: -25px;
                z-index: -1;
                background-image: -webkit-linear-gradient(left,rgba(252, 23, 24, 0) 0%,rgba(252, 23, 24, 0.1) 20%,rgba(252, 23, 24, 1) 50%,rgba(252, 23, 24, 0.1) 80%,rgba(252, 23, 24, 0) 100%);
            }
            .numTwo{
                width: 50px;
                height: 15px;
                // background: #FC1718;
                position: absolute;
                top:7px;
                left: 50%;
                margin-left: -25px;
                z-index: -1;
                background-image: -webkit-linear-gradient(left,rgba(167, 191, 212, 0) 0%,rgba(167, 191, 212, 0.1) 20%,rgba(167, 191, 212, 1) 50%,rgba(167, 191, 212, 0.1) 80%,rgba(167, 191, 212, 0) 100%);
            }
            .numThree{
                width: 50px;
                height: 15px;
                // background: #FC1718;
                position: absolute;
                top:7px;
                left: 50%;
                margin-left: -25px;
                z-index: -1;
                background-image: -webkit-linear-gradient(left,rgba(232, 140, 59, 0) 0%,rgba(232, 140, 59, 0.1) 20%,rgba(232, 140, 59, 1) 50%,rgba(232, 140, 59, 0.1) 80%,rgba(232, 140, 59, 0) 100%);
            }
        }
        .titleName{
            flex: 1;
            padding-left: 30px;
        }
        .titleScore{
            width: 100px;
            text-align: center;
            color: #FFFFFF;
            font-weight: 550;
        }
        .scoreOne{
            color: #FF1800;
        }
        .scoreTwo{
            color: #FFFC00;
        }
        .scoreThree{
            color: #35FFFD;
        }
    }
}
</style>