2021-04-22

<div class="middle_item middle_bottom">
        
        <div class="middle_chart bottom_chart" id="middleChartBottom">
            <div class="table_header">
                <div>表头1</div>
                <div>表头2</div>
                <div>表头3</div>
                <div>表头4</div>
                <div>表头5</div>
                <div>表头6</div>
            </div>
            <div class="table_content" id="contractNew">

            </div>
        </div>
        <script id="contractNewTpl" type="text/html">
            <div id="tableTbadys">
                {{#  layui.each(d.list, function(index, item){ }}
                <div class="table_body layui-clear">
                    <div>{{item.title}}</div>
                    <div>{{item.type}}</div>
                    <div>{{item.dept}}</div>
                    <div>{{item.date}}</div>
                    <div>{{item.company}}</div>
                    <div>{{item.status}}</div>
                </div>
                {{#  }); }}
                {{#  if(d.list.length === 0){ }}
                无数据
                {{#  } }}
            </div>
        </script>
    </div>

.poster-contract .middle_content .middle_item{
    position: relative;
    width: 100%;
    height: 523px;
    background: url("../../images/border1.png");
    overflow: hidden;
}
.poster-contract .middle_content .middle_item .middle_chart{
    margin-top: 80px;
    width: 100%;
    height: 438px;
}
.poster-contract .middle_content .middle_item.middle_bottom{
    margin-top: 56px;
    width: 100%;
    height: 394px;
    background: url("../../images/border2.png");
}
.poster-contract .middle_content .middle_item.middle_bottom .item_title{
    top: 0;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart{
    margin: 56px auto 0;
    width: 99%;
    height: 334px;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_header{
    height: 30px;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_header div{
    float: left;
    width: 20%;
    height: 30px;
    color: #fff;
    line-height: 30px;
    text-align: center;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_body div{
    float: left;
    width: 20%;
    height: 30px;
    color: #00a8ff;
    line-height: 30px;
    text-align: center;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_header div:nth-child(2){
    width: 10%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_header div:nth-child(3){
    width: 20%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_header div:nth-child(4){
    width: 25%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_header div:nth-child(5){
    width: 15%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_header div:last-child{
    width: 10%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_body div:nth-child(2){
    width: 10%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_body div:nth-child(3){
    width: 20%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_body div:nth-child(4){
    width: 25%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_body div:nth-child(5){
    width: 15%;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_body div:last-child{
    width: 10%;
}
.poster-contract .middle_content .middle_item.middle_bottom .table_content{
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
}
.poster-contract .middle_content .middle_item.middle_bottom .bottom_chart .table_body:nth-child(2n-1){
    background-color: #0d2c64;
}
#contractNew::-webkit-scrollbar{
    width:3px;
    height:3px;
    /**/
}
#contractNew::-webkit-scrollbar-track{
    background: #0d2c64;
    border-radius:3px;
}
#contractNew::-webkit-scrollbar-thumb{
    background: #0d2c64;
    border-radius:3px;
}
#contractNew::-webkit-scrollbar-thumb:hover{
    background: #0d2c64;
}
#contractNew::-webkit-scrollbar-corner{
    background: #0d2c64;
}

var list = [];
            for (var i = 0; i < 20; i++) {
                var obj = {};
                obj['title'] = '数据1';
                obj['type'] = '数据2';
                obj['dept'] = '数据3';
                obj['date'] = '数据4';
                obj['company'] = '数据5';
                obj['status'] = '数据6';
                list.push(obj);
            }
            var data = { //数据
                "title": ""
                , "list": list
            }
            var getTpl = contractNewTpl.innerHTML
                , view = document.getElementById('contractNew');
            layui.laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
//无缝开始
                layui.$("#contractNew").slide({
                    mainCell: "#tableTbadys", //切换元素的包裹层对象
                    autoPlay: true, //自动运行
                    effect: "topMarquee", //动画效果(上无缝循环滚动)
                    vis: 10, //visible缩写 ，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。
                    interTime: 50, //毫秒: 相当于运行速度
                    mouseOverStop: true,//鼠标移到容器层（无缝滚动是mainCell）是否停止播放
                });
            });

本段代码仅供参考，样式需要根据自己实际调整，大佬可以忽略！