feat(): 跑马灯样式修改

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时',
+      time: '06月08日03时',
-      level: '93.4',
+      level: '66.4',
-      overLimit: '0.40',
+      overLimit: '1.51',
     }
   ];
 
-  useEffect(() => {
+  // 复制多组数据以确保滚动效果连续
-    const height = 24; // 每个项目的高度
+  const displayAlerts = [...alerts, ...alerts, ...alerts, ...alerts];
-    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 
+        <div className="alert-wrapper">
-          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,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组数据
+  }
 }

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: 90, right: 600 }}>
+        <div style={{ color: "#fff", position: 'absolute', top: 160, right: 600 }}>
           <WaterLevelAlert />
           </div>
       </div>