开源项目\首页\领域资讯

src/App.js

@@ -381,7 +381,7 @@ class App extends Component {
                 )}
               ></Route>
               <Route
-                path={"/information"}
+                path={"/information/:deptId"}
                 render={
                   (props) => {
                     return (<Information {...this.props} {...props} {...this.state} />)

src/forge/Information/Component/publicBanner.jsx

@@ -12,14 +12,17 @@ import { Link } from 'react-router-dom';
 function PublicBanner(props){
   const [ key , setKey ] = useState("1");
   const { pathname } = props.history.location;
+  const { data } = props;
 
   useEffect(()=>{
     if(pathname){
+      const head = /\/information\/[0-9]{0,}/g;
       const info = /\/information\/[0-9]{0,}\/news/g;
-      if(pathname === '/information'){
+      const project = /\/information\/[0-9]{0,}\/projects/g;
+      if(head.test(pathname)){
         setKey("1");
       }
-      if(pathname === '/information/projects'){
+      if(project.test(pathname)){
         setKey("2");
       }
       if(info.test(pathname)){
@@ -30,16 +33,19 @@ function PublicBanner(props){
 
   return(
     <div className="in_banner">
-      <div>
-        <p className="main_t">主标题文案内容占一行</p>
-        <p className="sub_t">专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容专区副标题文案内容</p>
-      </div>
+      {
+        data && 
+        <div>
+          <p className="main_t">{data.mainTitle}</p>
+          <p className="sub_t">{data.subTitle}</p>
+        </div>
+      }
       <div className="bannerMenus">
         <Menu mode={"horizontal"} selectedKeys={[key]}>
-          <Menu.Item key={"1"}><Link to={`/information`}><img src={Menu1} alt="" width="29px"/>首页</Link></Menu.Item>
-          <Menu.Item key={"2"}><Link to={`/information/projects`}><img src={Menu2} alt="" width="34px"/>开源项目</Link></Menu.Item>
+          <Menu.Item key={"1"}><Link to={`/information/1`}><img src={Menu1} alt="" width="29px"/>首页</Link></Menu.Item>
+          <Menu.Item key={"2"}><Link to={`/information/1/projects`}><img src={Menu2} alt="" width="34px"/>开源项目</Link></Menu.Item>
           <Menu.Item key={"3"}><img src={Menu3} alt="" width="33px"/>资源发布</Menu.Item>
-          <Menu.Item key={"4"}><Link to={`/information/113/news`}><img src={Menu4} alt="" width="32px"/>领域资讯</Link></Menu.Item>
+          <Menu.Item key={"4"}><Link to={`/information/1/news`}><img src={Menu4} alt="" width="32px"/>领域资讯</Link></Menu.Item>
           <Menu.Item key={"5"}><img src={Menu5} alt="" width="27px"/>Sig小组</Menu.Item>
         </Menu>
       </div>

src/forge/Information/Pages/headerPage.jsx

@@ -0,0 +1,166 @@
+import React,{ useState, useEffect } from 'react';
+import img1 from '../img/img1.png';
+import img2 from '../img/img2.png';
+import guideArrow from '../img/guideArrow.png';
+import { Link } from 'react-router-dom';
+import shijian from '../img/shijian.png';
+import axios from 'axios';
+
+function HeaderPage(props){
+  const [ projectList , setProjectList ] = useState(undefined);
+  const [ newsList, setNewsList ] = useState(undefined);
+  const { deptId } = props.match.params;
+  const { data } = props;
+
+  useEffect(()=>{
+    getProjectList();
+    getNewsList();
+  },[])
+
+  function getNewsList(){
+    const url = `/cms/doc/open/zone/${deptId}/homePageDocList`;
+    axios.get(url).then(result=>{
+      if(result){
+        setNewsList(result.data.rows);
+      }
+    }).catch(error=>{})
+  }
+
+  function getProjectList(){
+    const url = `/zone/open/${deptId}/project/list`;
+    axios.get(url,{params:{
+      isHomepage:1,pageNum:1,pageSize:4
+    }}).then(result=>{
+      if(result){
+        setProjectList(result.data.rows);
+      }
+    }).catch(console.error())
+  }
+  return(
+    <div className="zone_box">
+      <p className="in_title">{data && data.name}</p>
+      <div className="boxmain zone_infos">
+        {
+          data &&
+          <div className="zone_infos_desc">
+            <p className="z_name">{data.name}</p>
+            <p className="z_desc">{data.introductionContent}</p>
+          </div>
+        }
+        {
+          data && data.introductionImage &&
+          <img src={data.introductionImage} alt="" width="512px" height="330px"/>
+        }
+      </div>
+      <div className="zone_news">
+        <p className="in_title mb40">新闻动态</p>
+        {
+          newsList && newsList.length>0 &&
+          <div className="boxmain" style={{display:"flex"}}>
+            <div className="zone_new_first">
+              <img src={img1} alt="" height="302px" className="mb30"/>
+              <p className="zone_n_title task-hide">{newsList[0].name}</p>
+              <p className="zone_n_desc task-hide-2">{newsList[0].summary}</p>
+              <p className="font-13 mt10" style={{color:"#8d95a3"}}>
+                <img src={shijian} alt="" className="mr3" />
+                {newsList[0].publishTime}
+              </p>
+              <p className="mt15">
+                <Link to={`/information/${deptId}/newdetail/${newsList[0].id}`} className="color-blue">查看详情<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
+              </p>
+            </div>
+            <ul className="zone_new_three">
+              {
+                newsList.map((i,k)=>{
+                  return(
+                    k > 0 && <li>
+                      <Link className="zone_n_title task-hide" to={`/information/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
+                      <p className="zone_n_desc task-hide-2 mt10">{i.summary}</p>
+                      <p className="zone_n_value">
+                        <span className="font-13" style={{color:"#8d95a3"}}>
+                          <img src={shijian} alt="" className="mr3" />
+                          {i.publishTime}
+                        </span>
+                        <Link  to={`/information/${deptId}/newdetail/${i.id}`} className="color-blue">查看详情<img src={guideArrow} alt="" width="14px"/></Link>
+                      </p>
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          </div>
+        }
+      </div>
+      <div className="zone_projects">
+        <p className="in_title mb40">精选项目</p>
+        {
+          projectList && projectList.length>0&&
+          <div className="boxmain zone_p_lists">
+            {
+              projectList.map((i,k)=>{
+                return(
+                  <li>
+                    {i.projectProperties && i.projectProperties.authorImageUrl && <img src={i.projectProperties.authorImageUrl} alt="" /> }
+                    <div>
+                      <Link to={i.projectURL} className="z_p_title">{i.fullName}</Link>
+                       <p className="z_p_desc task-hide-2">{i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}</p>
+                    </div>
+                  </li>
+                )
+              })
+            }
+          </div>
+        }
+      </div>
+      <div className="zone_contributor">
+        <p className="in_title">核心贡献者</p>
+        <ul className="boxmain zone_c_lists">
+          <li>
+            <img src="" alt="" />
+            <span>贡献者名字一</span>
+            <p className="task-hide-2">我是贡献者的简介内容占两行我是贡献者的简介内容占两行我是贡献者的简介内容占两行</p>
+          </li>
+          <li>
+            <img src="" alt="" />
+            <span>贡献者名字一2</span>
+            <p className="task-hide-2">我是贡献者的简介内容占两行我是贡献者的简介内容占两行我是贡献者的简介内容占两行</p>
+          </li>
+          <li>
+            <img src="" alt="" />
+            <span>贡献者名字一3</span>
+            <p className="task-hide-2">我是贡献者的简介内容占两行我是贡献者的简介内容占两行我是贡献者的简介内容占两行</p>
+          </li>
+          <li>
+            <img src="" alt="" />
+            <span>贡献者名字一4</span>
+            <p className="task-hide-2">我是贡献者的简介内容占两行我是贡献者的简介内容占两行我是贡献者的简介内容占两行</p>
+          </li>
+        </ul>
+      </div>
+
+      <div className="zone_parter">
+        <p className="in_title">合作伙伴</p>
+        <ul className="boxmain zone_part_lists">
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+          <li>合作伙伴一</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+export default HeaderPage;

src/forge/Information/Pages/main.jsx

@@ -27,7 +27,7 @@ function Main(props){
   },[deptId])
 
   function getMainList(){
-    const url = `/cms/doc/open/dept/${deptId}/docOverviewList`;
+    const url = `/cms/doc/open/zone/${deptId}/docOverviewList`;
     axios.get(url).then(result=>{
       if(result){
         setMainList(result.data.rows);
@@ -36,7 +36,7 @@ function Main(props){
   }
 
   function getHotList(){
-    const url = `/cms/doc/open/dept/${deptId}/hotDocList`;
+    const url = `/cms/doc/open/zone/${deptId}/hotDocList`;
     axios.get(url,{
       params:{pageSize:15,pageNum:1}
     }).then(result=>{
@@ -52,7 +52,7 @@ function Main(props){
 
   return(
     <div>
-      <Banner {...props}/>
+      {/* <Banner {...props}/> */}
       <div className="main_content">
         <p className="in_title">领域资讯</p>
         {
@@ -94,7 +94,7 @@ function Main(props){
                                   )
                                 }
                                 <div style={{flex:1,width:0}}>
-                                  <Link to={`/information/${deptId}/news/${i.id}/${j.id}`} className={`sub_name ${e===0? "":"sub_i"}`}>{j.name}</Link>
+                                  <Link to={`/information/${deptId}/newdetail/${j.id}`} className={`sub_name ${e===0? "":"sub_i"}`}>{j.name}</Link>
                                   <p className={`sub_desc ${e===0? "task-hide-2":"task-hide"}`}>
                                   {j.summary}
                                   </p>

src/forge/Information/Pages/newsDetail.jsx

@@ -7,7 +7,7 @@ import { Base64 } from 'js-base64';
 import axios from 'axios';
 
 function NewsDetail(props){
-  const { deptId , cateId , id } = props.match.params;
+  const { deptId , id } = props.match.params;
   const [ detail , setDetail ] = useState(undefined);
   const [ cmsDir , setCmsDir ] = useState(undefined);
 
@@ -29,13 +29,12 @@ function NewsDetail(props){
   }
   return(
     <div className="detail_news_all">
-      <Banner {...props} />
       {
         detail && 
         <div style={{width:'1200px',margin:"0px auto",padding:"30px 0px"}}>
           <Breadcrumb separator=">">
             <Breadcrumb.Item href={`/information/${deptId}/news`}>领域资讯</Breadcrumb.Item>
-            { cmsDir && <Breadcrumb.Item href={`/information/${deptId}/news/${cateId}`}>{cmsDir.name}</Breadcrumb.Item> }
+            { cmsDir && <Breadcrumb.Item href={`/information/${deptId}/news/${cmsDir.id}`}>{cmsDir.name}</Breadcrumb.Item> }
             <Breadcrumb.Item>正文</Breadcrumb.Item>
           </Breadcrumb>
           <div className="info_text">

src/forge/Information/Pages/newsList.jsx

@@ -8,6 +8,7 @@ import shijian from '../img/shijian.png';
 import liulan from '../img/liulan.png';
 import DefaultImg from '../Component/defaultImg';
 import emptydata from '../../Images/nodata.png';
+import { Link } from 'react-router-dom';
 
 function NewsList(props){
   const { deptId , cateId } = props.match.params;
@@ -44,7 +45,7 @@ function NewsList(props){
   }
 
   function getColumnList(){
-    const url = `/cms/doc/open/dept/${deptId}/dirList`;
+    const url = `/cms/doc/open/zone/${deptId}/dirList`;
     axios.get(url).then(result=>{
       if(result){
         setColumnList(result.data.rows);
@@ -81,7 +82,7 @@ function NewsList(props){
 
   return(
     <div className="info_news_list">
-      <PublicBanner {...props}/>
+      {/* <PublicBanner {...props}/> */}
       <div style={{width:'1200px',margin:"0px auto",padding:"30px 0px"}}>
         <Breadcrumb separator=">">
           <Breadcrumb.Item href={`/information/${deptId}/news`}>领域资讯</Breadcrumb.Item>
@@ -92,11 +93,11 @@ function NewsList(props){
           {
             columnList && columnList.length>0 && 
             <div className="column_menu">
-              <Menu >
+              <Menu selectedKeys={[cateId]}>
                 {
                   columnList.map((i,k)=>{
                     return(
-                      <Menu.Item key={k}>{i.name}</Menu.Item>
+                      <Menu.Item key={i.id} value={i.id} ><Link to={`/information/${deptId}/news/${i.id}`}>{i.name}</Link></Menu.Item>
                     )
                   })
                 }
@@ -118,7 +119,7 @@ function NewsList(props){
                           <DefaultImg name="GitLink" title={details && details.name} />
                         }
                         <div style={{flex:1,width:0}}>
-                          <a className={`sub_name`}>{i.name}</a>
+                          <Link to={`/information/${deptId}/newdetail/${i.id}`} className={`sub_name task-hide`}>{i.name}</Link>
                           <p className={`sub_desc task-hide-2`}>
                           {i.summary}
                           </p>
@@ -144,9 +145,12 @@ function NewsList(props){
                 }
               </div>
             </LongWidth>
-            <div className="short_width">
-              <Hot title="热门领域资讯" list={hostList} />
-            </div>
+            {
+              hostList && hostList.length>0 &&
+              <div className="short_width">
+                <Hot title="热门领域资讯" list={hostList} />
+              </div>
+            }
           </div>
         </Box>
       </div>

src/forge/Information/Pages/projectSource.jsx

@@ -1,11 +1,64 @@
 import React , { useEffect , useState } from 'react';
 import Banner from '../Component/publicBanner';
 import { Box , LongWidth  } from '../../Component/layout';
-import { Input , Dropdown , Menu } from 'antd';
+import { Input , Menu , Pagination , Spin } from 'antd';
 import { Link } from 'react-router-dom';
-const { Search } = Input
+import Nodata from '../../Nodata';
+import axios from 'axios';
+const { Search } = Input;
 
-function ProjectSource(props){
+function ProjectSource(props){ 
+  const { deptId } = props.match.params;
+  const [ typeId , setTypeId ] = useState(0);
+  const [ typeList , setTypeList ] = useState(undefined);
+  const [ lists , setLists ] = useState(undefined);
+  const [ page, setPage ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const pageSize = 20;
+  const [ searchName , setSearchName ] = useState(undefined);
+  const [ value , setValue ] = useState(undefined);
+  const [ loading , setLoading ]  = useState(false);
+
+  useEffect(()=>{
+    if(deptId){
+      getTypeList();
+    }
+  },[deptId])
+
+  useEffect(()=>{
+    if(deptId){
+      setLoading(true);
+      getLists();
+    }
+  },[deptId,typeId,page,searchName])
+
+  function getLists(){
+    const url = `/zone/open/${deptId}/project/list`;
+    axios.get(url,{
+      params:{
+        pageNum:page,
+        name:searchName,
+        pageSize,
+        projectTypeId:typeId===0?undefined:typeId
+      }
+    }).then(result=>{
+      if(result){
+        setLists(result.data.rows);
+        setTotal(result.data.total);
+        setLoading(false);
+      }
+    }).catch(error=>{})
+  }
+
+
+  function getTypeList(){
+    const url = `/zone/open/${deptId}/projectType/list`;
+    axios.get(url).then(result=>{
+      if(result){
+        setTypeList(result.data.rows);
+      }
+    }).catch(error=>{})
+  }
   const menu = (
     <Menu>
       <Menu.Item>更新时间排序</Menu.Item>
@@ -16,51 +69,99 @@ function ProjectSource(props){
   )
   return(
     <div className="in_pro">
-      <Banner {...props}/>
+      {/* <Banner {...props}/> */}
       <div className="boxmain" style={{paddingTop:"56px"}}>
         <p className="in_title">开源项目</p>
         <Box>
           <ul className="in_pro_menu">
             <li className="u_t">项目分类</li>
-            <li className="active">全部分类</li>
-            <li>项目分类</li>
-            <li>项目分类</li>
+            <li className={0 === typeId ? "active":""} onClick={()=>setTypeId(0)}>全部分类</li>
+            {
+              typeList && typeList.length>0 &&
+              typeList.map((i,k)=>{
+                return(
+                  <li className={i.id === typeId ? "active":""} onClick={()=>setTypeId(i.id)}>{i.name}</li>
+                )
+              })
+            }
           </ul>
           <LongWidth>
             <div className="in_list">
               <div className="in_list_menu">
                 <Search 
+                  value={value}
+                  onChange={(e)=>setValue(e.target.value)}
+                  onSearch={()=>setSearchName(value)}
+                  allowClear={true}
                   size={'large'} 
                   placeholder="请输入项目名称" 
                   style={{width:645}}
                   enterButton={<span><i className="iconfont icon-sousuo5 font-15"/>搜索</span>}
                 />
-                <Dropdown overlay={menu} placement={"bottomRight"}>
+                {/* <Dropdown overlay={menu} placement={"bottomRight"}>
                   <a className="color-blue" style={{display:'flex',alignItems:'center'}}>排序<i className="iconfont icon-sanjiaoxing-down ml5"></i></a>
-                </Dropdown>
+                </Dropdown> */}
               </div>
-              <div className="in_list_box">
-                <div>
-                  <Link to=""><img src="" alt="" className="author_img"/></Link>
-                  <div style={{flex:"1"}}>
-                    <p className="in_b_main">
-                      <Link to="">GitLink/React-Build</Link>
-                      <ul>
-                        <li><i className="iconfont icon-guanzhuicon mr4"></i>333</li>
-                        <li><i className="iconfont icon-xingzhuang font-15 mr4"></i>22</li>
-                        <li><i className="iconfont icon-morenfuke_icon1 font-16 mr4"></i>31</li>
-                      </ul>
-                    </p>
-                    <div className="in_b_desc task-hide-2">
-                      Gitlink平台，前端编译好的文件，直接将该文件放入后端项目中的public/react/build/目录下即可，如果没有build目录，直接将该入后端项目中的public/react/build/目录下即可，如果没有build目录，直接将该文件放入后端项直接将该文件放入后端
-                    </div>
-                    <ul className="in_b_tag">
-                      <li>html</li>
-                      <li>javascript</li>
-                    </ul>
-                  </div>
+              <Spin spinning={loading}>
+                <div className={`in_list_box ${total>pageSize ?"in_box_line":""}`}>
+                  {
+                    lists && lists.length>0 ?
+                      lists.map((i,k)=>{
+                        return(
+                          <div>
+                            {i.projectProperties && <img src={i.projectProperties.authorImageUrl} alt="" className="author_img"/> }
+                            <div style={{flex:"1"}}>
+                              <p className="in_b_main">
+                                <Link to={i.projectURL}>{i.fullName}</Link>
+                                {
+                                  i.projectProperties && 
+                                  <ul>
+                                    {/* <li><i className="iconfont icon-guanzhuicon mr4"></i>333</li> */}
+                                    { i.projectProperties.praisesCount > 0 && <li><i className="iconfont icon-xingzhuang font-15 mr4"></i>{i.projectProperties.praisesCount}</li> }
+                                    { i.projectProperties.forkedCount > 0 && <li><i className="iconfont icon-morenfuke_icon1 font-16 mr4"></i>{i.projectProperties.forkedCount}</li> }
+                                  </ul>
+                                }
+                              </p>
+                              {
+                                i.projectProperties && i.projectProperties.description &&
+                                <div className="in_b_desc task-hide-2">
+                                  {i.projectProperties.description}
+                                </div>
+                              }
+                              {
+                                i.projectProperties && i.projectProperties.topics &&
+                                <ul className="in_b_tag">
+                                  {
+                                    i.projectProperties.topics.split(",").map(t=>{
+                                      return(
+                                        <li>{t}</li>
+                                      )
+                                    })
+                                  }
+                                </ul>
+                              }
+                              <ul className="in_b_infos">
+                                { i.deptName && <li className="infos_cate">{i.deptName}</li> }
+                                { i.projectType && <li className="infos_language">{i.projectType}</li> }
+                                { i.projectProperties && i.projectProperties.timeAgo && <li><i className="iconfont icon-a-31shijian font-13 mr3"></i> 更新于{i.projectProperties.timeAgo}</li>}
+                              </ul>
+                            </div>
+                          </div>
+                        )
+                      })
+                    :""
+                  }
+                  {
+                    lists && lists.length === 0 && <Nodata _html={"暂无数据"}/>
+                  }
                 </div>
-              </div>
+              </Spin>
+              {
+                total > pageSize &&
+                <div style={{padding:"30px 0px",textAlign:"right"}}>
+                  <Pagination pageSize={pageSize} current={page} onChange={(page)=>{setPage(page);window.scrollTo(0,0)}} total={total} showQuickJumper/>
+                </div>
+              }
             </div>
           </LongWidth>
         </Box>

src/forge/Information/index.jsx

@@ -1,4 +1,4 @@
-import React ,{ useEffect } from "react";
+import React ,{ useEffect , useState } from "react";
 
 import { Route, Switch } from "react-router-dom";
 import { withRouter } from "react-router";
@@ -9,9 +9,14 @@ import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
 import Loadable from "react-loadable";
 import Loading from "../../Loading";
 import axios from 'axios';
+import PublicBanner from "./Component/publicBanner";
 import { isDev } from 'educoder';
 import './index.scss';
 
+const HeaderPage = Loadable({
+  loader: () => import("./Pages/headerPage"),
+  loading: Loading,
+});
 const ProjectSource = Loadable({
   loader: () => import("./Pages/projectSource"),
   loading: Loading,
@@ -29,6 +34,9 @@ const Main = Loadable({
   loading: Loading,
 });
 function Index(props){
+  const [ data , setData ] = useState(undefined);
+  const { deptId } = props.match.params;
+
   useEffect(()=>{
     axios.interceptors.request.use(
       config => {
@@ -48,15 +56,25 @@ function Index(props){
       }
     )
   },[])
+
+  useEffect(()=>{
+    if(deptId){
+      getDetail();
+    }
+  },[deptId])
+
+  function getDetail(){
+    const url = `/zone/open/${deptId}`;
+    axios.get(url).then(result=>{
+      if(result){
+        setData(result.data.data);
+      }
+    }).catch(console.error())
+  }
   return(
     <div className="information_main">
+      <PublicBanner {...props} data={data} />
       <Switch>
-        <Route
-          path="/information/:deptId/news/:cateId/:id"
-          render={(p) => (
-            <NewsDetail {...props} {...p}/>
-          )}
-        ></Route>
         <Route
           path="/information/:deptId/news/:cateId"
           render={(p) => (
@@ -64,7 +82,13 @@ function Index(props){
           )}
         ></Route>
         <Route
-          path="/information/projects"
+          path="/information/:deptId/newdetail/:id"
+          render={(p) => (
+            <NewsDetail {...props} {...p}/>
+          )}
+        ></Route>
+        <Route
+          path="/information/:deptId/projects"
           render={(p) => (
             <ProjectSource {...props} {...p}/>
           )}
@@ -75,6 +99,12 @@ function Index(props){
             <Main {...props} {...p}/>
           )}
         ></Route>
+        <Route
+          path="/information/:deptId"
+          render={(p) => (
+            <HeaderPage {...props} {...p} data={data}/>
+          )}
+        ></Route>
       </Switch>
     </div>
   )

src/forge/Information/index.scss

@@ -176,7 +176,10 @@
       &:last-child{
         border-bottom: none;
       }
-      & >div >img{
+      &>img{
+        width:184px;
+      }
+      & >div >img,&>img{
         margin-right: 20px;
         height: 117px;
         max-width: 184px;
@@ -267,6 +270,9 @@
       li{
         padding:0px!important;
         border:none!important;
+        &.ant-menu-item-selected{
+          background-color: #fff;
+        }
       }
     }
   }
@@ -396,10 +402,18 @@
       margin-bottom: 5px;
     }
     .in_list_box{
+      min-height: 40vh;
+      &.in_box_line > div:last-child{
+        border-bottom: 1px dashed rgba(141, 149, 172, 0.27);
+      }
       &>div{
         display: flex;
         align-items: flex-start;
-        padding:20px 0px;
+        padding:20px 0px 15px;
+        border-bottom: 1px dashed rgba(141, 149, 172, 0.27);
+        &:last-child{
+          border-bottom: none;
+        }
         .author_img{
           width: 66px;
           height: 66px;
@@ -436,11 +450,13 @@
           color: #4c5876;
           line-height: 26px;
           max-height: 52px;
+          word-break: break-all;
+          margin-bottom: 10px!important;
         }
         .in_b_tag{
-          margin-top: 10px;
           display: flex;
           align-items: center;
+          margin-bottom: 15px!important;
           li{
             height:24px;
             line-height:24px;
@@ -452,6 +468,41 @@
             padding:0px 7px;
           }
         }
+        .in_b_infos{
+          display: flex;
+          align-items: center;
+          color:#6c7283;
+          font-size: 13px;
+          .infos_cate{
+            padding: 0px 10px;
+            position: relative;
+            margin-right: 10px;
+            &::before{
+              position: absolute;
+              left: 0px;
+              top: 50%;
+              margin-top: -3px;
+              content: "";
+              width:6px;
+              height:6px;
+              background-color:#466aff;
+              border-radius: 50%;
+            }
+            &::after{
+              content: "";
+              right: 0px;
+              position: absolute;
+              bottom: 50%;
+              height: 10px;
+              margin-bottom: -5px;
+              width: 1px;
+              background-color:#6c7283;
+            }
+          }
+        }
+        .infos_language{
+          margin-right: 30px;
+        }
       }
     }
   }
@@ -467,13 +518,14 @@
       position: relative;
       padding-left: 34px;
       font-size:16px;
-      font-weight:500;
       cursor: pointer;
       color:#3d485d;
       &.u_t{
         font-weight:700;
         color:#1f2329;
         font-size:18px;
+        font-weight:500;
+        cursor: default;
       }
       &.active{
         color:#466aff;
@@ -489,4 +541,210 @@
       }
     }
   }
+}
+// -------------首页
+.zone_box{
+  padding-top:70px;
+  background-color:#f7f9fc;
+  .zone_infos{
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    margin-top: 54px;
+    &>img{
+      border-radius: 0px 4px 4px 0px;
+    }
+    .zone_infos_desc{
+      padding:0px 34px;
+      flex: 1;
+      .z_name{
+        color:#1f2329;
+        font-size:20px;
+        height: 28px;
+        line-height: 28px;
+        margin-bottom: 35px!important;
+      }
+      .z_desc{
+        color:#3d485d;
+        font-size:14px;
+        line-height:32px;
+      }
+    }
+  }
+  .zone_news{
+    background-image: url(./img/productBg1.png);
+    background-size: 100% 100%;
+    min-height: 764px;
+    margin-top: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    .zone_n_title{
+      color:#1f2329;
+      font-size:17px;
+      height: 24px;
+      line-height: 24px;
+    }
+    .zone_n_desc{
+      color:#4c5876;
+      font-size:14px;
+      line-height:27px;
+      margin-top: 15px;
+      word-break: break-all;
+    }
+    .zone_n_value{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 20px;
+      line-height: 20px;
+      margin-top: 15px;
+    }
+    .zone_new_first{
+      background-color: #fff;
+      padding:30px;
+      flex:1;
+      border-radius: 4px;
+    }
+    .zone_new_three{
+      margin-left: 30px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      li{
+        background-color: #fff;
+        width: 385px;
+        padding:20px;
+        border-radius: 4px;
+        &:last-child{
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+  .zone_projects{
+    background-image:linear-gradient(180deg,#f9fbfe 0%,#ffffff 100%);
+    padding:70px 0px 80px;
+    .zone_p_lists{
+      display: flex;
+      flex-wrap: wrap;
+      li{
+        margin:0px 80px 30px 0px!important;
+        background-color:#fefefe;
+        border:2px solid;
+        border-color:#ffffff;
+        border-radius:4px;
+        box-shadow:0px 0px 15px rgba(35, 54, 185, 0.09);
+        width: 560px;
+        padding:35px 30px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        &:nth-child(2n){
+          margin-right: 0px!important;
+        }
+        &>img{
+          width: 75px;
+          height: 75px;
+          border-radius: 8px;
+          margin-right: 14px;
+        }
+        &>div{
+          flex:1;
+          .z_p_title{
+            font-weight:700;
+            color:#1f2329;
+            font-size:16px;
+            margin-bottom: 10px!important;
+            height: 22px;
+            line-height: 22px;
+            display: block;
+          }
+          .z_p_desc{
+            color:#4c5876;
+            font-size:14px;
+            line-height:22px;
+            word-break: break-all;
+          }
+        }
+      }
+    }
+  }
+  .zone_contributor{
+    min-height: 466px;
+    background-image: url(./img/productBg2.png);
+    background-size: 100% 100%;
+    width: 100%;
+    padding:44px 0px 58px;
+    .zone_c_lists{
+      display: flex;
+      align-items: center;
+      margin-top: 50px;
+      justify-content: space-between;
+      li{
+        padding:17px 13px;
+        background-image: url(./img/contributebg.png);
+        width: 268px;
+        height: 268px;
+        border:1px solid #fff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        &>img{
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          margin-bottom: 16px;
+        }
+        &>span{
+          color:#000000;
+          font-size:16px;
+          display: flex;
+          text-align: center;
+          height: 22px;
+          line-height: 22px;
+          margin-bottom: 10px!important;
+        }
+        &>p{
+          color:#4c5876;
+          font-size:14px;
+          line-height:26px;
+          text-align:center;
+          -webkit-line-clamp: 3;
+        }
+      }
+    }
+  }
+  .zone_parter{
+    background-color: #fff;
+    padding:70px 0px 90px;
+    .zone_part_lists{
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 70px;
+      li{
+        width: 170px;
+        height: 70px;
+        line-height: 70px;
+        margin-left: 36px;
+        margin-bottom: 30px!important;
+        color:#1f2329;
+        font-size:20px;
+        text-align: center;
+        background-color:#ffffff;
+        border-radius:8px;
+        box-shadow:0px 0px 15px rgba(28, 48, 175, 0.08);
+        &:first-child,&:nth-child(12){
+          margin-left: 0px;
+        }
+        &:nth-child(7){
+          margin-left: 103px;
+        }
+        &:nth-child(11){
+          margin-right: 103px;
+        }
+      }
+    }
+  }
 }

src/forge/css/index.scss

@@ -163,7 +163,6 @@ ul,ol,dl{
   text-align: center;
   min-height: 320px;
   padding:40px 0px;
-  margin-bottom: 50px;
   display: flex;
   justify-content: center;
   align-items: center;