99 lines
3.0 KiB
Vue
99 lines
3.0 KiB
Vue
<template>
|
|
<div class="warp" :id="warpId" style="height: calc(100% - 0.9rem);">
|
|
<ul class="item warpItem">
|
|
<li v-for="(item, index) in showData" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
|
|
<div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
|
|
<div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{item.seq}}</div>
|
|
</div>
|
|
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props:{
|
|
rcitem:{},
|
|
warpId:'',
|
|
pageSize:0,
|
|
switchSpeed:0,
|
|
},
|
|
data() {
|
|
return {
|
|
nowPgae:0,
|
|
showData:[],
|
|
allData:[],
|
|
timer:null,
|
|
}
|
|
},
|
|
mounted(){
|
|
console.log('mounted')
|
|
this.rcitem.data.forEach((item,index) => {
|
|
item.seq = index+1;
|
|
})
|
|
for(let i=0;i<this.rcitem.data.length;i += this.pageSize){
|
|
this.allData.push(this.rcitem.data.slice(i,i+this.pageSize));
|
|
}
|
|
// this.allData = this.rcitem.data;
|
|
// let warpbox = window.document.querySelector('#'+this.warpId);
|
|
// let warpItem = window.document.querySelector('#'+this.warpId+' .warpItem');
|
|
// let warpboxHeight = warpbox.clientHeight;
|
|
// let warpItemHeight = warpItem.clientHeight;
|
|
let warpPageNumber = this.allData.length;
|
|
let that = this;
|
|
that.showData = that.allData[0];
|
|
if(warpPageNumber>1){
|
|
this.timer = setInterval(()=>{
|
|
// that.pageNext(warpItem,warpPageNumber,warpboxHeight);
|
|
that.pageNext(warpPageNumber)
|
|
},this.switchSpeed*1000)
|
|
}
|
|
|
|
},
|
|
methods:{
|
|
pageNext(allPage){
|
|
if(this.nowPgae<(allPage-1)){
|
|
// Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
|
|
this.nowPgae++;
|
|
this.showData = this.allData[this.nowPgae];
|
|
|
|
}else{
|
|
this.nowPgae = 0;
|
|
this.showData = this.allData[this.nowPgae];
|
|
// Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
|
|
}
|
|
}
|
|
},
|
|
beforeDestroy(){
|
|
console.log('beforeUnmount')
|
|
clearInterval(this.timer)
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
.warp {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
li,a {
|
|
display: block;
|
|
// height: 0.5rem;
|
|
line-height: 0.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.2rem;
|
|
}
|
|
.rowStyle1{
|
|
background-color: rgba(10, 29, 50, 0.8);
|
|
}
|
|
.rowStyle2{
|
|
background-color: rgba(0, 44, 81, 0.8);
|
|
}
|
|
}
|
|
}
|
|
</style> |