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

adjust homepage header.add new feature to team member card.

parent 18f77430
No related branches found
No related tags found
No related merge requests found
Pipeline #416553 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
package.json
+ 1
− 0
View file @ b0a67e78
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"react-scroll": "^1.9.0" "react-scroll": "^1.9.0"
}, },
"devDependencies": { "devDependencies": {
"@types/mathjax": "^0.0.40",
"@types/node": "^20.12.10", "@types/node": "^20.12.10",
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22", "@types/react-dom": "^18.2.22",
......
src/asset/img/miami.jpg deleted 100644 → 0
+ 0
− 0
View file @ 18f77430
src/asset/img/miami.jpg

184 KiB

src/containers/App/App.css
+ 1
− 17
View file @ b0a67e78
...@@ -18,13 +18,6 @@ body { ...@@ -18,13 +18,6 @@ body {
background-color: rgb(245, 245, 220); background-color: rgb(245, 245, 220);
} }
.bg-miami {
background-image: url('/src/asset/miami.jpg'); /* 背景图片路径 */
background-size: cover; /* 使背景图片覆盖整个容器 */
background-position: center; /* 居中对齐背景图片 */
background-repeat: no-repeat; /* 防止背景图片重复 */
background-attachment: fixed; /* 固定背景图片，使其在滚动时不移动 */
}
/* CALLOUT */ /* CALLOUT */
.bd-callout { .bd-callout {
...@@ -95,19 +88,10 @@ footer a:hover { ...@@ -95,19 +88,10 @@ footer a:hover {
} }
/* header */ /* header */
.bg-miami {
background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */
background-size: cover; /* 使背景图片覆盖整个容器 */
background-position: center; /* 居中对齐背景图片 */
background-repeat: no-repeat; /* 防止背景图片重复 */
background-attachment: fixed; /* 固定背景图片，使其在滚动时不移动 */
}
.custom-header-home { .custom-header-home {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-image: url('/src/asset/img/miami.jpg'); /* 背景图片路径 */ background-image: url('https://static.igem.wiki/teams/5378/image/zxa-tp.webp'); /* 背景图片路径 */
background-size: cover; /* 使背景图片覆盖整个容器 */ background-size: cover; /* 使背景图片覆盖整个容器 */
background-position: center; /* 居中对齐背景图片 */ background-position: center; /* 居中对齐背景图片 */
background-repeat: no-repeat; /* 防止背景图片重复 */ background-repeat: no-repeat; /* 防止背景图片重复 */
......
src/contents/home.tsx
+ 3
− 3
View file @ b0a67e78
...@@ -15,7 +15,7 @@ export function Home() { ...@@ -15,7 +15,7 @@ export function Home() {
<div className="row justify-content-center h1 full-height-element"> <div className="row justify-content-center h1 full-height-element">
Section 1 Section 1
<img <img
src="https://img0.baidu.com/it/u=351821279,2605385406&fm=253&fmt=auto&app=138&f=PNG?w=600&h=335" src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
alt="dungreed" alt="dungreed"
className="responsive-img" className="responsive-img"
/> />
...@@ -23,7 +23,7 @@ export function Home() { ...@@ -23,7 +23,7 @@ export function Home() {
<div className="row justify-content-center h1 full-height-element"> <div className="row justify-content-center h1 full-height-element">
Section 2 Section 2
<img <img
src="https://pic.3h3.com/up/2023/0915/20230915100746929.png" src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
alt="dungreed" alt="dungreed"
className="responsive-img" className="responsive-img"
/> />
...@@ -31,7 +31,7 @@ export function Home() { ...@@ -31,7 +31,7 @@ export function Home() {
<div className="row justify-content-center h1 full-height-element"> <div className="row justify-content-center h1 full-height-element">
Section 3 Section 3
<img <img
src="https://img0.baidu.com/it/u=3750079665,4155589639&fm=253&fmt=auto&app=138&f=PNG?w=600&h=338" src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
alt="dungreed" alt="dungreed"
className="responsive-img" className="responsive-img"
/> />
......
src/contents/model.tsx
+ 3
− 0
View file @ b0a67e78
...@@ -2,6 +2,7 @@ import { Nav } from 'react-bootstrap'; ...@@ -2,6 +2,7 @@ import { Nav } from 'react-bootstrap';
import { Link,Element } from 'react-scroll'; import { Link,Element } from 'react-scroll';
import React,{useEffect,useState} from 'react'; import React,{useEffect,useState} from 'react';
// sidenavbar begin // sidenavbar begin
interface SideNavbarProps { interface SideNavbarProps {
activeLink: string; activeLink: string;
...@@ -86,7 +87,9 @@ export function Model() { ...@@ -86,7 +87,9 @@ export function Model() {
<h4 className="center-text">Section 3</h4> <h4 className="center-text">Section 3</h4>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p> <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
<p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p> <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
</div> </div>
</Element> </Element>
......
src/contents/team.tsx
+ 46
− 30
View file @ b0a67e78
...@@ -3,11 +3,13 @@ import React, { useState } from 'react'; ...@@ -3,11 +3,13 @@ import React, { useState } from 'react';
interface CardProps { interface CardProps {
image1: string; image1: string;
image2: string; image2: string;
title: string; title1: string;
description: string; title2: string;
description1: string;
description2: string;
} }
const Card: React.FC<CardProps> = ({ image1, image2, title, description }) => { const Card: React.FC<CardProps> = ({ image1, image2, title1,title2, description1,description2 }) => {
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
return ( return (
...@@ -19,12 +21,14 @@ const Card: React.FC<CardProps> = ({ image1, image2, title, description }) => { ...@@ -19,12 +21,14 @@ const Card: React.FC<CardProps> = ({ image1, image2, title, description }) => {
<div className="card"> <div className="card">
<img <img
src={hover ? image2 : image1} src={hover ? image2 : image1}
alt={title} alt={title1}
className="card-img-top" className="card-img-top"
/> />
<div className="card-body"> <div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{description}</p> <h5 className="card-title">{hover? title2:title1}</h5>
<p className="card-text">{hover?description2:description1}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -44,17 +48,21 @@ export function Team() { ...@@ -44,17 +48,21 @@ export function Team() {
<div className="col-2"> <div className="col-2">
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
<Card <Card
image1= "https://img0.baidu.com/it/u=45513050,3171194851&fm=253&fmt=auto&app=138&f=JPEG?w=885&h=500" image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
image2= "https://img1.baidu.com/it/u=455465338,4231697526&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500" image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
title="yujiro" title1="SMU"
description="Strongest man." title2='GDMU'
description1="SMU Description."
description2='GDMU Description'
/> />
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
<Card <Card
image1="https://via.placeholder.com/300x200.png?text=Image+1" image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
image2="https://via.placeholder.com/300x200.png?text=Image+2" image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
title="Card Title" title1="SMU"
description="Card description goes here." title2='GDMU'
description1="SMU Description."
description2='GDMU Description'
/> />
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
</div> </div>
...@@ -64,17 +72,21 @@ export function Team() { ...@@ -64,17 +72,21 @@ export function Team() {
<div className="col-2"> <div className="col-2">
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
<Card <Card
image1="https://via.placeholder.com/300x200.png?text=Image+1" image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
image2="https://via.placeholder.com/300x200.png?text=Image+2" image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
title="Card Title" title1="SMU"
description="Card description goes here." title2='GDMU'
description1="SMU Description."
description2='GDMU Description'
/> />
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
<Card <Card
image1="https://via.placeholder.com/300x200.png?text=Image+1" image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
image2="https://via.placeholder.com/300x200.png?text=Image+2" image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
title="Card Title" title1="SMU"
description="Card description goes here." title2='GDMU'
description1="SMU Description."
description2='GDMU Description'
/> />
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
</div> </div>
...@@ -84,17 +96,21 @@ export function Team() { ...@@ -84,17 +96,21 @@ export function Team() {
<div className="col-2"> <div className="col-2">
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
<Card <Card
image1="https://via.placeholder.com/300x200.png?text=Image+1" image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
image2="https://via.placeholder.com/300x200.png?text=Image+2" image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
title="Card Title" title1="SMU"
description="Card description goes here." title2='GDMU'
description1="SMU Description."
description2='GDMU Description'
/> />
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
<Card <Card
image1="https://via.placeholder.com/300x200.png?text=Image+1" image1= "https://static.igem.wiki/teams/5378/school-badge/smu.webp"
image2="https://via.placeholder.com/300x200.png?text=Image+2" image2= "https://static.igem.wiki/teams/5378/school-badge/gdmu.webp"
title="Card Title" title1="SMU"
description="Card description goes here." title2='GDMU'
description1="SMU Description."
description2='GDMU Description'
/> />
<div className='row-custom-height-card-space'></div> <div className='row-custom-height-card-space'></div>
</div> </div>
......
yarn.lock
+ 5
− 0
View file @ b0a67e78
...@@ -604,6 +604,11 @@ ...@@ -604,6 +604,11 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA== integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
"@types/mathjax@^0.0.40":
version "0.0.40"
resolved "https://registry.yarnpkg.com/@types/mathjax/-/mathjax-0.0.40.tgz#11b015fc3dc709766c1b162da364d14aa1b03051"
integrity sha512-rHusx08LCg92WJxrsM3SPjvLTSvK5C+gealtSuhKbEOcUZfWlwigaFoPLf6Dfxhg4oryN5qP9Sj7zOQ4HYXINw==
"@types/node@^20.12.10": "@types/node@^20.12.10":
version "20.12.10" version "20.12.10"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.10.tgz#8f0c3f12b0f075eee1fe20c1afb417e9765bef76" resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.10.tgz#8f0c3f12b0f075eee1fe20c1afb417e9765bef76"
......
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