超算专区-新闻首页改版

src/forge/Information/Pages/custom/component/newsItem.jsx

@@ -1,54 +1,82 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import shijian from '../../../img/shijian.png';
-import liulan from '../../../img/liulan.png';
 import DefaultImg from '../../../img/back1.png';
 import "../index.less";
+import Nodata from '../../../../Nodata';
+import moment from 'moment';
 
-function NewsItem({list,index,deptId,header}){
-    const Items=({range=null,bottomImg=null,topImg=null,rightImg=null,className=""})=>{
+export const NewItemsByCustom=({list,deptId,range=null,bottomImg=false,topImg=false,rightImg=false,leftImg=false,className="", showBtn=true})=>{
         return(
-            list && list.length > 0 ? list.map((item,k)=>{
-                return (!range || (range && k>=range[0] && k<range[1])) && <div className={`main_card_item ${className}`} key={k} onClick={()=>{props.history.push(`/zone/${deptId}/newdetail/${item.id}`)}}>
+            list && list.length > 0 && list.map((item,k)=>{
+                return (!range || (range && k>=range[0] && k<range[1])) && <div className={`main_card_item ${className}`} key={k}>
+                    {leftImg && <div className='imgBoxBg'><div className='imgBox'><img src={item.headImg || DefaultImg} alt='' height={"100%"}/></div></div>}
                     <div className='main_card_item_info'>
-                        {topImg}
-                        <Link to={`/zone/${deptId}/newdetail/${item.id}`} className={`sub_name task-hide`}>{item.name}</Link>
-                        <p className={`sub_desc task-hide-2`}>{item.summary}</p>
+                        {topImg && <div className='bigimgBox'><img src={item.headImg || DefaultImg} width={'100%'} alt=''/></div>}
+                        <div className='df'>
+                            <Link to={`/zone/${deptId}/newdetail/${item.id}`} className={`sub_name task-hide`}>{item.name}</Link>
+                            {!showBtn && <i className='iconfont icon-jiantou21 font-16 ml10'></i>}
+                        </div>
+                        
+                        <div className={`sub_desc task-hide-2`}>{item.summary}</div>
                         <div className="sub_info">
-                            <i className='iconfont icon-a-31shijian font-13 mr5' /><span>{item.publishTime}</span>
+                            <i className='iconfont icon-a-31shijian font-13 mr5' /><span>{moment(item.publishTime).format("YYYY-MM-DD")}</span>
                             <i className='iconfont icon-mimaicon font-16 mr5' /><span>{item.visits}</span>
                         </div>
-                        {bottomImg}
+                        {!!showBtn && <a className='font-15 main_card_item_btn' href={`/zone/${deptId}/newdetail/${item.id}`}>查看详情<i className='iconfont icon-zuojiantou1 ml5 font-12'></i></a>}
+                        {bottomImg && <div className='bigimgBox'><img src={item.headImg || DefaultImg} width={'100%'} alt=''/></div>}
                     </div>
-                    {rightImg && rightImg[k] && <div className='imgBox'><img src={rightImg[k]} alt='' height={"100%"}/></div>}
+                    {rightImg && <div className='imgBoxBg'><div className='imgBox'><img src={item.headImg || DefaultImg} alt='' height={"100%"}/></div></div>}
                 </div>
             })
-            :
-            <div>暂无数据</div>
         )
     }
+function NewsItem({list,index,deptId,header}){
+
     return(
-        index % 8 === 0 ? <div className='styleFirstBox'>
-                {header}
-                <div className='styleFirst width1600'>
-                <Items range={[0,1]} topImg={<div className='bigimgBox' style={{height:"448px"}}><img src={DefaultImg} width={'100%'} alt=''/></div>}/>
-                <div className='styleFirst_Right'>
-                    <Items range={[1,4]} rightImg={[null,DefaultImg,DefaultImg,DefaultImg]}/>
-                </div>
-            </div>
-        </div> :
-        index % 8 === 1 ? <div className='styleSecondBox'>
+        index % 5 === 0 ? <div className='styleFirstBox'>
             {header}
-            <div className='styleSecond width1600'>
+            {list && list.length > 0 ? <div className='styleFirst width1600'>
+                <NewItemsByCustom list={list} deptId={deptId} range={[0,1]} topImg={true} showBtn={false}/>
+                <div className='styleFirst_Right'>
+                    <NewItemsByCustom list={list} deptId={deptId} range={[1,4]} rightImg={true} showBtn={false}/>
+                </div>
+            </div> : <Nodata _html="暂无数据"/>}
+        </div> :
+        index % 5 === 1 ? <div className='styleSecondBox'>
+            {header}
+            {list && list.length > 0 ? <div className='styleSecond width1600'>
                 <div className='styleSecond_left'>
-                    <Items range={[0,1]} bottomImg={<div className='bigimgBox' style={{height:"280px"}}><img src={DefaultImg} width={'100%'} alt=''/></div>}/>
+                    <NewItemsByCustom list={list} deptId={deptId} range={[0,1]} bottomImg={true} className="main_card_item_white"/>
                 </div>
                 <div className='styleSecond_right'>
-                    <Items range={[1,2]} rightImg={[null,DefaultImg]} className="styleSecond_right_top"/>
-                    <div className='styleSecond_right_bottom'><Items range={[2,4]}/></div>
+                    <NewItemsByCustom list={list} deptId={deptId} range={[1,2]} rightImg={true} className="styleSecond_right_top main_card_item_whiteBk"/>
+                    <div className='styleSecond_right_bottom'><NewItemsByCustom list={list} deptId={deptId} range={[2,4]} rightImg={true} className="main_card_item_whiteBk"/></div>
                 </div>
-            </div>
-        </div> : "111"
+            </div> : <Nodata _html="暂无数据"/>}
+        </div> :
+        index % 5 === 2 ? <div className='styleThreeBox'>
+            {header}
+            {list && list.length > 0 ? <div className='styleThree width1600'>
+                <NewItemsByCustom list={list} deptId={deptId} range={[0,6]} className="main_card_item_whiteBk"/>
+            </div> : <Nodata _html="暂无数据"/>}
+        </div> :
+        index % 5 === 3 ? <div className='styleFourBox'>
+            {header}
+            {list && list.length > 0 ? <div className='styleFour width1600'>
+                <NewItemsByCustom list={list} deptId={deptId} range={[0,1]} rightImg={true} className="main_card_item_white"/>
+                <NewItemsByCustom list={list} deptId={deptId} range={[2,4]} className="main_card_item_whiteBk"/>
+            </div> : <Nodata _html="暂无数据"/>}
+        </div> : <div className='styleFiveBox'>
+            {header}
+            {list && list.length > 0 ? <div className='styleFive width1600'>
+                <div className='three_cols'>
+                    <NewItemsByCustom list={list} deptId={deptId} range={[0,3]} className="main_card_item_whiteBk"/>
+                </div>
+                <div className='two_cols'>
+                    <NewItemsByCustom list={list} deptId={deptId} range={[3,5]} className="main_card_item_whiteBk"/>
+                </div>
+            </div> : <Nodata _html="暂无数据"/>}
+        </div>
     )
 }
 export default NewsItem;

src/forge/Information/Pages/custom/index.less

@@ -129,7 +129,7 @@
                                 margin-top: 2px;
                                 margin-left: 10px;
                             }
-                        }
+                        } 
                         .card_u_down{
                             margin-top: 20px;
                             color:rgba(9, 18, 33,.8);
@@ -144,12 +144,14 @@
 
 // 新闻定制部分
 .customNews{
-    background-image: url(../../img/news/f_bc.png);
-    background-size: 100%;
-    background-repeat: no-repeat;
+    .customNews_top{
+        background-image: url(../../img/custom/1.png);
+        background-size: 100% 100%;
+    }
     .main_card_item{
         flex: 1;
         display: flex;
+        overflow: hidden;
         .bigimgBox{
             width: 100%;
             overflow: hidden;
@@ -166,14 +168,53 @@
         img{
             width: 100%;
             transition: .8s;
+            object-fit: cover;
         }
         &:hover{
             img{
                 transform: scale(1.2);
             }
+            .main_card_item_info{
+                .icon-jiantou21 {
+                    color: inherit;
+                    top: -2px;
+                    left: 0px;
+                    opacity: 1;
+                    transition:  top 0.5s ease, left 0.5s ease, opacity 0.3s ease 0.1s;
+                }
+            }
         }
         .main_card_item_info{
             flex: 1;
+            overflow: hidden;
+            .icon-jiantou21 {
+                opacity: 0;
+                transition: top 0.5s ease, left 0.5s ease;
+                pointer-events: none;
+                position: relative;
+                top: 18px;
+                left: -18px;
+            }
+        }
+        .main_card_item_btn{
+            display: inline-block;
+            width: 100%;
+            border-radius: 8px;
+            color:#091221;
+            text-align: center;
+            height: 39px;
+            line-height: 39px;
+            margin-top: 40px;
+            background:linear-gradient(271.9deg,rgba(10, 145, 255, 0.12) 0.04%,rgba(43, 103, 238, 0.12) 55.24%,rgba(133, 110, 250, 0.12) 99.87%);
+
+            &:hover {
+                background-color: #091221;
+                color: #fff;
+                .iconfont {
+                    display: inline-block;
+                    animation: arrow-move 1.2s ease-in-out infinite;
+                }
+            }
         }
     }
     .customMenus{
@@ -242,32 +283,45 @@
             display: block;
             &:hover{
                 i{
-                    position: absolute;
+                    display: inline-block;
                     animation: arrow-move 1.2s ease-in-out infinite;
                 }
             }
         }
     }
+    .main_card_item_white{
+        .sub_name, .sub_desc, .sub_info span, .iconfont:not(.icon-zuojiantou1){
+            color:#ffffff;
+        }
+    }
+    .main_card_item_whiteBk{
+        background:#ffffff;
+        border-radius:15px;
+        padding: 30px;
+        border: 1px solid white;
+        &:hover{
+            background-image: url('../../img/custom/newBk3.png');
+            background-size: 100% 100%;
+        }
+    }
     .sub_name{
         color:#091221;
         font-size:18px;
         font-weight:500;
-        margin-bottom: 20px!important;
         font-family:Alibaba PuHuiTi;
         height:25px;
         line-height:25px;
         display: block;
         word-wrap: break-word;
-        white-space: normal;
     }
     .sub_desc{
         opacity:80%;
         line-height:26px;
         height:52px;
         font-family:Alibaba PuHuiTi;
-        margin-bottom: 20px!important;
         color:#091221;
         font-size:15px;
+        margin: 20px 0;
     }
     .sub_info{
         display: flex;
@@ -281,11 +335,23 @@
             opacity:80%;
             font-size:13px;
         }
+        .iconfont{
+            opacity:80%;
+        }
     }
 }
+.styleFirstBox{
+    background: url(../../img/custom/2.png) no-repeat;
+    background-size: 100% 100%;
+    padding-bottom: 90px;
+}
 .styleFirst{
     display: flex;
-    padding-bottom: 90px;
+    .main_card_item:first-of-type{
+        .bigimgBox{
+            height: 426px;
+        }
+    }
     .styleFirst_Right{
         width: 50%;
         margin-left: 60px;
@@ -299,17 +365,29 @@
 }
 .styleSecondBox{
     background: url(../../img/news/s_bc.png) no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
+    padding-bottom: 90px;
     .styleSecond{
         display: flex;
         .styleSecond_left{
+            background-image: url('../../img/custom/newBk1.png');
+            background-size: 100% 100%;
+            border-radius:15px;
             width: 51%;
             padding:30px;
             box-sizing: border-box;
             margin-right: 20px;
+            color: white;
+            flex-shrink: 0;
             .bigimgBox{
                 margin-top: 20px;
             }
+            .main_card_item_btn{
+                background:#ffffff;
+                &:hover{
+                    background: #091221;
+                }
+            }
         }
         .styleSecond_right{
             display: flex;
@@ -319,18 +397,160 @@
                 height: 217px;
                 margin-left: 27px;
             }
-            .styleSecond_right_top{
-                padding:30px;
-                background-color: #fff;
-                border-radius:15px;
-            }
             .styleSecond_right_bottom{
                 width: 100%;
+                margin-top: 20px;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 20px;
+                .imgBox{
+                    display: none;
+                }
+                .main_card_item:only-child {
+                    grid-column: span 2;
+                    .imgBox{
+                        display: inline-block;
+                    }
+                }
             }
         }
+        .main_card_item_btn{
+            width: 120px;
+        }
+        .bigimgBox{
+            height: 280px;
+        }
     }
 }
 
+.styleThreeBox{
+    background-image: url('../../img/custom/new_3_bk.png');
+    background-size: 100% 100%;
+    padding-bottom: 90px;
+    .styleThree{
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+    }
+}
+
+.styleFourBox{
+    background-image: url('../../img/custom/new_4_bk.png');
+    background-size: 100% 100%;
+    padding-bottom: 90px;
+    .styleFour{
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+    }
+    .main_card_item_white{
+        grid-column: span 2;
+        background-image: url('../../img/custom/newBk4.png');
+        background-size: 100% 100%;
+        padding: 49px 60px 49px 49px;
+        border-radius:15px;
+        .main_card_item_btn{
+            width: 120px;
+            background:#ffffff;
+        }
+        .imgBoxBg{
+            width:372px;
+            height:217px;
+            top: -30px;
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter:blur(7.65px);
+            border-radius:15px;
+            margin-left: 40px;
+        }
+        .imgBox{
+            width:372px;
+            height:217px;
+            margin-left: 30px;
+            margin-top: 30px;
+        }
+    }
+}
+.styleFiveBox{
+    background-image: url('../../img/custom/new_5_bk.png');
+    background-size: 100% 100%;
+    padding-bottom: 90px;
+    .three_cols, .two_cols{
+        display: grid;
+        gap: 20px;
+    }
+    .three_cols{
+        grid-template-columns: repeat(3, 1fr);
+        margin-bottom: 20px;
+    }
+    .two_cols{
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.customNews_bottom_box{
+    background-image: url('../../img/custom/new_6_bk.png');
+    background-size: 100% 100%;
+    padding-bottom: 90px;
+    padding-top: 98px;
+
+    .customNews_bottom{
+        display: grid;
+        gap: 20px;
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .maintitle{
+        padding: 37px 30px;
+        background-image: url('../../img/custom/titleBk2.png');
+        background-size: 100% 100%;
+        margin-bottom: 15px;
+    }
+    .customNews_bottom_item{
+        background:#ffffff;
+        // border-radius:0px 0px 15px 15px;
+        border-radius: 15px;
+        overflow: hidden;
+        box-shadow:0px 3px 12px rgba(130, 132, 164, 0.05);
+        padding-bottom: 25px;
+    }
+    .customNews_bottom_item:first-of-type{
+       .maintitle{
+           background-image: url('../../img/custom/titleBk1.png');
+       }
+    }
+    .main_card_item{
+        margin: 0 30px;
+        &:hover{
+            background:linear-gradient(275.01deg,rgba(10, 145, 255, 0.08) 0.3%,rgba(43, 103, 238, 0.08) 54.94%,rgba(133, 110, 250, 0.08) 99.13%);
+            border-radius:15px;
+        }
+    }
+    .main_card_item_info{
+        padding: 20px 15px;
+    }
+    .sub_desc{
+        margin: 10px 0;
+    }
+    .sub_info{
+        padding-bottom: 10px;
+        border-bottom: 1px dashed rgba(76, 88, 118, 0.5);
+    }
+    .none_panels{
+        margin-top: 130px;
+    }
+}
+
+.docListBox{
+    background-image: url('../../img/custom/4.png');
+    background-size: 100% 100%;
+    padding-top: 56px;
+    padding-bottom: 60px;
+    .main_card_item{
+        margin-bottom: 25px;
+        .imgBox{
+            margin: 0 30px 0 0;
+        }
+    }
+}
 
 @keyframes arrow-move {
   0%, 100% { transform: translateX(0); }

src/forge/Information/Pages/custom/newsIndex.jsx

@@ -1,182 +1,173 @@
-import React , { useState , useEffect } from 'react';
-import {getUniqueIdentifier,getUserName,getBrowserPlatform,getBrowserBrand} from '../../utils';
-import { Menu , Spin , Skeleton, Button, Dropdown } from 'antd';
-import { getNewsAllList , getNewsHotList , setZoneVisits } from '../../api';
-import { tempConfig, tempEnum } from '../../tempInfo';
-import emptydata from '../../../Images/nodata.png';
-import DefaultImg from '../../Component/defaultImg';
-import NewsItem from './component/newsItem';
+import React, { useState, useEffect, Fragment } from 'react';
+import { getUniqueIdentifier, getUserName, getBrowserPlatform, getBrowserBrand } from '../../utils';
+import { Menu, Spin, Button, Dropdown, Pagination } from 'antd';
+import { getNewsAllList, getNewsHotList, getSubDocList, setZoneVisits } from '../../api';
+import NewsItem, { NewItemsByCustom } from './component/newsItem';
 import TitleIcon from '../../img/titleicon.png';
 import { Link } from 'react-router-dom';
+import Nodata from '../../../Nodata';
 import "../../index.scss";
 import "./index.less";
 
-const subTitle=["解锁深度视野","洞悉算力前沿","洞悉算力乾坤","洞悉算力前沿","共探技术本源"]
+const subTitle = ["解锁深度视野", "洞悉算力前沿", "洞悉算力乾坤", "洞悉算力前沿", "共探技术本源"]
 
-function NewsIndex(props){
-    const { id, temp, role, history, sectionCmsTitle } = props;
-    const [ mainList , setMainList ] = useState(undefined);
-    const [ menuH , setMenuH ] = useState(true);
-    const [ hotList , setHotList ] = useState(undefined);
-    const [ isSpin , setIsSpin ] = useState(true);
-    const [ newCateId , setNewCateId ] = useState(undefined);
-    const { deptId = "NSCC" , cateId } = props.match.params;
-  
-    useEffect(()=>{
-      let uuid = getUniqueIdentifier()
-      let url = props.location.pathname
-      let platform = getBrowserPlatform()
-      let browser = getBrowserBrand()
-      let username = getUserName(props.current_user)
-      let remark = ` 操作系统：${platform};浏览器：${browser};`
-      setZoneVisits({url,username,uuid,remark})
-    },[])
+function NewsIndex(props) {
+  const { id, role, history, sectionCmsTitle } = props;
+  const [mainList, setMainList] = useState([]);
+  const [docList, setDocList] = useState(undefined);
+  const [isSpin, setIsSpin] = useState(true);
+  const [pageNum, setPageNum] = useState(undefined);
+  const [total, setTotal] = useState(0);
+  const { deptId = "NSCC", cateId } = props.match.params;
+  const group1 = mainList.length > 5 ? mainList.slice(0, -2) : mainList
+  const group2 = mainList.length > 5 ? mainList.slice(-2) : []
 
-    const menu = (
-        <Menu>
-            <Menu.Item>
-                <a onClick={()=>{history.push(`/zone/${deptId}/news/add?type=richEditor`)}}>富文本编辑器</a>
-            </Menu.Item>
-            <Menu.Item>
-            <a onClick={()=>{history.push(`/zone/${deptId}/news/add?type=mdEditor`)}}>MD编辑器</a>
-            </Menu.Item>
-        </Menu>
-    );
-  
-    useEffect(()=>{
-      if(id) {
-        setIsSpin(true);
-        if (temp === tempEnum.zone) {
-          getMainList();
-        } else {
-          getCateList();
-        }
-        getHotList();
-      }
-    },[id])
+  useEffect(() => {
+    let uuid = getUniqueIdentifier()
+    let url = props.location.pathname
+    let platform = getBrowserPlatform()
+    let browser = getBrowserBrand()
+    let username = getUserName(props.current_user)
+    let remark = ` 操作系统：${platform};浏览器：${browser};`
+    setZoneVisits({ url, username, uuid, remark })
+  }, [])
 
-    function getMainList(){
-        getNewsAllList(id).then(result=>{
-          if(result){
-            let rows = result.data.rows;
-            setMainList(rows);
-            if (temp !== tempEnum.zone) {
-              selectCate(rows[0].id)
-            }
-            setTimeout(() => {
-              let ele = document.getElementById("menus");
-              if(ele){
-                let h = ele.clientHeight;
-                setMenuH(h>56);
-              }
-              setIsSpin(false);
-            }, 100);
-          }
-        }).catch(error=>{})
+  useEffect(() => {
+    if (id) {
+      setIsSpin(true);
+      getMainList();
     }
-    
-  function getCateList() {
-    const url = `${httpUrl}/cms/doc/open/zone/${id}/dirList`;
-    axios.get(url).then(result=>{
-      if(result){
+  }, [id])
+  
+  useEffect(()=>{
+    cateId && getDocById(cateId, 4, (data)=>{
+      setDocList(data)
+    }, (data)=>{setTotal(data)})
+  }, [cateId])
+
+  function getMainList() {
+    getNewsAllList(id).then(result => {
+      if (result) {
         let rows = result.data.rows;
         setMainList(rows);
-        // 隐藏判断原因：首页查看全部跳转过来后要默认选择指定的cateID而不是第一个
-        // if (temp !== tempEnum.zone) {
-          selectCate(cateId || (rows[0] && rows[0].id))
-        // }
-        setIsSpin(false);
       }
-    }).catch(error=>{})
+    }).finally(()=>{
+      setIsSpin(false)
+    })
   }
 
-    function getHotList(){
-        getNewsHotList(id,{
-        pageSize:15,pageNum:1
-        }).then(result=>{
-        if(result){
-            setHotList(result.data.rows);
-        }
-        }).catch(error=>{})
+  function getDocById() {
+    setIsSpin(true);
+    getSubDocList(cateId, { pageSize: 10, pageNum: pageNum, auditStatus: 1 }).then(result => {
+      if (result && result.data.rows) {
+        setDocList(result.data.rows);
+        setTotal(result.data.total)
+      }
+    }).finally(()=>{
+      setIsSpin(false);
+    })
+  }
+
+  const menu = (
+    <Menu>
+      <Menu.Item>
+        <a onClick={() => { history.push(`/zone/${deptId}/news/add?type=richEditor`) }}>富文本编辑器</a>
+      </Menu.Item>
+      <Menu.Item>
+        <a onClick={() => { history.push(`/zone/${deptId}/news/add?type=mdEditor`) }}>MD编辑器</a>
+      </Menu.Item>
+    </Menu>
+  );
+
+  const nsccTitle = (title, delay = 0.1, classname, emptyIndex) => <div className={`project-cate-title fadeInChar ${classname}`}>
+    {title && title.split("").map((char, index) => {
+      return (
+        <>
+          <span key={index} className="title-char" style={{ animationDelay: `${delay + index * 0.1}s` }}>
+            {char}
+          </span>
+          {emptyIndex && index === emptyIndex - 1 && <span className="title-char" style={{ width: "20px" }}></span>}
+        </>
+      )
     }
-    const nsccTitle = (title, delay=0.1, classname,emptyIndex)=> <div className={`project-cate-title fadeInChar ${classname}`}>
-        {title && title.split("").map((char, index) => {
-            return(
-                <>
-                    <span key={index} className="title-char" style={{ animationDelay: `${delay + index * 0.1}s` }}>
-                        {char}
-                    </span>
-                    {emptyIndex && index === emptyIndex-1 && <span className="title-char" style={{width:"20px"}}></span>}
-                </>
-            )
-        }
-        )}
-    </div>
-    return(
+    )}
+  </div>
+  return (
     <div className="customNews customPublic">
+      <div className='customNews_top'>
         <div className='titleButBox width1600'>
-            { nsccTitle(`${sectionCmsTitle}` + "动态全揽",0.1,"",4) }
-            {role && role.role !== "None" && 
-                <div className='createButs mt5'>
-                {role.role === "Member" ? <Button type="primary" ghost className='mr20'>
-                    <Link to={`/zone/${deptId}/news/self`}> 我的资讯</Link>
-                </Button>:""}
-                <Dropdown overlay={menu}><Button icon='plus' type="primary" ghost>新建</Button></Dropdown>
-                </div>
-            }
+          {nsccTitle(`${sectionCmsTitle}` + "动态全揽", 0.1, "", 4)}
+          {role && role.role !== "None" &&
+            <div className='createButs mt5'>
+              {role.role === "Member" ? <Button type="primary" ghost className='mr20'>
+                <Link to={`/zone/${deptId}/news/self`}> 我的资讯</Link>
+              </Button> : ""}
+              <Dropdown overlay={menu}><Button icon='plus' type="primary" ghost>新建</Button></Dropdown>
             </div>
-            {
-                mainList && mainList.length>0 &&
-                <ul className='customMenus width1600'>
-                    <li className={!cateId ?"active":""}>
-                        <Link to={`/zone/${deptId}/news`}><img src={require(`../../img/1${!cateId ? "w":"b"}.png`)} width={17}/>全部新闻</Link>
-                    </li>
-                    {mainList.map((i,k)=>{
-                        return <li className={cateId && cateId===String(i.id) ?"active":""}>
-                            <Link to={`/zone/${deptId}/news/${i.id}`}>
-                                <img src={cateId && cateId===String(i.id) ? require(`../../img/${k+2}w.png`) : require(`../../img/${k+2}b.png`)} width={17}/>
-                                {i.name}
-                            </Link>
-                        </li>
-                        })
-                    }
-                </ul>
+          }
+        </div>
+        {
+          mainList && mainList.length > 0 &&
+          <ul className='customMenus width1600'>
+            <li className={!cateId ? "active" : ""}>
+              <Link to={`/zone/${deptId}/news`}><img src={require(`../../img/1${!cateId ? "w" : "b"}.png`)} width={17} />全部新闻</Link>
+            </li>
+            {mainList.map((i, k) => {
+              return <li className={cateId && cateId === String(i.id) ? "active" : ""}>
+                <Link to={`/zone/${deptId}/news/${i.id}`}>
+                  <img src={cateId && cateId === String(i.id) ? require(`../../img/${k + 2}w.png`) : require(`../../img/${k + 2}b.png`)} width={17} />
+                  {i.name}
+                </Link>
+              </li>
+            })
             }
-        <Spin spinning={isSpin}>
-            {
-                cateId ? 
-                <div>111</div>
-                :
-                <div style={{minHeight:"400px"}}>
-                {
-                mainList && mainList.length > 0 && mainList.map((i,k)=>{
-                    return(
-                    i.cmsDocList && i.cmsDocList.length>0 ? 
-                    <NewsItem 
-                        list={i.cmsDocList} 
-                        index={k} 
-                        deptId={deptId}
-                        header={<div className="maintitle width1600">
-                            <span className="task-hide">
-                                <img src={TitleIcon} width={28} className='mr8'/>
-                                {nsccTitle(`${i.name}`,0.1,"") }
-                                <span className='subTitle'>{subTitle[k]}</span>
-                            </span>
-                            { i.cmsDocList && i.cmsDocList.length> 0 && <Link to={`/zone/${deptId}/news/${i.id}`} onClick={()=>{window.scrollTo(0,400)}}>查看更多<i class="iconfont icon-arrowRight font-16 ml5" /></Link> }
-                        </div>}
-                    />
-                    :
-                    <div style={{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",height:300}}>
-                    <img src={emptydata} alt="" width="230"/>
-                    <p className="font-15 color-grey-6 mt20">暂无数据~</p>
-                    </div>
-                    )
-                })
-                }
-                </div>
-            }
-            </Spin>
+          </ul>
+        }
+      </div>
+      <Spin spinning={isSpin}>
+        {
+          cateId ? <div className='docListBox'>
+            {docList && !!docList.length ? <div className='width1600'>
+              <NewItemsByCustom list={docList} deptId={deptId} showBtn={false} leftImg={true} className="main_card_item_whiteBk"/>
+              <Pagination current={pageNum} onChange={(p)=>{setPageNum(p)}} pageSize={10} total={total} hideOnSinglePage className="black-pagination center"/>
+            </div> : <Nodata _html="暂无数据" />}
+          </div> : <div style={{ minHeight: "400px" }}>
+              {mainList && mainList.length > 0 && <Fragment>
+                {group1.map((i, k) => {
+                  return <NewsItem
+                    list={i.cmsDocList}
+                    index={k}
+                    deptId={deptId}
+                    header={<div className="maintitle width1600">
+                      <span className="task-hide">
+                        <img src={TitleIcon} width={28} className='mr8' />
+                        {nsccTitle(`${i.name}`, 0.1, "")}
+                        <span className='subTitle'>{subTitle[k]}</span>
+                      </span>
+                      {i.cmsDocList && i.cmsDocList.length > 0 && <Link to={`/zone/${deptId}/news/${i.id}`}>查看更多<i class="iconfont icon-arrowRight font-16 ml5" /></Link>}
+                    </div>}
+                  />
+                })}
+                {group2 && !!group2.length && <div className='customNews_bottom_box'>
+                  <div className='customNews_bottom width1600'>
+                    {group2.map((i, k) => {
+                      return <div className='customNews_bottom_item'>
+                        <div className="maintitle">
+                          <span className="task-hide">
+                            {nsccTitle(`${i.name}`, 0.1, "")}
+                          </span>
+                          {i.cmsDocList && i.cmsDocList.length > 0 && <Link to={`/zone/${deptId}/news/${i.id}`}>查看更多<i class="iconfont icon-arrowRight font-16 ml5" /></Link>}
+                        </div>
+                        {i.cmsDocList && i.cmsDocList.length > 0 ? <NewItemsByCustom list={i.cmsDocList} deptId={deptId} range={[0, 4]} showBtn={false} /> : <Nodata _html="暂无数据" />}
+                      </div>
+                    })}
+                  </div>
+                </div>}
+              </Fragment>}
+            </div>
+        }
+      </Spin>
     </div>
-    )
+  )
 }
 export default NewsIndex;

src/forge/Information/Pages/homepage/component/newsByNSCC.jsx

@@ -113,7 +113,7 @@ function News(props) {
         {/* 第二个顺序栏目 */}
         {secondDir && <div className='secondDir_NSCC flex1 ml30'>
           <Divider type="vertical" style={{width: '3px', height: '17px', backgroundColor: "#466aff", marginBottom: '5px'}}/>
-          <Link to={`/zone/uos/news/${secondDir.id}`} onClick={()=>{window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name}</Link>
+          <Link to={`/zone/${key}/news/${secondDir.id}`} onClick={()=>{window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name}</Link>
           {docListBySecondDir.map(item=>{
             return <div className='docBySecondDir_NSCC mt15'>
               <p className='font-16 font-bd task-hide'>