diff --git a/src/containers/App/App.css b/src/containers/App/App.css index 7cf768789c4f4c5c81bae4f35748f13ea8e3bb0d..1f75650e3242ed38b6ae9885223ff837717e66f9 100644 --- a/src/containers/App/App.css +++ b/src/containers/App/App.css @@ -379,6 +379,9 @@ footer a:hover { .card { transition: transform 0.2s; width: 100%; + border: 5px solid rgba(114, 47, 55, 1) !important; + background-color: #f77001a6 !important; + border-radius: 10px !important; /* height: 400px; */ } @@ -386,14 +389,15 @@ footer a:hover { display: flex; align-items: center; justify-content: center; - } .card-title { display: flex; align-items: center; font-size: large; - + border-radius: 20px; + background-color: #e4dfb4b0; + padding: 15px; } .card-img-top { diff --git a/src/contents/team.tsx b/src/contents/team.tsx index 38d7c6083c8d1fad78ca87fabfd5ea73d541a470..9859eedee418667a42feb0378443d2f34bf65d27 100644 --- a/src/contents/team.tsx +++ b/src/contents/team.tsx @@ -44,10 +44,10 @@ const Card: React.FC<CardProps> = ({ image1, image2, title1, description1, id, ); }; -const StickyImageContainer: React.FC<{ image: string ,words: string}> = ({ image,words }) => { +const StickyImageContainer: React.FC<{ image: string ,words: string ,names: string}> = ({ image,words,names }) => { return ( <div className="sticky-container" > - <h3 className='center-text'>âSMU-GDMU-China crewâ</h3> + <h3 className='center-text'>â{names}â</h3> <img src={image} alt="Sticky" className='sticky-img' /> <p className='sticky-words sticky-description indent'>{words}</p> </div> @@ -142,6 +142,44 @@ export function Team() { }; + const names = { + card1:'Keyi Zhan', + card2:'Ming Zhu', + card3:'Yihan Wu', + card4:'Shenglin chen', + card5:'Yuhao lin', + card6:'Xiaolong He', + card7:'Jingxuan Duanyi', + card8:'Luming Huang', + card9:'Wan Li', + card10:'Wenrong Wen', + card11:'Ziyuan Liu', + card12:'Pan Zhao', + card13:'Wenyi Guan', + card14:'Jianhua Zhang', + card15:'Runze Wen', + card16:'Hua Zhang', + card17:'Guozhuo Cai', + card18:'Yingying Yang', + card19:'Weihuan Li', + card20:'Yifeng Wang', + card21:'Feier Tian', + card22:'Zhixin Fang', + card23:'Kun Liu', + card24:'Lin Li', + card25:'Jiajin Li', + card26:'Kang Wang', + card27:'Meitong Han', + card28:'Yanqiu Cai', + card29:'Junhao Li', + card30:'Ke Liu', + card31:'Yingying Chen', + card32:'Xingan Zhao', + card33:'Zhilin Wu', + card34:'Jian Sun', + card35:'', + } + // 下方定义é‡è¦ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ const handleCardHover = (id: string, isHovered: boolean) => { if (isHovered) { @@ -167,7 +205,11 @@ export function Team() { {/* 左侧sticky容器 */} <div className="col-3"> {/* ä¸‹æ–¹è®¾ç½®é»˜è®¤æ˜¾ç¤ºå›¾åƒ */} - <StickyImageContainer image={hoveredCardId ? images[hoveredCardId] : 'https://placehold.co/600x800'} words={hoveredCardId ? words[hoveredCardId] : "Good to see you here!!"} /> + <StickyImageContainer + image={hoveredCardId ? images[hoveredCardId] : 'https://placehold.co/600x800'} + words={hoveredCardId ? words[hoveredCardId] : "Glad to introduce our team to you!"} + names={hoveredCardId ? names[hoveredCardId] : "Our crew"} + /> </div> {/* å¡ç‰‡åŒºåŸŸ */}