<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)是否停止播放
});
});
本段代码仅供参考,样式需要根据自己实际调整,大佬可以忽略!