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

import React from 'react';
import './index.less';

const WaterLevelAlert = () => {
  const alerts = [
    {
      reservoir: '浮桥河水库',
      time: '06月08日02时',
      level: '65.01',
      overLimit: '0.12',
    },
    {
      reservoir: '浮桥河水库',
      time: '06月08日03时',
      level: '66.4',
      overLimit: '1.51',
    }
  ];

  // 复制多组数据以确保滚动效果连续
  const displayAlerts = [...alerts, ...alerts, ...alerts, ...alerts];

  return (
    <div className="water-level-alert">
      <div className="alert-container">
        <div className="alert-wrapper">
          {displayAlerts.map((alert, index) => (
            <div key={index} className="alert-item">
              <span className="alert-text">
                预计{alert.reservoir}于 {alert.time}水位将上涨至
                {alert.level} m (超汛限水位{alert.overLimit}m)，
                请做好防范
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default WaterLevelAlert;