forgeplus-react/src/home/FifthEdition.jsx

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';
import HW from './Img/unit/HW.png';
import ML from './Img/unit/ML.png';
import QH from './Img/unit/QH.png';
import QZ from './Img/unit/QZ.png';
import TX from './Img/unit/TX.png';
import XH from './Img/unit/XH.png';
import XJY from './Img/unit/XJY.png';
import ZC from './Img/unit/ZC.png';
import GFKJ from './Img/unit/GFKJ.png';
import BJHKHT from './Img/unit/BJHKHT.png';
import ISCAS from './Img/unit/ISCAS.png';
import NJDX from './Img/unit/NJDX.png';
import CEC from './Img/unit/CEC.png';
import KYRJLM from './Img/unit/KYRJLM.png';
import WXYJY from './Img/unit/WXYJY.png';
import HSKY from './Img/unit/HSKY.png';
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/"},
  {image_url:TG, name:"头歌",src:"https://www.educoder.net/"},
  {image_url:XJY, name:"长沙先进技术研究院",src:"https://www.hnjmrh.gov.cn/newweb/service/detail/305/"},
  {image_url:Beijing, name:"北京大学",src:"https://www.pku.edu.cn/"},
  {image_url:BJHKHT, name:"北京航空航天",src:"https://www.buaa.edu.cn/"},
  {image_url:ISCAS, name:"ISCAS",src:"http://www.iscas.ac.cn/"},
  {image_url:NJDX, name:"南京大学",src:"https://www.nju.edu.cn/"},
  {image_url:DD, name:"滴滴",src:"https://www.didiglobal.com/"},
  {image_url:CEC, name:"CEC",src:"https://www.cec.com.cn/"},
  {image_url:HW, name:"华为",src:"https://www.huawei.com/"},
  {image_url:ML, name:"木兰开源社区",src:"https://www.mulanos.cn/"},
  {image_url:TX, name:"腾讯",src:"https://www.tencent.com/zh-cn"},
  {image_url:KYRJLM, name:"中国开源软件推进联盟",src:"http://www.copu.org.cn/"},
  {image_url:XH, name:"中国计算机学会",src:"https://www.ccf.org.cn/"},
  {image_url:QZ, name:"openi启智",src:"https://www.openi.org.cn/"},
  {image_url:HSKY, name:"红山开源",src:"https://osredm.com/"},
  {image_url:LSLM, name:"绿色产业联盟",src:"https://www.opengcc.org/"},
  {image_url:ZC, name:"中创软件",src:"http://www.cvicse.com/"},
  {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: 1,
  slidesToScroll: 1,
  vertical: true,
  verticalSwiping: true,
  autoplay:true,
  arrows:false
};
function FifthEdition() {
  const [ topics ,setTopics ] = useState(undefined);

  useEffect(()=>{
    // 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();
    var myTimer = setInterval(scrollUp, 10);
    // 鼠标移入container 元素上 清除定时器 停止滚动
    box.onmouseover = () => {
      clearInterval(myTimer);
    }
    // 鼠标移出container 元素上 继续滚动
    // 60表示每隔60毫秒向上滚动一次
    box.onmouseout = () => {
      myTimer = setInterval(scrollUp, 10);
    }
  }

  function scrollUp() {
    let box = document.getElementById('scrollBox1');
    if(box){
      let con1 = document.getElementById('box1');
      if (box.scrollLeft >= con1.clientWidth) {
        box.scrollLeft = 0;
      } else {
        box.scrollLeft++;
      }
    }
  }

  return(
    <div id={"scrollBox1"}>
      {/* <div style={{width:370*list.length+"px"}}>
        <ul className="fifthList" id="box1" style={{width:(370*list.length)/2+"px"}}>
          {
            list && list.map((i,k)=>{
              return(
                <li><a href={i.src} target="_blank"><img src={i.image_url} alt={i.name}/></a></li>
              )
            })
          }
        </ul>
        {list.length > 10 && 
          <ul className="fifthList" id="box2" style={{width:(370*list.length)/2+"px"}}>
          {
            list && list.map((i,k)=>{
              return(
                <li><a href={i.src} target="_blank"><img src={i.image_url} alt={i.name}/></a></li>
              )
            })
          }
          </ul>
        }
      </div> */}
      {
        topics && topics.length>0 ?
        <Slider {...settings} className="unitMainSlider">
          {
            topics.map((i,k)=>{
              return(
                <div className="slickMainline">
                {
                  i.map((j,k1)=>{
                    return(
                      <a href={j.url} target="_blank"><img src={getImageUrl(j.image)} alt=""/></a>
                    )
                  })
                }
                </div>
              )
            })
          }
        </Slider>
        :""
      }
    </div>
  )
}
export default FifthEdition;