Skip to content
Snippets Groups Projects
Commit da145ed3 authored by Yifeng Wang's avatar Yifeng Wang
Browse files

all

parent 4a1ccef7
No related branches found
No related tags found
No related merge requests found
Pipeline #449205 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/contents/home copy.tsx
+ 1
− 1
View file @ da145ed3
......@@ -94,7 +94,7 @@ export function Home() {
</section>
</div>
);
};
}
......
src/contents/home.tsx
+ 88
− 83
View file @ da145ed3
// import { url } from "inspector";
import React, { useRef } from "react";
export function Home() {
const containerRef = useRef<HTMLDivElement>(null);
const sectionRefs = useRef<(HTMLDivElement | null)[]>([]); // 储存每个section的引用
let currentPage = 0; // 当前页面索引
const scrollToSection = (index: number) => {
if (containerRef.current && sectionRefs.current[index]) {
const target = sectionRefs.current[index];
if (target) {
target.scrollIntoView({
behavior: "smooth",
});
currentPage = index; // 更新 currentPage 的值
}
}
};
const handleScroll = (event: React.WheelEvent) => {
if (event.deltaY > 0) {
// 向下滚动
if (currentPage < sectionRefs.current.length - 1) {
scrollToSection(currentPage + 1);
export function Home() {
const containerRef = useRef<HTMLDivElement>(null);
const sectionRefs = useRef<(HTMLDivElement | null)[]>([]); // 储存每个section的引用
let currentPage = 0; // 当前页面索引
const scrollToSection = (index: number) => {
if (containerRef.current && sectionRefs.current[index]) {
const target = sectionRefs.current[index];
if (target) {
target.scrollIntoView({
behavior: "smooth",
});
currentPage = index;
}
}
} else {
// 向上滚动
if (currentPage > 0) {
scrollToSection(currentPage - 1);
};
const handleScroll = (event: React.WheelEvent) => {
if (event.deltaY > 0) {
// 向下滚动
if (currentPage < sectionRefs.current.length - 1) {
scrollToSection(currentPage + 1);
}
} else {
// 向上滚动
if (currentPage > 0) {
scrollToSection(currentPage - 1);
}
}
}
};
};
return (
<div
className="fullpage-container"
ref={containerRef}
onWheel={handleScroll}
>
<section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[0] = el as HTMLDivElement)}>
<div className="row">
return (
<div
className="fullpage-container"
ref={containerRef}
onWheel={handleScroll}
>
<section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[0] = el as HTMLDivElement)}>
<div className="row">
<div className="col-3"></div>
<div className="col-6">
<div className="vh20"></div>
<img
src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
alt="zxa"
className="responsive-img"
/>
<div className="col-3"></div>
<div className="col-6">
<div className="vh20"></div>
<img
src="https://static.igem.wiki/teams/5378/image/zxa-tp.webp"
alt="zxa"
className="responsive-img"
/>
</div>
<div className="col-3"></div>
</div>
<div className="col-3"></div>
</div>
</section>
<section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[1] = el as HTMLDivElement)}>
</section>
<section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[1] = el as HTMLDivElement)}>
<div className="row">
<div>我是小盒子</div>
<div className="rounded-border">橙色</div>
<p>大家好，我是文本</p>
<h2 className="center-text">居中</h2>
<p className="indent">大家好啊，我的开头有缩进</p>
<p className="center-text">大家好！我是居中文本！</p>
<p className="bold-font">粗粗的文本</p>
<p className="red-font">红色的文本</p>
<p className="green-font">绿色的文本</p>
<p className="blue-font">蓝色的文本</p>
<p className="red-font center-text">叠加了多种属性的文本，
<span className="bold-font">插入了粗体</span>文字</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
</div>
</section>
<section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[2] = el as HTMLDivElement)}>
<div>我是小盒子</div>
<div className="rounded-border">橙色</div>
<p>大家好，我是文本</p>
<h2 className="center-text">居中</h2>
<p className="indent">大家好啊，我的开头有缩进</p>
<p className="center-text">大家好！我是居中文本！</p>
<p className="bold-font">粗粗的文本</p>
<p className="red-font">红色的文本</p>
<p className="green-font">绿色的文本</p>
<p className="blue-font">蓝色的文本</p>
<p className="red-font center-text">叠加了多种属性的文本，
<span className="bold-font">插入了粗体</span>文字</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
</div>
</section>
<section className="section bg-rice_yellow" ref={(el) => (sectionRefs.current[2] = el as HTMLDivElement)}>
<div className="row">
<div className="col-3"></div>
<div className="col-6 mb-5">
<div className="vh20 row h1 justify-content-center">Stream our PV!!!</div>
<iframe
title="SMU-GDMU-CHINA: Engineered bacterial therapeutics for Preventing Hepatic Encepha... (2024) - Project Promotion [English]"
className="promotion-video"
src="https://video.igem.org/videos/embed/b8667885-e1be-48b2-ab9b-d1aac71db0da"
allowFullScreen={true}
sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>
</div>
<div className="col-3"></div>
</div>
</section>
</div>
);
}
\ No newline at end of file
<div className="col-3"></div>
<div className="col-6 mb-5">
<div className="vh20 row h1 justify-content-center">Stream our PV!!!</div>
<iframe
title="SMU-GDMU-CHINA: Engineered bacterial therapeutics for Preventing Hepatic Encepha... (2024) - Project Promotion [English]"
className="promotion-video"
src="https://video.igem.org/videos/embed/b8667885-e1be-48b2-ab9b-d1aac71db0da"
allowFullScreen={true}
sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>
</div>
<div className="col-3"></div>
</div>
</section>
</div>
);
}
\ No newline at end of file
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