开芯院首页改版

src/forge/Information/Pages/headerPageZone1.jsx

@@ -1,8 +1,22 @@
 import React,{ useState, useEffect } from 'react';
 import { httpUrl } from '../fetch';
-
-import img1 from '../img/img1.png';
-import img2 from '../img/img2.png';
+import { Button , Anchor } from 'antd';
+import { Link } from 'react-router-dom';
+import arrowWhite from '../img/zone1/jiantouwhite.png';
+import xinpian from '../img/zone1/xinpian.png';
+import system from '../img/zone1/system.png';
+import chain from '../img/zone1/chain.png';
+import eda from '../img/zone1/EDA.png';
+import fu from '../img/zone1/fu.png';
+import team1 from '../img/zone1/team1.png';
+import team2 from '../img/zone1/team2.png';
+import team3 from '../img/zone1/team3.png';
+import team4 from '../img/zone1/team4.png';
+import window from '../img/zone1/window.png';
+import phone from '../img/zone1/phone.png';
+import line from '../img/zone1/line.png';
+import zhao from '../img/zone1/zhao.png';
+import sys from '../img/zone1/sys.png';
 import vision0 from '../img/vision0.png';
 import vision1 from '../img/vision1.png';
 import vision2 from '../img/vision2.png';
@@ -14,20 +28,19 @@ import intro4 from '../img/intro4.png';
 import guideArrow from '../img/guideArrow1.png';
 import ra from '../img/ra.png'
 import title from '../img/title.png'
-import { Link } from 'react-router-dom';
-import shijian from '../img/shijian.png';
-import Nodata from '../../Nodata';
-import Projects from '../Component/projects';
-import Contributor from '../Component/contributor';
 import Partner from '../Component/partner';
-import '../indexZone1.scss'
-import { getProjectsLists, getPartnerList, getHomePageList, gethomePageDocList } from '../api'
+import '../indexZone1.scss';
+import { getProjectsLists, getPartnerList, getHomePageList, gethomePageDocList , getDocList , getSubDocList } from '../api'
+
 
 function HeaderPage(props){
-  const [ projectList , setProjectList ] = useState(undefined);
+  // const [ projectList , setProjectList ] = useState(undefined);
   const [ personList , setPersonList ] = useState(undefined);
-  const [ newsList, setNewsList ] = useState(undefined);
+  // const [ newsList, setNewsList ] = useState(undefined);
   const [ partnerList, setParterList ] = useState(undefined);
+  const [ recruitId, setRecruitId ] = useState(undefined);
+  const [ recruitList, setRecruitList ] = useState(undefined);
+  const [ showAnchor, setShowAnchor ] = useState(false);
   const { deptId } = props.match.params;
   const { data, id, temp, history } = props;
 
@@ -52,22 +65,43 @@ function HeaderPage(props){
     { type: '计划四', plan: '香山贡献参与' }
   ]
 
+
   const introDetail = [
     { title: '能力阶梯', icon: intro1, desc: '成长体系按照开发者从⼊门到进阶再到⾹⼭顶级项⽬设⽴了⽤户能⼒提升的阶梯式真实项⽬' },
     { title: '贡献分级', icon: intro2, desc: '所有开源项⽬全部为开芯院开源开放的真实项⽬，开发者参与开源项⽬的所有贡献将作为成长等级、知产授权、加⼊⾼级别项⽬（悬赏、获得offer等）、成为核⼼贡献者的参与 依据' },
     { title: '成长认证', icon: intro3, desc: '开发者可以通过完成开源项⽬对应的任务，赢取对应能⼒成长认证，开源项⽬对应的⾼级任务将获得对应等级L2或⾼级别的知识产权授权，同时解锁下⼀级别成长任务' },
     { title: '顶级认证', icon: intro4, desc: '参与顶级项⽬“⾹⼭”的贡献者，将获得中国科学院计算技术研究所副所长、研究员，北京开源芯⽚研究院⾸席科学家，RISC-V国际基⾦会理事会成员包云岗签名贡献者证书' }
   ]
+  useEffect(()=>{
+    if(id){
+      // getProjectList();
+      // getNewsList();
+      getPersonList();
+      getPartner();
+      getHomeDocList();
+    }
+  },[id])
 
 
   useEffect(()=>{
-    if(id){
-      getProjectList();
-      getNewsList();
-      getPersonList();
-      getPartner();
+    document.addEventListener("scroll", scroll);
+    if(recruitId){
+      getDocById(recruitId)
     }
-  },[id])
+    return () => {
+      document.removeEventListener("scroll", scroll);
+    };
+  },[recruitId])
+
+
+  const scroll = () =>{
+    let sTop = document.documentElement.scrollTop;
+    if(sTop >= 2000){
+      setShowAnchor(true);
+    }else{
+      setShowAnchor(false);
+    }
+  }
 
   function getPersonList(){
     getHomePageList(id).then(result=>{
@@ -76,25 +110,46 @@ function HeaderPage(props){
       }
     }).catch(error=>{})
   }
