diff --git a/src/pages/Home.css b/src/pages/Home.css index 41510ed..111925a 100755 --- a/src/pages/Home.css +++ b/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; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - padding: 20px; + background: #000; 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-content p { color: #666; } +.slide-img { + 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; } - diff --git a/src/pages/Home.js b/src/pages/Home.js index 82e6991..c077463 100755 --- a/src/pages/Home.js +++ b/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: 3, title: '产品更新:PDF在线预览', description: '新增在线预览与多端适配功能', image: '' } + { + id: 1, + 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 (
-
-
-

机型信息平台

-

欢迎访问主页,无需登录即可浏览导航与新闻

+ + +
+ + +
+ {slidesData.map((s, idx) => ( +
+ {s.title} +
+

{s.title}

+

{s.description}

+
+
+ ))}
-
- + -
- {slidesData.map((s, idx) => ( -
-
-

{s.title}

-

{s.description}

-
-
- ))} -
- - - -
- {slidesData.map((_, idx) => ( - setActive(idx)} - /> - ))} -
+
+ {slidesData.map((_, idx) => ( + setActive(idx)} + /> + ))}