forked from Gitlink/forgeplus-react
115 lines
5.8 KiB
JavaScript
115 lines
5.8 KiB
JavaScript
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 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>osredm 红山开源</span></p>
|
|
<p className="bSubTitle">新一代开发创新服务平台 让你的创意在这里释放</p>
|
|
<div className="bannerBox">
|
|
{
|
|
list && list.length > 0 ?
|
|
<Slider {...settings} className="bannersProject">
|
|
{
|
|
list.map((i,k)=>{
|
|
return(
|
|
<li>
|
|
<div className="projectinfos">
|
|
<Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" /></Link>
|
|
<div>
|
|
<p className="name"><Link to={`/${i.author && i.author.login}/${i.identifier}`}>{i.name}</Link></p>
|
|
<p className="company"><Link to={`/${i.author && i.author.login}`}>{i.author && i.author.name}</Link></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
|