forgeplus-react/src/home/Index.jsx

import React , { useEffect , useState } from 'react';
import "./Index.scss";
import HeadNav from './Headnav';
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 Footnav from './Footnav';
import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC';

function Index(props) {
  const [ value , setValue ] = useState("");
  const [ flag , setFlag ] = useState(true);
  const [ isRender , setIsRender ] = useState(false);
  const [ isloginCancel , setIsloginCancel ] = useState(false);  
  const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register;

  useEffect(()=>{
    window.addEventListener("scroll",scrollListener);
  },[])

  function scrollListener(event) {
    let third = document.getElementById("thirdContent").offsetTop;
    let top = document.documentElement.scrollTop + 60;
    if(top>= third)
    {
      setFlag(false)
    }else{
      setFlag(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(
    <div className="homePage">
      <div className="topEdition">
        <HeadNav {...props}/>
        <TopEdition register={register}/>
        <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 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 className="forthEdition">
        <p className="theTitle">加入Gitlink，和社区伙伴们一起踏上开源创新的辉煌旅程！</p>
        <a className="qulikyreg" href={register}>快速注册</a>
        <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 className="fifthEdition">
        <p className="title">开源生态</p>
        <p className="subtitle">Gitlink与各大企业、高校、科研机构开展广泛的技术合作，推动我国开源软件生态的快速构建与发展</p>
        <FifthEdition />
      </div>
      <Footnav />
    </div>
  )
}
export default TPMIndexHOC(Index);