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

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

@ -1,3 +1,4 @@
.teamsLayout{background: transparent !important;}
.courses-head{
width: 100%;
height: 300px;
@ -109,7 +110,7 @@
.CompetitionsList:hover{
/*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;
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=()=>{
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,
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)
}
})
.catch(function (error) {
console.log(error);
});
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,
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)
}
})
.catch(function (error) {
console.log(error);
});
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 .ant-layout-sider{
background: transparent !important;
flex: 0 0 180px !important;
max-width: 180px !important;
min-width: 180px !important;
width: 180px !important;
}
.teamsLayout .teamsLayoutitle{
font-size:18px;
font-family:PingFangSC-Semibold,PingFang SC;
@ -50,4 +57,116 @@
.teamsLayoucolor-orange {
color: #ff6800!important;
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 { 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 NoneData from "../../courses/shixunHomework/shixunHomework";
@ -11,235 +11,113 @@ class CompetitionCommon extends Component{
constructor(props) {
super(props)
this.state={
shixundata: undefined,
coursedata:undefined,
}
}
componentDidMount(){
window.document.title = '竞赛';
this.getshixundata();
this.getcoursedata();
this.getbannerdata()
}
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 // 应用值总计
}
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
})
getbannerdata=()=>{
let url=`/competitions/${this.props.match.params.identifier}/common_header.json`;
axios.get(url).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
});
}
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 (
<div className={"educontent clearfix mt20 "}>
<Breadcrumb separator=">">
<Breadcrumb.Item href="">在线竞赛</Breadcrumb.Item>
<Breadcrumb.Item href="">全国高校计算机大赛</Breadcrumb.Item>
</Breadcrumb>
<div>
<Row>
<Col span={6} push={18}>
col-6 col-push-18
</Col>
<Col span={18} pull={6}>
col-18 col-pull-6
</Col>
</Row>
</div>
<Layout className={"teamsLayout"}>
<Content className={"teamsLayoutitle"}>实训项目</Content>
<Content className={"teamsLayoutContent"}>
<Table className="teamsLayoutTable" columns={shixuncolumns} dataSource={this.state.shixundata} bordered pagination={false}/>
</Content>
<Content className={"teamsLayoutitle mt40"}>翻转课堂</Content>
<Content className={"teamsLayoutContents"}>
<Table className="teamsLayoutTable" columns={coursecolumns} dataSource={this.state.coursedata} bordered pagination={false}/>
</Content>
</Layout>
<Breadcrumb separator=">">
<Breadcrumb.Item href="">在线竞赛</Breadcrumb.Item>
<Breadcrumb.Item href="">全国高校计算机大赛</Breadcrumb.Item>
</Breadcrumb>
<div className={"mt10"}>
<Row className={"CompetitionCommonbanner"}>
<Col span={15}>banner</Col>
<Col className={"CompetitionCommonbannerfont"} span={9}>
<Col className={"competitionbannerdiv"}>全国计算机系列大赛系列大赛系列大赛</Col>
<Col className={"competitionbannerdiv mt10"}>
<Col className={"Competitioncolor9b"}>竞赛时间：</Col>
<Col>2019-08-07 24: 00～2019-09-10 24: 00</Col>
</Col>
<Col className={"competitionbannerdiv mt20"}>
<Row gutter={16}>
<Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">奖金</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">浏览数</div>
</Col>
<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>

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

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

Write Preview
Loading…
Cancel
Save