Skip to content
Snippets Groups Projects
Commit 4b8f2470 authored by Xingan Zhao's avatar Xingan Zhao
Browse files

BETTER team member page & better rounded border box

parent 356ba713
No related branches found
No related tags found
No related merge requests found
Pipeline #431973 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/containers/App/App.css
+ 35
− 5
View file @ 4b8f2470
......@@ -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 {
......
src/contents/team.tsx
+ 331
− 96
View file @ 4b8f2470
......@@ -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>
</>
);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment