<template>
<div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut">
<table class="totall">
<tr class="title">
<th v-for="itemx in liData"
:key="itemx">{{ itemx }}</th>
</tr>
</table>
<div ref="moocBox" class="wrapper2">
<table :class="{ 'marquee_top': animate }">
<tr v-for="itemy in listData"
class="rollData"
ref="con1"
:key="itemy">
<td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>
</tr>
<tr v-for="itemy in listData"
class="rollData"
ref="con2"
:key="itemy">
<td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "Profile",
data() {
return {
animate:false,
liData: ["重点品类", "销售金额", "年周比", "达成率"],
listData: [
["FM", "53.647", "-33.76", "86.15%"],
["A", "53.647", "-33.76", "86.15%"],
["B", "53.647", "-33.76", "86.15%"],
["C", "53.647", "-33.76", "86.15%"],
["D", "53.647", "-33.76", "86.15%"],
["E", "53.647", "-33.76", "86.15%"],
["F", "53.647", "-33.76", "86.15%"],
["G111", "53.647", "-33.76", "86.15%"],
],
speed: 50,
myScroll:null,
iliHeight : 26,
time:null,
delay:20,
};
},
methods: {
//滚动
scrollUp() {
this.$refs.moocBox.scrollTop ++;
if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
//判断条件是否达到临界
this.$refs.moocBox.scrollTop = 0;
} else {
this.$refs.moocBox.scrollTop ++;
}
},
// 鼠标滑过暂停滚动
mouseOver() {
clearInterval(this.myScroll);
},
//鼠标移开重新滚动
mouseOut() {
this.myScroll = setInterval(() => {
this.$refs.moocBox.scrollTop ++;
this.scrollUp();
}
,this.speed);
}
},
components: {},
computed: {},
created() {
},
mounted() {
this.myScroll = setInterval(() => {
this.$refs.moocBox.scrollTop ++;
this.scrollUp()
} ,this.speed);
},
activated() {
},
deactivated() {
},
beforeDestoryed(){
clearInterval(myScroll);
this.myScroll =null;
},
};
</script>
<style scoped>
.wrapper {
overflow: hidden;
height: 220px;
}
.wrapper2{
height: 180px;
overflow: hidden;
}
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
background-color: rgb(2, 25, 80);
width: 100%;
color: #fff;
}
table tr {
transition: all 2s ease .3s;
}
.marquee_top {
transition: all 0.5s ease-in-out;
margin-top: -26px
}
.title {
height: 40px;
line-height: 40px;
text-align: center;
}
th{
padding: 5px 10px;
width: 25%;
}
td{
padding: 4px 10px;
width: 25%;
}
table th{
text-align: center;
}
table tr td {
width: 25%;
text-align: center;
}
.rollData {
font-size: 16px;
}
</style>
