From f13c9b3e95fc2c34e8e6de9f94246243145b096a Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Sat, 7 Sep 2024 00:06:05 +0800
Subject: [PATCH] adjustable header.home page.

---
 src/containers/App/App.css | 13 ++++++++++---
 src/containers/App/App.tsx |  4 ++--
 src/contents/home.tsx      | 13 +++++--------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 4348db4..1dc1ccb 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 aa53060..3fde260 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 c4dbd31..aa1b1ef 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>
-- 
GitLab