|
|
import React, { Component } from 'react';
|
|
|
|
|
|
import { Redirect } from 'react-router';
|
|
|
|
|
|
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
|
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
|
|
|
|
|
import SiderBar from '../tpm/SiderBar';
|
|
|
|
|
|
import UpgradeModals from '../modals/UpgradeModals';
|
|
|
|
|
|
import { SnackbarHOC , getImageUrl} from 'educoder';
|
|
|
|
|
|
import Slider from '@icedesign/base/lib/slider';
|
|
|
|
|
|
import '@icedesign/base/lib/slider/style.js';
|
|
|
|
|
|
import Rating from '@icedesign/base/lib/rating';
|
|
|
|
|
|
import '@icedesign/base/lib/rating/style.js';
|
|
|
|
|
|
import './home.css';
|
|
|
|
|
|
import {Tooltip,Spin} from 'antd';
|
|
|
|
|
|
const $ = window.$;
|
|
|
|
|
|
class ShixunsHome extends Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
this.state={
|
|
|
homedatalist:undefined,
|
|
|
hometypepvisible:true
|
|
|
}
|
|
|
}
|
|
|
componentDidMount(){
|
|
|
const upsystem=`/users/system_update.json`;
|
|
|
axios.get(upsystem).then((response)=>{
|
|
|
let updata=response.data;
|
|
|
this.setState({
|
|
|
updata:updata
|
|
|
})
|
|
|
}).catch((error)=>{
|
|
|
console.log(error);
|
|
|
})
|
|
|
let url=`/home/index.json`;
|
|
|
axios.get(url).then((response)=> {
|
|
|
if(response.status===200){
|
|
|
this.setState({
|
|
|
homedatalist:response.data,
|
|
|
hometypepvisible:false
|
|
|
})
|
|
|
}
|
|
|
}).catch((error)=>{
|
|
|
console.log(error)
|
|
|
});
|
|
|
}
|
|
|
|
|
|
bannaronmousemove=()=>{
|
|
|
$("#bannerrightimg").show();
|
|
|
$("#bannerleftimg").show();
|
|
|
}
|
|
|
|
|
|
bannaronmouseout=()=>{
|
|
|
$("#bannerrightimg").hide();
|
|
|
$("#bannerleftimg").hide();
|
|
|
}
|
|
|
render() {
|
|
|
|
|
|
let {homedatalist,hometypepvisible} = this.state;
|
|
|
|
|
|
const arrowStylel = {
|
|
|
left: "-76px",
|
|
|
width: "76px",
|
|
|
textAlign: "left",
|
|
|
height: "100%",
|
|
|
cursor: "pointer"
|
|
|
};
|
|
|
|
|
|
const arrowStyler = {
|
|
|
right: "-120px",
|
|
|
width: "76px",
|
|
|
textAlign: "left",
|
|
|
height: "100%",
|
|
|
cursor: "pointer"
|
|
|
};
|
|
|
const noneStyler={
|
|
|
display: "none"
|
|
|
}
|
|
|
const CustomNextArrow = props => {
|
|
|
return (
|
|
|
<div {...props} id="bannerright" style={arrowStyler}>
|
|
|
<img id="bannerrightimg" style={noneStyler} src={"images/educoder/banner-right.png"} />
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const CustomPrevArrow = props => {
|
|
|
return (
|
|
|
<div {...props} id="bannerleft" style={arrowStylel}>
|
|
|
<img id="bannerleftimg" style={noneStyler} src={"images/educoder/banner-left.png"} />
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
let homedatalistreps;
|
|
|
|
|
|
if(homedatalist!=undefined){
|
|
|
homedatalistreps=[];
|
|
|
for(var i=0; i<homedatalist.reps.length;i++){
|
|
|
homedatalistreps.push(homedatalist.reps[homedatalist.reps.length-i-1])
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<div className="newMain clearfix backFAFAFA">
|
|
|
{this.state.updata===undefined?"":<UpgradeModals
|
|
|
{...this.state}
|
|
|
/>}
|
|
|
<Spin spinning={hometypepvisible} size="large" style={{marginTop:'15%'}}>
|
|
|
{/*懒加载*/}
|
|
|
|
|
|
<SiderBar/>
|
|
|
<div className="clearfix">
|
|
|
<div className="clearfix edu-back-white pb40 pt30 mb20" id="index-top" onMouseMove={this.bannaronmousemove} onMouseOut={this.bannaronmouseout}>
|
|
|
<div className="educontent pr educontentSlider">
|
|
|
{homedatalist===undefined?"":
|
|
|
<Slider
|
|
|
nextArrow={<CustomNextArrow />}
|
|
|
prevArrow={<CustomPrevArrow />}
|
|
|
autoplay
|
|
|
animation={false}
|
|
|
style={{width:"100%"}}
|
|
|
arrowPos="outer">
|
|
|
{homedatalist.images_url.map((item, index) => (
|
|
|
<div key={index} className="slider-img-wrapper">
|
|
|
<a href={item.path}>
|
|
|
<img src={item.image_url} />
|
|
|
</a>
|
|
|
</div>
|
|
|
))}
|
|
|
</Slider>
|
|
|
}
|
|
|
<div className="user_navlist">
|
|
|
<div className="user_navlist_black">
|
|
|
<ul className="black_nav_list">
|
|
|
{homedatalist === undefined ? "" :homedatalistreps.map((item,key)=>{
|
|
|
|
|
|
return(
|
|
|
<li className="welcome_shixun_index" data-id="1" data-type="rep" key={key}>
|
|
|
<span className="black_nav_span clearfix font-12">
|
|
|
<Link to={"/shixuns?id="+item.rep_id+"&type=rep"}>
|
|
|
{item.rep_name}
|
|
|
</Link>
|
|
|
<img
|
|
|
src={getImageUrl("images/educoder/icon/downarrowsmall-right.svg")}
|
|
|
className="fr mt15 transform-90"/>
|
|
|
</span>
|
|
|
<ul className="user_navlist_white" >
|
|
|
{
|
|
|
item.sub_rep_list.map((i,k)=>{
|
|
|
return(
|
|
|
<div className="clearfix mt20 mb5 pb10 navlistpanel-line" key={k}>
|
|
|
<p className="little-title clearfix welcome_shixun_index little-titles"
|
|
|
data-id="1" data-rep-id="1" data-type="sub"
|
|
|
>
|
|
|
<Link to={"/shixuns?id="+i.sub_rep_id+"&type=sub&palce="+item.rep_id}>
|
|
|
{i.sub_rep_name}
|
|
|
</Link>
|
|
|
</p>
|
|
|
{
|
|
|
i.tag_rep_list.map((t,e)=>{
|
|
|
return(
|
|
|
<Link className="welcome_shixun_index"
|
|
|
data-id="1" data-rep-id="1" data-sub-id="1"
|
|
|
to={"/shixuns?id="+t.tag_id+"&type=tag&palce="+item.rep_id}
|
|
|
data-type="tag" key={e}>{t.tag_name}</Link>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
</ul>
|
|
|
</li>
|
|
|
)
|
|
|
})
|
|
|
|
|
|
}
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{/*实训路径*/}
|
|
|
<div className="clearfix pt20 educontent pr pb20">
|
|
|
<div className="edu-txt-center">
|
|
|
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>实践课程</p>
|
|
|
<p className="color-grey-cd font-12">TRAINING COURSE</p>
|
|
|
</div>
|
|
|
<Link to={"/paths"} className="moreitem">更多<i className="fa fa-angle-right ml5"></i></Link>
|
|
|
|
|
|
<div className="square-list clearfix" style={{width:'102%'}}>
|
|
|
|
|
|
|
|
|
{homedatalist===undefined?"":homedatalist.subjects.map((item,key)=>{
|
|
|
if(key<8)
|
|
|
return(
|
|
|
<div className="square-Item" key={key} id={item.id} style={{width:'286px'}}>
|
|
|
|
|
|
<div className="tag-green">
|
|
|
<span className="tag-name"> {item.name}</span>
|
|
|
<img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>
|
|
|
</div>
|
|
|
|
|
|
<div className={item.power === false ? "closeSquare" : "none"}>
|
|
|
<img src={getImageUrl("images/educoder/icon/lockclose.svg")}
|
|
|
className="mt80 mb25"/>
|
|
|
<p className="font-14 color-white">非试用内容，需要授权</p>
|
|
|
</div>
|
|
|
|
|
|
<Link to={"/paths/" + item.id}
|
|
|
target="_blank"
|
|
|
className="square-img">
|
|
|
<img src={item.image_url}/>
|
|
|
</Link>
|
|
|
|
|
|
<div className="square-main">
|
|
|
<p className="task-hide">
|
|
|
<Link to={"/paths/" + item.id}
|
|
|
target="_blank"
|
|
|
title={item.name}
|
|
|
className="justify color-grey-name">
|
|
|
{item.name}
|
|
|
</Link>
|
|
|
</p>
|
|
|
|
|
|
<p className="clearfix mt8 font-12 color-grey-B4">
|
|
|
<Tooltip placement="bottom" title={"章节"}>
|
|
|
<span className="mr10 fl squareIconSpan">
|
|
|
<i className="iconfont icon-zhangjie1 fl mr3 iconfontzhangjie"></i>{item.stages_count}
|
|
|
</span>
|
|
|
</Tooltip>
|
|
|
|
|
|
{/*<Tooltip placement="bottom" title={"实训"}>*/}
|
|
|
{/*<span className="mr10 fl squareIconSpan">*/}
|
|
|
{/*<i className="iconfont icon-daima fl mr3 iconfontshixundaibeijing"></i>{item.shixuns_count}*/}
|
|
|
{/*</span>*/}
|
|
|
{/*</Tooltip>*/}
|
|
|
|
|
|
<Tooltip placement="bottom" title={"学习人数"}>
|
|
|
<span className="mr10 fl squareIconSpan" style={{display:item.stu_num===0?"none":"block"}}>
|
|
|
<i className="iconfont icon-chengyuan fl mr3" ></i>{item.members_count}
|
|
|
</span>
|
|
|
</Tooltip>
|
|
|
<span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/*精选实训 改为 开发社区*/}
|
|
|
<div className="clearfix pt20 educontent pr pb20">
|
|
|
<div className="edu-txt-center">
|
|
|
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>开发社区</p>
|
|
|
<p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p>
|
|
|
</div>
|
|
|
<Link to={"/shixuns"} className="moreitem">更多<i className="fa fa-angle-right ml5"></i></Link>
|
|
|
|
|
|
<div className="square-list clearfix" style={{width:'102%'}}>
|
|
|
{homedatalist===undefined?"":homedatalist.shixuns.map((item,key)=>{
|
|
|
return(
|
|
|
<div className="square-Item" key={key} id={item.id} style={{width:'286px'}}>
|
|
|
|
|
|
<div className="tag-green">
|
|
|
<span className="tag-name"> {item.tag_name}</span>
|
|
|
<img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>
|
|
|
</div>
|
|
|
|
|
|
<div className={item.power === false ? "closeSquare" : "none"}>
|
|
|
<img src={getImageUrl("images/educoder/icon/lockclose.svg")}
|
|
|
className="mt80 mb25"/>
|
|
|
<p className="font-14 color-white">非试用内容，需要授权</p>
|
|
|
</div>
|
|
|
|
|
|
<Link to={"/shixuns/"+item.identifier+"/challenges"}
|
|
|
target="_blank"
|
|
|
className="square-img">
|
|
|
<img src={item.pic}/>
|
|
|
</Link>
|
|
|
|
|
|
<div className="square-main">
|
|
|
<p className="task-hide">
|
|
|
<Link to={"/shixuns/"+item.identifier+"/challenges"}
|
|
|
target="_blank"
|
|
|
title={item.name}
|
|
|
className="justify color-grey-name">
|
|
|
{item.name}
|
|
|
</Link>
|
|
|
</p>
|
|
|
|
|
|
<p className="clearfix mt8 ml-3">
|
|
|
<span className="rateYoStar fl" style={{padding: '0px',height: '20px',lineHeight: '19px',cursor: 'default'}} title="">
|
|
|
<Rating key={key} value={item.score_info===null?5:item.score_info} disabled allowHalf />
|
|
|
</span>
|
|
|
<span className="fl ml25 font-12 color-grey-9 lineh-12 mt4">{item.score_info===null?"5分":item.score_info+"分"}</span>
|
|
|
</p>
|
|
|
|
|
|
<p className="clearfix mt8 font-12 color-grey-B4">
|
|
|
|
|
|
<Tooltip placement="bottom" title={"关卡"}>
|
|
|
<span className="mr10 fl squareIconSpan">
|
|
|
<i className="iconfont icon-shixunguanqia fl mr3" ></i>{item.challenges_count}
|
|
|
</span>
|
|
|
</Tooltip>
|
|
|
|
|
|
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
|
|
|
{/*<span className="mr10 fl squareIconSpan">*/}
|
|
|
{/*<i className="iconfont icon-jingyan fl mr3"></i>{item.exp}*/}
|
|
|
{/*</span>*/}
|
|
|
{/*</Tooltip>*/}
|
|
|
|
|
|
<Tooltip placement="bottom" title={"学习人数"}>
|
|
|
<span className="mr10 fl squareIconSpan" style={{display:item.stu_num===0?"none":"block"}}>
|
|
|
<i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
|
|
|
</span>
|
|
|
</Tooltip>
|
|
|
|
|
|
<span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/*导师排行榜*/}
|
|
|
<div className="pt60 pb60 mb30 mentor-ranking">
|
|
|
<div className="educontent">
|
|
|
<div className="edu-txt-center">
|
|
|
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>导师排行榜</p>
|
|
|
<p className="color-grey-cd font-12">MENTOR RANKING</p>
|
|
|
</div>
|
|
|
|
|
|
<div className="ranking clearfix">
|
|
|
<ul className="grade color-dark">
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
|
|
|
|
|
|
if(key===1){
|
|
|
return(
|
|
|
<li className="mt35 pr" key={key}>
|
|
|
<img src={getImageUrl("images/educoder/huangguan-two.png")} className="huangguan" />
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url} />
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
|
|
|
if(key===0){
|
|
|
return(
|
|
|
<li className="pr" key={key}>
|
|
|
<img src={getImageUrl("images/educoder/huangguan.png")} className="huangguan" />
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url} />
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
|
|
|
if(key===2){
|
|
|
return(
|
|
|
<li className="mt35 pr" key={key}>
|
|
|
<img src={getImageUrl("images/educoder/huangguan-three.png")} className="huangguan" />
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url} />
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
</ul>
|
|
|
<br />
|
|
|
<ul className="grade mt30">
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
|
|
|
if(key>2) {
|
|
|
return (
|
|
|
<li key={key}>
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url}/>
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/*程序员排行榜*/}
|
|
|
<div className="pt60 pb60 mb30 pro-ranking">
|
|
|
<div className="educontent">
|
|
|
<div className="edu-txt-center">
|
|
|
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>程序员排行榜</p>
|
|
|
<p className="color-grey-cd font-12">PROGRAMMER RANKING</p>
|
|
|
</div>
|
|
|
<div className="ranking clearfix">
|
|
|
<ul className="grade color-dark">
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
|
|
|
if(key===1){
|
|
|
return(
|
|
|
<li className="mt35 pr" key={key}>
|
|
|
<img src={getImageUrl("images/educoder/huangguan-two.png")} className="huangguan" />
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url} />
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
|
|
|
if(key===0){
|
|
|
return(
|
|
|
<li className="pr" key={key}>
|
|
|
<img src={getImageUrl("images/educoder/huangguan.png")} className="huangguan" />
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url} />
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
|
|
|
if(key===2){
|
|
|
return(
|
|
|
<li className="mt35 pr" key={key}>
|
|
|
<img src={getImageUrl("images/educoder/huangguan-three.png")} className="huangguan" />
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url} />
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
</ul>
|
|
|
<br />
|
|
|
<ul className="grade mt30">
|
|
|
{
|
|
|
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
|
|
|
if(key>2) {
|
|
|
return (
|
|
|
<li key={key}>
|
|
|
<a href={"/users/"+item.login} className="color-dark">
|
|
|
<img src={'images/'+item.image_url}/>
|
|
|
<span className="task-hide rankName">{item.username}</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
)
|
|
|
}
|
|
|
})}
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default SnackbarHOC() (TPMIndexHOC ( ShixunsHome ));
|
