From 4b8f247053b63703f47f43921fde61ca2db3fef6 Mon Sep 17 00:00:00 2001
From: zxa666 <zxadeguge@gmail.com>
Date: Sat, 21 Sep 2024 23:33:55 +0800
Subject: [PATCH] BETTER team member page & better rounded border box

---
 src/containers/App/App.css |  40 +++-
 src/contents/team.tsx      | 427 ++++++++++++++++++++++++++++---------
 2 files changed, 366 insertions(+), 101 deletions(-)

diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 5f360d7..86e45c7 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -308,6 +308,7 @@ footer a:hover {
   height: auto; /* 保持图片纵横比 */
   display: block; /* 去掉图片下方的空隙 */
   margin: 2px;
+  max-height: 100%;
 }
 
 .full-height-element {
@@ -318,22 +319,49 @@ footer a:hover {
 .card-container {
   max-width: 300px;
   margin: auto;
-  height: 500px;
+  height: auto;
+  margin-bottom: 150px;
 }
 
 .card {
   transition: transform 0.2s;
+  width: 100%;
+  /* height: 400px; */
+}
+
+.card-body {
+  display: flex;
+
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  font-size: large;
+
 }
 
 .card-img-top {
-  width: 300px;
-  height: 400px;
+  width: 100%;
+  height: auto;
 }
 
 .card-container:hover .card {
   transform: scale(1.05);
 }
 
+.sticky-container {
+  position: sticky;
+  top: 200px; /* 设置元素在滚动时保持与页面顶部的距离 */
+  margin: 10px;
+  margin-bottom: 150px;
+  padding: 30px;
+  border: 2px solid #f7a901; 
+  border-radius: 10px; 
+  background-color: #f77001a6;
+  height: auto;
+}
+
 .row-custom-height-card {
   height: 300px; /* 你可以根据需要调整高度 */
 }
@@ -366,6 +394,7 @@ footer a:hover {
   /* max-width: 0.9vw; */
   background-color: #ffa600c0;
   box-shadow: 10px 10px 5px rgba(0,0,0,0.1);
+  transform: scale(1.01);
 
 }
 
@@ -390,7 +419,7 @@ footer a:hover {
 .side-navbar {
   width: 250px;
   position: sticky;
-  top: 0;
+  top: 200px;
   left: 0;
   height: auto;
   background-color: rgb(245, 245, 220);
@@ -399,7 +428,8 @@ footer a:hover {
   /* margin-top: 500px; */
   margin-left: 20px;
   padding: 20px;
-  padding-top: 140px;
+  margin-top: 100px;
+  /* padding-top: 140px; */
 }
 
 .side-navbar .nav-link {
diff --git a/src/contents/team.tsx b/src/contents/team.tsx
index 53cfe1d..1114d69 100644
--- a/src/contents/team.tsx
+++ b/src/contents/team.tsx
@@ -4,125 +4,360 @@ interface CardProps {
   image1: string;
   image2: string;
   title1: string;
-  title2: string;
   description1: string;
-  description2: string;
+  id: string;
+  onHover: (id: string, isHovered: boolean) => void; // 添加回调函数，用于父组件通知悬浮状态
 }
 
-const Card: React.FC<CardProps> = ({ image1, image2, title1,title2, description1,description2 }) => {
-  const [hover, setHover] = useState(false);
-
+const Card: React.FC<CardProps> = ({ image1, image2, title1,  description1,  id, onHover }) => {
+  const [isHovered, setIsHovered] = useState(false);
   return (
-    <div 
+    <div
       className="card-container"
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
+      onMouseEnter={() => {
+        setIsHovered(true)
+        onHover(id, true)
+      }} // 鼠标悬浮时触发
+      onMouseLeave={() => {
+        setIsHovered(false)
+        onHover(id, false)
+      }} // 鼠标离开时触发
     >
       <div className="card">
-        <img 
-          src={hover ? image2 : image1} 
-          alt={title1} 
+        <img
+          src={isHovered ? image2 : image1}
+          alt={title1}
           className="card-img-top"
         />
-        <div className="card-body">
-
-          <h5 className="card-title">{hover? title2:title1}</h5>
-          <p className="card-text">{hover?description2:description1}</p>
-
-        </div>
+        {isHovered ? (  // 根据 isHovered 状态控制内容渲染
+          <div className="card-body">
+            <h5 className="card-title">{description1}</h5>
+          </div>
+        ) : (
+          <div className="card-body">
+            <h5 className="card-title">{title1}</h5>
+          </div>
+        )}
+        
       </div>
     </div>
   );
 };
 
+const StickyImageContainer: React.FC<{ image: string }> = ({ image }) => {
+  return (
+    <div className="sticky-container" >
+      <img src={image} alt="Sticky" className='responsive-img' />
+    </div>
+  );
+};
+
+
+// 下方定义重要！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
 export function Team() {
-  
+  const [hoveredCardId, setHoveredCardId] = useState<"card1" | "card2" | "card3" | "card4" | null>(null);
+
+
+  // 定义每个卡片的图像，当悬浮时左侧显示相应的图像
+  // 下方的定义重要！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
+  const images = {
+    card1: 'https://static.igem.wiki/teams/5378/school-badge/smu.webp',
+    card2: 'https://static.igem.wiki/teams/5378/school-badge/gdmu.webp',
+    card3: 'https://static.igem.wiki/teams/5378/image/zxa-tp.webp',
+    card4: 'https://static.igem.wiki/teams/5378/safety/03-111.webp'
+  };
+
+  // 下方定义重要！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
+  const handleCardHover = (id: string, isHovered: boolean) => {
+    if (isHovered) {
+      setHoveredCardId(id as "card1" | "card2" | "card3" | "card4");
+    } else {
+      setHoveredCardId(null);
+    }
+  };
+
   return (
     <>
-        <div className="custom-header-team">
-        <h1 className="centered-title"><img 
-                src="https://static.igem.wiki/teams/5378/header/team.webp"
-                alt="team header"
-                className="header-img"
-              /></h1>
-        </div>
-      <div className="row bg-rice_yellow">
-        <div className='row justify-content-center h1'>SMU&GDMU CREW</div>
-        <div className="col-2"></div>
-        <div className="col-2">
-          <div className='row-custom-height-card-space'></div>
-          <Card 
-          image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
-          image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
-          title1="SMU" 
-          title2='GDMU'
-          description1="SMU Description."
-          description2='GDMU Description'
+      <div className="custom-header-team">
+        <h1 className="centered-title">
+          <img 
+            src="https://static.igem.wiki/teams/5378/header/team.webp"
+            alt="team header"
+            className="header-img"
           />
-          <div className='row-custom-height-card-space'></div>
-          <Card 
-          image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
-          image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
-          title1="SMU" 
-          title2='GDMU'
-          description1="SMU Description."
-          description2='GDMU Description'
-          />
-          <div className='row-custom-height-card-space'></div>
-          </div>
-        
-        <div className="col-1"></div>
-
-        <div className="col-2">
-          <div className='row-custom-height-card-space'></div>
-          <Card 
-          image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
-          image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
-          title1="SMU" 
-          title2='GDMU'
-          description1="SMU Description."
-          description2='GDMU Description'
-          />
-          <div className='row-custom-height-card-space'></div>
-          <Card 
-          image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
-          image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
-          title1="SMU" 
-          title2='GDMU'
-          description1="SMU Description."
-          description2='GDMU Description'
-          />
-          <div className='row-custom-height-card-space'></div>
+        </h1>
+      </div>
+
+      <div className="row bg-rice_yellow">
+        {/* 左侧sticky容器 */}
+        <div className="col-4">
+          {/* 下方设置默认显示图像 */}
+          <StickyImageContainer image={hoveredCardId ? images[hoveredCardId] : 'https://static.igem.wiki/teams/5378/school-badge/smu.webp'} />
         </div>
 
-        <div className="col-1"></div>
-
-        <div className="col-2">
-          <div className='row-custom-height-card-space'></div>
-          <Card 
-          image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
-          image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
-          title1="SMU" 
-          title2='GDMU'
-          description1="SMU Description."
-          description2='GDMU Description'
-          />
-          <div className='row-custom-height-card-space'></div>
-          <Card 
-          image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
-          image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
-          title1="SMU" 
-          title2='GDMU'
-          description1="SMU Description."
-          description2='GDMU Description'
-          />
-          <div className='row-custom-height-card-space'></div>
+        {/* 卡片区域 */}
+        <div className="col-8">
+
+          <div className='row justify-content-center h1'>Instructor</div>
+          <div className="row">
+            <div className="col-3">
+              <Card
+                id="card1"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Xingan Zhao"
+                description1="Shall we?"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card2"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Yifeng Wang"
+                description1="hahahahaahhahaha."
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card3"
+                image1="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+                image2="https://static.igem.wiki/teams/5378/lesser-panda/smal.webp"
+                title1="Hermit Lee"
+                description1="Genshin,launch!!"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card4"
+                image1="https://static.igem.wiki/teams/5378/safety/03-111.webp"
+                image2="https://static.igem.wiki/teams/5378/safety/03-11.webp"
+                title1="SMU"
+                description1="SMU Description."
+                onHover={handleCardHover}
+              />
+            </div>
+
+          </div>
+
+          <div className='row justify-content-center h1'>Student Leader</div>
+          <div className="row">
+            <div className="col-3">
+              <Card
+                id="card1"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Xingan Zhao"
+                description1="Shall we?"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card2"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Yifeng Wang"
+                description1="hahahahaahhahaha."
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card3"
+                image1="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+                image2="https://static.igem.wiki/teams/5378/lesser-panda/smal.webp"
+                title1="Hermit Lee"
+                description1="Genshin,launch!!"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card4"
+                image1="https://static.igem.wiki/teams/5378/safety/03-111.webp"
+                image2="https://static.igem.wiki/teams/5378/safety/03-11.webp"
+                title1="SMU"
+                description1="SMU Description."
+                onHover={handleCardHover}
+              />
+            </div>
+
+          </div>
+
+          <div className='row justify-content-center h1'>Advisor</div>
+          <div className="row">
+            <div className="col-3">
+              <Card
+                id="card1"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Xingan Zhao"
+                description1="Shall we?"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card2"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Yifeng Wang"
+                description1="hahahahaahhahaha."
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card3"
+                image1="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+                image2="https://static.igem.wiki/teams/5378/lesser-panda/smal.webp"
+                title1="Hermit Lee"
+                description1="Genshin,launch!!"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card4"
+                image1="https://static.igem.wiki/teams/5378/safety/03-111.webp"
+                image2="https://static.igem.wiki/teams/5378/safety/03-11.webp"
+                title1="SMU"
+                description1="SMU Description."
+                onHover={handleCardHover}
+              />
+            </div>
+
+          </div>
+
+          <div className='row justify-content-center h1'>Student Member</div>
+          <div className="row">
+            <div className="col-3">
+              <Card
+                id="card1"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Xingan Zhao"
+                description1="Shall we?"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card2"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Yifeng Wang"
+                description1="hahahahaahhahaha."
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card3"
+                image1="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+                image2="https://static.igem.wiki/teams/5378/lesser-panda/smal.webp"
+                title1="Hermit Lee"
+                description1="Genshin,launch!!"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card4"
+                image1="https://static.igem.wiki/teams/5378/safety/03-111.webp"
+                image2="https://static.igem.wiki/teams/5378/safety/03-11.webp"
+                title1="SMU"
+                description1="SMU Description."
+                onHover={handleCardHover}
+              />
+            </div>
+
+          </div>
+
+          <div className='row justify-content-center h1'>External Member</div>
+          <div className="row">
+            <div className="col-3">
+              <Card
+                id="card1"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Xingan Zhao"
+                description1="Shall we?"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card2"
+                image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp"
+                image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
+                title1="Yifeng Wang"
+                description1="hahahahaahhahaha."
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card3"
+                image1="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
+                image2="https://static.igem.wiki/teams/5378/lesser-panda/smal.webp"
+                title1="Hermit Lee"
+                description1="Genshin,launch!!"
+                onHover={handleCardHover}
+              />
+            </div>
+
+            <div className="col-3">
+              <Card
+                id="card4"
+                image1="https://static.igem.wiki/teams/5378/safety/03-111.webp"
+                image2="https://static.igem.wiki/teams/5378/safety/03-11.webp"
+                title1="SMU"
+                description1="SMU Description."
+                onHover={handleCardHover}
+              />
+            </div>
+
+          </div>
+
         </div>
 
-        <div className="col-2"></div>
-      </div>
+
+          
+
+
+
+          
+        
+
         
-      
+          
+        
+
+        
+          
+        
+
+        {/* <div className="col-2"></div> */}
+      </div>
     </>
   );
 }
-- 
GitLab