forked from Gitlink/forgeplus-react
Merge pull request 'ADD 项目首页功能并入开发分支' (#238) from featrue_project_homepage into develop
This commit is contained in:
commit
e785e9a358
|
|
@ -3971,9 +3971,12 @@ html>body #ajax-indicator {
|
|||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.head-right i{
|
||||
color: #fff!important;
|
||||
}
|
||||
|
||||
.head-nav ul#header-nav li a:hover,.head-nav ul#header-nav li.active a {
|
||||
color: #5091FF;
|
||||
|
|
|
|||
|
|
@ -322,6 +322,13 @@ class App extends Component {
|
|||
{/* 查询 */}
|
||||
<Route path="/search" component={Search} />
|
||||
|
||||
<Route exact path="/explore/all"
|
||||
render={
|
||||
(props) => (
|
||||
<ProjectIndex {...this.props} {...props} />
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Route exact path="/explore"
|
||||
render={
|
||||
(props) => (
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default ({history}) => {
|
|||
/>
|
||||
</div>
|
||||
:
|
||||
<i className="iconfont icon-sousuo font-18 color-grey-6 ml30" onClick={() => {
|
||||
<i className="iconfont icon-sousuo font-18 ml30" onClick={() => {
|
||||
setOpenSearch(true)
|
||||
}} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ function Footer(){
|
|||
|
||||
return(
|
||||
<div>
|
||||
<div style={{height:"543px"}}></div>
|
||||
<div style={{height:"483px"}}></div>
|
||||
<div className="newFooter edu-txt-center">
|
||||
{value && showhtml(value)}
|
||||
{/* <div className="footerInfos">
|
||||
|
|
|
|||
|
|
@ -433,7 +433,7 @@ class NewHeader extends Component {
|
|||
{
|
||||
current_user && (current_user.main_site || current_user.login) && (settings && settings.add && settings.add.length>0)?
|
||||
<Dropdown overlay={this.addMenu(settings && settings.add)} placement="bottomRight">
|
||||
<i className="iconfont icon-tianjiafangda color-grey-6 ml30 mr15"></i>
|
||||
<i className="iconfont icon-tianjiafangda ml30 mr15"></i>
|
||||
</Dropdown>:""
|
||||
}
|
||||
|
||||
|
|
@ -448,7 +448,7 @@ class NewHeader extends Component {
|
|||
>
|
||||
<Link to={"/settings/notice"} className="message-icon">
|
||||
{current_user && <Badge count={current_user.message_unread_total}>
|
||||
<i className="iconfont icon-xiaoxilingdang color-grey-6 ml15 mr15"></i>
|
||||
<i className="iconfont icon-xiaoxilingdang ml15 mr15"></i>
|
||||
</Badge>}
|
||||
</Link>
|
||||
</Popover>
|
||||
|
|
@ -457,10 +457,10 @@ class NewHeader extends Component {
|
|||
</div>
|
||||
{!user || (user && !user.login) ?
|
||||
<span className="font-15 ml30">
|
||||
<a onClick={() => this.educoderlogin()} className="mr5 color-grey-6">登录</a>
|
||||
<a onClick={() => this.educoderlogin()} className="mr5 color-white">登录</a>
|
||||
{
|
||||
settings && settings.common && settings.common.register &&
|
||||
<span><em className="vertical-line"></em><a className="ml5 color-grey-6" href={`${settings.common.register}`} target="_blank">注册</a></span>
|
||||
<span><em className="vertical-line"></em><a className="ml5 color-white" href={`${settings.common.register}`} target="_blank">注册</a></span>
|
||||
}
|
||||
</span>
|
||||
:
|
||||
|
|
|
|||
|
|
@ -22,6 +22,11 @@ const ProjectIndex = Loadable({
|
|||
loading: Loading,
|
||||
});
|
||||
|
||||
const ProjectHome = Loadable({
|
||||
loader: () => import("./Main/projecthome/Index"),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
// 项目详情放在用户和组织下作为二级菜单存在
|
||||
// const ProjectDetail = Loadable({
|
||||
// loader: () => import("./Main/Detail"),
|
||||
|
|
@ -67,16 +72,22 @@ class Index extends Component {
|
|||
)}
|
||||
></Route> */}
|
||||
<Route
|
||||
path="/explore"
|
||||
path="/explore/all"
|
||||
render={(props) => (
|
||||
<ProjectIndex {...this.props} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
|
||||
<Route
|
||||
path="/explore"
|
||||
render={(props) => (
|
||||
<ProjectHome {...this.props} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
<Route
|
||||
path="/"
|
||||
render={(props) => (
|
||||
<ProjectIndex {...this.props} {...props} />
|
||||
<ProjectHome {...this.props} {...props} />
|
||||
)}
|
||||
></Route>
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ function CoderDepot(props){
|
|||
if(result && result.data){
|
||||
const release = {
|
||||
"list":result.data.releases,
|
||||
"total_count":result.data.releases.length
|
||||
"total_count":result.data.releases && result.data.releases.length
|
||||
}
|
||||
setReleaseVersions(release);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ class Index extends Component {
|
|||
|
||||
this.getCategory();
|
||||
|
||||
this.getRecommand();
|
||||
// this.getRecommand();
|
||||
|
||||
this.getLanguage();
|
||||
|
||||
|
|
@ -304,9 +304,9 @@ class Index extends Component {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<p className="t_project_banner">
|
||||
{/* <p className="t_project_banner">
|
||||
<img src={banner} width="100%" alt=""/>
|
||||
</p>
|
||||
</p> */}
|
||||
{/* {
|
||||
recommendOriList && recommendOriList.length>0?
|
||||
<Slider {...settings} className="recommandOri">
|
||||
|
|
@ -320,7 +320,7 @@ class Index extends Component {
|
|||
</Slider>
|
||||
:""
|
||||
} */}
|
||||
{
|
||||
{/* {
|
||||
recommendList && recommendList.length>0 &&
|
||||
<Slider {...setting} className={recommendList.length>5 ? "recommandProjects":"recommandProjects mb20"}>
|
||||
{
|
||||
|
|
@ -341,7 +341,7 @@ class Index extends Component {
|
|||
})
|
||||
}
|
||||
</Slider>
|
||||
}
|
||||
} */}
|
||||
<div className="ProjectListIndex">
|
||||
<div className="list-left">
|
||||
<ul className="list-l-Menu">
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 460 B |
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
Binary file not shown.
|
After Width: | Height: | Size: 435 B |
Binary file not shown.
|
After Width: | Height: | Size: 969 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 367 B |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,126 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import './Index.scss';
|
||||
import SubBanner from './SubBanner';
|
||||
import SubUnitBanner from './SubUnitBanner';
|
||||
import Icon from '../img/index/icon.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Spin } from 'antd';
|
||||
import SubList from './SubList';
|
||||
import more from '../img/index/more.png';
|
||||
import axios from 'axios';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import Nodata from '../../Nodata';
|
||||
|
||||
const LIMIT = 20;
|
||||
function Index() {
|
||||
|
||||
const [ cateList , setCateList ] = useState(undefined);
|
||||
const [ projectsList , setProjectsList ] = useState(undefined);
|
||||
const [ cateID, setCateID ] = useState(undefined);
|
||||
const [ isSpin, setIsSpin ] = useState(true);
|
||||
|
||||
useEffect(()=>{
|
||||
getCate();
|
||||
},[])
|
||||
|
||||
useEffect(()=>{
|
||||
setIsSpin(true);
|
||||
getProject();
|
||||
},[cateID])
|
||||
|
||||
function getCate() {
|
||||
const url = `/project_categories/pinned_index.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result && result.data){
|
||||
setCateList(result.data.project_categories);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
function getProject() {
|
||||
const url = `/projects.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
pinned:"d",
|
||||
category_id:cateID,
|
||||
limit:LIMIT
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setProjectsList(result.data.projects);
|
||||
setIsSpin(false);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<SubBanner />
|
||||
<SubUnitBanner />
|
||||
<div className="dataPanel">
|
||||
<div className="left">
|
||||
<ul className="leftTypes">
|
||||
<a className={cateID ? "" : "active"} onClick={()=>setCateID(undefined)}><img src={Icon} alt="" /><span>最近更新</span></a>
|
||||
{
|
||||
cateList && cateList.length>0?
|
||||
cateList.map((i,k)=>{
|
||||
return(
|
||||
<a className={cateID === i.id ?"active":""} onClick={()=>setCateID(i.id)}><img src={i.logo_url || Icon} alt="" /><span>{i.name}</span></a>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
</ul>
|
||||
<div className="leftLists">
|
||||
<div className="leftTitles">
|
||||
<span>开源项目</span>
|
||||
<Link to={`/explore/all`}>更多<i className="iconfont icon-triangle font-12"></i></Link>
|
||||
</div>
|
||||
<Spin spinning={isSpin}>
|
||||
<div style={{minHeight:"400px"}}>
|
||||
{
|
||||
projectsList && projectsList.length > 0 ?
|
||||
<div className="leftlistItem">
|
||||
{
|
||||
projectsList.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<Link to={`/${i.author && i.author.login}`}><img src={getImageUrl(`/${i.author && i.author.image_url}`)} alt="" /></Link>
|
||||
<div className="itemTitle">
|
||||
<div className="item-title-infos">
|
||||
<Link to={`/${i.author && i.author.login}/${i.identifier}`} className="infotitle">{i.author && i.author.name}/{i.name}</Link>
|
||||
{i.praises_count > 0 ? <span><i className="iconfont icon-dianzan11 mr3 font-16"></i>{i.praises_count}</span> :"" }
|
||||
{i.forked_count > 0 ? <span><i className="iconfont icon-fork2 mr3 font-13"></i>{i.forked_count}</span>:""}
|
||||
</div>
|
||||
<div className="item-desc task-hide-2">
|
||||
{i.description}
|
||||
</div>
|
||||
<div className="item-data">
|
||||
{i.category && i.category.id ? <span className="category">{i.category.name}</span> :"" }
|
||||
{i.language && i.language.id ? <span className="language mr30">{i.language.name}</span> :""}
|
||||
<span style={{lineHeight:"15px",display:"flex"}}><i className="iconfont icon-shijian font-15 mr5"></i>更新于{i.time_ago}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
{
|
||||
projectsList && projectsList.length === 0 && <Nodata _html="暂无数据" />
|
||||
}
|
||||
</div>
|
||||
</Spin>
|
||||
<div className="left-bottom-btn">
|
||||
<Link to={`/explore/all`}>查看更多开源项目<img src={more} alt="" /></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SubList />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Index;
|
||||
|
|
@ -0,0 +1,553 @@
|
|||
.banners{
|
||||
background: url('../img/index/banner.png') no-repeat top;
|
||||
min-height: 516px;
|
||||
background-size: cover;
|
||||
background-color: #0C2A5B;
|
||||
.bannersCenter{
|
||||
padding-top: 30px;
|
||||
max-width: 1200px;
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
height: 516px;
|
||||
}
|
||||
.bTitle{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 20px!important;
|
||||
text-align: center;
|
||||
span{
|
||||
background: linear-gradient(to right,#289AF6 0%, #9E84FF 40%, #FFB03B 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.bSubTitle{
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.bannerBox{
|
||||
background: url('../img/index/box.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 240px;
|
||||
width: 380px;
|
||||
margin:0px auto;
|
||||
padding:25px 30px 34px;
|
||||
.bannersProject{
|
||||
position: relative;
|
||||
.slick-list{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slick-track{
|
||||
display: flex;
|
||||
li{
|
||||
padding:15px 20px;
|
||||
.projectinfos{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 13px;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.name{
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 250px;
|
||||
color: #25EBFF;
|
||||
a{
|
||||
color: #25EBFF!important;
|
||||
}
|
||||
}
|
||||
.company{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 250px;
|
||||
a{
|
||||
color: #FFFFFF!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.infoData{
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
justify-content: space-around;
|
||||
&>span{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&>span{
|
||||
color: #FFB729;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.airBubble{
|
||||
&>div{
|
||||
position: absolute;
|
||||
height: 410px;
|
||||
width: 415px;
|
||||
bottom: 0px;
|
||||
&.right{
|
||||
right: 0px;
|
||||
}
|
||||
&.left{
|
||||
left: 0px;
|
||||
}
|
||||
&.right div, &.left div{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
span{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(124deg, rgba(255, 255, 255, 0.1) 0%, rgba(5, 200, 220, 0.04) 50%, rgba(5, 200, 220, 0.03) 100%);
|
||||
box-shadow: 0px 0px 7px 3px rgba(0, 154, 255, 0.19);
|
||||
border: 1px solid rgba(0, 154, 255, 0.19);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
padding:5px;
|
||||
animation: zoomin 1.3s infinite alternate;
|
||||
&:hover{
|
||||
animation:none
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right span:nth-child(4) a,&.left span:nth-child(1) a,&.left span:nth-child(2) a{
|
||||
color: #25EBFF!important;
|
||||
}
|
||||
&.right span:nth-child(1) a,&.left span:nth-child(5) a{
|
||||
color: #CD8AFF!important;
|
||||
}
|
||||
&.right span:nth-child(3) a,&.right span:nth-child(5) a,&.left span:nth-child(6) a{
|
||||
color: #FF6125!important;
|
||||
}
|
||||
&.left span:nth-child(3) a{
|
||||
color: #FF8425!important;
|
||||
}
|
||||
&.right span:nth-child(2) a,&.left span:nth-child(4) a{
|
||||
color: #8CC2FF!important;
|
||||
}
|
||||
&.right span:nth-child(1){
|
||||
right: 0px;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
}
|
||||
&.right span:nth-child(2){
|
||||
right: 160px;
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
bottom: 220px;
|
||||
padding:0px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&.right span:nth-child(3){
|
||||
right: 300px;
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
bottom: 99px;
|
||||
padding:8px;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&.right span:nth-child(4){
|
||||
right: 156px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
bottom: 39px;
|
||||
font-size: 12px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&.right span:nth-child(5){
|
||||
right: 10px;
|
||||
height: 94px;
|
||||
width: 94px;
|
||||
bottom: 97px;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&.left span:nth-child(1){
|
||||
left: 80px;
|
||||
height: 110px;
|
||||
width: 110px;
|
||||
padding:8px;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
&.left span:nth-child(2){
|
||||
right: 60px;
|
||||
height: 96px;
|
||||
width: 96px;
|
||||
top: 85px;
|
||||
font-size: 13px;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&.left span:nth-child(3){
|
||||
left: 0px;
|
||||
height: 86px;
|
||||
width: 86px;
|
||||
top: 145px;
|
||||
font-size: 13px;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&.left span:nth-child(4){
|
||||
left: 164px;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
bottom: 158px;
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&.left span:nth-child(5){
|
||||
left: 35px;
|
||||
height: 102px;
|
||||
width: 102px;
|
||||
bottom: 32px;
|
||||
font-size: 13px;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&.left span:nth-child(6){
|
||||
right: 10px;
|
||||
height: 114px;
|
||||
width: 114px;
|
||||
bottom: 26px;
|
||||
padding:8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes zoomin{
|
||||
0%{-webkit-transform:scale(1.05);transform:scale(1.05)}
|
||||
100%{-webkit-transform:scale(0.8);transform:scale(0.8)}
|
||||
}
|
||||
@-webkit-keyframes zoomin{
|
||||
0%{-webkit-transform:scale(1.05);transform:scale(1.05)}
|
||||
100%{-webkit-transform:scale(0.8);transform:scale(0.8)}
|
||||
}
|
||||
.unitBanner{
|
||||
padding:29px 0px;
|
||||
background: #F9F9F9;
|
||||
.unitContent{
|
||||
max-width: 1200px;
|
||||
margin:0px auto;
|
||||
.unitTitle{
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #1E1E1E;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
.unitSlider{
|
||||
padding:30px 0px 10px;
|
||||
.slick-list{
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
overflow: hidden;
|
||||
.slickline{
|
||||
display: flex!important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataPanel{
|
||||
width: 1200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:30px 0px 60px;
|
||||
margin:0px auto;
|
||||
.left{
|
||||
width: 850px;
|
||||
box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
|
||||
display: flex;
|
||||
.leftTypes{
|
||||
width: 220px;
|
||||
height: 1576px;
|
||||
background: url('../img/index/typebg.png');
|
||||
background-size: 100% 100%;
|
||||
box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
|
||||
padding:12px 0px;
|
||||
a{
|
||||
padding:0px 20px;
|
||||
height: 44px;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
&.active{
|
||||
background: linear-gradient(to right,#07228F , #466AFF);
|
||||
color: #fff!important;
|
||||
}
|
||||
img{
|
||||
margin-right: 12px;
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftLists{
|
||||
flex:1;
|
||||
.leftTitles{
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.16);
|
||||
padding:0px 20px;
|
||||
span{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
a{
|
||||
color: #466AFF!important;
|
||||
}
|
||||
}
|
||||
.leftlistItem{
|
||||
padding:0px 20px;
|
||||
li{
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.16);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding:20px 0px ;
|
||||
&>a img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.itemTitle{
|
||||
flex:1;
|
||||
.item-title-infos{
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.infotitle{
|
||||
flex:1;
|
||||
height: 21px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 21px;
|
||||
color: #333!important;
|
||||
&:hover{
|
||||
color: #466AFF!important;
|
||||
}
|
||||
}
|
||||
span{
|
||||
margin-left:20px ;
|
||||
color: #333;
|
||||
i{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-desc{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #414141;
|
||||
line-height: 24px;
|
||||
max-width: 548px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.item-data{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #7D7D7D;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.category{
|
||||
position: relative;
|
||||
padding-left: 11px;
|
||||
margin-right: 10px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #466AFF;
|
||||
top: 7px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.language{
|
||||
position: relative;
|
||||
padding-left: 11px;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border-left: 1px solid #9e9e9e;
|
||||
bottom: 4px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-bottom-btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding:18px 0px;
|
||||
a{
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #466AFF;
|
||||
color: #466AFF;
|
||||
font-size: 16px;
|
||||
padding:0px 20px;
|
||||
img{
|
||||
height: 16px;
|
||||
margin-top: -1px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 330px;
|
||||
&>div{
|
||||
box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.partTitle{
|
||||
padding:15px;
|
||||
background: #F6F9FF;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
img{
|
||||
width: 33px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.righthotAuthor{
|
||||
padding-bottom: 15px;
|
||||
li{
|
||||
padding-left: 15px;
|
||||
&>div{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding:10px 15px 10px 0px;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.1);
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
&:last-child > div{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hotProjects{
|
||||
li{
|
||||
padding:10px 15px;
|
||||
margin-bottom: 10px;
|
||||
&:hover{
|
||||
background-color: #F3F3F3;
|
||||
}
|
||||
.mInfos{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
.num{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #466AFF;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.name{
|
||||
flex:1;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.sInfos{
|
||||
background: #F7F8F9;
|
||||
padding:5px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 22px;
|
||||
word-break: break-all;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
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">
|
||||
<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
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import hotAuthor from '../img/index/hotAuthor.png';
|
||||
import week from '../img/index/week.png';
|
||||
import month from '../img/index/month.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import { getImageUrl } from 'educoder';
|
||||
|
||||
|
||||
function SubList() {
|
||||
|
||||
const [ weekList ,setWeekList ] = useState(undefined);
|
||||
const [ monthList ,setMonthList ] = useState(undefined);
|
||||
const [ authorList ,setAuthorList ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
getList(7);
|
||||
getList(30);
|
||||
getAuthorList(7);
|
||||
},[])
|
||||
|
||||
function getList(time){
|
||||
const url = `/project_rank.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
time
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
time === 7 ? setWeekList(result.data.projects) : setMonthList(result.data.projects);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
function getAuthorList(time){
|
||||
const url = `/user_rank.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
time
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result && result.data){
|
||||
setAuthorList(result.data.users);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="right">
|
||||
{
|
||||
authorList && authorList.length > 0?
|
||||
<div>
|
||||
<div className="partTitle"><img src={hotAuthor} alt="" /><span>本周热门开发者</span></div>
|
||||
<div className="righthotAuthor">
|
||||
{
|
||||
authorList.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<div>
|
||||
<Link to={`/${i.login}`}><img src={getImageUrl(`/${i.avatar_url}`)} alt=""/></Link>
|
||||
<div>
|
||||
<Link to={`/${i.login}`} className="font-15">{i.name}</Link>
|
||||
<p className="task-hide" style={{maxWidth:"260px"}}>
|
||||
<Link to={`/${i.login}/${i.project && i.project.identifier}`}><i className="iconfont icon-daimakuicon1 font-14 mr8"></i>{i.project && i.project.name}</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
|
||||
{
|
||||
weekList && weekList.length > 0 ?
|
||||
<div>
|
||||
<div className="partTitle"><img src={week} alt="" /><span>本周热门项目</span></div>
|
||||
<div className="hotProjects">
|
||||
{
|
||||
weekList.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<div className="mInfos">
|
||||
<span className="num">{k+1}</span>
|
||||
<Link to={`/${i.owner && i.owner.login}/${i.identifier}`} className="name task-hide">{i.owner && i.owner.name}/{i.name}</Link>
|
||||
<span>
|
||||
<i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
|
||||
</span>
|
||||
</div>
|
||||
{i.description &&
|
||||
<div className="sInfos task-hide-2">
|
||||
{i.description}
|
||||
</div>
|
||||
}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
{
|
||||
monthList && monthList.length > 0?
|
||||
<div>
|
||||
<div className="partTitle"><img src={month} alt="" /><span>本月热门项目</span></div>
|
||||
<div className="hotProjects">
|
||||
{
|
||||
monthList.map((i,k)=>{
|
||||
return(
|
||||
<li>
|
||||
<div className="mInfos">
|
||||
<span className="num">{k+1}</span>
|
||||
<Link to={`/${i.owner && i.owner.login}/${i.identifier}`} className="name task-hide">{i.owner && i.owner.name}/{i.name}</Link>
|
||||
<span>
|
||||
<i className="iconfont icon-dianzan11 font-16 mr4"></i>{i.praises}
|
||||
</span>
|
||||
</div>
|
||||
{i.description &&
|
||||
<div className="sInfos task-hide-2">
|
||||
{i.description}
|
||||
</div>
|
||||
}
|
||||
</li>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default SubList;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import React , { useEffect , useState } from 'react';
|
||||
import Hot from '../img/index/hot.png';
|
||||
import Slider from "react-slick";
|
||||
import huawei from '../img/index/unit/huawei.png';
|
||||
import langchao from '../img/index/unit/langchao.png';
|
||||
import jijinhui from '../img/index/unit/jijinhui.png';
|
||||
import mulan from '../img/index/unit/mulan.png';
|
||||
import xigongye from '../img/index/unit/xigongye.png';
|
||||
import feiteng from '../img/index/unit/feiteng.png';
|
||||
import xiuos from '../img/index/unit/xiuos.png';
|
||||
import huake from '../img/index/unit/huake.png';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { getImageUrl } from 'educoder';
|
||||
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
vertical: true,
|
||||
verticalSwiping: true,
|
||||
autoplay:true,
|
||||
arrows:false
|
||||
};
|
||||
const group_size = 6;
|
||||
function SubUnitBanner() {
|
||||
|
||||
const [ list , setlist ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
getRecommandOrz();
|
||||
},[])
|
||||
|
||||
function getRecommandOrz(params) {
|
||||
const url = `/organizations/recommend.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
group_size
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setlist(result.data.organizations)
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}
|
||||
return(
|
||||
list && list.length > 0 ?
|
||||
<div className="unitBanner">
|
||||
<div className="unitContent">
|
||||
<div className="unitTitle">
|
||||
<span>精选开源组织</span>
|
||||
<img src={Hot} alt="" width="47px"/>
|
||||
</div>
|
||||
<Slider {...settings} className="unitSlider">
|
||||
{
|
||||
list.map((i,k)=>{
|
||||
return(
|
||||
<div className="slickline">
|
||||
{
|
||||
i.map((j,k1)=>{
|
||||
return(
|
||||
<Link to={j.name}><img src={getImageUrl(`/${j.avatar_url}`)} alt="" height="56px" style={{maxWidth:"180px"}}/></Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
{/* <div className="slickline">
|
||||
<a href="https://www.nwpu.edu.cn/" target="_blank"><img src={xigongye} alt="" height="56px"/></a>
|
||||
<a href="https://www.phytium.com.cn/" target="_blank"><img src={feiteng} alt="" height="56px"/></a>
|
||||
<a href="http://xuos.io" target="_blank"><img src={xiuos} alt="" height="56px"/></a>
|
||||
<a href="https://www.hust.edu.cn/" target="_blank"><img src={huake} alt="" height="56px"/></a>
|
||||
</div> */}
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
:""
|
||||
|
||||
)
|
||||
}
|
||||
export default SubUnitBanner;
|
||||
|
|
@ -28,13 +28,14 @@ body>.-task-title {
|
|||
height:70px;
|
||||
min-width: 1200px;
|
||||
z-index: 1000;
|
||||
background:rgba(255,255,255,1);
|
||||
box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 50%);
|
||||
position: fixed;
|
||||
box-shadow: 0px 0px 14px rgb(0 0 0 / 10%);
|
||||
background-image: linear-gradient(to right, #0F141F, #0C2A5B,#101417);
|
||||
color: #fff;
|
||||
}
|
||||
.headerContent{
|
||||
width:1200px;
|
||||
margin:0px auto;
|
||||
padding:0px 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue