diff --git a/src/containers/App/App.css b/src/containers/App/App.css index 86e45c760384872ce7fd43c48ba3d0febb9bf4f1..4538f2068b1fa489d2182c4aee9f6e8b501ad305 100644 --- a/src/containers/App/App.css +++ b/src/containers/App/App.css @@ -362,6 +362,17 @@ footer a:hover { height: auto; } +.sticky-words { + font-size: large; +} +.sticky-img { + width: 100%; /* 图片宽度自适应容器 */ + height: auto; /* ä¿æŒå›¾ç‰‡çºµæ¨ªæ¯” */ + /* display: block; 去掉图片下方的空隙 */ + margin: 2px; + max-height: 60vh; +} + .row-custom-height-card { height: 300px; /* ä½ å¯ä»¥æ ¹æ®éœ€è¦è°ƒæ•´é«˜åº¦ */ } diff --git a/src/contents/team.tsx b/src/contents/team.tsx index 1114d698898aa49e1d42e27659073eaaab32097b..5d6d241e66d884a5cfd62ba643e6205ac83d70aa 100644 --- a/src/contents/team.tsx +++ b/src/contents/team.tsx @@ -44,10 +44,11 @@ const Card: React.FC<CardProps> = ({ image1, image2, title1, description1, id, ); }; -const StickyImageContainer: React.FC<{ image: string }> = ({ image }) => { +const StickyImageContainer: React.FC<{ image: string ,words: string}> = ({ image,words }) => { return ( <div className="sticky-container" > - <img src={image} alt="Sticky" className='responsive-img' /> + <img src={image} alt="Sticky" className='sticky-img' /> + <p className='sticky-words'>{words}</p> </div> ); }; @@ -67,6 +68,13 @@ export function Team() { card4: 'https://static.igem.wiki/teams/5378/safety/03-111.webp' }; + const words = { + card1: '大家好啊,我是zxa,asdasdsadasdsasdadwdawdawdasdawdawsdawé™„ä»¶æ ¼å¼è‰°è‹¦è™Žéª¨é…’扣税的哎u了如何改进å—æ–¹ç¯å…·å¼€å…³å“Žu人身攻击喀什地方韩国u爱我人员å¤ç‹¬å’Œå¹²éƒ¨åŸƒå¢ç‘žå¹²å“ˆåŠæ—¶ç”å¤å®¢æˆ·ç»™', + card2: '我是wyf,地地é“é“的地地é“é“的地对地导弹顶顶顶顶', + card3: '我是leeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', + card4: '芜湖' + }; + // 下方定义é‡è¦ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ const handleCardHover = (id: string, isHovered: boolean) => { if (isHovered) { @@ -92,7 +100,7 @@ export function Team() { {/* 左侧sticky容器 */} <div className="col-4"> {/* ä¸‹æ–¹è®¾ç½®é»˜è®¤æ˜¾ç¤ºå›¾åƒ */} - <StickyImageContainer image={hoveredCardId ? images[hoveredCardId] : 'https://static.igem.wiki/teams/5378/school-badge/smu.webp'} /> + <StickyImageContainer image={hoveredCardId ? images[hoveredCardId] : 'https://placehold.co/600x800'} words={hoveredCardId ? words[hoveredCardId] : "Good to see you here!!"} /> </div> {/* å¡ç‰‡åŒºåŸŸ */} @@ -103,7 +111,7 @@ export function Team() { <div className="col-3"> <Card id="card1" - image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp" + image1="https://placehold.co/600x800" image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp" title1="Xingan Zhao" description1="Shall we?" @@ -114,7 +122,7 @@ export function Team() { <div className="col-3"> <Card id="card2" - image1="https://static.igem.wiki/teams/5378/school-badge/smu.webp" + image1="https://placehold.co/600x800" image2="https://static.igem.wiki/teams/5378/school-badge/gdmu.webp" title1="Yifeng Wang" description1="hahahahaahhahaha." @@ -125,7 +133,7 @@ export function Team() { <div className="col-3"> <Card id="card3" - image1="https://static.igem.wiki/teams/5378/image/zxa-tp.webp" + image1="https://placehold.co/600x800" image2="https://static.igem.wiki/teams/5378/lesser-panda/smal.webp" title1="Hermit Lee" description1="Genshin,launch!!" @@ -136,7 +144,7 @@ export function Team() { <div className="col-3"> <Card id="card4" - image1="https://static.igem.wiki/teams/5378/safety/03-111.webp" + image1="https://placehold.co/600x800" image2="https://static.igem.wiki/teams/5378/safety/03-11.webp" title1="SMU" description1="SMU Description."