<div class="ranking_table_box">
<div class="ranking_table">
<div
class="ranking_table_tbody"
:style="{ transform: `translate(0px,-${scrollTop}px)`, transition: 'all 0ms ease-in 0s' }"
>
<div
ref="tableScrollOne"
class="ranking_table_tbody_box"
@mouseenter="tableMouseOver"
@mouseleave="tableMouseOut"
>
<div v-for="(item, index) in areaData" :key="index" class="ranking_table_tbody_tr flex_row">
<div class="ranking_table_tbody_td other_row" style="width: 10%" :title="item.sortStr">
<div
v-if="item.sort <= 3"
class="sort_img"
:class="
item.sort == 1 ? 'one_img' : item.sort == 2 ? 'two_img' : item.sort == 3 ? 'three_img' : ''
"
></div>
<div v-else>{{ item.sortStr }}</div>
</div>
<div class="ranking_table_tbody_td txt_center" style="width: 30%">{{ item.area }}</div>
<div class="ranking_table_tbody_td txt_center" style="width: 30%">{{ item.yearDischarge }}</div>
<div class="ranking_table_tbody_td txt_center default_color" style="width: 30%">{{
item.targetDischarge
}}</div>
</div>
</div>
<div ref="copyTableOne" class="ranking_table_tbody_box"></div>
</div>
</div>
</div>
// 滚动处理方法
const tableScrollAffair = (): void => {
state.timer = setInterval(() => {
state.scrollTop++;
// 获取需要滚动的盒子的高度
let scrollItemBox = null;
scrollItemBox = state.tableScrollOne.offsetHeight;
// 当判断滚动的高度大于等于盒子高度时,从头开始滚动
if (state.scrollTop >= scrollItemBox) {
state.scrollTop = 0;
}
}, state.speed);
};
// 初始化列表滚动
const initScroll = (): void => {
nextTick(() => {
state.copyTableOne.innerHTML = state.tableScrollOne.innerHTML;
tableScrollAffair();
});
};
// 鼠标移出
const tableMouseOut = (): void => {
tableScrollAffair();
};
// 鼠标移入
const tableMouseOver = (): void => {
clearInterval(state.timer);
};
.ranking_table_box {
max-height: vh(260);
position: relative;
width: 100%;
overflow: hidden;
.ranking_table {
width: 100%;
color: rgba(255, 255, 255, 0.8);
font-size: vw(14);
font-family: Source Han Sans CN;
.ranking_table_tbody {
height: vh(260);
.ranking_table_tbody_box {
box-sizing: border-box;
overflow: hidden;
.ranking_table_tbody_tr {
justify-content: space-between;
box-sizing: border-box;
padding: 0 vw(18) 0 vw(11);
.ranking_table_tbody_td {
height: vh(48);
line-height: vh(48);
width: 20%;
justify-content: end;
align-items: center;
.td_img {
width: vw(40);
height: vh(20);
}
.sort_img {
width: vw(24);
height: vw(24);
margin-left: vw(5);
}
}
}
.ranking_table_tbody_tr:nth-of-type(odd) {
background-color: rgba(52, 149, 255, 0.06);
}
}
}
}
}