42 lines
1.0 KiB
JavaScript
42 lines
1.0 KiB
JavaScript
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; |