From 46365610ab1be54a3da3e2ccc344070039d6c365 Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Tue, 10 Sep 2024 23:40:36 +0800
Subject: [PATCH] add some example container and text to home&model.add some
 basic css

---
 src/containers/App/App.css | 19 ++++++++++++++-
 src/contents/home.tsx      | 50 +++++++++++++++++++++++++++++++-------
 src/contents/model.tsx     | 13 ++++++++--
 3 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 406a3c0..5c5fcee 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -301,7 +301,8 @@ footer a:hover {
 }
 
 .promotion-video {
-  height: 30vh; /* 设置高度为视口高度的80% */
+  width: 100%;
+  height: auto; /* 设置高度为视口高度的80% */
   border: none; 
   border-radius: 30px; /* 圆角效果 */
 }
@@ -400,4 +401,20 @@ footer a:hover {
 
 .side-navbar .nav-link.notActive:hover {
   background-color: rgb(204, 204, 168);
+}
+
+.bold-font{
+  font-weight: bold;
+}
+
+.red-font{
+  color: #d9534f;
+}
+
+.blue-font{
+  color: #5bc0de;
+}
+
+.green-font{
+  color: #39d197;
 }
\ No newline at end of file
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
index 80418be..30dd45d 100644
--- a/src/contents/home.tsx
+++ b/src/contents/home.tsx
@@ -36,16 +36,48 @@ export function Home() {
                 className="responsive-img"
               />
           </div>
-          <div className="row justify-content-center h1">Stream our Promotion Video</div>
-            <div className="col-md-6 row justify-content-center mb-5">
-              <iframe 
-                title="SMU-GDMU-CHINA: Engineered bacterial therapeutics for Preventing Hepatic Encepha... (2024) - Project Promotion [English]"  
-                className="promotion-video"
-                src="https://video.igem.org/videos/embed/b8667885-e1be-48b2-ab9b-d1aac71db0da"  
-                allowFullScreen={true} 
-                sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
-              </iframe>
+
+          <div className="row justify-content-center h1 full-height-element">
+          <div className="row">
+                <div>我是小盒子</div>
+                <div className="rounded-border">有橙色边框的小盒子</div>
+                <p>大家好，我是文本</p>
+                <p className="indent">大家好啊，我的开头有缩进</p>
+                <p className="center-text">大家好！我是居中文本！</p>
+                <p className="bold-font">粗粗的文本</p>
+                <p className="red-font">红色的文本</p>
+                <p className="green-font">绿色的文本</p>
+                <p className="blue-font">蓝色的文本</p>
+                <p className="bold-font red-font center-text">叠加了多种属性的文本，
+                <span className="bold-font">插入了粗体</span>文字</p>
+              </div>
+          </div>
+
+          <div className="full-height-element">  
+            <h1>一级标题</h1>
+            <h2>二级标题</h2>
+            <h3>三级标题</h3>
+            <h4>四级标题</h4>
+          </div>
+
+          <div className="row full-height-element">
+            <p className="center-text h1">Stream our Promotion Video</p>
+            <div className="col-1"></div>
+            <div className="col-10 mb-5">
+                <iframe 
+                  title="SMU-GDMU-CHINA: Engineered bacterial therapeutics for Preventing Hepatic Encepha... (2024) - Project Promotion [English]"  
+                  className="promotion-video"
+                  src="https://video.igem.org/videos/embed/b8667885-e1be-48b2-ab9b-d1aac71db0da"  
+                  allowFullScreen={true} 
+                  sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
+                </iframe>
             </div>
+            <div className="col-1"></div>
+
+          </div>
+            
+
+
           
         </div>
       </div>
diff --git a/src/contents/model.tsx b/src/contents/model.tsx
index 0ab1756..8d9b627 100644
--- a/src/contents/model.tsx
+++ b/src/contents/model.tsx
@@ -84,8 +84,14 @@ export function Model() {
                 className="responsive-img"
               />
                </Element>
-          
-
+                <p>预设好，用来<span className='bold-font'>粗体</span>装文本的小箱子</p>
+                <p>1234<p className="bold-font">56</p>7890</p>         
+                <div>很万能的小箱子</div>
+                <div className="rounded-border">
+                <h2 className="center-text">居中小标题</h2>
+                <p>第一行文本</p>
+                <p>第二行文本，<span className="bold-font">欧耶欧耶</span>欧耶</p>
+                </div>              
           
               
               <Element name="section2" className="element rounded-border" id='section2'>
@@ -97,6 +103,9 @@ export function Model() {
                       This is an inline math formula: <MathJax.Node inline formula={`f(x) = \\int_{-\\infty}^\\infty
                                                                                     \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}
                                                                                     \\,d\\xi`} />
+                                                                                    <MathJax.Node formula={`f(x) = \\int_{-\\infty}^\\infty
+                                                                                    \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}
+                                                                                    \\,d\\xi`} />
                   </div>
               </MathJax.Provider>
                 <img 
-- 
GitLab