m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

竞赛战队详情页首页 内容详情页完善

Browse Source
dev_sync_trustie
杨树明 6 years ago
parent ff9effc515
commit f85583d22e
6 changed files with 316 additions and 313 deletions
Show Stats Download Patch File Download Diff File

2
public/react/src/modules/competitions/Competitimain/CompetitionsIndex.js
Unescape View File

@ -107,6 +107,7 @@ class CompetitionsIndex extends Component{
` `
.CompetitionsList{ .CompetitionsList{
position: relative; position: relative;
max-height: 210px;
} }
.competitonimg{ .competitonimg{
position: absolute; position: absolute;
@ -166,7 +167,6 @@ class CompetitionsIndex extends Component{
<div className="gutter-box CompetitionsIndexbottomvalue">{item.member_count}</div> <div className="gutter-box CompetitionsIndexbottomvalue">{item.member_count}</div>
</Col> </Col>
</Row> </Row>
</div> </div>
} }
> >

3
public/react/src/modules/competitions/Competitimain/Competitionsindex.css
Unescape View File

@ -1,3 +1,4 @@
.teamsLayout{background: transparent !important;}
.courses-head{ .courses-head{
width: 100%; width: 100%;
height: 300px; height: 300px;
@ -109,7 +110,7 @@
.CompetitionsList:hover{ .CompetitionsList:hover{
/*box-shadow: 0 2px 6px rgba(51,51,51,.09);*/ /*box-shadow: 0 2px 6px rgba(51,51,51,.09);*/
box-shadow: 1px 1px 6px rgba(0,0,0,0.3); box-shadow:3px 4px 10px 2px rgba(229,229,229,0.5);
opacity: 1; opacity: 1;
border-radius: 2px; border-radius: 2px;
} }

179
public/react/src/modules/competitions/Competition_teams/Competitionteams.js
Unescape View File

@ -24,103 +24,108 @@ class Competitionteams extends Component{
} }
getshixundata=()=>{ getshixundata=()=>{
const Url =`/competitions/${"gcc-course-2019"}/competition_teams/${"2007"}/shixun_detail.json`;
// axios.get(Url).then((response) => {
// if(response.status===200){
// console.log(response)
// }
// })
// .catch(function (error) {
// console.log(error);
// });
let data={
shixuns: [
{
creator: "黄井泉", // 创建者
shixun_name: "单链表的学习与应用（I）", // 实训名称
shixun_identifier: "mnf6b7z3",
forked: false, // false:原创
myshixuns_count: 179, // 学习人数
forked_myshixun_count: 0, // 被fork发布的学习人数
valid_count: 82, // 有效作品数
score: 1320 // 应用值
}
],
shixun_count: 1, // 实训总计
total_myshixun_count: 179, // 学习人数总计
total_forked_myshixun_count: 0, // 被fork发布的学习人数总计
total_valid_count: 82, // 有效作品数总计
total_shixun_score: 1320 // 应用值总计
}
const Url =`/competitions/${this.props.match.params.identifier}/competition_teams/${this.props.match.params.competition_team_id}/shixun_detail.json`;
axios.get(Url).then((response) => {
if(response.status===200){
// let data={
// shixuns: [
// {
// creator: "黄井泉", // 创建者
// shixun_name: "单链表的学习与应用（I）", // 实训名称
// shixun_identifier: "mnf6b7z3",
// forked: false, // false:原创
// myshixuns_count: 179, // 学习人数
// forked_myshixun_count: 0, // 被fork发布的学习人数
// valid_count: 82, // 有效作品数
// score: 1320 // 应用值
// }
// ],
// shixun_count: 1, // 实训总计
// total_myshixun_count: 179, // 学习人数总计
// total_forked_myshixun_count: 0, // 被fork发布的学习人数总计
// total_valid_count: 82, // 有效作品数总计
// total_shixun_score: 1320 // 应用值总计
// }
let data=response.data;
let newarr=data.shixuns;
let newobj={
creator:"合计:",
shixun_name:data.shixun_count,
myshixuns_count:data.total_myshixun_count,
forked_myshixun_count:data.total_forked_myshixun_count,
valid_count:data.total_valid_count,
score:data.total_shixun_score
}
newarr.push(newobj)
this.setState({
shixundata:newarr
})
let newarr=data.shixuns;
let newobj={ }
creator:"合计:", })
shixun_name:data.shixun_count, .catch(function (error) {
myshixuns_count:data.total_myshixun_count, console.log(error);
forked_myshixun_count:data.total_forked_myshixun_count, });
valid_count:data.total_valid_count,
score:data.total_shixun_score
}
newarr.push(newobj)
this.setState({
shixundata:newarr
})
}
getcoursedata=()=>{
const Url =`/competitions/${"gcc-course-2019"}/competition_teams/${"2007"}/course_detail.json`;
// axios.get(Url).then((response) => {
// if(response.status===200){
// console.log(response)
// }
// })
// .catch(function (error) {
// console.log(error);
// });
let data={
courses: [
{
creator: "周海芳", // 创建者
creator_login: "Nancy", // login
course_name: "大学计算机基础2018年秋季",
course_id: 1502,
students_count: 122, // 学生数量
shixun_homework_count: 8, // 发布的实训作业数量
valid_count: 977, // 有效作品数
score: 29810 // 应用值
}
],
total_course_count: 1, // 课堂总计
total_students_count: 122, // 学生数总计
total_shixun_homework_count: 8, // 实训作业数总计
total_valid_count: 977, // 有效作品数总计
total_course_score: 29810 // 应用值总计
}
}
let newarr=data.courses; getcoursedata=()=>{
const Url =`/competitions/${this.props.match.params.identifier}/competition_teams/${this.props.match.params.competition_team_id}/course_detail.json`;
axios.get(Url).then((response) => {
if(response.status===200){
// let data={
// courses: [
// {
// creator: "周海芳", // 创建者
// creator_login: "Nancy", // login
// course_name: "大学计算机基础2018年秋季",
// course_id: 1502,
// students_count: 122, // 学生数量
// shixun_homework_count: 8, // 发布的实训作业数量
// valid_count: 977, // 有效作品数
// score: 29810 // 应用值
// }
// ],
// total_course_count: 1, // 课堂总计
// total_students_count: 122, // 学生数总计
// total_shixun_homework_count: 8, // 实训作业数总计
// total_valid_count: 977, // 有效作品数总计
// total_course_score: 29810 // 应用值总计
// }
let data=response.data;
let newarr=data.courses;
let newobj={
creator:"合计:",
course_name:data.total_course_count,
students_count:data.total_students_count,
shixun_homework_count:data.total_shixun_homework_count,
valid_count:data.total_valid_count,
score:data.total_course_score
}
newarr.push(newobj)
this.setState({
coursedata:newarr
})
let newobj={ }
creator:"合计:", })
course_name:data.total_course_count, .catch(function (error) {
students_count:data.total_students_count, console.log(error);
shixun_homework_count:data.total_shixun_homework_count, });
valid_count:data.total_valid_count,
score:data.total_course_score
}
newarr.push(newobj)
this.setState({
coursedata:newarr
})
} }

119
public/react/src/modules/competitions/Competitioncommon/CompetitionCommon.css
Unescape View File

@ -1,4 +1,11 @@
.teamsLayout{background: transparent !important;} .teamsLayout{background: transparent !important;}
.teamsLayout .ant-layout-sider{
background: transparent !important;
flex: 0 0 180px !important;
max-width: 180px !important;
min-width: 180px !important;
width: 180px !important;
}
.teamsLayout .teamsLayoutitle{ .teamsLayout .teamsLayoutitle{
font-size:18px; font-size:18px;
font-family:PingFangSC-Semibold,PingFang SC; font-family:PingFangSC-Semibold,PingFang SC;
@ -50,4 +57,116 @@
.teamsLayoucolor-orange { .teamsLayoucolor-orange {
color: #ff6800!important; color: #ff6800!important;
font-size: 16px; font-size: 16px;
}
.CompetitionCommonbanner{
padding: 20px;
background:rgba(255,255,255,1);
box-shadow:3px 2px 12px 2px rgba(0,0,0,0.05);
}
.CompetitionCommonbannerfont{
height:100%;
}
.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(1){
max-height:100px;
font-size:25px;
font-weight:400;
color:rgba(5,16,26,1);
}
.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(2){
max-height: 70px;
font-size:16px;
font-weight:400;
/*color:rgba(155,155,155,1);*/
color:#05101A;
}
.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(3){
max-height: 70px;
font-size: 16px;
font-weight: 400;
/*color: rgba(155,155,155,1);*/
color:#05101A;
}
.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(4),.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(4) button{
height: 50px;
background: rgba(76,172,255,1);
border-radius: 4px;
}
.Competitioncolor9b{
color: #9B9B9B;
}
.Competitioncolor77{
color: #777777;
font-size: 14px;
}
.Competitioncolor516{
font-size:24px;
color:rgba(5,16,26,1);
}
.Competitionfontsize22{
font-size:22px;
font-weight:500;
color:rgba(255,255,255,1);
}
.Competitionfontsize16{
font-size: 16px;
font-weight: 400;
color: rgba(102,102,102,1);
}
.ant-layout-sider {
position: relative;
min-width: 0;
background: #001529;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.CompetitionMenu .ant-menu-item::after {
left: 0px !important;
right: auto;
border-right: 5px solid #4CACFF;
}
.CompetitionMenu .ant-menu-item{
height: 30px;
line-height: 30px;
background:none;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: transparent;
}
.CompetitionMenu .ant-menu-item:not(:last-child){
margin-bottom: 40px;
background: transparent;
color:#666;
}
.CompetitionMenu .ant-menu-item{
font-size: 18px;
}
.CompetitionMenu .ant-menu-item-selected {
color: rgba(76,172,255,1) !important;
}
.CompetitionMenu{
width: 145px;
background: transparent;
border: 1px solid rgba(239,239,239,1);
padding-top: 20px;
padding-bottom: 40px !important;
} }

312
public/react/src/modules/competitions/Competitioncommon/CompetitionCommon.js
Unescape View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Breadcrumb,Layout,Table, Divider, Tag,Badge,Row, Col} from 'antd'; import { Breadcrumb,Layout,Table, Divider, Tag,Badge,Row, Col,Button, Menu, Icon} from 'antd';
import axios from 'axios'; import axios from 'axios';
import NoneData from "../../courses/shixunHomework/shixunHomework"; import NoneData from "../../courses/shixunHomework/shixunHomework";
@ -11,235 +11,113 @@ class CompetitionCommon extends Component{
constructor(props) { constructor(props) {
super(props) super(props)
this.state={ this.state={
shixundata: undefined,
coursedata:undefined,
} }
} }
componentDidMount(){ componentDidMount(){
window.document.title = '竞赛'; window.document.title = '竞赛';
this.getbannerdata()
this.getshixundata();
this.getcoursedata();
} }
getshixundata=()=>{ getbannerdata=()=>{
const Url =`/competitions/${"gcc-course-2019"}/competition_teams/${"2007"}/shixun_detail.json`; let url=`/competitions/${this.props.match.params.identifier}/common_header.json`;
// axios.get(Url).then((response) => { axios.get(url).then((response) => {
// if(response.status===200){ console.log(response)
// console.log(response) }).catch((error) => {
// } console.log(error)
// }) });
// .catch(function (error) {
// console.log(error);
// });
let data={
shixuns: [
{
creator: "黄井泉", // 创建者
shixun_name: "单链表的学习与应用（I）", // 实训名称
shixun_identifier: "mnf6b7z3",
forked: false, // false:原创
myshixuns_count: 179, // 学习人数
forked_myshixun_count: 0, // 被fork发布的学习人数
valid_count: 82, // 有效作品数
score: 1320 // 应用值
}
],
shixun_count: 1, // 实训总计
total_myshixun_count: 179, // 学习人数总计
total_forked_myshixun_count: 0, // 被fork发布的学习人数总计
total_valid_count: 82, // 有效作品数总计
total_shixun_score: 1320 // 应用值总计
}
let newarr=data.shixuns;
let newobj={
creator:"合计:",
shixun_name:data.shixun_count,
myshixuns_count:data.total_myshixun_count,
forked_myshixun_count:data.total_forked_myshixun_count,
valid_count:data.total_valid_count,
score:data.total_shixun_score
}
newarr.push(newobj)
this.setState({
shixundata:newarr
})
}
getcoursedata=()=>{
const Url =`/competitions/${"gcc-course-2019"}/competition_teams/${"2007"}/course_detail.json`;
// axios.get(Url).then((response) => {
// if(response.status===200){
// console.log(response)
// }
// })
// .catch(function (error) {
// console.log(error);
// });
let data={
courses: [
{
creator: "周海芳", // 创建者
creator_login: "Nancy", // login
course_name: "大学计算机基础2018年秋季",
course_id: 1502,
students_count: 122, // 学生数量
shixun_homework_count: 8, // 发布的实训作业数量
valid_count: 977, // 有效作品数
score: 29810 // 应用值
}
],
total_course_count: 1, // 课堂总计
total_students_count: 122, // 学生数总计
total_shixun_homework_count: 8, // 实训作业数总计
total_valid_count: 977, // 有效作品数总计
total_course_score: 29810 // 应用值总计
}
let newarr=data.courses;
let newobj={
creator:"合计:",
course_name:data.total_course_count,
students_count:data.total_students_count,
shixun_homework_count:data.total_shixun_homework_count,
valid_count:data.total_valid_count,
score:data.total_course_score
}
newarr.push(newobj)
this.setState({
coursedata:newarr
})
} }
render() { render() {
const shixuncolumns = [
{
title: '创建者',
dataIndex: 'creator',
key: 'creator',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoutheji":""}>{text}</div>,
},
{
title: '名称',
dataIndex: 'shixun_name',
key: 'shixun_name',
render: (text, record) =>
<div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}{record.forked===true?<Badge count={"原创"} style={{ backgroundColor: '#459BE5' }} />:""}</div>,
},
{
title: '学习人数',
dataIndex: 'myshixuns_count',
key: 'myshixuns_count',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
{
title: '被fork发布的学习人数',
dataIndex: 'forked_myshixun_count',
key: 'forked_myshixun_count',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
{
title: '有效作品数',
dataIndex: 'valid_count',
key: 'valid_count',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
{
title: '应用值',
dataIndex: 'score',
key: 'score',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
];
const coursecolumns = [
{
title: '创建者',
dataIndex: 'creator',
key: 'creator',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoutheji":""}>{text}</div>,
},
{
title: '名称',
dataIndex: 'course_name',
key: 'course_name',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
{
title: '学习人数',
dataIndex: 'students_count',
key: 'students_count',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
{
title: '被fork发布的学习人数',
dataIndex: 'shixun_homework_count',
key: 'shixun_homework_count',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
{
title: '有效作品数',
dataIndex: 'valid_count',
key: 'valid_count',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
{
title: '应用值',
dataIndex: 'score',
key: 'score',
render: (text, record) => <div className={record.creator==="合计:"?"teamsLayoucolor-orange":""}>{text}</div>,
},
];
console.log(this.state.shixundata)
return ( return (
<div className={"educontent clearfix mt20 "}> <div className={"educontent clearfix mt20 "}>
<Breadcrumb separator=">"> <Breadcrumb separator=">">
<Breadcrumb.Item href="">在线竞赛</Breadcrumb.Item> <Breadcrumb.Item href="">在线竞赛</Breadcrumb.Item>
<Breadcrumb.Item href="">全国高校计算机大赛</Breadcrumb.Item> <Breadcrumb.Item href="">全国高校计算机大赛</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
<div>
<Row> <div className={"mt10"}>
<Col span={6} push={18}> <Row className={"CompetitionCommonbanner"}>
col-6 col-push-18 <Col span={15}>banner</Col>
</Col> <Col className={"CompetitionCommonbannerfont"} span={9}>
<Col span={18} pull={6}>
col-18 col-pull-6 <Col className={"competitionbannerdiv"}>全国计算机系列大赛系列大赛系列大赛</Col>
</Col>
</Row> <Col className={"competitionbannerdiv mt10"}>
</div> <Col className={"Competitioncolor9b"}>竞赛时间：</Col>
<Layout className={"teamsLayout"}> <Col>2019-08-07 24: 00～2019-09-10 24: 00</Col>
</Col>
<Content className={"teamsLayoutitle"}>实训项目</Content>
<Content className={"teamsLayoutContent"}> <Col className={"competitionbannerdiv mt20"}>
<Table className="teamsLayoutTable" columns={shixuncolumns} dataSource={this.state.shixundata} bordered pagination={false}/> <Row gutter={16}>
</Content> <Col className="gutter-row" span={6}>
<Content className={"teamsLayoutitle mt40"}>翻转课堂</Content> <div className="gutter-box CompetitionsIndexdadels Competitioncolor77">奖金</div>
<Content className={"teamsLayoutContents"}> </Col>
<Table className="teamsLayoutTable" columns={coursecolumns} dataSource={this.state.coursedata} bordered pagination={false}/> <Col className="gutter-row" span={6}>
</Content> <div className="gutter-box CompetitionsIndexdadels Competitioncolor77">浏览数</div>
</Col>
</Layout> <Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">报名数</div>
</Col>
</Row>
<Row gutter={16}>
<Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">¥123</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">4124</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">51234</div>
</Col>
</Row>
</Col>
<Col className={"competitionbannerdiv mt20"}>
<Button type="primary" block className={"Competitionfontsize22"}>
立即报名
</Button>
</Col>
<Col className={"mt10 Competitionfontsize16"}>报名截止时间：2019-08-07 08:10</Col>
</Col>
</Row>
</div>
<Layout className={'teamsLayout mt40'}>
<Sider>
<Menu mode="inline" className="CompetitionMenu" defaultSelectedKeys={['1']}>
<Menu.Item key="1">
<span>赛制介绍</span>
</Menu.Item>
<Menu.Item key="2">
<span>参赛手册</span>
</Menu.Item>
<Menu.Item key="3">
<span>排行榜</span>
</Menu.Item>
<Menu.Item key="4">
<span>通知公告</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Content>Content</Content>
</Layout>
</Layout>
</div> </div>

14
public/react/src/modules/competitions/Competitions.js
Unescape View File

@ -45,17 +45,18 @@ class Competitions extends Component {
<div className="newMain clearfix"> <div className="newMain clearfix">
<Switch> <Switch>
{/*新版竞赛详情页面*/}
<Route path="/newcompetitions/:identifier/common_header" {/*新版竞赛战队详情*/}
<Route path="/newcompetitions/:identifier/competition_teams/:competition_team_id"
render={ render={
(props) => (<CompetitionCommon {...this.props} {...props} {...this.state} />) (props) => (<CompetitionTeams {...this.props} {...props} {...this.state} />)
} }
></Route> ></Route>
{/*新版竞赛战队详情*/} {/*新版竞赛详情页面*/}
<Route path="/newcompetitions/competition_teams" <Route path="/newcompetitions/:identifier/common_header"
render={ render={
(props) => (<CompetitionTeams {...this.props} {...props} {...this.state} />) (props) => (<CompetitionCommon {...this.props} {...props} {...this.state} />)
} }
></Route> ></Route>
@ -66,7 +67,6 @@ class Competitions extends Component {
} }
></Route> ></Route>
</Switch> </Switch>
</div> </div>

Write Preview
Loading…
Cancel
Save