diff --git a/src/forge/Main/projecthome/SubBanner.jsx b/src/forge/Main/projecthome/SubBanner.jsx index cb6ff604..cb868b94 100644 --- a/src/forge/Main/projecthome/SubBanner.jsx +++ b/src/forge/Main/projecthome/SubBanner.jsx @@ -5,7 +5,6 @@ import { getImageUrl } from 'educoder'; import Eye from '../img/index/eye.png'; import Data from '../img/index/data.png'; import Earth from '../img/index/earth.png'; -import Imgs from '../img/tree.png'; import axios from 'axios'; // const list =[ @@ -51,8 +50,8 @@ function SubBanner() { return(
-

新一代开源创新服务平台

-

GitLink（确实开源）-CCF官网指定的产学研融合面向软件开源创新的开源社区

+

GitLink 确实开源

+

新一代开发创新服务平台 让你的创意在这里释放

{ list && list.length > 0 ? diff --git a/src/home/FifthEdition.jsx b/src/home/FifthEdition.jsx index a34f9730..09096de2 100644 --- a/src/home/FifthEdition.jsx +++ b/src/home/FifthEdition.jsx @@ -1,4 +1,5 @@ import React , { useEffect } from 'react'; +import Slider from 'react-slick'; import Beijing from './Img/unit/beijing.png'; import SHJT from './Img/unit/SHJT.png'; import DD from './Img/unit/DD.png'; @@ -22,6 +23,9 @@ import LSLM from './Img/unit/LSLM.png'; import TG from './Img/unit/TG.png'; import LC from './Img/unit/LC.png'; import YKD from './Img/unit/YKD.png'; +import Axios from 'axios'; +import { useState } from 'react'; +import { getImageUrl } from 'educoder'; const list = [ {image_url:GFKJ, name:"国防科技大学",src:"https://www.nudt.edu.cn/"}, @@ -45,26 +49,40 @@ const list = [ {image_url:LC, name:"浪潮",src:"https://cloud.inspur.com/"}, {image_url:YKD, name:"ucloud",src:"https://www.ucloud.cn/"} ] -// const settings = { -// dots: false, -// infinite: true, -// slidesToShow: 6, -// slidesToScroll: 1, -// autoplay: true, -// speed: 2000, -// autoplaySpeed: 2000, -// cssEase: "linear", -// rows:2, -// arrows:false -// }; + +const settings = { + dots: false, + infinite: true, + slidesToShow: 1, + slidesToScroll: 1, + vertical: true, + verticalSwiping: true, + autoplay:true, + arrows:false +}; function FifthEdition() { + const [ topics ,setTopics ] = useState(undefined); useEffect(()=>{ - if(list.length>10){ - Init(); - } + // if(list.length>10){ + // Init(); + // } + getUnit(); },[]) + function getUnit(){ + const url =`/topics.json`; + Axios.get(url,{params:{ + topic_type:"cooperator", + limit:20, + group_size:5 + }}).then(result=>{ + if(result){ + setTopics(result.data.topics); + } + }).catch(error=>{}) + } + function Init() { let box = document.getElementById('scrollBox1'); scrollUp(); @@ -94,7 +112,7 @@ function FifthEdition() { return(
-
+ {/*
    { list && list.map((i,k)=>{ @@ -115,22 +133,28 @@ function FifthEdition() { }
} -
- {/* - { - list && list.map((i,k)=>{ - return( -
  • {i.name}/
    • - ) - }) - } - {list.length > 10 && list && list.map((i,k)=>{ - return( -
  • {i.name}/
    • - ) - }) - } -     */} +
    */} + { + topics && topics.length>0 ? + + { + topics.map((i,k)=>{ + return( +
    + { + i.map((j,k1)=>{ + return( + + ) + }) + } +
    + ) + }) + } +     + :"" + }
    ) } diff --git a/src/home/Index.jsx b/src/home/Index.jsx index 1feea20d..f1c628d1 100644 --- a/src/home/Index.jsx +++ b/src/home/Index.jsx @@ -10,20 +10,36 @@ import F44 from './Img/4-4.png'; import SecondEdition from './SecondEdition'; import FifthEdition from './FifthEdition'; import { TPMIndexHOC } from '../modules/tpm/TPMIndexHOC'; +import Axios from 'axios'; function Index(props) { const [ value , setValue ] = useState(""); const [ flag , setFlag ] = useState(true); - const [ isRender , setIsRender ] = useState(false); - const [ isloginCancel , setIsloginCancel ] = useState(false); + + const [ bannerTab , setBannerTab ] = useState(undefined); const register = props && props.mygetHelmetapi && props.mygetHelmetapi.common && props.mygetHelmetapi.common.register; const { current_user } = props; useEffect(()=>{ window.addEventListener("scroll",scrollListener); + getTab(); },[]) + function getTab() { + const url = `/topics.json?topic_type=card`; + Axios.get(url,{ + params:{ + limit:3 + } + }).then(result=>{ + if(result){ + setBannerTab(result.data.topics); + } + }).catch(error=>{}) + } + function scrollListener(event) { + let third = document.getElementById("thirdContent").offsetTop; let top = document.documentElement.scrollTop + 60; if(top>= third) @@ -51,23 +67,41 @@ function Index(props) {
    {/* */} - + { + bannerTab && bannerTab.lenth > 0 ? + + : + + } +
    diff --git a/src/home/Index.scss b/src/home/Index.scss index 7227f238..5fb39ee5 100644 --- a/src/home/Index.scss +++ b/src/home/Index.scss @@ -61,21 +61,12 @@ body{ height:100%; div{ height: 100%; - .regform1{ - background:url('./Img/banner1.png') no-repeat center center; - background-size:cover; - } - .regform2{ - background:url('./Img/banner2.png') no-repeat center center; - background-size:cover; - } - .regform3{ - background:url('./Img/banner3.png') no-repeat center center; - background-size:cover; - } - .regform4{ - background:url('./Img/banner4.png') no-repeat center center; - background-size:cover; + .regform{ + &>div{ + background-size:cover; + background-position: center; + background-repeat: no-repeat; + } } .regPrg{ position: absolute; @@ -758,6 +749,7 @@ body{ display: flex; align-items: center; margin-top: 48px; + min-height: 365px; .listbox{ margin-left: 54px; flex: 1; @@ -779,6 +771,9 @@ body{ background-color: #466AFF; } } + .ant-skeleton-title,.ant-skeleton-paragraph > li{ + background-color: rgba(242,242,242 ,0.2); + } } li{ display: flex; @@ -924,6 +919,41 @@ body{ overflow: hidden; margin: 35px 0px 0px; width: 100%; + .unitMainSlider{ + width: 1200px; + margin:0px auto; + .slick-list{ + height: 140px; + width: 100%; + overflow: hidden; + .slickMainline{ + display: flex!important; + padding:10px 2px; + align-items: center; + justify-content: space-between; + a{ + background: #FFFFFF; + box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.06); + border-radius: 4px; + border: 2px solid #FFFFFF; + margin-right: 20px; + padding:20px; + height: 120px; + width: 220px; + display: flex; + align-items: center; + justify-content: center; + img{ + max-width: 100%; + max-height: 100%; + } + &:last-child{ + margin-right: 0px; + } + } + } + } + } } ul.fifthList{ display: flex; diff --git a/src/home/SecondEdition.jsx b/src/home/SecondEdition.jsx index 1a976551..5df2b646 100644 --- a/src/home/SecondEdition.jsx +++ b/src/home/SecondEdition.jsx @@ -99,12 +99,14 @@ function SecondEdition({setValue}) { } function checkPosi(ele,clientHeight,scrollTop) { - var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3); - var b = document.getElementById(ele).clientHeight + (clientHeight/4); - if(a>0 || a<-b){ - return false; - }else{ - return true; + if(document.getElementById(ele)){ + var a = document.getElementById(ele).offsetTop - scrollTop -(clientHeight/3); + var b = document.getElementById(ele).clientHeight + (clientHeight/4); + if(a>0 || a<-b){ + return false; + }else{ + return true; + } } } return( @@ -187,7 +189,7 @@ function SecondEdition({setValue}) {

    多维度用户画像

    -

    实时采集和分析平台中的各类开源资源数据，
    搭建多维度用户画像评估系统；

    +

    实时采集和分析平台中的各类开源资源数据，搭建多维度用户画像评估系统；

    diff --git a/src/home/ThirdEdition.jsx b/src/home/ThirdEdition.jsx index 7759f501..4cc924af 100644 --- a/src/home/ThirdEdition.jsx +++ b/src/home/ThirdEdition.jsx @@ -1,4 +1,5 @@ import React,{ useState , useEffect , useMemo } from 'react'; +import { Spin , Skeleton } from 'antd'; import T311 from './Img/3-1-1.png'; import T312 from './Img/3-1-2.png'; import T321 from './Img/3-2-1.png'; @@ -13,55 +14,32 @@ import bg33 from './Img/3-3.png'; import bg34 from './Img/3-4.png'; import './Index.scss'; - -const list1 = [ - {name:"CCF开源发展委员会首批执行委员名单发布",src:"https://forum.trustie.net/forums/4666/detail",count:32,time:"2021-09-22"}, - {name:"GitLink项目协同开发模块使用说明及问题反馈",src:"https://forum.trustie.net/forums/4665/detail",count:4,time:"2021-09-22"}, - {name:"MindSpore框架介绍及赛题说明",src:"https://forum.trustie.net/forums/4664/detail",count:3,time:"2021-09-22"}, - {name:"OpenHarmony系统介绍及赛题说明",src:"https://forum.trustie.net/forums/4663/detail",count:4,time:"2021-09-22"}, - {name:"openGauss系统介绍及赛题说明",src:"https://forum.trustie.net/forums/4662/detail",count:5,time:"2021-09-22"}, -] -const list2 = [ - {name:"Gitlink/Gitlink",src:"https://forgeplus.trustie.net/Gitlink/forgeplus",count:304}, - {name:"泛在操作系统实验室/矽璓工业物联操作系统XiUOS",src:"https://forgeplus.trustie.net/xuos/xiuos",count:50}, - {name:"华为技术有限公司/openGauss-operator",src:"https://forgeplus.trustie.net/Huawei_Technology/openGauss-operator",count:100}, - {name:"开放原子开源基金会/BitXHub",src:"https://forgeplus.trustie.net/openatom_foundation/bitxhub",count:40}, - {name:"华为技术有限公司/openEuler-datenlord",src:"https://forgeplus.trustie.net/Huawei_Technology/openEuler-datenlord",count:98}, -] -const list3 = [ - {name:"Gitlink平台DevOps模块使用说明",src:"https://forum.trustie.net/forums/4682/detail",count:10,time:"2021-09-23"}, - {name:"Gitlink如何将临时分支push到远端对应的新分支？",src:"https://forum.trustie.net/forums/4705/detail",count:8,time:"2021-09-23"}, - {name:"了解什么是 DevOps？",src:"https://forum.trustie.net/forums/4704/detail",count:4,time:"2021-09-23"}, - {name:"EduCoder平台简介",src:"https://forum.trustie.net/forums/4701/detail",count:26,time:"2021-09-23"}, - {name:"Webhooks指南",src:"https://forum.trustie.net/forums/4683/detail",count:3,time:"2021-09-23"}, -] -const list4 = [ - {name:"小学生都能读懂的网络协议之:WebSocket",src:"https://forum.trustie.net/forums/4708/detail",count:4,time:"2021-09-23"}, - {name:"容器神话 Docker 是如何一分为二的",src:"https://forum.trustie.net/forums/4707/detail",count:5,time:"2021-09-23"}, - {name:"一文揭示，DevOps与企业数字化究竟有何联系？",src:"https://forum.trustie.net/forums/4706/detail",count:3,time:"2021-09-23"}, - {name:"GitHub上最流行的10000个Java都使用了哪些库？",src:"https://forum.trustie.net/forums/4703/detail",count:8,time:"2021-09-23"}, - {name:"如何正确下载CentOS各个版本镜像",src:"https://forum.trustie.net/forums/4684/detail",count:2,time:"2021-09-23"}, -] +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); - // } + 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() { @@ -75,6 +53,41 @@ function ThirdEdition() { } } + 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(

    开发者的家园

    @@ -111,65 +124,95 @@ function ThirdEdition() {
    - -
    -

    - {active === 1 ? "GitLink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏" - : active===2 ? "GitLink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果" - :active===3 ? "GitLink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新" - :"GitLink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"} -

    - { - active === 1&& - list1.map((i,k)=>{ - return( -
  • - {i.name} - {i.count} - {i.time} -
    • - ) - }) - } - { - active === 2&& - list2.map((i,k)=>{ - return( -
  • - {i.name} - {i.count} - {/* {i.time} */} -
    • - ) - }) - } - { - active === 3&& - list3.map((i,k)=>{ - return( -
  • - {i.name} - {i.count} - {i.time} -
    • - ) - }) - } - { - active === 4&& - list4.map((i,k)=>{ - return( -
  • - {i.name} - {i.count} - {i.time} -
    • - ) - }) - } + +
    +

    + {active === 1 ? "GitLink分享最新平台资讯、社区活动通知、开源竞赛信息，把握开源生态发展脉搏" + : active===2 ? "GitLink汇聚精英企业仓库、前沿技术仓库、人气热门仓库，孵化优质开源创新成果" + :active===3 ? "GitLink集萃社区精选项目介绍、平台使用技巧等优秀文章，助力开源开放协同创新" + :"GitLink甄选技术研究、心得体会、经验交流等高质量内容，推动社区健康稳定发展"} +

    +
    + { + active === 1 && + + { + list1 && list1.length > 0 ? list1.map((i,k)=>{ + return( +
  • + {i.title} + {i.visits} + {i.time} +
    • + ) + }):"" + } + { + list1 && list1.length === 0 && + } +     + } + { + active === 2 && + + { + list2 && list2.length > 0? list2.map((i,k)=>{ + return( +
  • + {i.title} + {i.visits} + {/* {i.time} */} +
    • + ) + }):"" + } + { + list2 && list2.length === 0 && + } +     + } + { + active === 3 && + + { + list3 && list3.length > 0 ? list3.map((i,k)=>{ + return( +
  • + {i.title} + {i.visits} + {i.time} +
    • + ) + }):"" + } + { + list3 && list3.length === 0 && + } +     + } + { + active === 4 && + + { + list4 && list4.length > 0 ? list4.map((i,k)=>{ + return( +
  • + {i.title} + {i.visits} + {i.time} +
    • + ) + }):"" + } + { + list4 && list4.length === 0 && + } +     + } +
    +
    -
    ) } diff --git a/src/home/TopEdition.jsx b/src/home/TopEdition.jsx index 99f32779..d24ad15c 100644 --- a/src/home/TopEdition.jsx +++ b/src/home/TopEdition.jsx @@ -1,5 +1,8 @@ -import React from 'react'; +import React , { useEffect , useState } from 'react'; import Slider from 'react-slick'; +import axios from 'axios'; +import { getImageUrl } from 'educoder'; + let setting={ dots:true, infinite: true, @@ -15,15 +18,45 @@ let setting={ nextArrow: } function TopEdition({register,current_user}) { + + const [ bannerList , setBannerList ] = useState(undefined); + + useEffect(()=>{ + getBanner(); + },[]) + + function getBanner() { + const url = `/topics.json?topic_type=banner`; + axios.get(url,{ + params:{ + limit:4 + } + }).then(result=>{ + if(result){ + setBannerList(result.data.topics); + } + }).catch(error=>{}) + } return( -
    -
    -
    -
    -
    - { !(current_user && current_user.login) &&

    注册

    } -
    + { + bannerList && bannerList.length > 0 ? + bannerList.map((i,k)=>{ + return( +
    +
    + { + k +1 === bannerList.length && (!(current_user && current_user.login)) ? +

    注册

    + :"" + } +
    +
    + ) + }) + : + "" + }     ) }