-
-  function getNewsList(){
-    gethomePageDocList(id).then(result=>{
-      if(result){
-        setNewsList(result.data.rows);
-      }
-    }).catch(error=>{})
-  }
-  function getProjectList(){
-    getProjectsLists(id,{ isHomepage:1 }).then(result=>{
-      if(result){
-        if (result.data.rows.length < 3) {
-          setProjectList(result.data.rows)
-        } else {
-          setProjectList([...result.data.rows, {}]);
+  // 获取所有栏目，找到招聘专栏拿到其id
+  function getHomeDocList(){
+    getDocList(id).then(result=>{
+      if(result && result.data.rows){
+        let rows = result.data.rows;
+        let filterRow = rows ? rows.filter(i=>i.name === "招聘专栏") : undefined;
+        if(filterRow && filterRow.length>0){
+          setRecruitId(filterRow[0].id);
         }
       }
-    }).catch(error=>{})
+    })
   }
+  // 根据招聘专栏的id获取其栏目下的招聘文章
+  function getDocById(recruitId){
+    getSubDocList(recruitId,{pageSize:4,pageNum:1,auditStatus:1}).then(result=>{
+      if(result && result.data.rows){
+        let rows = result.data.rows;
+        setRecruitList(rows);
+      }
+    })
+  }
+
+  // function getNewsList(){
+  //   gethomePageDocList(id).then(result=>{
+  //     if(result){
+  //       setNewsList(result.data.rows);
+  //     }
+  //   }).catch(error=>{})
+  // }
+  // function getProjectList(){
+  //   getProjectsLists(id,{ isHomepage:1 }).then(result=>{
+  //     if(result){
+  //       if (result.data.rows.length < 3) {
+  //         setProjectList(result.data.rows)
+  //       } else {
+  //         setProjectList([...result.data.rows, {}]);
+  //       }
+  //     }
+  //   }).catch(error=>{})
+  // }
 
   function getPartner(){
     getPartnerList(id).then(result => {
@@ -115,8 +170,220 @@ function HeaderPage(props){
     })
   }
   return(
-    <div className="zone1_box">
-      {
+    <div className="zone1_box kxy" id="zone1_box">
+      {showAnchor && 
+        <Anchor className='anchor_kxy'>
+          <Anchor.Link href="#system_open" title="开源芯片技术体系" />
+          <Anchor.Link href="#zone_grow" title="开源芯⽚⽤户成长体系" />
+          {recruitList && recruitList.length > 0 && <Anchor.Link href="#zone_communicate" title="招聘专栏"/> }
+          {data && data.partnersShow === 1 && partnerList && partnerList.length > 0 && <Anchor.Link href="#zone_parter" title="合作伙伴"></Anchor.Link>}
+          <Anchor.Link href="#zone_community" title="参与社区"></Anchor.Link>
+        </Anchor>
+      }
+
+      <div className='line_key' id="line_key">
+        <p className="in_title mb20">芯片设计创新链</p>
+        <p className='font-17 mb20'><img src={ra} width={33} className='mr10'/>欢迎开源芯片企业、高校、开发者、学生参与社区</p>  
+        <div className='chainBox'>
+          <div className='chainNews'>
+            <li className='skybox'>
+              <span className='boldFont' style={{height:"56px",lineHeight:"56px"}}>FPGA</span><span className='skybox' style={{backgroundColor:"#fff",flex:1}}>商业FPGA</span>
+            </li>
+            <li className='skybox'>
+              <span className='boldFont'>FPGA云平台</span>
+              <span className='greenbox unHover' style={{flex:1,padding:"0px 5px",cursor:'default'}}>服务“香山”的开源FPGA云平台<img src={arrowWhite} width={27}/></span>
+            </li>
+            <div className='chainNews_Main'>
+              <li className='flexCenter mb20'>
+                <span className='boldFont mr20'>SOC</span>
+                <span className='skybox' style={{flex:1}}>常开域：LCLKGEN、WatchDog、PMU、RTC</span>
+              </li>
+              <div className='flex'>
+                <div style={{width:450}} className='left_Infos'>
+                  <div className='bord_padding chainNews_Box mb20'>
+                    <span className='boldFont mb20'>CORE</span>
+                    <li className='greenbox width100'><a href='https://www.gitlink.org.cn/OSchip/xiangshan-intro' target='_blank'>开源高性能 RISC-V 处理器核“香山”<img src={arrowWhite} width={27}/></a></li>
+                    <li className='greenbox width45'><a href='https://www.gitlink.org.cn/0Schip/openc906' target='_blank'>玄铁 openC906<img src={arrowWhite} width={27}/></a></li>
+                    <li className='greenbox width45 mlauto'><a href='https://www.gitlink.org.cn/OSchip/opene906' target='_blank'>玄铁 openE906<img src={arrowWhite} width={27}/></a></li>
+                    <li className='greenbox width45'><a href='https://www.gitlink.org.cn/OSchip/openc910' target='_blank'>玄铁 openC910<img src={arrowWhite} width={27}/></a></li>
+                    <li className='greenbox width45 mlauto'><a href='https://www.gitlink.org.cn/OSchip/opene902' target='_blank'>玄铁 openE902<img src={arrowWhite} width={27}/></a></li>
+                    <li className='greenbox width100'><a href='https://www.gitlink.org.cn/OSchip/THU-DSP-LAB' target='_blank'>清华大学 乘影开源通用图形处理器<img src={arrowWhite} width={27}/></a></li>
+                    <li className='greenbox width45'><a href='https://www.gitlink.org.cn/OSchip/X-Core' target='_blank'>澎峰科技 X-Core<img src={arrowWhite} width={27}/></a></li>
+                    <li className='skybox width45 mlauto'>商业闭源核</li>
+                  </div>
+                  <div className='chainNews_Box'>
+                    <li className='skybox width30'>CLINT</li>
+                    <li className='greenbox width30 mlauto'><a href='https://mp.weixin.gg.com/s/7cYFBFH7Emkhvc2W48Lgto' target='_blank'>NOC<img src={arrowWhite} width={27}/></a></li>
+                    <li className='skybox width30 mlauto'>PLIC</li>
+                    <li className='skybox width100'>存储总线（AMBA）</li>
+                    <li className='skybox width100'>存储：ROM、SRAM、DRAM、NAND/NOR Flash、DDR</li>
+                  </div>
+                </div>
+                <ul className='middle_ul bord_padding14'>
+                  <li className='skybox'>AMBA</li>
+                  <li className='skybox'>AXI</li>
+                  <li className='skybox'>AHB</li>
+                  <li className='skybox'>APB</li>
+                </ul>
+                <div style={{width:340}} className='right_infos'>
+                  <div className='bord_padding chainNews_Box mb20 '>
+                    <span className='boldFont mb20'>开源IP</span>
+                    <li className='skybox width30'>UART</li>
+                    <li className='skybox width30 mlauto'>SPI</li>
+                    <li className='skybox width30 mlauto'>PS2</li>
+                    <li className='skybox width30'>VGA</li>
+                    <li className='skybox width30 mlauto'>Ethernet</li>
+                    <li className='skybox width30 mlauto'>USB2.0</li>
+                    <span className='boldFont mb20'>硬件加速卡</span>
+                    <li className='greenbox width100'><a href='https://www.gitlink.org.cn/OSchip/Open-rdma' target='_blank'>加速卡：达坦科技 Open-rdma<img src={arrowWhite} width={27}/></a></li>
+                  </div>
+                  <div className='bord_padding chainNews_Box'>
+                    <span className='boldFont mb20'>商用IP</span>
+                    <li className='skybox width30'>UART</li>
+                    <li className='skybox width30 mlauto'>SPI</li>
+                    <li className='skybox width30 mlauto'>GPIO</li>
+                    <li className='skybox width30'>VGA</li>
+                    <li className='skybox width30 mlauto'>HDMI</li>
+                    <li className='skybox width30 mlauto'>DP</li>
+                    <li className='skybox width30'>Ethernet</li>
+                    <li className='skybox width30 mlauto'>PCle</li>
+                    <li className='skybox width30 mlauto'>SATA</li>
+                    <li className='skybox' style={{width:190}}>视频编解码（媒体）</li>
+                    <li className='skybox width30 ml15'>2D GPU</li>
+                    <li className='skybox width30'>3D GPU</li>
+                    <li className='skybox width30 ml15'>AI加速器</li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <ul>
+            <div><img src={chain}/>工具链</div>
+            <li>
+              <span className='greenbox'><a href='https://www.gitlink.org.cn/terapines/circt' target='_blank'>兆松科技  基于 MLIR 的开源工具链平台circt <img src={arrowWhite} width={27}/></a></span>
+              <span className='greenbox'><a href='https://www.gitlink.org.cn/OSchip/OpenBLAS' target='_blank'>澎峰科技 OpenBLAS 澎峰科技 OpenMPL<img src={arrowWhite} width={27}/></a></span>
+            </li>
+            <li className='skybox'>商业产品</li>
+          </ul>
+          <ul>
+            <div><img src={eda}/>EDA工具链</div>
+            <li>
+              <span className='greenbox'><a href='https://www.gitlink.org.cn/OSchip/iEDA' target='_blank'>iEDA <img src={arrowWhite} className='ml10' width={27}/></a></span>
+            </li>
+            <li className='skybox'>商业产品</li>
+          </ul>
+          <ul>
+            <div><img src={xinpian}/>芯片验证</div>
+            <li>
+              <span className='greenbox'><a href='https://www.gitlink.org.cn/XS-MLVP' target='_blank'>开芯院 UnityChip<img src={arrowWhite} className='ml10' width={27}/></a></span>
+            </li>
+            <li className='skybox'>商业产品</li>
+          </ul>
+          {/* 将后面模块的id置前，以便滚动到当前位置就选中后面模块 */}
+          <div id="system_open"></div>
+          <ul>
+            <div><img src={system}/>操作系统</div>
+            <li>
+              <span className='font-18'><img src={window} width={22} className='mr5'/>桌面端操作系统</span>
+              <span className='greenbox'><a href='https://www.gitlink.org.cn/bianbu-linux' target='_blank'>Bianbu操作系统<img src={arrowWhite} className='ml10' width={27}/></a></span>
+              <span className='skybox'>商业产品</span>
+            </li>
+            <li>
+              <span className='font-18'><img src={phone} width={13} className='mr5'/>AIoT端操作系统</span>
+              <span className='greenbox'><a href='https://www.gitlink.org.cn/OSchip/OpenHarmony' target='_blank'>润开鸿OpenHarmony<img src={arrowWhite} className='ml10' width={27}/></a></span>
+              <span className='skybox'>商业产品</span>
+            </li>
+            <li>
+              <span className='font-18'><img src={fu} width={15} className='mr5'/>服务器操作系统</span>
+              <span className='skybox'>开源产品</span>
+              <span className='skybox'>商业产品</span>
+            </li>
+          </ul>
+        </div>
+      </div>  
+      <div className='system_open'>
+        <div>
+          <p className="in_title mb20">开源芯片技术体系</p>
+          <div className='flexCenter sys_box'>
+              <p className='font-22' style={{color: "#373F4C",fontWeight:'600',paddingRight:70}}><img src={ra} width={33} className='mr10'/>构建开源芯片生态</p>  
+              <p className='font-22' style={{color: "#373F4C",fontWeight:'600'}}><img src={ra} width={33} className='mr10'/>开源芯片的三个层次</p>  
+          </div>
+          <img src={sys} alt='' width={"100%"}/>
+        </div>
+        <div className="zone_vision pt60 pb60">
+          <p className="in_title mb40">开源芯片社区OChip宗旨及愿景</p>
+          <div className='boxmain'>
+            {
+              vision.map((i, k) => {
+                return (
+                  <div className="vision_item" key={ k }>
+                    <div className="vision_icon">
+                      <img src={i.imageUrl} alt="" />
+                    </div>
+                    <p className="vision_title">{ i.title }</p>
+                    <p className="vision_content">{ i.content }</p>
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
+      </div>
+      <div id="zone_grow"></div>
+      <div className="zone_grow pt60 pb60">
+        {/* <p className="in_title mb20">开源芯<b>⽚⽤</b>户成长体系介绍</p> */}
+        <p className="in_title mb20"><img src={ title } alt="" /></p>
+        <p className="sub_title">参与开源芯⽚项⽬的开发者需要签署开源贡献者协议</p>
+        <p className="sub_title mb50">建议开发者按照开源项⽬成长路径进⾏参与，稳步提升能⼒，降低跳级参与带来的挑战</p>
+        {/* <div className="grow_path boxmain">
+          {
+            growPathInfo.map((i, k) => {
+              return (
+                <div className="grow_path_item" key={ k }>
+                  { k % 2 === 1 && <div className="dot"></div> }
+                  <div className="grow_path_type">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    { i.type }
+                  </div>
+                  <p className="grow_path_plan">{ i.plan }</p>
+                  { k % 2 === 0 && <div className="dot"></div> }
+                  
+                </div>
+              )
+            })
+          }
+        </div> 
+        <div className="line"></div>*/}
+        <div className='grow_content'>
+          <img src={line} width={1250} style={{marginRight:"-50px"}}/>
+          <div className='grow_a'>
+            <a href="https://ysyx.oscc.cc/" target='_blank'></a>
+            <a href="https://datenlord.github.io/zh-cn/#/community/mit" target='_blank' style={{width:"197px"}}></a>
+            <a href="https://open-verify.cc/learningresource/comm/com_001/" target='_blank'></a>
+          </div>
+        </div>
+        <div className="grow_introduction boxmain pt40">
+          {
+            introDetail.map((i, k) => {
+              return (
+                <div className="intro_item" key={ k }>
+                  <p className="intro_title">
+                    <img src={i.icon} alt="" className="mr3" />
+                    { i.title }
+                  </p>
+                  <p className="intro_desc">{ i.desc }</p>
+                </div>
+              )
+            })
+          }
+        </div>
+        <div className="dot_line"></div>
+        <div id="zone_communicate"></div>
+      </div>
+
+      {/* {
         // 专区简介
         data && (data.introductionTitle || data.introductionContent ||  data.introductionImage) &&
         <div className="boxmain zone_infos mb30">
@@ -129,26 +396,9 @@ function HeaderPage(props){
             <img src={data.introductionImage} alt="" width="600px" height="361px"/>
           }
         </div>
-      }
-      <div className="zone_vision pt40 pb60">
-        <p className="in_title mb40">宗旨及愿景</p>
-        <div className='boxmain'>
-          {
-            vision.map((i, k) => {
-              return (
-                <div className="vision_item" key={ k }>
-                  <div className="vision_icon">
-                    <img src={i.imageUrl} alt="" />
-                  </div>
-                  <p className="vision_title">{ i.title }</p>
-                  <p className="vision_content">{ i.content }</p>
-                </div>
-              )
-            })
-          }
-        </div>
-      </div>
-      {
+      } */}
+      
+      {/* {
         // 新闻动态
         data && data.cmsShow === 1 && newsList && newsList.length>0 &&
         <div className="zone_news">
@@ -195,100 +445,98 @@ function HeaderPage(props){
             </ul>
           </div>
         </div>
-      }
-      {
+      } */}
+      {/* {
         // 精选项目
         data && data.projectShow === 1 && projectList && projectList.length > 0 &&
         <div className="zone_projects pt50 pb30">
           <p className="in_title mb40">{ data.homepageProjectTitle }</p>
           <Projects projectList={projectList}></Projects>
         </div>
-      }
-      {
-        // 核心贡献者
-        data && data.memberShow === 1 && personList && personList.length > 0 &&
-        <div className="zone_contributor">
-          <p className="in_title">{ data.homepageMemberTitle }</p>
-          <Contributor personList={personList}></Contributor>
-        </div>
-      }
+      } */}
       
-      <div className="zone_community pt60 pb60">
-        <p className="in_title mb20">参与社区</p>
-        <p className="sub_title mb50"><img src={ra} alt="" className="mr5" />成为社区成员，尽情发挥您的创意</p>
-        <div className="c_role boxmain">
-          {
-            communityInfo.map((i, k) => {
-              return (
-                <div className="c_role_item" key={ k }>
-                  <p className="role_level">{ i.level }</p>
-                  <p className="role_todo">{ i.todo }</p>
-                  <div className="dot"></div>
-                </div>
-              )
-            })
-          }
-        </div>
-        <div className="dot_line"></div>
-      </div>
-
-      <div className="zone_grow pt60 pb60">
-      {/* <p className="in_title mb20">开源芯<b>⽚⽤</b>户成长体系介绍</p> */}
-        <p className="in_title mb20"><img src={ title } alt="" /></p>
-        <p className="sub_title">参与开源芯⽚项⽬的开发者需要签署开源贡献者协议</p>
-        <p className="sub_title mb50">建议开发者按照开源项⽬成长路径进⾏参与，稳步提升能⼒，降低跳级参与带来的挑战</p>
-        <div className="grow_path boxmain">
-          {
-            growPathInfo.map((i, k) => {
-              return (
-                <div className="grow_path_item" key={ k }>
-                  { k % 2 === 1 && <div className="dot"></div> }
-                  <div className="grow_path_type">
-                    <div></div>
-                    <div></div>
-                    <div></div>
-                    { i.type }
+      {
+        recruitList && recruitList.length > 0 &&
+          <div className="zone_communicate">
+            <p className="in_title">招聘专栏</p>
+            <Link className="joinButton mb30 mt30" to={`/zone/${deptId}/news/${recruitId}`}>查看全部</Link>
+            <ul className='zone_recruit'>
+              <div>
+                <p><img src={zhao} />“职”等你来</p>
+                <p> ——企业招聘专栏</p>
+                <p>在这里，我们汇聚了开源芯片的精英企业，为您带来最前沿的就业机会。加入我们，让梦想照进现实，共同开启职业生涯的新篇章！</p>
+              </div>
+              {
+                recruitList.map((i,k)=>{
+                  return(
+                    <li>
+                      <p className='zone_recruit_name'>{i.name}</p>
+                      <p className='zone_recruit_desc'>{i.summary}</p>
+                      <Link className='flexCenter zone_recruit_btn' to={`/zone/${deptId}/newdetail/${i.id}`}>查看详情<img src={guideArrow} height={10}/></Link>
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          </div>
+      }
+      <div className='last_box'>
+        {
+          // 合作伙伴
+          data && data.partnersShow === 1 && partnerList && partnerList.length > 0 &&
+          <div className="zone_parter" id="zone_parter">
+            <p className="in_title">{ data.homepagePartnersTitle }</p>
+            <p className="mb20 shandowTitle">核心企业<span>CORE ENTERPRISE</span></p>
+            <Partner id={ id } partnerList={ partnerList }></Partner>
+            <div><Button href='mailto:anxu@bosc.ac.cn' className='joinButton'>立即加入</Button></div>
+          </div>
+        }
+        {
+           data && data.memberShow === 1 && personList && personList.length > 0 &&
+          <div className='pt40'>
+            <p className="mb40 shandowTitle">核心贡献者<span>CORE CONTRIBUTORS</span></p>
+            <ul className='zone_member'>
+                {personList.map((item,key)=>{
+                  return(
+                  <li>
+                    <img src={item.imageUrl} alt="" />
+                    <p className='font-20 weight500'>{item.name}</p>
+                    <p className='task-hide '>{item.introduction || "暂无简介"}</p>
+                  </li>
+                  )
+                })
+              }
+            </ul>
+          </div>
+        }
+        <div className="zone_community" id="zone_community">
+          <p className="mb20 shandowTitle">开发者加入社区<span>DEVELOPERS INCOMING THE COMMUNITY</span></p>
+          {/* <p className="sub_title mb50"><img src={ra} alt="" className="mr5" />成为社区成员，尽情发挥您的创意</p> */}
+          <div className="c_role boxmain">
+            {
+              communityInfo.map((i, k) => {
+                return (
+                  <div className="c_role_item" key={ k }>
+                    <div className='c_role_div'>
+                      <div>
+                        <p className="role_level">{ i.level }</p>
+                        <p className="role_todo">{ i.todo }</p>
+                      </div>
+                      { k === 0 && <img src={team1} alt="" />}
+                      { k === 1 && <img src={team2} alt="" />}
+                      { k === 2 && <img src={team3} alt="" />}
+                      { k === 3 && <img src={team4} alt="" />}
+                    </div>
+                    <div className="dot"></div>
                   </div>
-                  <p className="grow_path_plan">{ i.plan }</p>
-                  { k % 2 === 0 && <div className="dot"></div> }
-                  
-                </div>
-              )
-            })
-          }
+                )
+              })
+            }
+          </div>
+          <div className="dot_line"></div>
+          <div><Button href='mailto:anxu@bosc.ac.cn' className='joinButton'>加入社区</Button></div>
         </div>
-        <div className="line"></div>
-        <div className="grow_introduction boxmain pt40">
-          {
-            introDetail.map((i, k) => {
-              return (
-                <div className="intro_item" key={ k }>
-                  <p className="intro_title">
-                    <img src={i.icon} alt="" className="mr3" />
-                    { i.title }
-                  </p>
-                  <p className="intro_desc">{ i.desc }</p>
-                </div>
-              )
-            })
-          }
-        </div>
-        <div className="dot_line"></div>
       </div>
-
-      <div className="zone_communicate">
-        <p className="in_title">集萃群智经验   交流心得体会</p>
-        <button onClick={() => { window.location.href = 'https://forum.gitlink.org.cn/forums/theme/135' }}>立即加入</button>
-      </div>
-      {
-        // 合作伙伴
-        data && data.partnersShow === 1 && partnerList && partnerList.length > 0 &&
-        <div className="zone_parter">
-          <p className="in_title">{ data.homepagePartnersTitle }</p>
-          <Partner id={ id } partnerList={ partnerList }></Partner>
-        </div>
-      }
-      
     </div>
   )
 }

src/forge/Information/Pages/main.jsx

@@ -26,6 +26,7 @@ function Main(props){
   const { deptId , cateId } = props.match.params;
   const { id, temp, role, history, sectionCmsTitle } = props;
 
+
   const menu = (
     <Menu>
       <Menu.Item>
@@ -82,9 +83,10 @@ function Main(props){
       if(result){
         let rows = result.data.rows;
         setMainList(rows);
-        if (temp !== tempEnum.zone) {
-          selectCate(rows[0].id)
-        }
+        // 隐藏判断原因：首页查看全部跳转过来后要默认选择指定的cateID而不是第一个
+        // if (temp !== tempEnum.zone) {
+          selectCate(cateId)
+        // }
         setIsSpin(false);
       }
     }).catch(error=>{})
@@ -116,6 +118,7 @@ function Main(props){
     props.history.push(`/zone/${deptId}/news/${id}`)
   }
 
+
   return(
     <div>
       <div className="main_content">
@@ -151,7 +154,7 @@ function Main(props){
                   mainList.map((i,k)=>{
                     if (k <= 4) {
                       return(
-                        <div className={`main_tag_item task-hide ${newCateId === i.id ? 'main_tag_selected' : ''}`} key={`${i.id}`} onClick={() => selectCate(i.id)} >{i.name}</div>
+                        <div className={`main_tag_item task-hide ${+newCateId === i.id ? 'main_tag_selected' : ''}`} key={`${i.id}`} onClick={() => selectCate(i.id)} >{i.name}</div>
                       )
                     }
                   })

src/forge/Information/api.js

@@ -53,6 +53,30 @@ export function getPartnerList(id){
   })
 }
 
+
+export function getDocList(id){
+  return fetch({
+    url:`/cms/doc/open/zone/${id}/dirList`,
+    method: 'get',
+  })
+}
+
+
+export function getSubDocList(id,params){
+  return fetch({
+    url:`/cms/doc/open/dir/${id}/docList`,
+    method: 'get',
+    params
+  })
+}
+// 专区会员
+export function getVIPAllList(id){
+  return fetch({
+    url:`/zone/open/${id}/member/overviewList`,
+    method: 'get' 
+  })
+}
+
 /**领域资讯 */
 export function getNewsAllList(id,params){
   return fetch({

src/forge/Information/index.scss

@@ -1164,7 +1164,6 @@
   }
 }
 .zone_parter{
-  background-color: #fff;
   padding:70px 0px 90px;
   .zone_part_lists{
     display: flex;
@@ -1175,6 +1174,7 @@
       justify-content: flex-start;
       align-items: flex-end;
       flex-wrap: wrap;
+      margin-bottom: 20px!important;
       .zone_part_item {
         color:#1f2329;
         font-size:20px;
@@ -1186,14 +1186,19 @@
           display: inline-block;
           width: 200px;
         }
+        &:nth-child(6n) {
+          a,div{
+            margin-right: 0px;
+          }
+        }
         a, div {
           display: inline-block;
-          width: 220px;
-          height: 88px;
-          line-height: 88px;
-          margin-right: 20px;
+          width: 180px;
+          height: 80px;
+          line-height: 80px;
+          margin-right: 24px;
           margin-top: 20px;
-          margin-bottom: 30px!important;
+          margin-bottom: 25px!important;
           color:#1f2329;
           font-size:20px;
           text-align: center;
@@ -1202,8 +1207,8 @@
           box-shadow:0px 0px 15px rgba(28, 48, 175, 0.08);
           transition: 0.1s linear;
           img{
-            max-width: 180px;
-            max-height: 66px;
+            max-width: 160px;
+            max-height: 60px;
           }
           &:hover {
             transform: translate(0, -5px);

src/forge/Information/indexZone1.scss

@@ -2,7 +2,6 @@
 
 
 .zone1_box{
-  padding-top:70px;
   background-color:#f7f9fc;
   .zone_infos{
     display: flex;
@@ -34,7 +33,6 @@
     }
   }
   .zone_vision {
-    background-color: #ffffff;
       .boxmain {
           display: flex;
           justify-content: space-between;
@@ -349,10 +347,10 @@
     }
   }
   .zone_community {
-    background-color:#ebeff5;
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding:30px 0px 60px;
     .sub_title {
       font-size: 17px;
       line-height: 27px;
@@ -366,22 +364,39 @@
       justify-content: space-between;
       z-index: 10;
       .c_role_item {
-        width: 260px;
-        height: 213px;
+        width: 289px;
+        height: 243px;
         background-image: url(./img/cbg2.png);
         background-size: 100% 100%;
         position: relative;
         padding: 30px 23px;
+        .c_role_div{
+          display: flex;
+          padding:20px;
+          justify-content: space-between;
+          align-items: flex-start;
+          img{
+            width: 58px;
+          }
+        }
+        &:first-child{
+          margin-left: -15px;
+        }
+        &:last-child{
+          margin-right: -15px;
+        }
         .role_level {
           font-weight: 700;
           font-size: 18px;
           line-height: 27px;
+          text-align: left;
         }
         .role_todo {
           color: #3d485d;
           font-size: 15px;
           line-height: 27px;
           margin-top: 10px;
+          text-align: left;
         }
         .dot {
           width:14px;
@@ -389,8 +404,8 @@
           border-radius: 50%;
           background-color:#07a583;
           position: absolute;
-          left: 6px;
-          bottom: 7px;
+          left: 20px;
+          bottom: 22px;
         }
       }
     }
@@ -398,7 +413,7 @@
       height: 0px;
       width: 1200px;
       border-bottom: dashed 1px #8d95ac;
-      transform: translate(0, -14px);
+      transform: translate(0, -28px);
     }
   }
   .zone_grow {
@@ -470,6 +485,25 @@
       border-bottom: solid 1px #07a583;
       transform: translate(0, -80px);
     }
+    .grow_content{
+      position: relative;
+      .grow_a{
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        height: 100%;
+        padding-top: 60px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding-bottom: 20px;
+        a{
+          display: block;
+          height: 38px;
+          width: 145px;
+        }
+      }
+    }
     .grow_introduction {
       display: flex;
       justify-content: space-between;
@@ -481,6 +515,7 @@
         box-shadow: 0px 0px 12px rgba(29, 72, 129, 0.08);
         padding: 22px 17px;
         transition: 0.1s;
+        text-align: left;
         .intro_title {
           font-weight: 700;
           color: #3d485d;
@@ -501,15 +536,15 @@
         transform: translate(0, -20px);
       }
     }
-  }
+  } 
   .zone_communicate {
-    height: 160px;
+    height: 547px;
     background: url('./img/communicateBg.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-evenly;
+    padding:37px 0px;
     p {
       font-weight: 500;
       font-size: 22px;
@@ -524,6 +559,77 @@
       font-size: 16px;
       cursor: pointer;
       border: none;
+      margin:16px 0px 48px!important;
+    }
+    .zone_recruit{
+      display: flex;
+      width: 1200px;
+      margin:0px auto;
+      align-items: flex-start;
+      &>div{
+        max-width: 267px;
+        text-align: left;
+        p{
+          &:last-child{
+            font-family:PingFang SC;
+            color:#ffffff;
+            font-size:15px;
+            line-height:36px;
+            margin-top: 25px;
+          } 
+        }
+      }
+      li{
+        background: #ffffff;
+        border-radius: 11px;
+        margin-left: 20px;
+        padding:28px 16px;
+        text-align: left;
+        flex: 1;
+        &:hover{
+          background: #e4eaf2;
+          border-radius: 11px;
+          box-shadow: 0px 0px 10px rgba(7, 70, 165, 0.11);
+          .zone_recruit_btn img{
+            left:68px;
+          }
+        }
+        .zone_recruit_name{
+          font-weight:700;
+          color:#1f2329;
+          font-size:18px;
+          line-height:27px;
+          height:27px;
+        }
+        .zone_recruit_desc{
+          color:#3d485d;
+          font-size:15px;
+          line-height:30px;
+          height: 120px;
+          margin:16px 0px 6px!important;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+          word-break: break-all;
+          white-space:break-spaces;
+        }
+        .zone_recruit_btn{
+          padding-right: 20px;
+          position: relative;
+          height: 20px;
+          line-height: 20px;
+          color: #07a583;
+          transition: 0.1s;
+          img{
+            position: absolute;
+            left: 62px;
+            top:5px;
+            transition: 0.1s;
+          }
+        }
+      }
     }
   }
 }
@@ -648,6 +754,10 @@
     }
   }
 }
+.line_key{
+  background-color: #fff;
+  padding:70px 0px;
+}
 .zone1_source_box{
   padding-bottom: 30px;
   .source_h{
@@ -766,4 +876,353 @@
       }
     }
   }
-}
+}
+
+.kxy{
+  text-align: center;
+  position: relative;
+  .zone_member{
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    width: 1200px;
+    margin:0px auto;
+    li{
+      width: 240px;
+      height: 124px;
+      background-image: url(./img/zone1/core.png);
+      background-size: 100%;
+      margin-right: 80px;
+      box-shadow: 0px 0px 15px rgba(28, 48, 175, 0.08);
+      border-radius: 2px;
+      font-weight: 400;
+      font-size: 16px;
+      color: #4C5876;
+      margin-bottom: 45px!important;
+      padding:0px 10px;
+      img{
+        width: 50px;
+        height: 50px;
+        background: #D8D8D8;
+        box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.08);
+        border: 1px solid #FFFFFF;
+        border-radius: 50%;
+        margin-top: -25px;
+        margin-bottom: 3px;
+      }
+      &:nth-child(4n){
+        margin-right: 0px;
+      }
+    }
+  }
+  .zone_parter{
+    padding-bottom: 0px;
+    .zone_part_lists{
+      margin-top: 0px;
+    }
+  }
+  // 上面纵向的三部分
+  .chainBox{
+    width: 1200px;
+    margin:0px auto;
+    .chainNews{
+      display: flex;
+      &>li{
+        display: flex;
+        flex-direction: column;
+        width: 8%;
+        margin-right: 18px;
+        padding:15px;
+      }
+      &>ul:last-child{
+        width: 84%;
+      }
+    }
+    .chainNews_Main{
+      flex: 1;
+      border: 1px dashed rgba(70, 106, 255, 0.5);
+      padding:22px;
+      color:#111111;
+      font-size:16px;
+      .left_Infos{
+        li{
+          padding:10px 13px;
+          margin-bottom: 18px!important;
+        }
+      }
+      .right_infos{
+        li{
+          margin-bottom: 18px!important;
+          font-size: 16px;
+          padding:3px 5px!important;
+        }
+      }
+      .middle_ul{
+        width: 110px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        margin:0px auto;
+      }
+      .chainNews_Box{
+        display: flex;
+        flex-wrap: wrap;
+        .boldFont{
+          display: block;
+          text-align: center;
+          margin-top: 15px;
+          width: 100%;
+        }
+      }
+    }
+    // 下面横向排列的三部分
+    &>ul{
+      border: 1px dashed rgba(70, 106, 255, 0.5);
+      padding:15px;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 18px;
+      color: #111111;
+      &>div{
+        display: flex;
+        align-items: center;
+        width: 150px;
+        padding-left: 25px;
+        font-weight: 700;
+        font-size: 18px;
+        img{
+          width: 22px;
+          margin-right: 10px;
+        }
+      }
+      &>li{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        margin-left: 50px;
+        font-size: 16px;
+        &>span{
+          margin-bottom: 20px!important;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &:last-child{
+            margin-bottom: 0px!important;
+          }
+        }
+      }
+    }
+  }
+  .bord_padding{
+    border: 1px dashed rgba(70, 106, 255, 0.5);
+    padding:5px 22px;
+  }
+  .bord_padding14{
+    border: 1px dashed rgba(70, 106, 255, 0.5);
+    padding:14px;
+  }
+  .boldFont{
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 27px;
+  }
+  .width30{
+    width: 30%;
+  }
+  .width60{
+    width: 60%;
+  }
+  .mlauto{
+    margin-left: auto;
+  }
+  .width45{
+    width: 45%;
+  }
+  .flex{
+    display: flex;
+  }
+  .skybox{
+    background: #eff2fb;
+    padding:3px 15px;
+    border: 1px dashed rgba(70, 106, 255, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-all;
+  }
+  .greenbox{
+    background: #07a583;
+    padding:3px 15px;
+    border: 1px dashed rgba(255, 255, 255, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-all;
+    color: #fff;
+    cursor: pointer;
+    a{
+      display: block;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      word-break: break-all;
+      position: relative;
+      padding-right: 32px;
+    }
+    img{
+      margin-left: 5px;
+      transition: .3s;
+      position: absolute;
+      right: 0px;
+    }
+    &:hover{
+      box-shadow: 0px 0px 6px 1px rgba(31,120,49,0.98);
+      border-color:  #FFFFFF;
+      img{
+        right: -5px;
+      }
+    }
+    &.unHover:hover{
+      box-shadow: unset;
+      border-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+  
+  .last_box{
+    background-image: url('./img/zone1/last.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.shandowTitle{
+  font-family:Alimama ShuHeiTi;
+  font-weight:700;
+  color:#1f2329;
+  font-size:22px;
+  position: relative;
+  width: 1200px;
+  margin:0px auto;
+  text-align: left;
+  span{
+    position: absolute;
+    background:linear-gradient(180deg,#d8ddf0 0%,rgba(224, 229, 250, 0) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    top: -13px;
+    left: 0px;
+  }
+}
+.joinButton{
+  width: 140px;
+  height: 40px;
+  line-height: 40px!important;
+  color: #ffffff!important;
+  background-color: #07a583!important;
+  border-radius: 2px;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+}
+.anchor_kxy{
+  width: 200px;
+  z-index: 1000;
+  top: 50%;
+  left: 200px;
+  position: fixed;
+  .ant-anchor-link{
+    margin:15px 0px;
+    text-align: left;
+    padding-left: 15px;
+  }
+  .ant-anchor-ink-ball{
+    display: none;
+  }
+  .ant-anchor-link-title-active,.ant-anchor-link-active{
+    color:#07a583;
+    position: relative;
+  }
+  .ant-anchor-link-active::before{
+    position: absolute;
+    content: "";
+    top:0px;
+    width: 2px;
+    height: 100%;
+    border:none;
+    left: -3px;
+    background-color:#07a583;
+  }
+}
+
+.system_open{
+  background:#f7f9fc;
+  padding:80px 0px;
+  &>div{
+    width: 1200px;
+    margin:0px auto;
+  }
+  .sys_box{
+    align-items: flex-start;
+    color: #1f2329;
+    font-size: 17px;
+    justify-content: space-evenly;
+    &>div{
+      width: 50%;
+    }
+  }
+  .sys_ul{
+    display: flex;
+    justify-content: space-between;
+    li{
+      width: 180px;
+      height: 49px;
+      background: #f6f7fa;
+      border: 2px solid rgba(255, 255, 255, 0.45);
+      border-radius: 4px;
+      box-shadow: 0px 0px 35px rgba(7, 70, 165, 0.11);
+      color: #111111;
+      font-size: 16px;
+      line-height: 49px;
+    }
+  }
+}
+
+
+
+@media screen and (min-width: 1400px) {
+  .anchor_kxy {
+    display: none;
+  }
+}
+@media screen and (min-width: 1500px) {
+  .anchor_kxy {
+    left: 100px;
+    display: block;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .anchor_kxy {
+    left: 150px;
+    display: block;
+  }
+}
+
+@media screen and (min-width: 1700px) {
+  .anchor_kxy {
+    left: 80px;
+    display: block;
+  }
+}
+@media screen and (min-width: 1800px) {
+  .anchor_kxy {
+    left: 100px;
+    display: block;
+  }
+}
+@media screen and (min-width: 1900px) {
+  .anchor_kxy {
+    left: 190px;
+    display: block;
+  }
+}