220 lines
8.1 KiB
JavaScript
220 lines
8.1 KiB
JavaScript
import React,{ useState , useEffect , useMemo } from 'react';
|
||
import { Spin , Skeleton } from 'antd';
|
||
import moment from 'moment';
|
||
import T311 from './Img/3-1-1.png';
|
||
import T312 from './Img/3-1-2.png';
|
||
import T321 from './Img/3-2-1.png';
|
||
import T322 from './Img/3-2-2.png';
|
||
import T331 from './Img/3-3-1.png';
|
||
import T332 from './Img/3-3-2.png';
|
||
import T341 from './Img/3-4-1.png';
|
||
import T342 from './Img/3-4-2.png';
|
||
import bg3 from './Img/3-1.png';
|
||
import bg32 from './Img/3-2.png';
|
||
import bg33 from './Img/3-3.png';
|
||
import bg34 from './Img/3-4.png';
|
||
|
||
import './Index.scss';
|
||
import Axios from 'axios';
|
||
|
||
function ThirdEdition() {
|
||
const [ active , setActive ] = useState(1);
|
||
const [ isSpin , setIsSpin ] = useState(true);
|
||
const [ flag , setFlag ] = useState(true);
|
||
const [ list1, setList1 ] = useState([]);
|
||
const [ list2, setList2 ] = useState([]);
|
||
const [ list3, setList3 ] = useState([]);
|
||
const [ list4, setList4 ] = useState([]);
|
||
|
||
const doubleFlag = useMemo(()=>{
|
||
return flag;
|
||
},[flag])
|
||
|
||
// useEffect(()=>{
|
||
// let box = document.getElementById('thirdUl');
|
||
// var myTimer = setTimeout(intervalActive, 2500);
|
||
// box.onmouseover = () => {
|
||
// clearTimeout(myTimer);
|
||
// setFlag(false);
|
||
// }
|
||
// box.onmouseleave = () => {
|
||
// myTimer = setTimeout(intervalActive, 2500);
|
||
// setFlag(true);
|
||
// }
|
||
// },[active,flag])
|
||
|
||
function intervalActive() {
|
||
if(doubleFlag){
|
||
if(active < 4){
|
||
let i = active + 1;
|
||
setActive(i);
|
||
}else{
|
||
setActive(1);
|
||
}
|
||
}
|
||
}
|
||
|
||
useEffect(()=>{
|
||
if(active){
|
||
getList(active);
|
||
}
|
||
},[active])
|
||
|
||
function getList(a) {
|
||
let params = a === 1 ? "activity_forum" : a===2 ? "excellent_project" : a=== 3 ? "pinned_forum" : "experience_forum";
|
||
if(a===1 && (list1 && list1.length>0)){return}
|
||
if(a===2 && (list2 && list2.length>0)){return}
|
||
if(a===3 && (list3 && list3.length>0)){return}
|
||
if(a===4 && (list4 && list4.length>0)){return}
|
||
setIsSpin(true);
|
||
const url = `/topics.json?topic_type=${params}`;
|
||
Axios.get(url,{
|
||
params:{
|
||
limit:5
|
||
}
|
||
}).then(result=>{
|
||
if(result){
|
||
let l = result.data.topics;
|
||
if(a===1){
|
||
setList1(l);
|
||
}else if(a===2){
|
||
setList2(l);
|
||
}else if(a===3){
|
||
setList3(l);
|
||
}else{
|
||
setList4(l);
|
||
}
|
||
setIsSpin(false);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
|
||
return(
|
||
<div className="thirdEdition">
|
||
<p className="titleInHome">开发者的家园</p>
|
||
<p className="subtitle">一个实现群智激发与汇聚，产学研联合面向协同创新的开源社区</p>
|
||
<div id="thirdUl">
|
||
<ul className="thirdUl">
|
||
<li className={active===1?"active":""}onClick={()=>{setFlag(false);setActive(1)}}>
|
||
<div className="hoverli1">
|
||
<img src={T311} alt="" width="38px" style={{top:"8px",left:"10px"}}/>
|
||
<img src={T312} alt="" width="34px"/>
|
||
</div>
|
||
<span>平台动态</span>
|
||
</li>
|
||
<li className={active===2?"active":""}onClick={()=>{setFlag(false);setActive(2)}}>
|
||
<div className="hoverli2">
|
||
<img src={T321} alt="" width="32px" style={{left:"8px"}}/>
|
||
<img src={T322} alt="" width="26px" style={{top:"8px"}}/>
|
||
</div>
|
||
<span>优秀仓库</span>
|
||
</li>
|
||
<li className={active===3?"active":""}onClick={()=>{setFlag(false);setActive(3)}}>
|
||
<div className="hoverli3">
|
||
<img src={T331} alt="" width="33px" style={{right:"3px",top:"8px"}}/>
|
||
<img src={T332} alt="" width="29px" style={{top:"8px"}}/>
|
||
</div>
|
||
<span>精选文章</span>
|
||
</li>
|
||
<li className={active===4?"active":""}onClick={()=>{setFlag(false);setActive(4)}}>
|
||
<div className="hoverli4">
|
||
<img src={T341} alt="" width="42px"/>
|
||
<img src={T342} alt="" width="26px" style={{top:"11px",left:"7px"}}/>
|
||
</div>
|
||
<span>经验分享</span>
|
||
</li>
|
||
</ul>
|
||
<div className="thirdLists">
|
||
<img src={active === 1 ? bg3 : active===2 ? bg32 :active===3 ? bg33 :bg34 } alt="" width="336px"/>
|
||
<div className="listbox">
|
||
<p className="listTitle">
|
||
{active === 1 ? "GitLink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏"
|
||
: active===2 ? "GitLink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果"
|
||
:active===3 ? "GitLink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新"
|
||
:"GitLink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"}
|
||
</p>
|
||
<div style={{minHeight:"260px"}}>
|
||
{
|
||
active === 1 &&
|
||
<React.Fragment>
|
||
{
|
||
list1 && list1.length > 0 ? list1.map((i,k)=>{
|
||
return(
|
||
<li>
|
||
<a href={i.url} target="_blank">{i.title}</a>
|
||
{i.from !== "other" && <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span> }
|
||
{i.from !== "other" && <span className="listboxtime">{i.created_time && moment(i.created_time).format("YYYY-MM-DD")}</span> }
|
||
</li>
|
||
)
|
||
}):""
|
||
}
|
||
{
|
||
list1 && list1.length === 0 && <Skeleton />
|
||
}
|
||
</React.Fragment>
|
||
}
|
||
{
|
||
active === 2 &&
|
||
<React.Fragment>
|
||
{
|
||
list2 && list2.length > 0? list2.map((i,k)=>{
|
||
return(
|
||
<li>
|
||
<a href={i.url} target="_blank">{i.title}</a>
|
||
<span className="listboxcount" style={{marginRight:"40px"}}><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span>
|
||
{/* {i.time} */}
|
||
</li>
|
||
)
|
||
}):""
|
||
}
|
||
{
|
||
list2 && list2.length === 0 && <Skeleton />
|
||
}
|
||
</React.Fragment>
|
||
}
|
||
{
|
||
active === 3 &&
|
||
<React.Fragment>
|
||
{
|
||
list3 && list3.length > 0 ? list3.map((i,k)=>{
|
||
return(
|
||
<li>
|
||
<a href={i.url} target="_blank">{i.title}</a>
|
||
{i.from !== "other" && <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span> }
|
||
{i.from !== "other" && <span className="listboxtime">{i.created_time && moment(i.created_time).format("YYYY-MM-DD")}</span> }
|
||
</li>
|
||
)
|
||
}):""
|
||
}
|
||
{
|
||
list3 && list3.length === 0 && <Skeleton />
|
||
}
|
||
</React.Fragment>
|
||
}
|
||
{
|
||
active === 4 &&
|
||
<React.Fragment>
|
||
{
|
||
list4 && list4.length > 0 ? list4.map((i,k)=>{
|
||
return(
|
||
<li>
|
||
<a href={i.url} target="_blank">{i.title}</a>
|
||
{i.from !== "other" && <span className="listboxcount"><i className="iconfont icon-a-liulanicon2x mr5"></i>{i.visits}</span> }
|
||
{i.from !== "other" && <span className="listboxtime">{i.created_time && moment(i.created_time).format("YYYY-MM-DD")}</span> }
|
||
</li>
|
||
)
|
||
}):""
|
||
}
|
||
{
|
||
list4 && list4.length === 0 && <Skeleton />
|
||
}
|
||
</React.Fragment>
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
export default ThirdEdition; |