diff --git a/src/forge/Information/Pages/custom/component/newsItem.jsx b/src/forge/Information/Pages/custom/component/newsItem.jsx index 2a54909c3..f57e01d07 100644 --- a/src/forge/Information/Pages/custom/component/newsItem.jsx +++ b/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{props.history.push(`/zone/${deptId}/newdetail/${item.id}`)}}> + list && list.length > 0 && list.map((item,k)=>{ + return (!range || (range && k>=range[0] && k + {leftImg &&
}
- {topImg} - {item.name} -

{item.summary}

+ {topImg &&
} +
+ {item.name} + {!showBtn && } +
+ +
{item.summary}
- {item.publishTime} + {moment(item.publishTime).format("YYYY-MM-DD")} {item.visits}
- {bottomImg} + {!!showBtn && 查看详情} + {bottomImg &&
}
- {rightImg && rightImg[k] &&
} + {rightImg &&
} }) - : -
暂无数据
) } +function NewsItem({list,index,deptId,header}){ + return( - index % 8 === 0 ?
- {header} -
-
}/> -
- -
-
- : - index % 8 === 1 ?
+ index % 5 === 0 ?
{header} -
+ {list && list.length > 0 ?
+ +
+ +
+
: } +
: + index % 5 === 1 ?
+ {header} + {list && list.length > 0 ?
-
}/> +
- -
+ +
-
-
: "111" +
: } + : + index % 5 === 2 ?
+ {header} + {list && list.length > 0 ?
+ +
: } +
: + index % 5 === 3 ?
+ {header} + {list && list.length > 0 ?
+ + +
: } +
:
+ {header} + {list && list.length > 0 ?
+
+ +
+
+ +
+
: } +
) } export default NewsItem; \ No newline at end of file diff --git a/src/forge/Information/Pages/custom/index.less b/src/forge/Information/Pages/custom/index.less index d977af2ff..f7ea14247 100644 --- a/src/forge/Information/Pages/custom/index.less +++ b/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); } diff --git a/src/forge/Information/Pages/custom/newsIndex.jsx b/src/forge/Information/Pages/custom/newsIndex.jsx index 8e5bda779..78a2943df 100644 --- a/src/forge/Information/Pages/custom/newsIndex.jsx +++ b/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 = ( - - - {history.push(`/zone/${deptId}/news/add?type=richEditor`)}}>富文本编辑器 - - - {history.push(`/zone/${deptId}/news/add?type=mdEditor`)}}>MD编辑器 - - - ); - - 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 = ( + + + { history.push(`/zone/${deptId}/news/add?type=richEditor`) }}>富文本编辑器 + + + { history.push(`/zone/${deptId}/news/add?type=mdEditor`) }}>MD编辑器 + + + ); + + const nsccTitle = (title, delay = 0.1, classname, emptyIndex) =>
+ {title && title.split("").map((char, index) => { + return ( + <> + + {char} + + {emptyIndex && index === emptyIndex - 1 && } + + ) } - const nsccTitle = (title, delay=0.1, classname,emptyIndex)=>
- {title && title.split("").map((char, index) => { - return( - <> - - {char} - - {emptyIndex && index === emptyIndex-1 && } - - ) - } - )} -
- return( + )} +
+ return (
+
- { nsccTitle(`${sectionCmsTitle}` + "动态全揽",0.1,"",4) } - {role && role.role !== "None" && -
- {role.role === "Member" ? :""} - -
- } + {nsccTitle(`${sectionCmsTitle}` + "动态全揽", 0.1, "", 4)} + {role && role.role !== "None" && +
+ {role.role === "Member" ? : ""} +
- { - mainList && mainList.length>0 && -
    -
  • - 全部新闻 -
    • - {mainList.map((i,k)=>{ - return
  • - - - {i.name} - -
    • - }) - } -
+ } +
+ { + mainList && mainList.length > 0 && +
    +
  • + 全部新闻 +
    • + {mainList.map((i, k) => { + return
  • + + + {i.name} + +
    • + }) } - - { - cateId ? -
    111
    - : -
    - { - mainList && mainList.length > 0 && mainList.map((i,k)=>{ - return( - i.cmsDocList && i.cmsDocList.length>0 ? - - - - {nsccTitle(`${i.name}`,0.1,"") } - {subTitle[k]} - - { i.cmsDocList && i.cmsDocList.length> 0 && {window.scrollTo(0,400)}}>查看更多 } -
    } - /> - : -
    - -

    暂无数据~

    -
    - ) - }) - } -
- } - + + } +
+ + { + cateId ?
+ {docList && !!docList.length ?
+ + {setPageNum(p)}} pageSize={10} total={total} hideOnSinglePage className="black-pagination center"/> +
: } +
:
+ {mainList && mainList.length > 0 && + {group1.map((i, k) => { + return + + + {nsccTitle(`${i.name}`, 0.1, "")} + {subTitle[k]} + + {i.cmsDocList && i.cmsDocList.length > 0 && 查看更多} +
} + /> + })} + {group2 && !!group2.length &&
+
+ {group2.map((i, k) => { + return
+
+ + {nsccTitle(`${i.name}`, 0.1, "")} + + {i.cmsDocList && i.cmsDocList.length > 0 && 查看更多} +
+ {i.cmsDocList && i.cmsDocList.length > 0 ? : } +
+ })} +
+
} + } + + } + - ) + ) } export default NewsIndex; \ No newline at end of file diff --git a/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx b/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx index 485d5ea09..0b7027a18 100644 --- a/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx +++ b/src/forge/Information/Pages/homepage/component/newsByNSCC.jsx @@ -113,7 +113,7 @@ function News(props) { {/* 第二个顺序栏目 */} {secondDir &&
- {window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name} + {window.scrollTo(0,450)}} className="font-18 font-bd">{secondDir.name} {docListBySecondDir.map(item=>{ return

diff --git a/src/forge/Information/img/custom/1.png b/src/forge/Information/img/custom/1.png new file mode 100644 index 000000000..f64c2fafd Binary files /dev/null and b/src/forge/Information/img/custom/1.png differ diff --git a/src/forge/Information/img/custom/2.png b/src/forge/Information/img/custom/2.png new file mode 100644 index 000000000..f0542de5b Binary files /dev/null and b/src/forge/Information/img/custom/2.png differ diff --git a/src/forge/Information/img/custom/4.png b/src/forge/Information/img/custom/4.png new file mode 100644 index 000000000..1ef3e5bcd Binary files /dev/null and b/src/forge/Information/img/custom/4.png differ diff --git a/src/forge/Information/img/custom/newBk1.png b/src/forge/Information/img/custom/newBk1.png new file mode 100644 index 000000000..8ab1f4749 Binary files /dev/null and b/src/forge/Information/img/custom/newBk1.png differ diff --git a/src/forge/Information/img/custom/newBk2.png b/src/forge/Information/img/custom/newBk2.png new file mode 100644 index 000000000..f18186fbf Binary files /dev/null and b/src/forge/Information/img/custom/newBk2.png differ diff --git a/src/forge/Information/img/custom/newBk3.png b/src/forge/Information/img/custom/newBk3.png new file mode 100644 index 000000000..c286de455 Binary files /dev/null and b/src/forge/Information/img/custom/newBk3.png differ diff --git a/src/forge/Information/img/custom/newBk4.png b/src/forge/Information/img/custom/newBk4.png new file mode 100644 index 000000000..18ffaa36c Binary files /dev/null and b/src/forge/Information/img/custom/newBk4.png differ diff --git a/src/forge/Information/img/custom/new_3_bk.png b/src/forge/Information/img/custom/new_3_bk.png new file mode 100644 index 000000000..4741708c9 Binary files /dev/null and b/src/forge/Information/img/custom/new_3_bk.png differ diff --git a/src/forge/Information/img/custom/new_4_bk.png b/src/forge/Information/img/custom/new_4_bk.png new file mode 100644 index 000000000..2fffedd57 Binary files /dev/null and b/src/forge/Information/img/custom/new_4_bk.png differ diff --git a/src/forge/Information/img/custom/new_5_bk.png b/src/forge/Information/img/custom/new_5_bk.png new file mode 100644 index 000000000..d6d32eaa6 Binary files /dev/null and b/src/forge/Information/img/custom/new_5_bk.png differ diff --git a/src/forge/Information/img/custom/new_6_bk.png b/src/forge/Information/img/custom/new_6_bk.png new file mode 100644 index 000000000..0ee74aaed Binary files /dev/null and b/src/forge/Information/img/custom/new_6_bk.png differ diff --git a/src/forge/Information/img/custom/titleBk1.png b/src/forge/Information/img/custom/titleBk1.png new file mode 100644 index 000000000..c2ad41429 Binary files /dev/null and b/src/forge/Information/img/custom/titleBk1.png differ diff --git a/src/forge/Information/img/custom/titleBk2.png b/src/forge/Information/img/custom/titleBk2.png new file mode 100644 index 000000000..b38e8ecef Binary files /dev/null and b/src/forge/Information/img/custom/titleBk2.png differ