src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.js

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './index.less';
 
 const WaterLevelAlert = () => {
+  const [position, setPosition] = useState(0);
+  
   const alerts = [
     {
       reservoir: '浮桥河水库',
@@ -11,19 +13,42 @@ const WaterLevelAlert = () => {
     },
     {
       reservoir: '浮桥河水库',
-      time: '06月08日03时',
+      time: '06月08日02时',
-      level: '66.4',
+      level: '93.4',
-      overLimit: '1.51',
+      overLimit: '0.40',
     }
   ];
 
-  // 复制多组数据以确保滚动效果连续
+  useEffect(() => {
-  const displayAlerts = [...alerts, ...alerts, ...alerts, ...alerts];
+    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];
 
   return (
     <div className="water-level-alert">
       <div className="alert-container">
-        <div className="alert-wrapper">
+        <div 
+          className="alert-wrapper" 
+          style={{
+            transform: `translateY(-${position}px)`,
+            transition: position === 0 ? 'none' : 'transform 0.5s ease-in-out'
+          }}
+        >
           {displayAlerts.map((alert, index) => (
             <div key={index} className="alert-item">
               <span className="alert-text">

src/views/Home/panels/Yuanyfa/WaterLevelAlert/index.less

@@ -1,5 +1,4 @@
 .water-level-alert {
-  width: 650px;
   background: rgba(0, 32, 51, 0.9);
   padding: 10px 20px;
   border-radius: 4px;
@@ -8,19 +7,10 @@
   .alert-container {
     height: 24px;
     overflow: hidden;
-    position: relative;
   }
 
   .alert-wrapper {
-    position: absolute;
+    will-change: transform;
-    top: 0;
-    left: 0;
-    width: 100%;
-    animation: scrollUp 12s linear infinite; // 6秒 * 2条数据
-
-    &:hover {
-      animation-play-state: paused; // 鼠标悬停时暂停动画
-    }
   }
 
   .alert-item {
@@ -40,12 +30,3 @@
     }
   }
 }
-
-@keyframes scrollUp {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-50%); // 滚动一半的高度，因为我们复制了4组数据
-  }
-}

src/views/Home/panels/Yuanyfa/index.js

@@ -170,7 +170,7 @@ export default function Warn({ style }) {
           </div> */}
           </div>}
         
-        <div style={{ color: "#fff", position: 'absolute', top: 160, right: 600 }}>
+        <div style={{ color: "#fff", position: 'absolute', top: 90, right: 600 }}>
           <WaterLevelAlert />
           </div>
       </div>