forked from Gitlink/forgeplus-react
110 lines
4.5 KiB
JavaScript
110 lines
4.5 KiB
JavaScript
import React, { memo, useEffect, useState } from 'react';
|
||
import { Button } from 'antd';
|
||
import './index.scss';
|
||
|
||
import circle from '../img/1-circle.png';
|
||
import code1 from '../img/1-code.png';
|
||
import codeBed from '../img/1-code-bed.png';
|
||
import glass from '../img/1-glass.png';
|
||
import logo from '../img/1-logo.png';
|
||
import box1 from '../img/1-box1.png';
|
||
import box2 from '../img/1-box2.png';
|
||
import box3 from '../img/1-box3.png';
|
||
import box4 from '../img/1-box4.png';
|
||
|
||
import text1 from '../img/1-text1.png';
|
||
import text2 from '../img/1-text2.png';
|
||
import text3 from '../img/1-text3.png';
|
||
import text4 from '../img/1-text4.png';
|
||
|
||
function FirstSection({ first }) {
|
||
|
||
const [circulation, setCirculation] = useState('');
|
||
|
||
useEffect(() => {
|
||
const playGlass = document.getElementById("playGlass");
|
||
playGlass.addEventListener("webkitAnimationEnd", secondAnimation);
|
||
return () => {
|
||
setCirculation('');
|
||
playGlass.removeEventListener("webkitAnimationEnd",secondAnimation);
|
||
};
|
||
}, []);
|
||
|
||
function secondAnimation(){
|
||
setCirculation('circulation');
|
||
}
|
||
|
||
useEffect(() => {
|
||
setCirculation('');
|
||
}, [first]);
|
||
|
||
|
||
function goNext(){
|
||
window.scrollTo({
|
||
letf:0,
|
||
top:document.querySelector(".home-second-section").offsetTop,
|
||
behavior:"smooth"
|
||
}
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className={`grid-picture ${first ? "active" : ""}`}>
|
||
<div className="homepage-main website-content">
|
||
|
||
<div className="website">
|
||
<h3 className="website-title">红山开源</h3>
|
||
<div className="website-vision">
|
||
<span>群智共享</span>
|
||
<span>开源开放</span>
|
||
<span>协同创新</span>
|
||
<span>择优孵化</span>
|
||
</div>
|
||
<div className="website-des">红山开源是一个依托互联网群体智慧实现世界范围内资源深度融合、开放共享和协同创新的开源社区，是集开源项目演化发展、科研任务众包、竞赛组织选拔和社区开放交流为一体的创新科研服务平台。红山开源致力于打造一个“开放、汇聚、协同、众创”的生态空间。
|
||
</div>
|
||
{/* <Button className="website-more homepage-btn" type="primary" onClick={goNext}>了解详情</Button> */}
|
||
</div>
|
||
|
||
<div className={`play-img ${circulation}`}>
|
||
<img alt="images-not_found" className="play-text3" src={text3}></img>
|
||
<img alt="images-not_found" className="play-text4" src={text4}></img>
|
||
<img alt="images-not_found" className="play-logo" src={logo}></img>
|
||
<img alt="images-not_found" id="playGlass" className="play-glass" src={glass}></img>
|
||
<img alt="images-not_found" className="play-code-bed" src={codeBed}></img>
|
||
<img alt="images-not_found" className="play-code1" src={code1}></img>
|
||
<img alt="images-not_found" className="play-circle" src={circle}></img>
|
||
<div className="play-circle-circle1"></div>
|
||
<div className="play-circle-circle2"></div>
|
||
<div className="play-circle-circle3"></div>
|
||
<img alt="images-not_found" className="play-box4" src={box4}></img>
|
||
<img alt="images-not_found" className="play-box3" src={box3}></img>
|
||
<img alt="images-not_found" className="play-box2" src={box2}></img>
|
||
<img alt="images-not_found" className="play-box1" src={box1}></img>
|
||
<img alt="images-not_found" className="play-text1" src={text1}></img>
|
||
<img alt="images-not_found" className="play-text2" src={text2}></img>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<svg className="waves"
|
||
viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||
<defs>
|
||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||
</defs>
|
||
<g className="parallax">
|
||
{/* <use xlinkHref="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
|
||
<use xlinkHref="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
|
||
<use xlinkHref="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.4)" />
|
||
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" /> */}
|
||
{/* <use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.7" /> */}
|
||
<use xlinkHref="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
|
||
<use xlinkHref="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
|
||
<use xlinkHref="#wave-path" x="50" y="9" fill="#fff" />
|
||
</g>
|
||
</svg>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default memo(FirstSection); |