diff --git a/src/containers/App/App.css b/src/containers/App/App.css index 4348db48ab537f3a280b9588d89c81511f78e8c4..1dc1ccb3301ff363e16ecc77561ef9e68802935f 100644 --- a/src/containers/App/App.css +++ b/src/containers/App/App.css @@ -103,7 +103,14 @@ footer a:hover { background-attachment: fixed; /* 固定背景图片,使其在滚动时ä¸ç§»åŠ¨ */ } -.px100 { -font-size: 100px; -color: #72d6b0; + +.custom-header { + + width: 100vw; + height: 200px; + background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */ + background-size: cover; /* 使背景图片覆盖整个容器 */ + background-position: center; /* å±…ä¸å¯¹é½èƒŒæ™¯å›¾ç‰‡ */ + background-repeat: no-repeat; /* 防æ¢èƒŒæ™¯å›¾ç‰‡é‡å¤ */ + background-attachment: fixed; /* 固定背景图片,使其在滚动时ä¸ç§»åŠ¨ */ } diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx index aa530602c2b2763906f00209404b35bee778ea7f..3fde260cc8252bcd89f3c188acf682953531b254 100644 --- a/src/containers/App/App.tsx +++ b/src/containers/App/App.tsx @@ -35,8 +35,8 @@ const App = () => { path={path} element={ <> - <Header title={title || ""} lead={lead || ""} /> - <div className="container"> + {/* <Header title={title || ""} lead={lead || ""} /> */} + <div className="container-fluid"> <Component /> </div> </> diff --git a/src/contents/home.tsx b/src/contents/home.tsx index c4dbd310f2cc7bac4008b717f2b832b586d4ea1e..aa1b1ef6b4d647f5d8e4e97e3b9e59cc10b2c8b2 100644 --- a/src/contents/home.tsx +++ b/src/contents/home.tsx @@ -5,17 +5,14 @@ export function Home() { return ( <> - <div className="container"> + <div className="custom-header left-align"></div> + <div className="container-fluid"> <div className="row justify-content-center bg-rice_yellow "> - <div></div> - - - - + <div className="col-md-8"> <div className="row justify-content-center h1">Promotion Video</div> - <div className="embed-responsive embed-responsive-16by9"> - <video className="embed-responsive-item" controls> + <div className="embed-responsive embed-responsive-16by9 row"> + <video className="embed-responsive-item justify-content-center" controls> <source src={"https://static.igem.org/peertube/streaming-playlists/hls/b8667885-e1be-48b2-ab9b-d1aac71db0da/e35183e1-c8b5-45b0-a83a-d2b98dcb6996-480-fragmented.mp4"} type="video/mp4" /> Your browser does not support the video tag. </video>