diff --git a/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.js b/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.js
index 9c95480..8a5368c 100644
--- a/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.js
+++ b/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.js
@@ -1,9 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
import './index.less';
const WaterLevelAlert = () => {
- const [position, setPosition] = useState(0);
-
const alerts = [
{
reservoir: '浮桥河水库',
@@ -13,42 +11,19 @@ const WaterLevelAlert = () => {
},
{
reservoir: '浮桥河水库',
- time: '06月08日02时',
- level: '93.4',
- overLimit: '0.40',
+ time: '06月08日03时',
+ level: '66.4',
+ overLimit: '1.51',
}
];
- useEffect(() => {
- const height = 24; // 每个项目的高度
- const totalHeight = height * alerts.length;
- let currentPosition = 0;
-
- const animate = () => {
- currentPosition += height;
- if (currentPosition >= totalHeight) {
- currentPosition = 0;
- }
- setPosition(currentPosition);
- };
-
- const timer = setInterval(animate, 3000);
- return () => clearInterval(timer);
- }, []);
-
- // 复制一份数据用于无缝滚动
- const displayAlerts = [...alerts, ...alerts];
+ // 复制多组数据以确保滚动效果连续
+ const displayAlerts = [...alerts, ...alerts, ...alerts, ...alerts];
return (
-
+
{displayAlerts.map((alert, index) => (
diff --git a/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.less b/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.less
index 0310051..c9daf75 100644
--- a/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.less
+++ b/src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.less
@@ -1,4 +1,5 @@
.water-level-alert {
+ width: 650px;
background: rgba(0, 32, 51, 0.9);
padding: 10px 20px;
border-radius: 4px;
@@ -7,10 +8,19 @@
.alert-container {
height: 24px;
overflow: hidden;
+ position: relative;
}
.alert-wrapper {
- will-change: transform;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ animation: scrollUp 12s linear infinite; // 6秒 * 2条数据
+
+ &:hover {
+ animation-play-state: paused; // 鼠标悬停时暂停动画
+ }
}
.alert-item {
@@ -29,4 +39,13 @@
margin-right: 8px;
}
}
+}
+
+@keyframes scrollUp {
+ 0% {
+ transform: translateY(0);
+ }
+ 100% {
+ transform: translateY(-50%); // 滚动一半的高度,因为我们复制了4组数据
+ }
}
\ No newline at end of file
diff --git a/src/views/Home/panels/Yuanyfa/index.js b/src/views/Home/panels/Yuanyfa/index.js
index df12c11..90f4e44 100644
--- a/src/views/Home/panels/Yuanyfa/index.js
+++ b/src/views/Home/panels/Yuanyfa/index.js
@@ -170,7 +170,7 @@ export default function Warn({ style }) {
*/}
}
-