forked from Gitlink/forgeplus-react
openmmlab专题页初版
This commit is contained in:
何童崇
parent
53f78ab0f8
commit
7ab24b7ffb
|
|
@ -52,6 +52,11 @@ const TaskDetail = Loadable({
|
|||
loader: () => import("./project/taskDetail"),
|
||||
loading: Loading,
|
||||
});
|
||||
// 开源夏令营项目、课题列表页面
|
||||
const Openmmlab = Loadable({
|
||||
loader: () => import("./openmmlab"),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
const Glcc = (propsF) => {
|
||||
const {current_user} = propsF;
|
||||
|
|
@ -136,6 +141,15 @@ const Glcc = (propsF) => {
|
|||
<Project {...propsF} {...props} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd} applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset} cancelCount={cancelCount}/>
|
||||
)}
|
||||
></Route>
|
||||
|
||||
{/* 项目/课题列表 */}
|
||||
<Route
|
||||
path="/glcc/openmmlab"
|
||||
render={(props) => (
|
||||
<Openmmlab {...propsF} {...props} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd} applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset}/>
|
||||
)}
|
||||
></Route>
|
||||
|
||||
{/* 首页 */}
|
||||
<Route
|
||||
path="/glcc"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import banner from "../img/studentProject.png";
|
||||
import './index.scss';
|
||||
import { useEffect } from 'react';
|
||||
import ProjectList from '../project/projectList';
|
||||
|
||||
|
||||
|
||||
function Openmmlab(props) {
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="glcc_project">
|
||||
<img className="glcc-banner" src={banner} alt=''></img>
|
||||
<ProjectList {...props} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Openmmlab;
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
.glcc_project{
|
||||
background-color: #ebf2ff;
|
||||
.head{
|
||||
background-color:rgba(188, 208, 255, 0.27);
|
||||
border:1px solid #ffffff;
|
||||
text-align: center;
|
||||
a{
|
||||
padding: 18px 20px 20px;
|
||||
display: inline-block;
|
||||
color: #273778;
|
||||
font-size: 18px;
|
||||
font-weight:700;
|
||||
line-height: 30px;
|
||||
&.active{
|
||||
border-bottom: 1px solid #5474df;;
|
||||
}
|
||||
&:last-child{
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gobackBox{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0 12px;
|
||||
color: #202d40;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px dashed #bec5d5;
|
||||
a{
|
||||
color:#a4aabb;
|
||||
}
|
||||
}
|
||||
.listBox{
|
||||
background-image:linear-gradient(180deg,#ebf2ff 0%,#ebf2ff 43.09%,#f3f4f8 100%);
|
||||
position: relative;
|
||||
.list{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.search{
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
padding: 25px 0 40px;
|
||||
&.task{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.ant-input-group-wrapper{width: 40%;}
|
||||
}
|
||||
}
|
||||
.search .ant-btn, .search .ant-input{
|
||||
height: 48px;
|
||||
}
|
||||
.search .ant-btn{font-size: 30px;}
|
||||
.search .ant-input{
|
||||
font-size: 16px;
|
||||
border-color: #ebf2ff;
|
||||
&:hover{
|
||||
border-color: #466aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search{
|
||||
.ant-btn-primary{
|
||||
background-color:#466aff;
|
||||
border-color: #466aff;
|
||||
}
|
||||
}
|
||||
.bgPng3, .bgPng4{
|
||||
width: 146px;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 162px;
|
||||
left: 100px;
|
||||
}
|
||||
.bgPng4{
|
||||
top: 450px;
|
||||
left: auto;
|
||||
right: 310px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.glcc-banner {
|
||||
width: 100%;
|
||||
}
|
||||
// 项目详情框
|
||||
.projectDetailBox{
|
||||
&.byTask{
|
||||
background-image:linear-gradient(180deg,#f1f5ff 0%,#ffffff 100%);
|
||||
border:1px solid #ffffff;
|
||||
border-radius:4px;
|
||||
box-shadow:0px 0px 10px rgba(100, 141, 255, 0.2);
|
||||
padding: 30px 30px 50px;
|
||||
.taskItem{
|
||||
.center{
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nodata{width: 200px;}
|
||||
font-size:15px;
|
||||
line-height:30px;
|
||||
.projectDetailHead{
|
||||
color:#465474;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed #bec5d5;
|
||||
line-height: 36px;
|
||||
.name{
|
||||
font-weight:700;
|
||||
color:#3753c5;
|
||||
font-size:20px;
|
||||
}
|
||||
.type{
|
||||
display: inline-block;
|
||||
border:1px solid #6680bb;
|
||||
border-radius:4px;
|
||||
margin-left: 12px;
|
||||
padding: 4px 6px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.linkUrl{
|
||||
color: #466aff;
|
||||
}
|
||||
}
|
||||
.taskItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border:1px solid #ffffff;
|
||||
&:hover{ box-shadow: 0px 0px 12px rgba(71, 105, 198, 0.4);}
|
||||
.oneLine{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.left{
|
||||
width: 316px;
|
||||
background-image: url('../img/projectDetailTaskBg.png');
|
||||
background-size: 100% 100%;
|
||||
padding: 22px 20px;
|
||||
color:#25304a;
|
||||
.taskTitle{
|
||||
cursor: pointer;
|
||||
color:#1834a7;
|
||||
font-size:18px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.email span{color:#466aff;}
|
||||
.leftWidth{width: 270px;}
|
||||
}
|
||||
.center{
|
||||
width: 665px;
|
||||
text-align: left;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.taskDesc{
|
||||
color:#6b6b6b;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.taskUrl{
|
||||
color:#465474;
|
||||
font-size:16px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 5px;
|
||||
a{color:#466aff;}
|
||||
}
|
||||
.applyBut{
|
||||
background-color:#466aff;
|
||||
border-color: #466aff;
|
||||
&:hover{background-color:#5d7cff;}
|
||||
&:focus{background-color:#1140ff;}
|
||||
}
|
||||
.taskReward{color:#ff8800;}
|
||||
}
|
||||
.right{
|
||||
margin-top: 35px;
|
||||
padding-right: 10px;
|
||||
width: 120px;
|
||||
font-weight:700;
|
||||
color:#ff8800;
|
||||
font-size:24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.projectItemPopover{
|
||||
width: 1200px;
|
||||
.ant-popover-content .ant-popover-arrow{
|
||||
border-width: 12px;
|
||||
}
|
||||
}
|
||||
.projectItemPopover .ant-popover-inner{
|
||||
transform: translateY(8px);
|
||||
background-image:linear-gradient(180deg,#f1f5ff 0%,#ffffff 100%);
|
||||
border:1px solid #ffffff;
|
||||
border-radius:4px;
|
||||
box-shadow:0px 0px 10px rgba(100, 141, 255, 0.2);
|
||||
.ant-popover-inner-content{
|
||||
padding: 30px 30px 50px;
|
||||
}
|
||||
}
|
||||
.lookDetail{
|
||||
border-color: #466aff;
|
||||
color: #466aff;
|
||||
&:hover{
|
||||
border-color: #5d7cff;
|
||||
color: #5d7cff;
|
||||
}
|
||||
&:focus{
|
||||
border-color: #1140ff;
|
||||
color: #1140ff;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,12 +6,16 @@ import { projectList } from '../../api';
|
|||
import ProjectDetail from '../component/projectDetail';
|
||||
import bgPng from "../../img/bgPng.png";
|
||||
import logo from "../../img/logo.png";
|
||||
import { indexOf } from 'lodash';
|
||||
const {Search} = Input;
|
||||
|
||||
// 项目列表
|
||||
function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd}) {
|
||||
function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApplyDate, studentApplyEnd, location}) {
|
||||
|
||||
console.log(location.pathname);
|
||||
let openmmlab = location.pathname.indexOf('glcc/openmmlab')>-1;
|
||||
// 输入搜索框
|
||||
const [keyword, setKeyword] = useState(undefined);
|
||||
const [keyword, setKeyword] = useState(openmmlab?'openmmlab':undefined);
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
|
@ -33,7 +37,7 @@ function ProjectList({applyTaskId, current_user, showLoginDialog, isStudentApply
|
|||
return(
|
||||
<div className="taskList listBox">
|
||||
<div className="list">
|
||||
<div className='search'><Search placeholder='请输入项目名称进行搜索' allowClear enterButton onSearch={(value)=>{setKeyword(value)}}/></div>
|
||||
<div className='search'>{openmmlab?'':<Search placeholder='请输入项目名称进行搜索' allowClear enterButton onSearch={(value)=>{setKeyword(value)}}/>}</div>
|
||||
<Spin spinning={loading}>
|
||||
<div className='projectListBox'>
|
||||
{data && data.map((item, index)=>{
|
||||
|
|
|
|||
Loading…
Reference in New Issue