<template>
<div>
<dv-scroll-board :config="config" style="margin-left:1rem;width:95%;height:48rem" />
</div>
</template>
<script>
export default {
props:['AreaData'],
data(){
return {
config:{
header: ['地区编码','地区名称','订单数量'],
indexHeader:'序号',
rowNum: 23, // 表行数
headerBGC: '#eb5a6d', // 表头背景色
oddRowBGC: '#FFF', // 奇数行背景色
evenRowBGC: '#f5f5f5', // 偶数行背景色
waitTime: 2000, // 轮播时间间隔(ms)
align: ['center'],
data: []
}
}
},
watch:{
AreaData(val){
console.log(val)
let arr = []
if(val.length >0){
for(let i in val){
let code = val[i].area
let name = val[i].name
let num = val[i].num
arr.push([code,name, `<div style="background:#67e0e3; white-space:nowrap; width:${num/1000}px !important">${num}</div>`])
}
let nowData = this.config
nowData.data = arr
this.config = {...nowData}
}
}
}
}
</script>
<style lang="less" scoped>
.dv-scroll-board{
color:#333;
/deep/ .header-item{
font-size: 1em;
text-align: center;
white-space: nowrap;
color:#FFF !important;
}
.rows{
.row-item{
text-align: center;
line-height: 2rem;
.ceil{
color:#3c3f52;
font-size: 1em;
i{
font-size: 0.5em;
}
}
.ceil:nth-child(2){
color: #eb5a6d !important;
font-size: 1.1em;
width: 25%;
}
}
}
}
.test{
width: 10px;
background-size: 10% 10%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
background: #eb5a6d;
}
</style>
datav 轮播表
最新推荐文章于 2024-07-02 15:39:39 发布