根据返回显示内容的长短来控制滚动条的快慢
<div class="screen_loop animate__animated animate__flash" v-show="loopRoll">
<div :class="sdfdsf.length ||sdfds.length >70 ? 'loop_textSlow' : 'loop_text'">
<span style="color: #f13737" v-if="rollHeightLoop">23地区: <span>{{ sdfdsds }}</span> </span>
<span style="color: #ffc125" v-if="rollMediumLoop">12地区: <span>{{ dsfdsff }}</span> </span>
</div>
</div>
.screen_loop {
height: 50px;
line-height: 50px;
border-top: 1px solid #3d5b7e;
border-bottom: 1px solid #3d5b7e;
background: rgba(1, 42, 92, 0.8);
color: #f2f402;
font-size: 32px;
position: absolute;
top: 8.5%;
left: 50%;
transform: translateX(-50%);
width: 55%;
box-sizing: border-box;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
}
.loop_text {
display: inline-block;
padding-left: 100%;
animation: loop 80s linear infinite;
color: red;
}
.loop_textSlow {
display: inline-block;
padding-left: 100%;
animation: loop 20s linear infinite;
color: red;
}
