NSCC专区首页
This commit is contained in:
谢思
parent
edcf8321b2
commit
dfa89d7b5c
|
|
@ -1462,6 +1462,10 @@ a.decoration {
|
|||
font-weight: 400
|
||||
}
|
||||
|
||||
.margin0-auto {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mt1 {
|
||||
margin-top: 1px
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2340181 */
|
||||
src: url('iconfont.woff2?t=1727340588188') format('woff2'),
|
||||
url('iconfont.woff?t=1727340588188') format('woff'),
|
||||
url('iconfont.ttf?t=1727340588188') format('truetype');
|
||||
src: url('iconfont.woff2?t=1757896728868') format('woff2'),
|
||||
url('iconfont.woff?t=1757896728868') format('woff'),
|
||||
url('iconfont.ttf?t=1757896728868') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,6 +13,194 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-tufaxingzhongdasuanlixuqiuyingjixiangying:before {
|
||||
content: "\e9a0";
|
||||
}
|
||||
|
||||
.icon-kuazhongxinxietongkeyanjisuanrenwutiaodu:before {
|
||||
content: "\e9a1";
|
||||
}
|
||||
|
||||
.icon-xingnengjizhunyupingce:before {
|
||||
content: "\e9a8";
|
||||
}
|
||||
|
||||
.icon-jiantou3:before {
|
||||
content: "\e9a5";
|
||||
}
|
||||
|
||||
.icon-jiantou21:before {
|
||||
content: "\e9a6";
|
||||
}
|
||||
|
||||
.icon-a-xiazai1:before {
|
||||
content: "\e9a7";
|
||||
}
|
||||
|
||||
.icon-binghangjisuankuangjia:before {
|
||||
content: "\e9aa";
|
||||
}
|
||||
|
||||
.icon-shouqi:before {
|
||||
content: "\e99f";
|
||||
}
|
||||
|
||||
.icon-zhankai1:before {
|
||||
content: "\e9a2";
|
||||
}
|
||||
|
||||
.icon-renwutiaoduguanli:before {
|
||||
content: "\e9a3";
|
||||
}
|
||||
|
||||
.icon-yigoushujuku:before {
|
||||
content: "\e9a4";
|
||||
}
|
||||
|
||||
.icon-shequissue:before {
|
||||
content: "\e99c";
|
||||
}
|
||||
|
||||
.icon-shequ-xuanzhong:before {
|
||||
content: "\e99d";
|
||||
}
|
||||
|
||||
.icon-shequ1:before {
|
||||
content: "\e99e";
|
||||
}
|
||||
|
||||
.icon-huanjingbianliang:before {
|
||||
content: "\e99b";
|
||||
}
|
||||
|
||||
.icon-liuliangkongzhi:before {
|
||||
content: "\e991";
|
||||
}
|
||||
|
||||
.icon-tingzhi:before {
|
||||
content: "\e993";
|
||||
}
|
||||
|
||||
.icon-qiangzhitingzhi:before {
|
||||
content: "\e995";
|
||||
}
|
||||
|
||||
.icon-zanting1:before {
|
||||
content: "\e99a";
|
||||
}
|
||||
|
||||
.icon-qidong1:before {
|
||||
content: "\e996";
|
||||
}
|
||||
|
||||
.icon-guanlianpeizhi:before {
|
||||
content: "\e994";
|
||||
}
|
||||
|
||||
.icon-shanchu9:before {
|
||||
content: "\e997";
|
||||
}
|
||||
|
||||
.icon-bianjipeizhi:before {
|
||||
content: "\e998";
|
||||
}
|
||||
|
||||
.icon-shilizhuce:before {
|
||||
content: "\e999";
|
||||
}
|
||||
|
||||
.icon-wangguanguanli:before {
|
||||
content: "\e98d";
|
||||
}
|
||||
|
||||
.icon-xiazaiYAML:before {
|
||||
content: "\e98f";
|
||||
}
|
||||
|
||||
.icon-huifu2:before {
|
||||
content: "\e990";
|
||||
}
|
||||
|
||||
.icon-zhongqi:before {
|
||||
content: "\e992";
|
||||
}
|
||||
|
||||
.icon-lianluzhuizong1:before {
|
||||
content: "\e98e";
|
||||
}
|
||||
|
||||
.icon-yincang3:before {
|
||||
content: "\e986";
|
||||
}
|
||||
|
||||
.icon-shoujihao:before {
|
||||
content: "\e987";
|
||||
}
|
||||
|
||||
.icon-xianshi1:before {
|
||||
content: "\e988";
|
||||
}
|
||||
|
||||
.icon-mima:before {
|
||||
content: "\e989";
|
||||
}
|
||||
|
||||
.icon-paixu:before {
|
||||
content: "\e98a";
|
||||
}
|
||||
|
||||
.icon-jiantou_xiangyou:before {
|
||||
content: "\e98b";
|
||||
}
|
||||
|
||||
.icon-a-fork1:before {
|
||||
content: "\e98c";
|
||||
}
|
||||
|
||||
.icon-dianzan1:before {
|
||||
content: "\e983";
|
||||
}
|
||||
|
||||
.icon-yonghuming:before {
|
||||
content: "\e984";
|
||||
}
|
||||
|
||||
.icon-youxiang2:before {
|
||||
content: "\e985";
|
||||
}
|
||||
|
||||
.icon-tongzhi1:before {
|
||||
content: "\e981";
|
||||
}
|
||||
|
||||
.icon-xinzeng:before {
|
||||
content: "\e982";
|
||||
}
|
||||
|
||||
.icon-a-fenzhi1:before {
|
||||
content: "\e980";
|
||||
}
|
||||
|
||||
.icon-yunxiazai:before {
|
||||
content: "\e97b";
|
||||
}
|
||||
|
||||
.icon-lunwen1:before {
|
||||
content: "\e97c";
|
||||
}
|
||||
|
||||
.icon-zhuanli2:before {
|
||||
content: "\e97d";
|
||||
}
|
||||
|
||||
.icon-jiantou2:before {
|
||||
content: "\e97e";
|
||||
}
|
||||
|
||||
.icon-jiantou-you-cuxiantiao:before {
|
||||
content: "\e97f";
|
||||
}
|
||||
|
||||
.icon-gongxianquequan:before {
|
||||
content: "\e979";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,335 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "45509718",
|
||||
"name": "突发性重大算力需求应急响应",
|
||||
"font_class": "tufaxingzhongdasuanlixuqiuyingjixiangying",
|
||||
"unicode": "e9a0",
|
||||
"unicode_decimal": 59808
|
||||
},
|
||||
{
|
||||
"icon_id": "45509716",
|
||||
"name": "跨中心协同科研计算任务调度",
|
||||
"font_class": "kuazhongxinxietongkeyanjisuanrenwutiaodu",
|
||||
"unicode": "e9a1",
|
||||
"unicode_decimal": 59809
|
||||
},
|
||||
{
|
||||
"icon_id": "45509717",
|
||||
"name": "性能基准与评测",
|
||||
"font_class": "xingnengjizhunyupingce",
|
||||
"unicode": "e9a8",
|
||||
"unicode_decimal": 59816
|
||||
},
|
||||
{
|
||||
"icon_id": "45509657",
|
||||
"name": "箭头",
|
||||
"font_class": "jiantou3",
|
||||
"unicode": "e9a5",
|
||||
"unicode_decimal": 59813
|
||||
},
|
||||
{
|
||||
"icon_id": "45509658",
|
||||
"name": "箭头2",
|
||||
"font_class": "jiantou21",
|
||||
"unicode": "e9a6",
|
||||
"unicode_decimal": 59814
|
||||
},
|
||||
{
|
||||
"icon_id": "45509659",
|
||||
"name": "下载 (1)",
|
||||
"font_class": "a-xiazai1",
|
||||
"unicode": "e9a7",
|
||||
"unicode_decimal": 59815
|
||||
},
|
||||
{
|
||||
"icon_id": "45509654",
|
||||
"name": "并行计算框架",
|
||||
"font_class": "binghangjisuankuangjia",
|
||||
"unicode": "e9aa",
|
||||
"unicode_decimal": 59818
|
||||
},
|
||||
{
|
||||
"icon_id": "45509663",
|
||||
"name": "收起",
|
||||
"font_class": "shouqi",
|
||||
"unicode": "e99f",
|
||||
"unicode_decimal": 59807
|
||||
},
|
||||
{
|
||||
"icon_id": "45509660",
|
||||
"name": "展开",
|
||||
"font_class": "zhankai1",
|
||||
"unicode": "e9a2",
|
||||
"unicode_decimal": 59810
|
||||
},
|
||||
{
|
||||
"icon_id": "45509661",
|
||||
"name": "任务调度管理",
|
||||
"font_class": "renwutiaoduguanli",
|
||||
"unicode": "e9a3",
|
||||
"unicode_decimal": 59811
|
||||
},
|
||||
{
|
||||
"icon_id": "45509664",
|
||||
"name": "异构数据库",
|
||||
"font_class": "yigoushujuku",
|
||||
"unicode": "e9a4",
|
||||
"unicode_decimal": 59812
|
||||
},
|
||||
{
|
||||
"icon_id": "45229517",
|
||||
"name": "社区issue",
|
||||
"font_class": "shequissue",
|
||||
"unicode": "e99c",
|
||||
"unicode_decimal": 59804
|
||||
},
|
||||
{
|
||||
"icon_id": "45229516",
|
||||
"name": "社区-选中",
|
||||
"font_class": "shequ-xuanzhong",
|
||||
"unicode": "e99d",
|
||||
"unicode_decimal": 59805
|
||||
},
|
||||
{
|
||||
"icon_id": "45229515",
|
||||
"name": "社区",
|
||||
"font_class": "shequ1",
|
||||
"unicode": "e99e",
|
||||
"unicode_decimal": 59806
|
||||
},
|
||||
{
|
||||
"icon_id": "44951992",
|
||||
"name": "环境变量",
|
||||
"font_class": "huanjingbianliang",
|
||||
"unicode": "e99b",
|
||||
"unicode_decimal": 59803
|
||||
},
|
||||
{
|
||||
"icon_id": "44779010",
|
||||
"name": "流量控制",
|
||||
"font_class": "liuliangkongzhi",
|
||||
"unicode": "e991",
|
||||
"unicode_decimal": 59793
|
||||
},
|
||||
{
|
||||
"icon_id": "44779009",
|
||||
"name": "停止",
|
||||
"font_class": "tingzhi",
|
||||
"unicode": "e993",
|
||||
"unicode_decimal": 59795
|
||||
},
|
||||
{
|
||||
"icon_id": "44779008",
|
||||
"name": "强制停止",
|
||||
"font_class": "qiangzhitingzhi",
|
||||
"unicode": "e995",
|
||||
"unicode_decimal": 59797
|
||||
},
|
||||
{
|
||||
"icon_id": "44779007",
|
||||
"name": "暂停",
|
||||
"font_class": "zanting1",
|
||||
"unicode": "e99a",
|
||||
"unicode_decimal": 59802
|
||||
},
|
||||
{
|
||||
"icon_id": "44778800",
|
||||
"name": "启动",
|
||||
"font_class": "qidong1",
|
||||
"unicode": "e996",
|
||||
"unicode_decimal": 59798
|
||||
},
|
||||
{
|
||||
"icon_id": "44778675",
|
||||
"name": "关联配置",
|
||||
"font_class": "guanlianpeizhi",
|
||||
"unicode": "e994",
|
||||
"unicode_decimal": 59796
|
||||
},
|
||||
{
|
||||
"icon_id": "44778677",
|
||||
"name": "删除",
|
||||
"font_class": "shanchu9",
|
||||
"unicode": "e997",
|
||||
"unicode_decimal": 59799
|
||||
},
|
||||
{
|
||||
"icon_id": "44778671",
|
||||
"name": "编辑配置",
|
||||
"font_class": "bianjipeizhi",
|
||||
"unicode": "e998",
|
||||
"unicode_decimal": 59800
|
||||
},
|
||||
{
|
||||
"icon_id": "44778674",
|
||||
"name": "实例注册",
|
||||
"font_class": "shilizhuce",
|
||||
"unicode": "e999",
|
||||
"unicode_decimal": 59801
|
||||
},
|
||||
{
|
||||
"icon_id": "44778684",
|
||||
"name": "网关管理",
|
||||
"font_class": "wangguanguanli",
|
||||
"unicode": "e98d",
|
||||
"unicode_decimal": 59789
|
||||
},
|
||||
{
|
||||
"icon_id": "44778683",
|
||||
"name": "下载YAML",
|
||||
"font_class": "xiazaiYAML",
|
||||
"unicode": "e98f",
|
||||
"unicode_decimal": 59791
|
||||
},
|
||||
{
|
||||
"icon_id": "44778682",
|
||||
"name": "恢复",
|
||||
"font_class": "huifu2",
|
||||
"unicode": "e990",
|
||||
"unicode_decimal": 59792
|
||||
},
|
||||
{
|
||||
"icon_id": "44778681",
|
||||
"name": "重启",
|
||||
"font_class": "zhongqi",
|
||||
"unicode": "e992",
|
||||
"unicode_decimal": 59794
|
||||
},
|
||||
{
|
||||
"icon_id": "44778292",
|
||||
"name": "链路追踪",
|
||||
"font_class": "lianluzhuizong1",
|
||||
"unicode": "e98e",
|
||||
"unicode_decimal": 59790
|
||||
},
|
||||
{
|
||||
"icon_id": "43884585",
|
||||
"name": "隐藏",
|
||||
"font_class": "yincang3",
|
||||
"unicode": "e986",
|
||||
"unicode_decimal": 59782
|
||||
},
|
||||
{
|
||||
"icon_id": "43884586",
|
||||
"name": "手机号",
|
||||
"font_class": "shoujihao",
|
||||
"unicode": "e987",
|
||||
"unicode_decimal": 59783
|
||||
},
|
||||
{
|
||||
"icon_id": "43884583",
|
||||
"name": "显示",
|
||||
"font_class": "xianshi1",
|
||||
"unicode": "e988",
|
||||
"unicode_decimal": 59784
|
||||
},
|
||||
{
|
||||
"icon_id": "43884584",
|
||||
"name": "密码",
|
||||
"font_class": "mima",
|
||||
"unicode": "e989",
|
||||
"unicode_decimal": 59785
|
||||
},
|
||||
{
|
||||
"icon_id": "43884582",
|
||||
"name": "排序",
|
||||
"font_class": "paixu",
|
||||
"unicode": "e98a",
|
||||
"unicode_decimal": 59786
|
||||
},
|
||||
{
|
||||
"icon_id": "43884581",
|
||||
"name": "箭头_向右",
|
||||
"font_class": "jiantou_xiangyou",
|
||||
"unicode": "e98b",
|
||||
"unicode_decimal": 59787
|
||||
},
|
||||
{
|
||||
"icon_id": "43884580",
|
||||
"name": "fork (1)",
|
||||
"font_class": "a-fork1",
|
||||
"unicode": "e98c",
|
||||
"unicode_decimal": 59788
|
||||
},
|
||||
{
|
||||
"icon_id": "43884589",
|
||||
"name": "点赞",
|
||||
"font_class": "dianzan1",
|
||||
"unicode": "e983",
|
||||
"unicode_decimal": 59779
|
||||
},
|
||||
{
|
||||
"icon_id": "43884587",
|
||||
"name": "用户名",
|
||||
"font_class": "yonghuming",
|
||||
"unicode": "e984",
|
||||
"unicode_decimal": 59780
|
||||
},
|
||||
{
|
||||
"icon_id": "43884588",
|
||||
"name": "邮箱",
|
||||
"font_class": "youxiang2",
|
||||
"unicode": "e985",
|
||||
"unicode_decimal": 59781
|
||||
},
|
||||
{
|
||||
"icon_id": "43788877",
|
||||
"name": "通知",
|
||||
"font_class": "tongzhi1",
|
||||
"unicode": "e981",
|
||||
"unicode_decimal": 59777
|
||||
},
|
||||
{
|
||||
"icon_id": "43788876",
|
||||
"name": "新增",
|
||||
"font_class": "xinzeng",
|
||||
"unicode": "e982",
|
||||
"unicode_decimal": 59778
|
||||
},
|
||||
{
|
||||
"icon_id": "39410543",
|
||||
"name": "分支 (1)",
|
||||
"font_class": "a-fenzhi1",
|
||||
"unicode": "e980",
|
||||
"unicode_decimal": 59776
|
||||
},
|
||||
{
|
||||
"icon_id": "42234576",
|
||||
"name": "云下载",
|
||||
"font_class": "yunxiazai",
|
||||
"unicode": "e97b",
|
||||
"unicode_decimal": 59771
|
||||
},
|
||||
{
|
||||
"icon_id": "42234575",
|
||||
"name": "论文",
|
||||
"font_class": "lunwen1",
|
||||
"unicode": "e97c",
|
||||
"unicode_decimal": 59772
|
||||
},
|
||||
{
|
||||
"icon_id": "42234574",
|
||||
"name": "专利",
|
||||
"font_class": "zhuanli2",
|
||||
"unicode": "e97d",
|
||||
"unicode_decimal": 59773
|
||||
},
|
||||
{
|
||||
"icon_id": "42234573",
|
||||
"name": "箭头",
|
||||
"font_class": "jiantou2",
|
||||
"unicode": "e97e",
|
||||
"unicode_decimal": 59774
|
||||
},
|
||||
{
|
||||
"icon_id": "42234572",
|
||||
"name": "箭头-右-粗线条",
|
||||
"font_class": "jiantou-you-cuxiantiao",
|
||||
"unicode": "e97f",
|
||||
"unicode_decimal": 59775
|
||||
},
|
||||
{
|
||||
"icon_id": "41876673",
|
||||
"name": "贡献确权",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -55,10 +55,9 @@ function PublicBanner(props){
|
|||
<div className="zone_content">
|
||||
{!isNSCC && <p className="main_t">{data.mainTitle}</p>}
|
||||
{isNSCC && <Fragment>
|
||||
<img src={require('../img/new.png').default} alt='' width={158}/>
|
||||
<p className="main_t_nscc">
|
||||
<img src={require('../img/new.png').default} alt='' width={115}/>
|
||||
<p className="main_t_nscc mt5 pb10">
|
||||
<span className='title_n_1'>{data.mainTitle}</span>
|
||||
<span className='font-25'> /SUPERCOMPUTING</span>
|
||||
</p>
|
||||
</Fragment>}
|
||||
<p className="sub_t" dangerouslySetInnerHTML={{ __html: data.subTitle }}></p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
import React , { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getDirListById, getSubDocList } from '../../../api';
|
||||
import { Badge, Col, Divider, Icon, Row } from 'antd';
|
||||
import dirpng from '../image/new3.png'
|
||||
import new4 from '../image/new4.png';
|
||||
import new5 from '../image/new5.png';
|
||||
import new6 from '../image/new6.png';
|
||||
import new7 from '../image/new7.png';
|
||||
import new8 from '../image/new8.png';
|
||||
import new9 from '../image/new9.png';
|
||||
import new10 from '../image/new10.png';
|
||||
import new11 from '../image/new11.png';
|
||||
import new12 from '../image/new12.png';
|
||||
import new13 from '../image/new13.png';
|
||||
import '../index.scss';
|
||||
import Nodata from '../../../../Nodata';
|
||||
import moment from 'moment';
|
||||
|
||||
function News(props) {
|
||||
const {data} = props
|
||||
const {key, homepageCmsTitle, id} = data || {};
|
||||
const logoByName = {
|
||||
"智慧城市OS": new4,
|
||||
"智慧交通OS": new5,
|
||||
"智慧建设OS": new6,
|
||||
"机器人OS": new7,
|
||||
"智能家居OS": new8,
|
||||
"桌面OS": new9,
|
||||
"服务器OS": new10,
|
||||
"移动智能终端OS": new11,
|
||||
"嵌入式及物联网OS": new12,
|
||||
"云OS": new13
|
||||
}
|
||||
const [dirList, setDirList] = useState([]);
|
||||
const firstDir = dirList[0];
|
||||
const secondDir = dirList[1];
|
||||
const dirs = dirList.slice(2)
|
||||
|
||||
// const rows = Math.ceil(dirs.length / 6);
|
||||
const [docListByFirstDir, setDocListByFirstDir] = useState([]);
|
||||
const [docListBySecondDir, setDocListBySecondDir] = useState([]);
|
||||
const [docListByDir, setDocListByDir] = useState([]);
|
||||
const [activeDirId, setActiveDirId] = useState(undefined);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
useEffect(()=>{
|
||||
id && getDirListById(id).then(res=>{
|
||||
if(res){
|
||||
const rows = res.data.rows
|
||||
setDirList(rows);
|
||||
// 获取第一个栏目的第一条文章
|
||||
rows[0] && getDocById(rows[0].id, 4, (data)=>{
|
||||
setDocListByFirstDir(data)
|
||||
})
|
||||
// 获取第2个栏目的第一条文章
|
||||
rows[1] && getDocById(rows[1].id, 3, (data)=>{
|
||||
setDocListBySecondDir(data)
|
||||
})
|
||||
rows[2] && setActiveDirId(rows[2].id)
|
||||
}
|
||||
})
|
||||
}, [id])
|
||||
|
||||
useEffect(()=>{
|
||||
activeDirId && getDocById(activeDirId, 4, (data)=>{
|
||||
setDocListByDir(data)
|
||||
}, (data)=>{setTotal(data)})
|
||||
}, [activeDirId])
|
||||
|
||||
// 根据招聘专栏的id获取其栏目下的招聘文章
|
||||
function getDocById(dirId, pageSize=10, setData, setTotal1){
|
||||
getSubDocList(dirId,{pageSize:pageSize,pageNum:1,auditStatus:1}).then(result=>{
|
||||
if(result && result.data.rows){
|
||||
let rows = result.data.rows;
|
||||
setData(rows);
|
||||
setTotal1 && setTotal1(result.data.total)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const renderItems = () => {
|
||||
const itemsPerRow = 6;
|
||||
let rendered = [];
|
||||
let currentRow = [];
|
||||
|
||||
dirs.forEach((item, index) => {
|
||||
|
||||
// 添加项目到当前行
|
||||
currentRow.push(
|
||||
<div key={item.id} className="center pointer mb20 n_1_dir" onClick={()=>{setActiveDirId(item.id)}}>
|
||||
<img src={logoByName[item.name] || new4} width={86}/>
|
||||
<p className={activeDirId === item.id && "activeDir pb3"}>{item.name}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
// 如果达到每行项目数或是最后一个项目
|
||||
if ((index + 1) % itemsPerRow === 0 || index === dirs.length - 1) {
|
||||
// 将当前行添加到渲染列表
|
||||
rendered = rendered.concat(currentRow);
|
||||
|
||||
if (currentRow.some(item => item.key === activeDirId?.toString())) {
|
||||
rendered.push(
|
||||
<div className=' mt30 pl15 pr15' key="doc" style={{flex: "0 0 100%", overflow: 'hidden'}}>
|
||||
<div className='df wrap between'>
|
||||
{docListByDir.map(item=>{
|
||||
return <div className='docDetailByNews_1 mb20'>
|
||||
<Link to={`/zone/${key}/newdetail/${item.id}`} className="font-15">
|
||||
<Badge color="#466AFF"/>
|
||||
<span className='pl5'>{item.name}</span>
|
||||
</Link>
|
||||
<p className='task-hide color777'>{item.summary}</p>
|
||||
</div>
|
||||
})}
|
||||
{!docListByDir.length && <div className='mb20 pl40 font-15'>暂无数据~</div>}
|
||||
</div>
|
||||
{total > 4 && <div className='align'><Link to={`/zone/uos/news/${activeDirId}`} onClick={()=>{window.scrollTo(0,450)}} className="color-blue font-15">查看更多<i className='iconfont icon-jiantou1 ml10 font-12'></i></Link></div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// 重置当前行
|
||||
currentRow = [];
|
||||
}
|
||||
});
|
||||
return rendered;
|
||||
};
|
||||
|
||||
return <div className='news_1_bg_NSCC' id="nscc_home3">
|
||||
<div className='width1200 pt50 pb60'>
|
||||
<p className='font-bd font-30 mb50 align task-hide'>{homepageCmsTitle}</p>
|
||||
<div className='df mb40'>
|
||||
{/* 第一个顺序栏目 */}
|
||||
{firstDir && <div className='firstDir_NSCC'>
|
||||
{/* 第一篇文章 */}
|
||||
{docListByFirstDir[0] && <div className='pointer firstDoc'>
|
||||
<img src={docListByFirstDir[0].headImg} className='firstDoc_Img'/>
|
||||
<div className='firstDocName'>
|
||||
<p className='pb10'><Link to={`/zone/${key}/newdetail/${docListByFirstDir[0].id}`} className="font-16 color-white">{docListByFirstDir[0].name}</Link></p>
|
||||
<span className="font-15 color-white pt10" style={{borderTop: '2px solid #466aff'}}>{moment(docListByFirstDir[0].publishTime).format('MM.DD')}</span>
|
||||
</div>
|
||||
</div>}
|
||||
{docListByFirstDir.length > 1 && docListByFirstDir.slice(1).map(item=>{
|
||||
return <div className='clearfix ml25 mr25 mt20 docBox_o' key={item.id}>
|
||||
<Link to={`/zone/${key}/newdetail/${item.id}`} className="font-16 color020">{item.name}<i className='iconfont icon-jiantou3 font-14 ml5'></i></Link>
|
||||
<span className="font-15 fr color5d6">{moment(item.publishTime).format('YYYY-MM-DD')}</span>
|
||||
<Divider dashed className="mt5"/>
|
||||
</div>
|
||||
})}
|
||||
</div>}
|
||||
{/* 第二个顺序栏目 */}
|
||||
{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>
|
||||
{docListBySecondDir.map(item=>{
|
||||
return <div className='docBySecondDir_NSCC mt15'>
|
||||
<p className='font-16 font-bd task-hide'>
|
||||
<Link to={`/zone/${key}/newdetail/${item.id}`} onClick={()=>{window.scrollTo(0,450)}}>{item.name}</Link>
|
||||
</p>
|
||||
<div className='color5d6 font-14 mt5 mb12'>
|
||||
{item.summary}
|
||||
</div>
|
||||
<Link to={`/zone/${key}/newdetail/${item.id}`} className="font-14 color-blue">查看详情<i className='iconfont icon-jiantou21 font-12 ml5'></i></Link>
|
||||
</div>
|
||||
})}
|
||||
{docListBySecondDir && !docListBySecondDir.length && <div style={{margin: '0 auto', maxHeight: '230px'}}><Nodata small _html="暂无数据"/></div>}
|
||||
</div>}
|
||||
</div>
|
||||
{/* {dirs && !!dirs.length && <div className='df wrap backWhite pt30 pb15 pl10 pr10'>
|
||||
{renderItems()}
|
||||
</div>} */}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
export default News;
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import '../index.scss';
|
||||
import { getProjectListByScore, getProjectsTypeLists } from '../../../api';
|
||||
import { Carousel, Divider, Pagination, Spin } from 'antd';
|
||||
import Nodata from '../../../../Nodata';
|
||||
import Slider from 'react-slick';
|
||||
|
||||
function TypeCarousel({pageSize=4, list=[], typeId, onClick}) {
|
||||
const setting = {
|
||||
prevArrow: <img src={require('../image/left.png')} alt=''/>,
|
||||
nextArrow: <img src={require('../image/right.png')} alt=''/>,
|
||||
afterChange: (currentSlide)=>{onClick(list[currentSlide*pageSize].id)}
|
||||
}
|
||||
const pages = []
|
||||
for (let i = 0; i < Math.ceil(list.length / pageSize); i++) {
|
||||
const start = i * pageSize;
|
||||
const end = start + pageSize;
|
||||
pages.push(list.slice(start, end));
|
||||
}
|
||||
return <Slider {...setting} className='mb60'>
|
||||
{pages.map((page, index)=>{
|
||||
return <div key={index} className='center'>
|
||||
<div className='flexCenter align typeCarouselByNSCC'>
|
||||
{page.map((item, i) => {
|
||||
const order = index*pageSize+i
|
||||
const iconName = {
|
||||
"并行计算框架": "icon-binghangjisuankuangjia",
|
||||
"异构数据库": "icon-yigoushujuku",
|
||||
"性能基准与评测": "icon-xingnengjizhunyupingce",
|
||||
"任务调度管理": "icon-renwutiaoduguanli",
|
||||
1: "icon-binghangjisuankuangjia",
|
||||
2: "icon-yigoushujuku",
|
||||
3: "icon-xingnengjizhunyupingce",
|
||||
4: "icon-renwutiaoduguanli"
|
||||
}
|
||||
return <div key={i} className={`proTypeBox df baseline ml25 mr25 pointer ${typeId === item.id && "active"}`} onClick={() => { onClick(item.id) }}>
|
||||
{/* 项目 */}
|
||||
{/* <span className={`p_1_icon icon${i} mr5`}></span> */}
|
||||
<i className={`iconfont ${iconName[item.name] || iconName[i+1]} mr10 font-15`}></i>
|
||||
<span className='font-16 font-bd task-hide' title={item.name}>{item.name}</span>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
</Slider>
|
||||
}
|
||||
|
||||
function Project({ data }) {
|
||||
const { id, homepageProjectTitle } = data || {};
|
||||
const [typeList, setTypeList] = useState([]);
|
||||
const [typeId, setTypeId] = useState(undefined);
|
||||
const [lists, setLists] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [total, setTotal] = useState(0);
|
||||
const pages = [];
|
||||
|
||||
useEffect(() => {
|
||||
id && getProjectsTypeLists(id, {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
}).then(result => {
|
||||
if (result) {
|
||||
const rows = result.data.rows;
|
||||
rows[0] && setTypeId(rows[0].id)
|
||||
setTypeList(rows);
|
||||
}
|
||||
}).catch(() => { })
|
||||
}, [id])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeId) {
|
||||
setLoading(true);
|
||||
getProjectListByScore(id, {
|
||||
pageNum: page,
|
||||
pageSize: 9,
|
||||
projectTypeId: typeId
|
||||
}).then(result => {
|
||||
if (result) {
|
||||
setLists(result.data.rows);
|
||||
setTotal(result.data.total);
|
||||
setLoading(false);
|
||||
}
|
||||
}).catch(() => { })
|
||||
}
|
||||
}, [id, typeId, page])
|
||||
|
||||
const listPerPage = 6;
|
||||
for (let i = 0; i < Math.ceil(total / listPerPage); i++) {
|
||||
const start = i * listPerPage;
|
||||
const end = start + listPerPage;
|
||||
pages.push(lists.slice(start, end));
|
||||
}
|
||||
|
||||
const projectDetail = (className="online_detail", i, index, length) => {
|
||||
const { extra: { commitCount, contributorsCount, lastWeekScore, scoreChange } } = i || {}
|
||||
return <div className={`${className} ${className === "second_detail" && index <3 && index<length-1 && 'pb30'} ${index === length && 'noBor'}`} key={i.id} onClick={() => window.open(i.projectURL)}>
|
||||
<div className='clearfix'>
|
||||
<span className='font-bd font-16 pointer'>{i.projectProperties && i.projectProperties.name}</span>
|
||||
{className === "online_detail" && <img src={require(`../image/top${index+1}.png`)} alt='' width="60px" className='fr'/>}
|
||||
</div>
|
||||
<div className="task-hide-2 mt5 color5d6 mb12">
|
||||
{i.projectProperties.description || "暂无描述"}
|
||||
</div>
|
||||
<div style={{ minHeight: 46 }}>
|
||||
<ul className="pd_tag_NSCC pb15 df wrap">
|
||||
{i.projectProperties.language && <li className='font-13 mr10 mt5'>{i.projectProperties.language}</li>}
|
||||
{
|
||||
i.projectProperties && i.projectProperties.topics &&
|
||||
i.projectProperties.topics.split(",").map(t => {
|
||||
return (
|
||||
<li className='font-13 mr10 mt5'>{t}</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<p className='flexCenter between'>
|
||||
<div className='font-15 font-bd'>
|
||||
<span className='color5d6 mr5 font-14 font-n'>开发者</span>{contributorsCount || 0}
|
||||
<Divider type="vertical" style={{ margin: '0 15px' }} />
|
||||
<span className='color5d6 mr5 font-14 font-n'>历史提交总量</span>{commitCount || 0}
|
||||
<Divider type="vertical" style={{ margin: '0 15px' }} />
|
||||
<span className='color5d6 mr5 font-14 font-n'>活跃度</span>{lastWeekScore || 0}
|
||||
</div>
|
||||
{!!scoreChange && <span className='font-18 font-bd fr'>
|
||||
<span className='mr10' style={{ fontFamily: "YouSheBiaoTiHei", color: '#495BA2' }}>较上周</span>
|
||||
<span className={scoreChange > 0 ? 'color-red' : "color-green"}>{scoreChange > 0 ? `+${scoreChange}` : scoreChange}</span>
|
||||
</span>}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
return <div className='project_1_bg_NSCC' id="nscc_home4">
|
||||
<div className='project_1 width1200 pt50 pb60'>
|
||||
<p className='font-bd font-30 mb50 align task-hide'>{homepageProjectTitle}</p>
|
||||
<TypeCarousel pageSize={5} list={typeList} typeId={typeId} onClick={(id)=>{setTypeId(id); setPage(1)}}/>
|
||||
<Spin spinning={loading}>
|
||||
<div className='df gap20'>
|
||||
{lists.slice(0, 3).map((i, index)=>{
|
||||
return projectDetail("online_detail", i, index, 3)
|
||||
})}
|
||||
</div>
|
||||
{lists.length > 3 && <div className='df second_detailBox mt30 wrap'>
|
||||
{lists.slice(3).map((i, index)=>{
|
||||
return projectDetail("second_detail", i, index, lists.slice(4).length)
|
||||
})}
|
||||
</div>}
|
||||
<Pagination pageSize={9} total={total} hideOnSinglePage={true} current={page} onChange={(page)=>{setPage(page)}} className='center mt30'/>
|
||||
{!loading && lists.length === 0 && <Nodata _html="暂无数据" />}
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
export default Project;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import React from 'react';
|
||||
import Slider from 'react-slick';
|
||||
|
||||
/* 分组函数，不补位 */
|
||||
const groupProjects = (list, size = 4) => {
|
||||
const groups = [];
|
||||
for (let i = 0; i < list.length; i += size) {
|
||||
groups.push(list.slice(i, i + size));
|
||||
}
|
||||
return groups;
|
||||
};
|
||||
|
||||
export default function projectVerticalSlider({
|
||||
projectList,
|
||||
}) {
|
||||
const groups = groupProjects(projectList, 4);
|
||||
|
||||
const settings = {
|
||||
vertical: true,
|
||||
verticalSwiping: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
infinite: groups.length > 1, // 只有多页才允许循环
|
||||
arrows: false,
|
||||
dots: false,
|
||||
};
|
||||
|
||||
/* 单页渲染 */
|
||||
const renderPage = (pageProjects, baseIndex) => (
|
||||
<div className="page_NSCC" key={baseIndex}>
|
||||
<div className="df wrap between" style={{width: '100%'}}>
|
||||
{pageProjects.map((item, idx) => {
|
||||
const globalIndex = baseIndex + idx;
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`s_p_detail_NSCC df between mb25 ${(idx + 1) % 2 === 0 ? 'mt-15' : ''}`}
|
||||
>
|
||||
<span
|
||||
className={`font-14 s_p_d_order align s_p_d_order${
|
||||
globalIndex + 1
|
||||
}`}
|
||||
>
|
||||
课题{globalIndex + 1}
|
||||
</span>
|
||||
<p className="color131 font-16 task-hide">{item.name}</p>
|
||||
{item.responsibleCompany && (
|
||||
<div className="task-hide-2 color5d6 breadk-all">
|
||||
{item.responsibleCompany}
|
||||
</div>
|
||||
)}
|
||||
<p className="color828 font-13">{item.projectLeader}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
/* 不足 4 个时不走轮播 */
|
||||
if (groups.length <= 1) {
|
||||
return <>{renderPage(projectList, 0)}</>;
|
||||
}
|
||||
|
||||
return <Slider {...settings} className='flex1'>{groups.map((g, i) => renderPage(g, i * 4))}</Slider>;
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import React , { Fragment, useEffect, useState } from 'react';
|
||||
import { getSourceList, getSourceZoneList } from '../../../api';
|
||||
import png from '../image/source2.png'
|
||||
import { Divider, Pagination, Spin } from 'antd';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Nodata from '../../../../Nodata';
|
||||
import '../index.scss';
|
||||
|
||||
function Source({data}) {
|
||||
const {id, key, homepageResourceTitle="资源发布"} = data || {};
|
||||
const [ chooseZoneId , setChooseZoneId ] = useState(undefined);
|
||||
const [ zoneList , setZoneList ] = useState([]);
|
||||
const [ sourceList , setSourceList ] = useState([]);
|
||||
const [ total , setTotal ] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [ isSpin , setIsSpin ] = useState(true);
|
||||
|
||||
useEffect(()=>{
|
||||
id && getSourceZoneList(id).then(response=>{
|
||||
if(response && response.data){
|
||||
const rows = response.data.rows;
|
||||
rows[0] && setChooseZoneId(rows[0].id)
|
||||
setZoneList(rows);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
},[id])
|
||||
|
||||
useEffect(()=>{
|
||||
if(chooseZoneId){
|
||||
setIsSpin(true);
|
||||
getSourceList({
|
||||
id,pageSize:9,pageNum:page,domainId:chooseZoneId
|
||||
}).then(response=>{
|
||||
if(response){
|
||||
setSourceList(response.data.rows);
|
||||
setTotal(response.data.total);
|
||||
setIsSpin(false);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
},[chooseZoneId, page])
|
||||
|
||||
return <div className='source_1_bg_NSCC' id='nscc_home5'>
|
||||
<div className='width1200 pt50 pb60'>
|
||||
<p className='font-bd font-36 mb50 task-hide center'>{homepageResourceTitle}</p>
|
||||
<div className='df align'>
|
||||
{zoneList.slice(0,4).map((item, index)=>{
|
||||
return <Fragment>
|
||||
<div className={`pointer edu-txt-left`} onClick={()=>{setChooseZoneId(item.id);}} style={{flex: '25%'}}>
|
||||
<p className={`font-20 font-bd ${chooseZoneId === item.id ? "active color-blue" : "color181"}`}>{item.name}</p>
|
||||
<div className='task-hide-2 font-14 color131 mt5'>{item.introduction || '暂无描述，待补充'}</div>
|
||||
</div>
|
||||
{index < 3 && <Divider type="vertical" dashed style={{borderColor: '#92a4c98f', margin: '10px 25px 5px', height: '85px'}}/>}
|
||||
</Fragment>
|
||||
})}
|
||||
</div>
|
||||
<Spin spinning={isSpin} style={{minHeight: '300px'}}>
|
||||
<div className='df wrap gap20'>
|
||||
{sourceList.map(i => {
|
||||
const time = i.updateTime || i.createTime
|
||||
return <div className='s_1_souce_NSCC mt30'>
|
||||
<Link to={`/zone/${key}/source/${i.id}`}>
|
||||
<div className='flexCenter between'>
|
||||
<span className='souce_icon_box'>
|
||||
<img src={require("../image/source6.png")} width={25} className='normalImg' />
|
||||
<img src={require("../image/source7.png")} width={25} className='hoverImg' />
|
||||
</span>
|
||||
<span className='color-blue'>
|
||||
<img src={require("../image/source8.png")} width={16} className='normalImg mb5 mr5' />
|
||||
<img src={require("../image/source9.png")} width={16} className='hoverImg mb5 mr5' />
|
||||
下载</span>
|
||||
</div>
|
||||
<p className='task-hide font-16 font-bd color181 mt15'>{i.name}<i className='iconfont icon-jiantou3 font-13 ml10'></i></p>
|
||||
<p className="task-hide-2 color5d6 mt10">{i.summary}</p>
|
||||
</Link>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
<Pagination pageSize={9} total={total} hideOnSinglePage={true} current={page} onChange={(page)=>{setPage(page)}} className='center mt30'/>
|
||||
<div>
|
||||
{!isSpin && !sourceList.length && <Nodata _html="暂无数据"/>}
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
export default Source;
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { getSpecialProjectDetail, getSpecialProjectList, getSpecialProjectTypeList, getImage, getSpecialReportList } from '../../../api';
|
||||
import { Col, Divider, Icon, Row, Tag } from 'antd';
|
||||
import Nodata from '../../../../Nodata';
|
||||
import '../index.scss';
|
||||
import ProjectVerticalSlider from './projectVerticalSlider';
|
||||
function SpecialProjects({ data }) {
|
||||
const { key, homepageSpecialProjectTitle, id } = data || {};
|
||||
const [typeList, setTypeList] = useState([]);
|
||||
const [typeId, setTypeId] = useState(undefined);
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const [selectedItem, setSelectedItem] = useState(null);
|
||||
const [projectDetail, setProjectDetail] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
id && getSpecialProjectTypeList(id, {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
}).then(res => {
|
||||
if (res) {
|
||||
const rows = res.data.rows;
|
||||
rows[0] && setTypeId(rows[0].id)
|
||||
setTypeList(rows);
|
||||
}
|
||||
})
|
||||
}, [id])
|
||||
|
||||
useEffect(() => {
|
||||
typeId && getSpecialProjectList(id, typeId).then(res => {
|
||||
if (res) {
|
||||
const rows = res.data.rows;
|
||||
// rows[0] && setTypeId(rows[0].id)
|
||||
setProjectList(rows);
|
||||
}
|
||||
})
|
||||
}, [typeId])
|
||||
|
||||
async function getRelevancyList(id, type, pageSize = 5) {
|
||||
const res = await getSpecialProjectDetail(id, {
|
||||
type,
|
||||
pageNum: 1,
|
||||
pageSize
|
||||
});
|
||||
return res.data;
|
||||
}
|
||||
|
||||
async function getRelevancyListByReport(id, pageSize = 5) {
|
||||
const res = await getSpecialReportList({
|
||||
specialProjectId: id,
|
||||
pageNum: 1,
|
||||
pageSize
|
||||
});
|
||||
return res.data;
|
||||
}
|
||||
|
||||
const showMore = (type, isShowAll) => {
|
||||
return <p className='center color-blue mb10'>
|
||||
<a onClick={async () => {
|
||||
const data = type === "REPORT" ? await getRelevancyListByReport(selectedItem, isShowAll ? 5 : 1000) : await getRelevancyList(selectedItem, type, isShowAll ? 5 : 1000);
|
||||
const detail = {
|
||||
...projectDetail
|
||||
}
|
||||
detail[type] = data
|
||||
setProjectDetail(detail);
|
||||
}}>{isShowAll ? '收起' : '展开'}<Icon type={isShowAll ? "up" : "down"} className="ml5" /></a>
|
||||
</p>
|
||||
}
|
||||
|
||||
|
||||
return <div className='specialProjects_NSCC' id='nscc_home2'>
|
||||
<div className='width1200 pt50'>
|
||||
<p className='font-bd font-30 mb70 align task-hide'>{homepageSpecialProjectTitle}</p>
|
||||
<div className='df mb60' style={{position: 'relative', zIndex: 1}}>
|
||||
<img src={require('../image/bkImg4.png').default} alt='' width={635} style={{position: 'absolute', left: '-130px', zIndex: -1}}/>
|
||||
<div className='specialProjectTypeBox mt15'>
|
||||
{typeList.map((item, i) => {
|
||||
return <div key={i} className={`proTypeBox_NSCC ${typeId === item.id && "active"}`}>
|
||||
<p className={`mb15 FlexAJ`} onClick={() => { setTypeId(item.id) }}>
|
||||
<span className={`flex1 task-hide font-18 color131 ${typeId === item.id ? "font-20 font-bd" : "pointer"}`}>{item.name}</span>
|
||||
{typeId !== item.id && <i className={`iconfont icon-shouqi ml40 color82880 pointer`}></i>}
|
||||
</p>
|
||||
{typeId === item.id && item.introduction && <div className='desc_spt mb30' dangerouslySetInnerHTML={{__html: item.introduction}}>
|
||||
</div>}
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
<ProjectVerticalSlider
|
||||
projectList={projectList}
|
||||
/>
|
||||
{!projectList.length && <div className='margin0-auto'><Nodata _html="暂无数据"/></div>}
|
||||
</div>
|
||||
<img src={require('../image/bkImg3.png').default} alt='' width={1300} style={{marginLeft: '-50px'}}/>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
export default SpecialProjects;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import React , { useEffect, useState } from 'react';
|
||||
import { getHomePageList } from '../../../api';
|
||||
import { Card, Carousel } from 'antd';
|
||||
import '../index.scss';
|
||||
import Nodata from '../../../../Nodata';
|
||||
import Slider from 'react-slick';
|
||||
|
||||
function Member({data, subTitle}) {
|
||||
const {id, key, homepageMemberTitle} = data || {};
|
||||
const [typeList, setTypeList] = useState([]);
|
||||
const [typeId, setTypeId] = useState(undefined);
|
||||
const [ vipsMap , setVipsMap ] = useState({});
|
||||
const [ vipList , setVipList ] = useState([]);
|
||||
const [current, setCurrent] = useState(0);
|
||||
const list = vipsMap[typeId] || []
|
||||
const pages = [];
|
||||
|
||||
useEffect(()=>{
|
||||
id && getHomePageList(id).then(response=>{
|
||||
if(response && response.data){
|
||||
setVipList(response.data.rows);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
},[id])
|
||||
|
||||
const settings = {
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: 3, // 可见 3
|
||||
slidesToScroll: 1, // 滑 1
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
pauseOnHover: true,
|
||||
centerMode: false
|
||||
};
|
||||
|
||||
return <div className='vip_1_bg_NSCC pt50' id='nscc_home6'>
|
||||
<div className='width1200'>
|
||||
<p className='font-bd font-30 task-hide center pb30'>{homepageMemberTitle}</p>
|
||||
<Slider {...settings} className='vip_NSCC_Slider'>
|
||||
{vipList.map((item, i) => {
|
||||
const isCenter = i === (current + 1);
|
||||
return <div key={i} className={`vip-slide-NSCC`}>
|
||||
<div className='slide-content'>
|
||||
<div className='vip-slide-1 df'>
|
||||
<img src={item.imageUrl} alt='' className='mr20'/>
|
||||
<div>
|
||||
<p className='font-18 font-bd'>{item.name}</p>
|
||||
<span className='font-15 color5d6'>{item.memberLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='vip-slide-2 color5d6 font-15 padding30'>
|
||||
{item.introduction || '暂无介绍, 待补充'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
</Slider>
|
||||
{vipList && !vipList.length && <Nodata _html="暂无数据" small/>}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
export default Member;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 651 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 771 B |
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
Binary file not shown.
|
After Width: | Height: | Size: 492 B |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
|
|
@ -2,6 +2,9 @@
|
|||
width: 1200px;
|
||||
margin:0px auto;
|
||||
}
|
||||
.gap20{
|
||||
gap: 20px;
|
||||
}
|
||||
.align{
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
|
@ -12,6 +15,9 @@
|
|||
.between{
|
||||
justify-content: space-between
|
||||
}
|
||||
.baseline{
|
||||
align-items: baseline;
|
||||
}
|
||||
.color-theme{
|
||||
color: $primary-color;
|
||||
}
|
||||
|
|
@ -30,12 +36,36 @@
|
|||
.color848{
|
||||
color: #848992;
|
||||
}
|
||||
.color5d6{
|
||||
color:#5d6371;
|
||||
}
|
||||
.color131{
|
||||
color:#131415;
|
||||
}
|
||||
.color828{
|
||||
color:#8284a4;
|
||||
}
|
||||
.color82880{
|
||||
color:#8284a480;
|
||||
}
|
||||
.color020{
|
||||
color:#020814;
|
||||
}
|
||||
.color181{
|
||||
color:#181818;
|
||||
}
|
||||
.color606{
|
||||
color: #606673
|
||||
}
|
||||
.backWhite{
|
||||
background-color: white;
|
||||
}
|
||||
.pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
.mt-15{
|
||||
margin-top: -15px;
|
||||
}
|
||||
.zone_1_carousel{
|
||||
.slick-dots li button:before{
|
||||
font-size: 12px;
|
||||
|
|
@ -508,4 +538,448 @@
|
|||
right: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nscc_homepage_box{
|
||||
.account_nscc{
|
||||
display: inline-block;
|
||||
min-width:134px;
|
||||
height:46px;
|
||||
line-height:46px;
|
||||
border:1px solid;
|
||||
border-color:#5d6371;
|
||||
border-radius:23px;
|
||||
}
|
||||
.nscc_introduction{
|
||||
background-image: url('./image/bkImg.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.specialProjects_NSCC{
|
||||
background-image: url('./image/bkImg1.png');
|
||||
background-size: 100% 100%;
|
||||
.slick-active .s_p_detail_NSCC{
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0px 12px rgba(33, 73, 212, 0.1);
|
||||
}
|
||||
.s_p_detail_NSCC{
|
||||
width:399px;
|
||||
height:172px;
|
||||
padding: 25px;
|
||||
background-image: url('./image/bkImg2.png');
|
||||
background-size: 100% 100%;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
&:nth-of-type(4n+1) .s_p_d_order{
|
||||
color: #1c9907;
|
||||
background-image: linear-gradient(178.25deg, #bfeab8 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+2) .s_p_d_order{
|
||||
color: #466aff;
|
||||
background-image: linear-gradient(178.25deg, #cfd8ff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+3) .s_p_d_order{
|
||||
color: #514cf9;
|
||||
background-image: linear-gradient(178.25deg, #cecdfc 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n) .s_p_d_order{
|
||||
color: #f8952d;
|
||||
background-image: linear-gradient(178.25deg, #ffdcb9 0%, rgba(255, 231, 231, 0.5) 50.09%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.s_p_d_order {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: inline-block;
|
||||
padding: 3px 12px 5px 22px;
|
||||
border-radius: 0 13px 0 0;
|
||||
clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
}
|
||||
.page_NSCC {
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
min-height: 394px;
|
||||
}
|
||||
.s_p_detail_NSCC {
|
||||
flex: 0 0 48%;
|
||||
}
|
||||
.slick-list{
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
}
|
||||
.specialProjectTypeBox{
|
||||
width: 340px;
|
||||
margin-right: 40px;
|
||||
transition: height .5s;
|
||||
.desc_spt{
|
||||
padding-right: 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px dashed #C7CADA;
|
||||
transition: height .3s ease-out;
|
||||
opacity: 1;
|
||||
animation: animation1 .3s ease-in-out .3s backwards;
|
||||
}
|
||||
@keyframes animation1{
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.carousel-row {
|
||||
align-items: center;
|
||||
.carousel-arrow{
|
||||
width:30px;
|
||||
height:30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color:#ffffff;
|
||||
box-shadow:0px 3px 6px rgba(70, 106, 255, 0.1);
|
||||
margin: 0 20px;
|
||||
&:hover .iconfont{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
.dot_nscc{
|
||||
width:4px;
|
||||
height:4px;
|
||||
border-radius: 50%;
|
||||
background-color:#ced0d3;
|
||||
margin: 0 2px;
|
||||
&.active{
|
||||
width:24px;
|
||||
height:4px;
|
||||
border-radius:2px;
|
||||
transition: width .3s linear;
|
||||
& span{
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-radius:2px;
|
||||
background-color: #5D6371;
|
||||
animation: leftToRight 3s linear forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes leftToRight {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.news_1_bg_NSCC{
|
||||
background-image: url('./image/bkImg5.png');
|
||||
background-size: 100% 100%;
|
||||
background-color: #EBEFFA;
|
||||
.firstDir_NSCC{
|
||||
width:690px;
|
||||
background-color: #F6F8FD;
|
||||
border-radius:15px;
|
||||
box-shadow:0px 0px 12px rgba(33, 73, 212, 0.1);
|
||||
}
|
||||
.firstDoc{
|
||||
position: relative;
|
||||
}
|
||||
.firstDoc_Img{
|
||||
width:690px;
|
||||
object-fit: cover;
|
||||
border-radius:15px;
|
||||
}
|
||||
.firstDocName{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 25px;
|
||||
width: 100%;
|
||||
background-image:linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.36) 49.09%,rgba(0, 0, 0, 0.6) 100%);
|
||||
border-radius:0 0 15px 15px;
|
||||
}
|
||||
.secondDir_NSCC{
|
||||
border-radius:15px;
|
||||
box-shadow:0px 0px 12px rgba(33, 73, 212, 0.1);
|
||||
background: linear-gradient(180deg,#f4f7ff 0%,#F6F8FD 100%), url('./image/bkImg6.png') top/contain no-repeat;
|
||||
background-blend-mode: multiply;
|
||||
padding: 30px 25px;
|
||||
}
|
||||
.docBySecondDir_NSCC{
|
||||
background-image:linear-gradient(180deg,#f4f7ff 0%,#ffffff 100%);
|
||||
border-radius:15px;
|
||||
box-shadow:0px 0px 12px rgba(33, 73, 212, 0.06);
|
||||
padding: 16px 20px;
|
||||
&:hover{
|
||||
background-image: url('./image/bkImg7.png');
|
||||
background-size: 100% 100%;
|
||||
div, a{
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.docBox_o{
|
||||
.icon-jiantou3{
|
||||
display: none;
|
||||
}
|
||||
&:hover .icon-jiantou3{
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover a{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.project_1_bg_NSCC {
|
||||
background-image: url('./image/bkImg8.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.typeCarouselByNSCC {
|
||||
display: inline-flex;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 30px;
|
||||
padding: 6px 0;
|
||||
.p_1_icon{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.proTypeBox {
|
||||
padding: 4px 15px;
|
||||
&.active {
|
||||
color: $primary-color;
|
||||
background-color: #ffffff;
|
||||
border-radius: 23px;
|
||||
.iconfont{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
&:first-of-type{
|
||||
margin-left: 6px;
|
||||
}
|
||||
&:last-of-type{
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.online_detail{
|
||||
background-image: url('./image/projectBk1.png');
|
||||
background-size: 100% 100%;
|
||||
flex: 0 0 calc(33.333% - 15px);
|
||||
padding: 22px 20px 20px 20px;
|
||||
border-radius:15px;
|
||||
box-shadow:0px 0px 12px rgba(33, 73, 212, 0.1);
|
||||
&:hover{
|
||||
background-image: url('./image/projectBk2.png');
|
||||
span, div{
|
||||
color: white;
|
||||
}
|
||||
.color5d6:not(.task-hide-2){
|
||||
opacity: 0.8;
|
||||
}
|
||||
.pd_tag_NSCC li{
|
||||
color:#ffffff;
|
||||
background-color:rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.second_detail{
|
||||
flex: 0 0 calc(33.333% - 15px);
|
||||
padding: 0 20px;
|
||||
&:nth-child(3n+1), &:nth-child(3n+2) {
|
||||
border-right: 1px dashed rgba(146, 164, 201, 0.56);
|
||||
}
|
||||
&:nth-child(3n+2){
|
||||
margin: 0 20px;
|
||||
}
|
||||
&.pb30{
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
&.noBor{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
.second_detailBox{
|
||||
background-image: url('./image/projectBk3.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 25px 0;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 12px rgba(33, 73, 212, 0.1);
|
||||
}
|
||||
.pd_tag_NSCC{
|
||||
li{
|
||||
padding: 0 8px;
|
||||
border-radius:4px;
|
||||
color:#466aff;
|
||||
background-color:#E5EAFF;
|
||||
&:nth-of-type(3n+2){
|
||||
color:#1c9907;
|
||||
background-color:#EBF5ED;
|
||||
}
|
||||
|
||||
&:nth-of-type(3n+3){
|
||||
color:#514cf9;
|
||||
background-color:#EFF0FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.source_1_bg_NSCC{
|
||||
background-image: url('./image/bkImg9.png');
|
||||
background-size: 100% 100%;
|
||||
.s_1_souce_NSCC{
|
||||
padding: 30px 20px;
|
||||
flex: 0 0 calc(33.333% - 20px);
|
||||
background-image: url('./image/source_bk1.png');
|
||||
background-size: 100% 100%;
|
||||
transition: all .5s ease;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0px 0px 12px rgba(33, 73, 212, 0.1);
|
||||
&:hover{
|
||||
background-image: url('./image/source_bk2.png');
|
||||
.hoverImg, .icon-jiantou3{
|
||||
display: inline-block;
|
||||
}
|
||||
p, span{
|
||||
color:#ffffff !important;
|
||||
}
|
||||
.souce_icon_box{
|
||||
background-color:rgba(255, 255, 255, 0.2);
|
||||
border:1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
.hoverImg, &:hover .normalImg, .icon-jiantou3{
|
||||
display: none;
|
||||
}
|
||||
.souce_icon_box{
|
||||
width:40px;
|
||||
height:40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
background-color:#ffffff;
|
||||
border-radius:6px;
|
||||
box-shadow:0px 0px 6px rgba(70, 106, 255, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vip_1_bg_NSCC{
|
||||
background-image: url('./image/vipbk.png');
|
||||
background-size: 100% 100%;
|
||||
padding-bottom: 150px;
|
||||
.vip-slide-1{
|
||||
background-image: url('./image/vipbk1.png');
|
||||
background-size: 100% 100%;
|
||||
align-items: center;
|
||||
padding: 33px 36px;
|
||||
border-radius: 15px 15px 0px 0px;
|
||||
img{
|
||||
width:54px;
|
||||
height:54px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.vip-slide-2{
|
||||
min-height:171px;
|
||||
background-image:linear-gradient(155.1deg,#f4f7ff 0%,#ffffff 100%);
|
||||
border-radius:0px 0px 15px 15px;
|
||||
}
|
||||
.vip-slide-NSCC{
|
||||
transition: all .5s ease;
|
||||
border-radius: 15px;
|
||||
box-shadow:0px 0px 12px rgba(33, 73, 212, 0.05);
|
||||
}
|
||||
.vip_NSCC_Slider{
|
||||
.slick-list{
|
||||
padding: 50px 0 0 0;
|
||||
}
|
||||
.slick-arrow{
|
||||
width:36px;
|
||||
height:36px;
|
||||
border-radius: 50%;
|
||||
background-color:#ffffff;
|
||||
box-shadow:0px 3px 6px rgba(70, 106, 255, 0.1);
|
||||
&.slick-next:before, &.slick-prev:before{
|
||||
font-size: 14px;
|
||||
font-family: "iconfont";
|
||||
color: #606673;
|
||||
font-weight: 700;
|
||||
}
|
||||
&:hover{
|
||||
&.slick-next:before, &.slick-prev:before{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-next:before{
|
||||
content: "\e8de";
|
||||
}
|
||||
.slick-prev{
|
||||
z-index: 1;
|
||||
}
|
||||
.slick-prev:before{
|
||||
content: "\e8df";
|
||||
}
|
||||
.slick-dots li button:before{
|
||||
color: #8a9099;
|
||||
}
|
||||
li.slick-active button::before{
|
||||
content: "";
|
||||
width:24px;
|
||||
height:4px;
|
||||
background-color:#9da0a6;
|
||||
border-radius:2px;
|
||||
top: 7px;
|
||||
left: 5px;
|
||||
}
|
||||
.slick-dots{
|
||||
bottom: -33px;
|
||||
}
|
||||
.slick-dots li:not(.slick-active){
|
||||
width: 5px;
|
||||
}
|
||||
// 视图第一张
|
||||
.slick-current.slick-active{
|
||||
padding-right: 40px;
|
||||
// 视图第二张
|
||||
&+.slick-slide {
|
||||
.vip-slide-NSCC {
|
||||
width: 110% !important;
|
||||
margin-left: -5%;
|
||||
position: relative;
|
||||
top: -12px;
|
||||
}
|
||||
.vip-slide-1 {
|
||||
position: relative;
|
||||
padding: 40px 36px 55px;
|
||||
background-image: url('./image/vipbk2.png');
|
||||
img {
|
||||
background: none;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 25px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&+.slick-slide+.slick-slide{
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import React, { createRef, useEffect, useState } from 'react';
|
||||
import NewsByNSCC from './component/newsByNSCC';
|
||||
import ProjectByNSCC from './component/projectByNSCC';
|
||||
import SourceByNSCC from './component/sourceByNSCC';
|
||||
import MemberByNSCC from './component/vipByNSCC';
|
||||
import Partner from './component/partner';
|
||||
import SpecialProjectsByNSCC from './component/specialProjectsByNSCC';
|
||||
import '../../indexZone1.scss'
|
||||
import './index.scss'
|
||||
import { getUniqueIdentifier, getUserName, getBrowserPlatform, getBrowserBrand } from '../../utils'
|
||||
import { getNewsDetail, getSubDocList, getZoneStatistics, setZoneVisits } from '../../api'
|
||||
import { Anchor, Carousel } from 'antd';
|
||||
import { Base64 } from 'js-base64';
|
||||
function HeaderPageUos(props) {
|
||||
const label = {
|
||||
communityUserCount: "社区用户",
|
||||
cmsDocVisits: "文章访问数",
|
||||
projectCount: "代码仓库",
|
||||
resourceCount: "社区资源",
|
||||
cmsDocCount: "社区新闻",
|
||||
specialProjectCount: "重点项目",
|
||||
}
|
||||
|
||||
const { data } = props;
|
||||
const { id, firstTitle, homepageSpecialProjectTitle, homepageCmsTitle, homepageProjectTitle, homepageResourceTitle, homepageMemberTitle } = data || {};
|
||||
const [data1, setData1] = useState({});
|
||||
const [mainList, setMainList] = useState([]);
|
||||
const carouselEL = createRef()
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [ showAnchor, setShowAnchor ] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let uuid = getUniqueIdentifier()
|
||||
let url = props.location.pathname
|
||||
let platform = getBrowserPlatform()
|
||||
let browser = getBrowserBrand()
|
||||
let username = getUserName(props.current_user)
|
||||
// if(!username) uuid = getUniqueIdentifier()
|
||||
let remark = ` 操作系统：${platform};浏览器：${browser};`
|
||||
setZoneVisits({ url, username, uuid, remark })
|
||||
|
||||
// 获取【关于超算】栏目的文章列表
|
||||
getSubDocList(window.location.host === "www.gitlink.org.cn" ? 1039 : 2810, { pageSize: 100, pageNum: 1, auditStatus: 1 }).then(async (result) => {
|
||||
if (!result) return;
|
||||
const rows = result.data.rows;
|
||||
await Promise.all(
|
||||
rows.map(async (item) => {
|
||||
const detail = await getNewsDetail(item.id);
|
||||
if (detail) item.docContent = detail.data.data.content;
|
||||
})
|
||||
);
|
||||
setMainList(rows);
|
||||
}).catch(console.error);
|
||||
|
||||
// 滚动监听
|
||||
document.addEventListener("scroll", scroll);
|
||||
return () => {
|
||||
document.removeEventListener("scroll", scroll);
|
||||
};
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
id && getZoneStatistics(id).then(res => {
|
||||
setData1(res.data && res.data.data)
|
||||
})
|
||||
}, [id])
|
||||
|
||||
const scroll = () =>{
|
||||
let sTop = document.documentElement.scrollTop;
|
||||
if(sTop >= 600){
|
||||
setShowAnchor(true);
|
||||
}else{
|
||||
setShowAnchor(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="nscc_homepage_box">
|
||||
{showAnchor &&
|
||||
<Anchor className='anchor_kxy anchor_nscc'>
|
||||
<Anchor.Link href="#nscc_home1" title={firstTitle}/>
|
||||
<Anchor.Link href="#nscc_home2" title={homepageSpecialProjectTitle} />
|
||||
<Anchor.Link href="#nscc_home3" title={homepageCmsTitle}/>
|
||||
<Anchor.Link href="#nscc_home4" title={homepageProjectTitle}></Anchor.Link>
|
||||
<Anchor.Link href="#nscc_home5" title={homepageResourceTitle}></Anchor.Link>
|
||||
<Anchor.Link href="#nscc_home6" title={homepageMemberTitle}></Anchor.Link>
|
||||
</Anchor>
|
||||
}
|
||||
<div className='nscc_introduction pt60 pb50' id="nscc_home1">
|
||||
<div className='font-bd font-36 align'>
|
||||
{firstTitle}
|
||||
</div>
|
||||
<div className='df wrap pt50 between width1200 mb30'>
|
||||
{Object.keys(label).map(item => {
|
||||
return <div className='align font-16'>
|
||||
<span className='font-26 font-bd account_nscc'>{data1[item]}+</span>
|
||||
<p className='color5d6 mt3'>{label[item]}</p>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
<Carousel autoplay ref={carouselEL} dots={false} afterChange={setCurrent}>
|
||||
{mainList.map(item => {
|
||||
return <div><div className='width1200' dangerouslySetInnerHTML={{__html: Base64.decode(item.docContent)}}></div></div>
|
||||
})}
|
||||
</Carousel>
|
||||
{mainList.length >1 && <div className='df align carousel-row mt20'>
|
||||
<span className='carousel-arrow pointer left' onClick={() => carouselEL.current.prev()}>
|
||||
<i className='iconfont icon-xiangzuojiantou font-12 font-bd color606'></i>
|
||||
</span>
|
||||
{mainList.map((_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
onClick={() => carouselEL.current.goTo(i)}
|
||||
className={`dot_nscc ${i === current ? 'active' : ''}`} // 高亮
|
||||
>
|
||||
<span></span>
|
||||
</li>
|
||||
))}
|
||||
<span className='carousel-arrow pointer right'onClick={() => carouselEL.current.next()}>
|
||||
<i className='iconfont icon-xiangyoujiantou font-12 font-bd color606'></i>
|
||||
</span>
|
||||
</div>}
|
||||
</div>
|
||||
<SpecialProjectsByNSCC data={data} />
|
||||
<NewsByNSCC data={data}/>
|
||||
<ProjectByNSCC data={data} />
|
||||
<SourceByNSCC data={data} />
|
||||
<MemberByNSCC data={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default HeaderPageUos;
|
||||
|
|
@ -100,6 +100,11 @@ const HomePageByUos = Loadable({
|
|||
loader : () => import("./Pages/homepage/uos"),
|
||||
loading : Loading,
|
||||
});
|
||||
|
||||
const HomePageByNSCC = Loadable({
|
||||
loader : () => import("./Pages/homepage/nscc"),
|
||||
loading : Loading,
|
||||
});
|
||||
const DatasetFileList = Loadable({
|
||||
loader : () => import("./Pages/dataset/fileList"),
|
||||
loading : Loading,
|
||||
|
|
@ -298,6 +303,7 @@ function Index(props){
|
|||
deptId === "JCC" ? <HomePageByJCC {...props} {...p} data={data} id={id}/>:
|
||||
deptId === "uos" ? <HomePageByUos {...props} {...p} data={data} id={id}/>:
|
||||
deptId==="xjykyzx" ? <HeaderPageKyzx {...props} {...p} data={data} id={id} temp={ temp } />:
|
||||
deptId==="NSCC" ? <HomePageByNSCC {...props} {...p} data={data} id={id} temp={ temp } />:
|
||||
temp === tempEnum.zone ? <HeaderPage {...props} {...p} data={data} id={id} temp={ temp }/>:
|
||||
<HeaderPageZone1 {...props} {...p} data={data} id={id} temp={ temp }/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -223,8 +223,10 @@
|
|||
font-family: "ziyouwenyihei";
|
||||
}
|
||||
.sub_t{
|
||||
font-size:15px;
|
||||
font-size:18px;
|
||||
color:#ffffff;
|
||||
line-height: 36px;
|
||||
letter-spacing: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1152,6 +1152,45 @@
|
|||
left: -3px;
|
||||
background-color:#07a583;
|
||||
}
|
||||
&.anchor_nscc{
|
||||
top: 35%;
|
||||
background: none;
|
||||
|
||||
.ant-anchor-ink{
|
||||
border-left: 1px dashed rgba(146, 164, 201, 0.56);
|
||||
&::before{
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
.ant-anchor-link-title{
|
||||
font-size: 15px;
|
||||
color:#131415;
|
||||
}
|
||||
.ant-anchor-link-title-active,.ant-anchor-link-active{
|
||||
color: $primary-color;
|
||||
}
|
||||
.ant-anchor-link{
|
||||
margin: 10px 0px;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
position: relative;
|
||||
&:not(.ant-anchor-link-active)::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 20px;
|
||||
left: -3px;
|
||||
width:5px;
|
||||
height:5px;
|
||||
border-radius: 50%;
|
||||
background-color:#7d89a4;
|
||||
}
|
||||
}
|
||||
.ant-anchor-link-active::before{
|
||||
width: 3px;
|
||||
border-radius: 3px;
|
||||
background-color:$primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.system_open{
|
||||
|
|
|
|||
Loading…
Reference in New Issue