forgeplus-react/src/forge/Main/projecthome/SubBanner.jsx

import React , { useEffect , useState } from 'react';
import Slider from 'react-slick';
import { Link } from 'react-router-dom';
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 =[
//   {img:Imgs,name:"矽璓工业物联操作系统XiUOS",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"openGauss-operator",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"PaddleDetection 2.0",company:"TrustieMirrors",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"skyline",company:"浪潮信息",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"BitXHub",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"Device Model",company:"openDACS",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"Gitlink",company:"Gitlink",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"openEuler-datenlord",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"OpenAtom XuperChain",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"xuos-web",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
//   {img:Imgs,name:"CrowdOS开源项目开发",company:"西北工业大学",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"},
// ]
const settings={
  dots: false,
  infinite: true,
  speed: 1000,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay:true,
  arrows:false,
  adaptiveHeight:true
}

function SubBanner() {

  const [ list , setList ] = useState(undefined);

  useEffect(()=>{
    getList();
  },[])

  function getList() {
    const url = `/projects/banner_recommend.json`;
    axios.get(url).then(result=>{
      if(result && result.data){
        setList(result.data.projects);
      }
    }).catch(error=>{})
  }
  return(
    <div className="banners">
      <div className="bannersCenter">
        <p className="bTitle"><span>新一代开源创新服务平台</span></p>
        <p className="bSubTitle">Gitlink（确实开源）-CCF官网指定的产学研融合面向软件开源创新的开源社区</p>
        <div className="bannerBox">
          {
            list && list.length > 0 ?
            <Slider {...settings} className="bannersProject">
              {
                list.map((i,k)=>{
                  return(
                    <li>
                      <div className="projectinfos">
                        <img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" />
                        <div>
                          <p className="name">{i.name}</p>
                          <p className="company">{i.author && i.author.name}</p>
                        </div>
                      </div>
                      <p className="desc">{i.description}</p>
                      <div className="infoData">
                        <span><img src={Eye} alt="" /><span>{i.visits}</span></span>
                        {i.category && i.category.id && <span><img src={Data} alt="" /><span>{i.category.name}</span></span>}
                        {i.language && i.language.id && <span><img src={Earth} alt="" /><span>{i.language.name}</span></span>}
                      </div>
                    </li>
                  )
                })
              }
            </Slider>
            :""
          }
        </div>
        <div className="airBubble">
          <div className="left">
            <div>
              {
                list && list.length > 0 && list.map((i,k)=>{
                  return(
                    k%2 === 0? <span><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.author && i.author.name}/{i.name}</Link></span> : ""
                  )
                })
              }
            </div>
          </div>

          <div className="right">
            <div>
              {
                list && list.length > 0 && list.map((i,k)=>{
                  return(
                    k%2 > 0 ? <span><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.author && i.author.name}/{i.name}</Link></span> : ""
                  )
                })
              }
            </div>
          </div>
          
        </div>
      </div>
    </div>
  )
}
export default SubBanner