forgeplus-react/src/home/SecondEdition.jsx

import React , { useEffect , useState } from 'react';
import Img1 from './Img/2-2-1.png';
import ImgHead from './Img/2-2-head.png';
import Img2 from './Img/2-2-2.png';
import Img3 from './Img/2-2-3.png';
import Imgring from './Img/2-2-ring.png';
import ImgS1 from './Img/2-3-1.png';
import ImgS2 from './Img/2-3-2.png';
import ImgS3 from './Img/2-3-3.png';
import ImgS4 from './Img/2-3-4.png';
import ImgM2 from './Img/2-6-2.png';
import ImgM4 from './Img/2-6-1.png';
import Codeafter from './Img/codeafter.png';
import './code.scss';

const code=[
  {str:<span><span className='code-green'>git remote</span> add origin https://git.trustie.net/Gitlink/Gitlink.git</span>},
  {str:<span><span className='code-red'>git push</span> -u origin master</span>},
  {str:<span><span className='code-green'>git branch</span> dev</span>},
  {str:<span><span className='code-blue'>git checkout</span> dev</span>},
  {str:<span><span className='code-green'>git add</span> .</span>},
  {str:<span><span className='code-red'>git commit</span> -m "xxx"</span>},
  {str:<span><span className='code-red'>git push</span> origin dev</span>},
  {str:<span><span className='code-blue'>git checkout</span> master</span>},
  {str:<span><span className='code-green'>git pull</span> origin master</span>},
  {str:<span><span className='code-green'>git merge</span> dev</span>},
  {str:<span><span className='code-red'>git push</span> origin master</span>}
]
const codes=[
  {str:<span><span className='code-blue'>latest:</span> Pulling from appleboy/drone-ssh</span>},
  {str:<span><span className='code-red'>Digest:</span>sha256:095ca4ceafcb751f1f22fe416057d3e2a6302f7b1f7011b17010973cb6bbdd9f</span>},
  {str:<span>Status:Image is up to date for appleboy/drone-ssh:latest</span>},
  {str:<span><span className='code-green'>======CMD======</span></span>},
  {str:<span><span className='code-green'>echo ====暂停容器开始======= </span></span>},
  {str:<span><span className='code-red'>docker</span> rm -f mo-test</span>},
  {str:<span><span className='code-red'>docker</span> rmi mo-test:1.0</span>},
  {str:<span><span className='code-blue'>cd</span> /opt/demo</span>},
  {str:<span><span className='code-green'>echo ====开始部署=======</span></span>},
  {str:<span><span className='code-red'>docker </span>build -t mo-test:1.0 .</span>},
  {str:<span><span className='code-red'>docker </span>run -d -p 8080:8080 --name mo-test mo-test:1.0</span>},
  {str:<span><span className='code-green'>echo ====部署成功======</span></span>},
  {str:<span><span className='code-green'>======END======</span></span>},
]

function SecondEdition({setValue}) {
  useEffect(()=>{
    window.addEventListener('scroll', handleScroll);
    return ComponentWillUnmount;
  },[])
  function ComponentWillUnmount() {
    window.removeEventListener("scroll",handleScroll);
  }

  const [ hadoop , setHadoop ] = useState(false);
  const [ highDevops , setHighDevops ] = useState(false);
  const [ multipleAnalyse , setMultipleAnalyse ] = useState(false);
  const [ multidimensional , setMultidimensional ] = useState(false);

  const [ oneStop , setOneStop ] = useState(false);

  function handleScroll() {
    let clientHeight = document.documentElement.clientHeight; //可视区域高度
    let scrollTop  = document.documentElement.scrollTop;  //滚动条滚动高度
    let f = checkPosi("hadoop",clientHeight,scrollTop);
    if(f){
      setValue("#hadoop");
      setHadoop(true);
    }else{
      setHadoop(false);
    }
    let f1 = checkPosi("oneStop",clientHeight,scrollTop);
    if(f1){
      setValue("#oneStop");
      setOneStop(true);
    }else{
      setOneStop(false);
      setOneStop(false);
    }
    let f3 = checkPosi("highDevops",clientHeight,scrollTop);
    if(f3){
      setValue("#highDevops");
      setHighDevops(true);
    }else{
      setHighDevops(false);
      setHighDevops(false);
    }
    let f4 = checkPosi("multipleAnalyse",clientHeight,scrollTop);
    if(f4){
      setValue("#multipleAnalyse");
      setMultipleAnalyse(true);
    }else{
      setMultipleAnalyse(false);
      setMultipleAnalyse(false);
    }
    let f5 = checkPosi("multidimensional",clientHeight,scrollTop);
    if(f5){
      setValue("#multidimensional");
      setMultidimensional(true);
    }else{
      setMultidimensional(false);
      setMultidimensional(false);
    }
  }

  function checkPosi(ele,clientHeight,scrollTop) {
    if(document.getElementById(ele)){
      var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3);
      var b = document.getElementById(ele).clientHeight + (clientHeight/4);
      if(a>0 || a<-b){
        return false;
      }else{
        return true;
      }
    }
  }
  return(
    <div className="secondEditionContent">
      <div className="hadoop" id="hadoop">
        <div className="hadoopCon">
          <div className="descBox">
            <p className="desc1">分布式协作开发</p>
            <p className="desc2">基于Git打造分布式代码托管环境，提供免费公、私有代码仓库；</p>
            <p className="desc3">支持在线文件编辑、代码分支管理、协作贡献统计、代码仓库复刻（Fork）、贡献合并请求（PR）、群智贡献审阅等功能；</p>
          </div>
          <div className={hadoop ? "hadoopCode activeCode" :"hadoopCode"}>
            {
              code.map((i,k)=>{
                return(
                  <li><pre className="word-item" style={{animationDelay: `${k * 0.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
                )
              })
            }
            <img src={Codeafter} alt="运行结果" className={"activeImg"}/>
          </div>
        </div>
        <p className="hadoopdesc">让您的项目在这里健康、快速的成长！</p>
      </div>
      <div className={oneStop ? "oneStop activeCode" :"oneStop"} id="oneStop">
        <div className={"oneStopContent"}>
          <div className={"osLeftMain"}>
            <img src={Img1} alt="" width="520px" className="osleftPosi"/>
            <img src={ImgHead} alt="" width="213px" style={{marginLeft:"-12px"}}/>
            <img src={Img2} alt="" width="653px" className="osleftPosi1"/>
            <img src={Img3} alt="" width="367px" className="osleftPosi2"/>
          </div>
          <div className="osRightMain">
            <p className="osRightTitle">一站式过程管理</p>
            <p>提供<span>易修（Issue）、里程碑、通知提醒、标签归档</span>等多样化任务管理工具，支持各类开发任务的发布、指派与跟踪；</p>
            <p>同时提供<span>在线Wiki文档、组织多粒度管理</span>等功能，为您搭建一站式的项目过程管理环境；</p>
            <p><span>让您的团队协作更高效、过程更透明！</span></p>
          </div>
        </div>
        <img src={Imgring} alt="" height="83px" className="imgring"/>
      </div>
      <div className={highDevops ? "highDevops activeCode" : "highDevops"} id="highDevops">
        <div className="highDoTitle">
          <span>高效流水线运维</span>
        </div>
        <div className="highDoSubtitle">
          融合DevOps思想，提供轻量级的工作流引擎（Engine），
          <span>打通编码、测试、构建、部署</span>等开发运维环节；支持
          <span>自定义配置、代码静态扫描、构建自动触发、容器镜像托管</span>等功能，同时支持接入第三方运维工具。
        </div>
        <div className="highDoContent">
          <div>
            <img src={ImgS1} alt="" width="794px"/>
            <div style={{marginBottom:'74px',marginTop:"25px",position:"relative"}}>
              <img src={ImgS2} alt="" width="520px"/>
              {/* <div className="highCodes">
                {
                  codes.map((i,k)=>{
                    return(
                      <li><pre className="word-item" style={{animationDelay: `${k * 0.2 + .2}s`}}><span className="codenum">{k+1}</span>{i.str}</pre></li>
                    )
                  })
                }
              </div> */}
            </div>
            <img src={ImgS3} alt="" width="427px" className="highImg2"/>
            <img src={ImgS4} alt="" width="413px" className="highImg1"/>
          </div>
          <p className="highDoBottondesc">让您的代码更加快速、可靠地形成高质量的产品！</p>
        </div>
      </div>
      <div className={multipleAnalyse ? "multipleAnalyse activeCode":"multipleAnalyse"} id="multipleAnalyse">
        <span className="title">多层次代码分析</span>
        <div className="maContent"></div>
        <p className="desc">提供软件软代码和芯片RTL代码的溯源分析、文件级和组件级许可证识别及风险分析、输入性开源漏洞检测和加固建议，支持分析结果的多层次可视化展示。</p>
      </div>
      <div className={"multidimensional"} style={{opacity:multidimensional?"1":"0.3"}}>
        <div style={{height:"168px"}}></div>
        <div className={multidimensional ? "activeCode":""} id="multidimensional">
          <div className={"multidimensinalhalf"}>
            <div>
              <p className="halfTitle">多维度用户画像</p>
              <p className="halfsubTitle"><span>实时采集和分析平台中的各类开源资源数据，</span>搭建多维度用户画像评估系统；</p>
            </div>
            <div style={{width:"820px",marginLeft:"34px"}}>
              <img src={ImgM4} alt="" width="820px" />
            </div>
          </div>
          <div className="multidimensinalPart">
            <div style={{width:"614px",marginRight:"40px"}}>
              <img src={ImgM2} alt="" width="614px" />
            </div>
            <div>
              <p><span>提供</span>开发活动统计、贡献度日历、用户能力建模、角色与专业定位分析<span>等功能。</span></p>
              <p>让您在个人主页展示开发动态与创新能力！</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default SecondEdition