forked from Gitlink/forgeplus-react
项目首页改版完成开发未测试
This commit is contained in:
parent
2d428e53f6
commit
c4d185a478
|
|
@ -41,7 +41,7 @@ class Index extends Component {
|
|||
|
||||
return (
|
||||
<div className="newMain clearfix">
|
||||
{window.location.href.indexOf('osredm.jk') < 0&&<Handbook/>}
|
||||
{/* {window.location.href.indexOf('osredm.jk') < 0&&<Handbook/>} */}
|
||||
<Switch {...this.props}>
|
||||
<Route
|
||||
path="/projects/:projectsType/new/:OIdentifier"
|
||||
|
|
|
|||
|
|
@ -17,9 +17,16 @@ import left from './img/left.png';
|
|||
import right from './img/right.png';
|
||||
import explore1 from '../Images/explore1.png';
|
||||
import explore2 from '../Images/explore2.png';
|
||||
import explore3 from '../Images/explore3.png';
|
||||
import explore4 from '../Images/explore4.png';
|
||||
import explore5 from '../Images/explore5.png';
|
||||
import explore6 from '../Images/explore6.png';
|
||||
import explore7 from '../Images/explore7.png';
|
||||
import explore8 from '../Images/explore8.png';
|
||||
import explore9 from '../Images/explore9.png';
|
||||
import explore10 from '../Images/explore10.png';
|
||||
import { getImageUrl } from '../../managements/common/utils';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Search = Input.Search;
|
||||
|
||||
|
|
@ -42,7 +49,12 @@ class Index extends Component {
|
|||
languageList:undefined,
|
||||
languageId:undefined,
|
||||
CategoryList:undefined,
|
||||
bannerList: undefined
|
||||
bannerList: undefined,
|
||||
// 今日、本周热门项目
|
||||
hotProjectTime: 1,
|
||||
hotProjectList: undefined,
|
||||
// 热门开发者
|
||||
authorList: undefined
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -56,6 +68,35 @@ class Index extends Component {
|
|||
this.getLanguage();
|
||||
this.getBannerList();
|
||||
// this.getRecommandOri();
|
||||
this.getList(1);
|
||||
this.getAuthorList();
|
||||
}
|
||||
|
||||
// 获取热门开发者
|
||||
getAuthorList = ()=>{
|
||||
axios.get(`/user_rank.json`,{
|
||||
params:{
|
||||
time: 7
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
this.setState({authorList: result.data.users})
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 获取热门项目
|
||||
getList = (time) => {
|
||||
const url = `/project_rank.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
time
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
this.setState({hotProjectList: result.data.projects})
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
// 获取banner图列表
|
||||
|
|
@ -299,7 +340,7 @@ class Index extends Component {
|
|||
render() {
|
||||
const { current_user, mygetHelmetapi} = this.props;
|
||||
|
||||
const { projectsList ,isSpin, total, search, limit, page, typeList, categoryList ,bannerList } = this.state;
|
||||
const { projectsList ,isSpin, total, search, limit, page, typeList, categoryList ,bannerList, hotProjectTime, hotProjectList, authorList } = this.state;
|
||||
|
||||
let settings={
|
||||
dots:true,
|
||||
|
|
@ -312,8 +353,8 @@ class Index extends Component {
|
|||
pauseOnFocus:true,
|
||||
autoplay:true,
|
||||
arrows:true,
|
||||
prevArrow:<button type='button' class='changeImgBut'><img src={left} width="70px" alt=""/></button>,
|
||||
nextArrow:<button type='button' class='changeImgBut'><img src={right} width="70px" alt=""/></button>
|
||||
prevArrow:<button type='button' className='changeImgBut'><img src={left} width="70px" alt=""/></button>,
|
||||
nextArrow:<button type='button' className='changeImgBut'><img src={right} width="70px" alt=""/></button>
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -403,8 +444,57 @@ class Index extends Component {
|
|||
</div>
|
||||
<div style={{width: '320px'}} className='ml20'>
|
||||
{/* 帮助手册 */}
|
||||
<div className='helpText font-28'>
|
||||
<img src={explore10} alt="" class="helpImg1"/>
|
||||
{window.location.href.indexOf('osredm.jk') < 0 &&<div className='helpText font-28'>
|
||||
<a href="https://help.osredm.com/" target='_blank'>
|
||||
<img src={explore10} alt="" className="helpImg1"/>
|
||||
</a>
|
||||
</div>}
|
||||
{/* 热门项目（今日/本周） */}
|
||||
<div className='hotProjects mt20'>
|
||||
<div className='hotProjectsTitle font-17'>
|
||||
<div className={`oneItemTil ${hotProjectTime === 1 ? 'activeHot' : ''}`} onClick={()=>{this.setState({hotProjectTime: 1}); this.getList(1)}}>
|
||||
<img src={explore3} alt="" className="helpImg2 mr10" width={18}/>
|
||||
<span>今日热门</span>
|
||||
</div>
|
||||
<div className={`oneItemTil ${hotProjectTime === 7 ? 'activeHot' : ''}`} onClick={()=>{this.setState({hotProjectTime: 7}); this.getList(7)}}>
|
||||
<img src={explore4} alt="" className="helpImg2 mr10" width={18}/>
|
||||
<span>本周热门</span>
|
||||
</div>
|
||||
</div>
|
||||
{hotProjectList && hotProjectList.length > 0 && hotProjectList.map((i, index)=>{
|
||||
return <div className='hotProjectItem' key={index}>
|
||||
<div className="mInfos">
|
||||
<Link target="_blank" to={`/${i.owner && i.owner.login}/${i.identifier}`} className="name task-hide font-16">{i.owner && i.owner.name}/{i.name}</Link>
|
||||
<span className='font-14'>
|
||||
<i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
|
||||
</span>
|
||||
</div>
|
||||
<div className="sInfos task-hide-2 font-14 mt10">
|
||||
{i.description ? i.description : "暂无项目简介"}
|
||||
</div>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
{/* 热门开发者 */}
|
||||
<div className='hotProjects mt20'>
|
||||
<div className='hotProjectsTitle font-17 pl30'>
|
||||
<img src={explore5} alt="" className="helpImg2 mr10" width={18}/>开源贡献者TOP10
|
||||
</div>
|
||||
<div className='hotAuthor til font-15'>
|
||||
<div className='hotAuthor1'>排名</div>
|
||||
<div className='hotAuthor2'>贡献者</div>
|
||||
<div className='hotAuthor3'>总积分</div>
|
||||
</div>
|
||||
{authorList && authorList.length > 0 && authorList.map((i, index) =>{
|
||||
return <div className={`hotAuthor font-15 ${index%2 === 0 ? 'otherColor' : ''}`} key={index}>
|
||||
<div className='hotAuthor1'>{index<3 ? <img src={index === 0 ? explore6 : index === 1 ? explore7 : explore8} alt='' width={23}/> : index+1}</div>
|
||||
<Link target="_blank" to={`/${i.login}`} className='hotAuthor2 task-hide'>
|
||||
<img src={getImageUrl(`/${i.avatar_url}`)} alt="" width={24} className='mr5'/>
|
||||
{i.name}
|
||||
</Link>
|
||||
<div className='hotAuthor3 ml20'>{i.score}</div>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,81 @@
|
|||
margin: 1.5% 2.1%;
|
||||
}
|
||||
}
|
||||
.helpImg2{
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.hotProjects{
|
||||
background-image:linear-gradient(180deg,#f4f5f8 0%,#fbfcfd 100%);
|
||||
border:2px solid #ffffff;
|
||||
}
|
||||
.hotProjectsTitle{
|
||||
color: #000000;
|
||||
height:50px;
|
||||
line-height: 50px;
|
||||
background-color:rgba(243, 250, 255, 0.74);
|
||||
box-shadow:0px 2px 3px rgba(212, 217, 255, 0.57);
|
||||
}
|
||||
.oneItemTil{
|
||||
display: inline-block;
|
||||
width: 158px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.activeHot{
|
||||
color:#2a3ee9;
|
||||
border-bottom: 1px solid #2a3ee9;
|
||||
}
|
||||
.hotProjectItem{
|
||||
padding-bottom: 16px;
|
||||
margin: 20px 20px 16px;
|
||||
border-bottom: 1px dashed #cccfd6;
|
||||
.mInfos{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
color: #656977;
|
||||
.name{
|
||||
flex:1;
|
||||
color:#232a39;
|
||||
}
|
||||
}
|
||||
.sInfos{
|
||||
background: #F7F8F9;
|
||||
font-weight: 400;
|
||||
color:#525561;
|
||||
line-height: 24px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.hotProjectItem:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.hotAuthor{
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.til{
|
||||
color:#989fab;
|
||||
}
|
||||
&.otherColor{
|
||||
background-color:rgba(238, 243, 251, 0.76);
|
||||
}
|
||||
&:not(.til):hover{
|
||||
background-color:rgba(225, 225, 225, 0.28);
|
||||
}
|
||||
}
|
||||
.hotAuthor1{
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
.hotAuthor2{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.hotAuthor3{
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-left{
|
||||
|
|
|
|||
Loading…
Reference in New Issue