68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
|
import React, { useEffect, useState } from 'react';
|
|||
|
|
import './Home.css';
|
|||
|
|
|
|||
|
|
const slidesData = [
|
|||
|
|
{ id: 1, title: '行业资讯：新机型发布', description: '最新机型亮相航空展，性能全面升级', image: '' },
|
|||
|
|
{ id: 2, title: '解决方案：资料管理优化', description: '一体化资料管理平台上线，提效30%', image: '' },
|
|||
|
|
{ id: 3, title: '产品更新：PDF在线预览', description: '新增在线预览与多端适配功能', image: '' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const Home = () => {
|
|||
|
|
const [active, setActive] = useState(0);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
setActive((prev) => (prev + 1) % slidesData.length);
|
|||
|
|
}, 4000);
|
|||
|
|
return () => clearInterval(timer);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const prevSlide = () => {
|
|||
|
|
setActive((prev) => (prev - 1 + slidesData.length) % slidesData.length);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const nextSlide = () => {
|
|||
|
|
setActive((prev) => (prev + 1) % slidesData.length);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="home-page">
|
|||
|
|
<div className="container">
|
|||
|
|
<div className="hero">
|
|||
|
|
<h1>机型信息平台</h1>
|
|||
|
|
<p>欢迎访问主页，无需登录即可浏览导航与新闻</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="carousel">
|
|||
|
|
<button className="arrow left" onClick={prevSlide}>‹</button>
|
|||
|
|
|
|||
|
|
<div className="slides">
|
|||
|
|
{slidesData.map((s, idx) => (
|
|||
|
|
<div key={s.id} className={`slide ${idx === active ? 'active' : ''}`}>
|
|||
|
|
<div className="slide-content">
|
|||
|
|
<h3>{s.title}</h3>
|
|||
|
|
<p>{s.description}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button className="arrow right" onClick={nextSlide}>›</button>
|
|||
|
|
|
|||
|
|
<div className="indicators">
|
|||
|
|
{slidesData.map((_, idx) => (
|
|||
|
|
<span
|
|||
|
|
key={idx}
|
|||
|
|
className={`dot ${idx === active ? 'active' : ''}`}
|
|||
|
|
onClick={() => setActive(idx)}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Home;
|