mcfxkh-Web/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.less

51 lines
903 B
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

.water-level-alert {
width: 650px;
background: rgba(0, 32, 51, 0.9);
padding: 10px 20px;
border-radius: 4px;
border: 1px solid #0088cc;
.alert-container {
height: 24px;
overflow: hidden;
position: relative;
}
.alert-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
animation: scrollUp 12s linear infinite; // 6秒 * 2条数据
&:hover {
animation-play-state: paused; // 鼠标悬停时暂停动画
}
}
.alert-item {
height: 24px;
display: flex;
align-items: center;
}
.alert-text {
color: #ffffff;
font-size: 14px;
white-space: nowrap;
&::before {
content: '⚠️';
margin-right: 8px;
}
}
}
@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%); // 滚动一半的高度因为我们复制了4组数据
}
}