更新主页新闻配置界面

src/pages/Home.css

@@ -1,3 +1,7 @@
+:root {
+  --home-carousel-height: 720px;
+}
+
 .home-page {
   min-height: calc(100vh - 64px);
   background: #f5f5f5;
@@ -17,25 +21,23 @@
   color: #666;
 }
 
-.carousel {
+.carousel-full {
   position: relative;
-  background: white;
+  background: #000;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  padding: 20px;
   overflow: hidden;
+  width: 100%;
+  min-height: var(--home-carousel-height);
 }
 
 .slides {
   display: grid;
-  grid-template-columns: repeat(3, 100%);
+  grid-template-columns: 100%;
   transform: translateX(0);
 }
 
 .slide {
   opacity: 0;
   transition: opacity 0.4s ease;
-  min-height: 160px;
   display: none;
 }
 
@@ -44,14 +46,32 @@
   display: block;
 }
 
-.slide-content h3 { color: #333; margin: 0 0 8px; }
+.slide-img {
-.slide-content p { color: #666; }
+  width: 100%;
+  height: var(--home-carousel-height);
+  object-fit: cover;
+  display: block;
+}
+
+.caption {
+  position: absolute;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  color: #fff;
+  background: rgba(0,0,0,0.4);
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.caption h3 { margin: 0 0 6px; }
+.caption p { margin: 0; }
 
 .arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background: #fff;
+  background: rgba(255,255,255,0.85);
   border: 1px solid #e8e8e8;
   border-radius: 50%;
   width: 36px;
@@ -78,4 +98,3 @@
 }
 
 .dot.active { background: #1890ff; }
-

src/pages/Home.js

@@ -2,9 +2,30 @@ import React, { useEffect, useState } from 'react';
 import './Home.css';
 
 const slidesData = [
-  { id: 1, title: '行业资讯：新机型发布', description: '最新机型亮相航空展，性能全面升级', image: '' },
+  {
-  { id: 2, title: '解决方案：资料管理优化', description: '一体化资料管理平台上线，提效30%', image: '' },
+    id: 1,
-  { id: 3, title: '产品更新：PDF在线预览', description: '新增在线预览与多端适配功能', image: '' }
+    title: '行业资讯：新机型发布',
+    description: '最新机型亮相航空展，性能全面升级',
+    image: 'http://localhost:3001/uploads/home_1.png'
+  },
+  {
+    id: 2,
+    title: '解决方案：资料管理优化',
+    description: '一体化资料管理平台上线，提效30%',
+    image: 'http://localhost:3001/uploads/home_2.jpg'
+  },
+  {
+    id: 3,
+    title: '产品更新：PDF在线预览',
+    description: '新增在线预览与多端适配功能',
+    image: 'http://localhost:3001/uploads/home_3.jpg'
+  },
+  {
+    id: 4,
+    title: '客户案例：数字化转型',
+    description: '多行业落地实践，推动数据驱动决策',
+    image: 'http://localhost:3001/uploads/home_4.jpg'
+  }
 ];
 
 const Home = () => {
@@ -27,37 +48,33 @@ const Home = () => {
 
   return (
     <div className="home-page">
-      <div className="container">
+      
-        <div className="hero">
+
-          <h1>机型信息平台</h1>
+      <div className="carousel-full">
-          <p>欢迎访问主页，无需登录即可浏览导航与新闻</p>
+        <button className="arrow left" onClick={prevSlide}>‹</button>
+
+        <div className="slides">
+          {slidesData.map((s, idx) => (
+            <div key={s.id} className={`slide ${idx === active ? 'active' : ''}`}>
+              <img className="slide-img" src={s.image} alt={s.title} loading="lazy" />
+              <div className="caption">
+                <h3>{s.title}</h3>
+                <p>{s.description}</p>
+              </div>
+            </div>
+          ))}
         </div>
 
-        <div className="carousel">
+        <button className="arrow right" onClick={nextSlide}>›</button>
-          <button className="arrow left" onClick={prevSlide}>‹</button>
 
-          <div className="slides">
+        <div className="indicators">
-            {slidesData.map((s, idx) => (
+          {slidesData.map((_, idx) => (
-              <div key={s.id} className={`slide ${idx === active ? 'active' : ''}`}>
+            <span
-                <div className="slide-content">
+              key={idx}
-                  <h3>{s.title}</h3>
+              className={`dot ${idx === active ? 'active' : ''}`}
-                  <p>{s.description}</p>
+              onClick={() => setActive(idx)}
-                </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>