update
This commit is contained in:
parent
e7b6f6fc35
commit
633b4fb8fd
|
|
@ -1,153 +1,167 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React , { useEffect , useState } from 'react';
|
||||
import "./Index.scss";
|
||||
import TopEdition from './TopEdition';
|
||||
import ThirdEdition from './ThirdEdition';
|
||||
import { Anchor } from 'antd';
|
||||
import F41 from './Img/4-1.png';
|
||||
import F42 from './Img/4-2.png';
|
||||
import F43 from './Img/4-3.png';
|
||||
import F44 from './Img/4-4.png';
|
||||
import SecondEdition from './SecondEdition';
|
||||
import FifthEdition from './FifthEdition';
|
||||
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';
|
||||
import { isMobile } from 'educoder';
|
||||
import './index.scss';
|
||||
import Axios from 'axios';
|
||||
|
||||
import FirstSection from './FirstSection';
|
||||
import SecondSection from './SecondSection';
|
||||
import ThirdSection from './ThirdSection';
|
||||
import FourthSection from './FourthSection';
|
||||
import FifthSection from './FifthSection';
|
||||
import SixthSection from './SixthSection';
|
||||
import SeventhSection from './SeventhSection';
|
||||
import Footer from './Footer';
|
||||
function Index(props) {
|
||||
const [ value , setValue ] = useState("");
|
||||
const [ flag , setFlag ] = useState(true);
|
||||
|
||||
const [ bannerTab , setBannerTab ] = useState(undefined);
|
||||
const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register;
|
||||
|
||||
let isHuawei = (/honor|huawei/i.test(navigator.userAgent.toLowerCase()));
|
||||
function HomePage({ history }) {
|
||||
const { current_user } = props;
|
||||
useEffect(()=>{
|
||||
window.addEventListener("scroll",scrollListener);
|
||||
getTab();
|
||||
return ComponentWillUnmount;
|
||||
},[])
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", scrollListener, false);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", scrollListener, false);
|
||||
}
|
||||
}, []);
|
||||
function ComponentWillUnmount() {
|
||||
window.removeEventListener("scroll",scrollListener);
|
||||
}
|
||||
|
||||
const [first, setFirst] = useState(true);
|
||||
const [second, setSecond] = useState(isMobile);
|
||||
const [third, setThird] = useState(false || isHuawei);
|
||||
const [fourth, setFourth] = useState(false || isHuawei);
|
||||
const [fifth, setFifth] = useState(false || isHuawei);
|
||||
const [sixth, setSixth] = useState(false || isHuawei);
|
||||
|
||||
|
||||
let settings = JSON.parse(localStorage.chromesetting);
|
||||
let main_web_site_url = settings.main_web_site_url;
|
||||
|
||||
|
||||
function scrollListener() {
|
||||
let clientHeight = document.body.clientHeight;
|
||||
let clientWidth = document.body.clientWidth;
|
||||
// let secondSection = document.querySelector(".home-second-section").offsetTop;
|
||||
// let thirdSection = document.querySelector(".home-third-section").offsetTop;
|
||||
// let fourthSection = document.querySelector(".home-fourth-section").offsetTop;
|
||||
// let fifthSection = document.querySelector(".home-fifth-section").offsetTop;
|
||||
// let sixthSection = document.querySelector(".home-sixth-section").offsetTop;
|
||||
// let seventhSection = document.querySelector(".home-seventh-section").offsetTop;
|
||||
let secondSection = document.getElementById("home-second-section").offsetTop;
|
||||
let thirdSection = document.getElementById("home-third-section").offsetTop;
|
||||
let fourthSection = document.getElementById("home-fourth-section").offsetTop;
|
||||
let fifthSection = document.getElementById("home-fifth-section").offsetTop;
|
||||
let sixthSection = document.getElementById("home-sixth-section").offsetTop;
|
||||
let seventhSection = document.getElementById("home-seventh-section").offsetTop;
|
||||
|
||||
let top = document.documentElement.scrollTop;
|
||||
|
||||
|
||||
if (top >= clientHeight - 300) {
|
||||
setFirst(false);
|
||||
} else {
|
||||
setFirst(true);
|
||||
}
|
||||
|
||||
if (clientWidth > 1100) {
|
||||
// 第二个动效
|
||||
if (top >= secondSection - clientHeight * 0.8 && top < thirdSection) {
|
||||
setSecond(true);
|
||||
} else {
|
||||
setSecond(false);
|
||||
function getTab() {
|
||||
const url = `/topics.json?topic_type=card`;
|
||||
Axios.get(url,{
|
||||
params:{
|
||||
limit:3
|
||||
}
|
||||
} else {
|
||||
// 第二个动效
|
||||
if (top >= secondSection - clientHeight && top < thirdSection) {
|
||||
setSecond(true);
|
||||
} else {
|
||||
setSecond(false);
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setBannerTab(result.data.topics);
|
||||
}
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 第三个动效
|
||||
if (top >= thirdSection - clientHeight && top < fourthSection) {
|
||||
setThird(true);
|
||||
} else {
|
||||
setThird(false);
|
||||
function scrollListener(event) {
|
||||
|
||||
let third = document.getElementById("thirdContent").offsetTop;
|
||||
let top = document.documentElement.scrollTop + 60;
|
||||
if(top>= third)
|
||||
{
|
||||
setFlag(false)
|
||||
}else{
|
||||
setFlag(true)
|
||||
}
|
||||
}
|
||||
|
||||
// 第四个动效
|
||||
if (top >= fourthSection - clientHeight && top < fifthSection) {
|
||||
setFourth(true);
|
||||
} else {
|
||||
setFourth(false);
|
||||
}
|
||||
|
||||
// 第五个动效
|
||||
if (top >= fifthSection - clientHeight && top < sixthSection) {
|
||||
setFifth(true);
|
||||
} else {
|
||||
setFifth(false);
|
||||
}
|
||||
|
||||
// 第六个动效
|
||||
if (top >= sixthSection - clientHeight && top < seventhSection - 100) {
|
||||
setSixth(true);
|
||||
} else {
|
||||
setSixth(false);
|
||||
}
|
||||
|
||||
if(isHuawei){
|
||||
setFourth(true);
|
||||
setSixth(true);
|
||||
function changeActive(params) {
|
||||
if(params){
|
||||
setValue(params);
|
||||
let h = params.split("#")[1];
|
||||
let t = document.getElementById(h).offsetTop;
|
||||
document.documentElement.scrollTop = t-100;
|
||||
}else{
|
||||
setValue("");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
return(
|
||||
<div className="homePage">
|
||||
|
||||
<div id="home-first-section" className="home-first-section">
|
||||
<FirstSection first={first} />
|
||||
<div className="topEdition">
|
||||
{/* <HeadNav {...props}/> */}
|
||||
<TopEdition register={register} current_user={current_user}/>
|
||||
{
|
||||
bannerTab && bannerTab.length > 0 ?
|
||||
<ul className="topEditionUl">
|
||||
{
|
||||
bannerTab.map((i,k)=>{
|
||||
return(
|
||||
<a href={i.url} target="_blank" className="font-18">
|
||||
<li>
|
||||
{i.title}
|
||||
</li>
|
||||
</a>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
:
|
||||
<ul className="topEditionUl">
|
||||
<a href="https://forum.trustie.net/forums/4666/detail" target="_blank" className="font-18">
|
||||
<li>
|
||||
CCF开源发展委员会首批执行委员名单发布
|
||||
</li>
|
||||
</a>
|
||||
<a href="https://forgeplus.trustie.net/Gitlink/forgeplus" target="_blank" className="font-18">
|
||||
<li>
|
||||
平台精选仓库：GitLink/GitLink
|
||||
</li>
|
||||
</a>
|
||||
<a href="https://forum.trustie.net/forums/4663/detail" target="_blank" className="font-18">
|
||||
<li>
|
||||
OpenHarmony系统介绍及赛题说明
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="home-second-section" className="home-second-section">
|
||||
<SecondSection second={second} main_web_site_url={main_web_site_url} />
|
||||
<div className="secondEdition">
|
||||
<p className="theTitle">GitLink，新一代开源创新服务平台</p>
|
||||
{
|
||||
flag &&
|
||||
<Anchor>
|
||||
<li onClick={()=>changeActive("#hadoop")} className={value === "#hadoop"?"active":""}><a>分布式协作开发</a></li>
|
||||
<li onClick={()=>changeActive("#oneStop")} className={value === "#oneStop"?"active":""}><a>一站式过程管理</a></li>
|
||||
<li onClick={()=>changeActive("#highDevops")} className={value === "#highDevops"?"active":""}><a>高效流水线运维</a></li>
|
||||
<li onClick={()=>changeActive("#multipleAnalyse")} className={value === "#multipleAnalyse"?"active":""}><a>多层次代码分析</a></li>
|
||||
<li onClick={()=>changeActive("#multidimensional")} className={value === "#multidimensional"?"active":""}><a>多维度用户画像</a></li>
|
||||
</Anchor>
|
||||
}
|
||||
<SecondEdition {...props} setValue={setValue}/>
|
||||
</div>
|
||||
<div id="thirdContent">
|
||||
<ThirdEdition />
|
||||
</div>
|
||||
|
||||
|
||||
<div id="home-third-section" className="home-third-section">
|
||||
<ThirdSection third={third} />
|
||||
<div className="forthEdition">
|
||||
<p className="theTitle">加入GitLink，和社区伙伴们一起踏上开源创新的辉煌旅程！</p>
|
||||
<div style={{marginBottom:"80px"}}>
|
||||
{ !(current_user && current_user.login) && <a className="qulikyreg" href={register}>立即注册</a> }
|
||||
</div>
|
||||
<ul className="forthUl">
|
||||
<li>
|
||||
<img src={F41} alt="" width={"100px"}/>
|
||||
<span className="forthtitle">发现</span>
|
||||
<span className="forthsubtitle">探索丰富优质的开发资源</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src={F42} alt="" width={"101px"}/>
|
||||
<span className="forthtitle">加入</span>
|
||||
<span className="forthsubtitle">寻找志同道合的协作伙伴</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src={F43} alt="" width={"104px"}/>
|
||||
<span className="forthtitle">合作</span>
|
||||
<span className="forthsubtitle">开启开放共享的协同之旅</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src={F44} alt="" width={"87px"}/>
|
||||
<span className="forthtitle">贡献</span>
|
||||
<span className="forthsubtitle">书写开源创新的精彩成就</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="home-fourth-section" className="home-fourth-section">
|
||||
<FourthSection fourth={fourth} history={history} />
|
||||
<div className="fifthEdition">
|
||||
<p className="title">开源生态</p>
|
||||
<p className="subtitle">GitLink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
|
||||
<FifthEdition />
|
||||
</div>
|
||||
|
||||
<div id="home-fifth-section" className="home-fifth-section">
|
||||
<FifthSection fifth={fifth} history={history} />
|
||||
</div>
|
||||
|
||||
<div id="home-sixth-section" className="home-sixth-section">
|
||||
<SixthSection sixth={sixth} main_web_site_url={main_web_site_url} />
|
||||
</div>
|
||||
|
||||
<div id="home-seventh-section" className="home-seventh-section">
|
||||
<SeventhSection main_web_site_url={main_web_site_url} />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TPMIndexHOC(HomePage, { noFooter: true });
|
||||
export default TPMIndexHOC(Index);
|
||||
1384
src/home/index.scss
1384
src/home/index.scss
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue