竞赛调整

dev_sync_trustie
杨树林 6 years ago
parent 78481e4cdf
commit d420744016

@ -16,7 +16,7 @@ import CompetitionMaxImg from './CompetitionMaxImg';
import RegistrationSearch from './RegistrationSearch';
import RegisListview from './RegisListview';
import RegisListviewdata from './RegisListviewdata';
import PersonModal from './competmodal/PersonModal';
// 团队竞赛报名无报名
class Registration extends React.Component {
constructor(props) {
@ -45,7 +45,19 @@ class Registration extends React.Component {
);
return (
<div className="newMain clearfix ">
<div className={"educontent mb20"} style={{width: "1200px", marginTop: "26px"}}>
<div className={"educontent mb20 persmstyle"} style={{width: "1200px", marginTop: "26px"}}>
<style>
{
`
html, body{
overflow: hidden;
height: 100%;
}
`
}
</style>
<PersonModal modalsType={true}></PersonModal>
<div className="educontent mb20 ">
<p className="clearfix mb20 mt10">
<a className="btn colorgrey fl hovercolorblue ">在线竞赛</a>

@ -3,6 +3,9 @@
border: 0.5px solid;
}
.borders2 {
border: 1px solid #D9D9D9;
}
/*All*/
/*Registration.js*/
.registrationback {
@ -97,6 +100,7 @@
align-items: center;
margin-top: 44px;
margin-left: 251px;
}
.registbut1 {
@ -269,6 +273,7 @@
border-bottom: 1px solid #EDEDED;
margin-top: 19px;
}
/*垂直*/
.regitemimg1 {
display: flex;
@ -286,6 +291,7 @@
margin-left: 26px;
padding-bottom: 18px;
}
.regitemimg2 {
border: 0.5px solid;
height: 78px;
@ -426,10 +432,57 @@
}
.reglistviewdivss2 {
display: flex;
flex-direction: initial;
}
.reglistviewdivss2p {
width: 90px;
font-size: 12px;
color: #666666;
text-align: center;
}
.reglistviewdivss4p {
width: 90px;
font-size: 12px;
color: #666666;
text-align: center;
}
.reglistviewdivss5p {
width: 110px;
font-size: 12px;
color: #666666;
text-align: center;
}
.reglistviewdivss33p {
width: 25px;
font-size: 12px;
color: #666666;
text-align: center;
}
.reglistviewdivss3p {
width: 31px;
font-size: 12px;
color: #666666;
text-align: center;
}
reglistviewdivs2 {
margin-top: 27px;
}
/*RegisListview.js*/
@ -448,4 +501,80 @@ reglistviewdivs2 {
width: 78px;
}
/*RegisListviewdata.js*/
/*RegisListviewdata.js*/
/*PersonModal.js*/
.permaindiv {
display: flex;
flex-direction: column;
}
.demo-loading-container {
position: absolute;
bottom: 40px;
width: 100%;
text-align: center;
}
.demo-infinite-container {
border-radius: 2px;
overflow: auto;
height: 215px;
width: 485px;
}
.demo-infinite-containerdiv {
margin-top: 12px;
}
.demo-infinite-containerdiv2 {
margin-top: 24px;
}
.backgroundspersondiv {
background: #ffffff;
}
.cpersondiv1 {
height: 161px;
width: 410px;
}
.demo-infinite-container2 {
border-radius: 2px;
overflow: auto;
height: 161px;
width: 410px;
}
.cpersondiv1Items {
color: #05101A;
font-size: 12px;
}
.personbut1 {
background: #F2F2F2;
border-color: #F2F2F2;
margin-right: 26px;
width: 120px;
height: 38px;
color: #4A4A4A;
font-size: 16px;
}
.personbut2 {
background: #459BE5;
border-color: #459BE5;
margin-right: 26px;
width: 120px;
height: 38px;
color: #ffffff;
font-size: 16px;
}
/*PersonModal.js*/

@ -0,0 +1,550 @@
import React, {Component} from 'react';
import {getImageUrl} from 'educoder';
import {Modal, Input, Spin, Tooltip, Icon, Dropdown, Button} from 'antd';
import axios from 'axios';
import competition from '../comcss/competition.css';
import Registrationitem from "../Registrationitem";
import InfiniteScroll from 'react-infinite-scroller';
// import PersonModaltion from "./PersonModaltion";
const {Search} = Input;
//立即申请试用
class PersonModal extends Component {
constructor(props) {
super(props);
this.state = {
addonAfter: 0,
test: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
test2: [19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
test3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
loading: false,
loading1: false,
loading2: false,
hasMore: true,
person1: false,
person2: false,
Numberofteammentors: "0-3",
Thecurrentnumber: "3",
}
}
modalCancel = () => {
window.location.href = "/"
}
setDownload = () => {
//立即联系
};
//输入框事件
changeTopicName = (e) => {
// console.log("调用了changeTopicName");
let num = parseInt(e.target.value.length);
if (num > 60) {
return;
}
this.setState({
addonAfter: num < 0 ? 0 : num
});
this.setState({
polls_nametest: e.target.value
})
};
//onSearchsou
onSearch = (value) => {
console.log("搜索的数据" + value);
};
handleInfiniteOnLoad = () => {
this.setState({
loading: true,
})
const test3 = this.state.test;
this.state.test2.forEach(function (item) {
test3.push(item)
});
setTimeout(() => {
this.setState({
test: test3,
hasMore: true,
loading: false,
});
}, 1000)
}
handleInfiniteOnLoad1 = () => {
console.log("调用了方法1111");
this.setState({
loading1: true,
})
setTimeout(() => {
console.log("调用了方法11112");
this.setState({
loading1: false,
hasMore: true,
});
}, 1000)
}
handleInfiniteOnLoad2 = () => {
console.log("调用了方法1111");
this.setState({
loading2: true,
})
setTimeout(() => {
console.log("调用了方法11113");
this.setState({
hasMore: true,
loading2: false,
});
}, 1000)
}
inputOnBlur = (e) => {
console.log("inputOnBlur");
console.log(e);
this.setState({
person1: false
})
}
inputOnBlur2 = (e) => {
console.log("inputOnBlur");
console.log(e);
this.setState({
person2: false
})
}
startSearch = (e) => {
console.log("startSearch");
console.log(e);
}
inputOnFocus = (e) => {
console.log("inputOnFocus");
console.log(e);
this.setState({
person1: true
})
}
inputOnFocus2 = (e) => {
console.log("inputOnFocus2");
console.log(e);
this.setState({
person2: true
})
}
render() {
const {
addonAfter, test, test3, Numberofteammentors, Thecurrentnumber, person1, person2
} = this.state;
//Modal
//keyboard是否支持键盘 esc 关闭
//closable 是否显示右上角的关闭按钮
//底部内容,当不需要默认底部按钮时,可以设为 footer={null}
//destroyOnClose 关闭时销毁 Modal 里的子元素
//centered 垂直居中展示 Modal
//visible 弹出框是否显示
const listItems = test.map((item, index) =>
<div className="reglistviewdivss2 " style={{
width: "100%",
display: "flex",
justifyContent: " space-around",
alignItems: "center",
height: "40px",
}}>
<p className=" reglistviewdivss4p"
style={{
textAlign: "center",
}}
>陈明</p>
<p className=" reglistviewdivss4p"
style={{
textAlign: "center",
}}
>导师创建者</p>
<p className=" reglistviewdivss5p"
style={{
textAlign: "center",
}}
>国防科技大学</p>
<p className=" reglistviewdivss2p"
style={{
textAlign: "center",
}}
>职称教授</p>
<p className=" reglistviewdivss33p"
style={{
textAlign: "center",
}}
><i className="iconfont icon-guanbi font-12"/></p>
</div>
);
const cpersondiv1Items = test3.map((item, index) =>
<div className="reglistviewdivss2 " style={{
width: "100%",
display: "flex",
justifyContent: " space-around",
alignItems: "center",
height: "40px",
}}>
<p className=" cpersondiv1Items"
style={{
textAlign: "center",
}}
>李小猫{index}</p>
<p className=" cpersondiv1Items"
style={{
textAlign: "center",
}}
>职称副教授</p>
<p className=" cpersondiv1Items"
style={{
textAlign: "center",
}}
>国防科技大学</p>
</div>
);
const cpersondiv1 = (
<div className={" backgroundspersondiv cpersondiv1 borders2"}>
{
person1 ?
<Spin spinning={this.state.loading1}>
<div className="demo-infinite-container2">
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={() => this.handleInfiniteOnLoad1()}
hasMore={!this.state.loading1 && this.state.hasMore}
useWindow={false}
>
{
cpersondiv1Items
}
</InfiniteScroll>
</div>
</Spin>
:
""
}
</div>
)
const persondiv2Items = test3.map((item, index) =>
<div className="reglistviewdivss2 " style={{
width: "100%",
display: "flex",
justifyContent: " space-around",
alignItems: "center",
height: "40px",
}}>
<p className=" cpersondiv1Items"
style={{
textAlign: "center",
}}
>李小猫{index}</p>
<p className=" cpersondiv1Items"
style={{
textAlign: "center",
}}
>职称副教授</p>
<p className=" cpersondiv1Items"
style={{
textAlign: "center",
}}
>国防科技大学</p>
<p className=" cpersondiv1Items"
style={{
textAlign: "center",
color: "#FF6800",
}}
>已加入其他战队</p>
</div>
);
const persondiv2 = (
<div className={" backgroundspersondiv cpersondiv1 borders2"}>
{
person2 === true ?
<Spin spinning={this.state.loading2}>
<div className="demo-infinite-container2">
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={() => this.handleInfiniteOnLoad2()}
hasMore={!this.state.loading2 && this.state.hasMore}
useWindow={false}
>
{
persondiv2Items
}
</InfiniteScroll>
</div>
</Spin>
: ""
}
</div>
)
return (
<Modal
keyboard={false}
closable={false}
footer={null}
destroyOnClose={true}
title="创建战队"
centered={true}
visible={this.props.modalsType === undefined ? false : this.props.modalsType}
width="620px"
>
<div className="permaindiv">
{/*队名*/}
<style>{
`
.yslzxueshiskmc .ant-input{
border-right: none !important;
height: 40px !important;
width: 428px !important;
}
.yslzxueshiskmc .ant-input-wrapper {
max-width: 487px;
}
.yslzxueshisy span .ant-input-group-addon{
width: 65px !important;
background-color: #fafafa!important;
}
.yslzxueshisy .ant-input-wrapper span{
width: 58px !important;
}
.yslzxueshiskmc .ant-input-group-addon{
width: 65px !important;
background-color: #fafafa!important;
}
.yslzxueshiskmc .ant-input-group-wrapper{
width: 408px !important;
}
.yslzxueshiskmcs .ant-input-group-wrapper{
width: 408px !important;
}
`
}</style>
<div style={{
display: "flex",
flexDirection: "initial",
}}>
<p style={{
width: "59px",
marginTop: "9px",
fontSize: "16px",
}}>
<span style={{
color: "#f5222d",
fontSize: "16px",
}}>*</span>
队名:
</p>
<Input className="yslzxueshiskmc" onInput={this.changeTopicName} placeholder="请输入您的战队名称最多不超过60个字符"
addonAfter={String(addonAfter) + "/60"} maxLength={60}/>
</div>
{/*导师*/}
<div style={{
display: "flex",
flexDirection: "initial",
marginTop: "14px",
}}>
<p style={{
width: "59px",
marginTop: "9px",
fontSize: "16px",
}}>
<span style={{
color: "#f5222d",
fontSize: "16px",
}}>*</span>
导师:
</p>
<style>
{
`
.yslzxueshiskmcd .ant-input{
height: 40px !important;
width: 487px !important;
}
`
}
</style>
{/*<div className={"yslzxueshiskmcd2"}>*/}
<Dropdown overlay={cpersondiv1} getPopupContainer={trigger => trigger.parentNode}
visible={this.state.person1}>
<Input
className="yslzxueshiskmcd"
placeholder="请输入老师姓名的任意关键字进行搜索,可以后续在添加"
onPressEnter={this.startSearch}
onBlur={this.inputOnBlur}
onFocus={this.inputOnFocus}
suffix={
<i class="iconfont icon-sousuo"/>
}
/>
</Dropdown>
{/*</div>*/}
</div>
{/*队员*/}
<div style={{
display: "flex",
flexDirection: "initial",
marginTop: "14px",
}}>
<p style={{
width: "59px",
marginTop: "9px",
fontSize: "16px",
}}>
<span style={{
color: "#f5222d",
fontSize: "16px",
}}>*</span>
队员:
</p>
<style>
{
`
.yslzxueshiskmcd .ant-input{
height: 40px !important;
width: 487px !important;
}
`
}
</style>
{/*<Search*/}
{/* */}
{/* placeholder="请输入想要队员姓名的任意关键字进行搜索"*/}
{/* onSearch={(value) => this.onSearch(value)}*/}
{/*/>*/}
<Dropdown overlay={persondiv2} getPopupContainer={trigger => trigger.parentNode}
visible={this.state.person2}>
<Input
className="yslzxueshiskmcd"
placeholder="请输入想要队员姓名的任意关键字进行搜索"
onPressEnter={this.startSearch}
onBlur={this.inputOnBlur2}
onFocus={this.inputOnFocus2}
suffix={
<i class="iconfont icon-sousuo "/>
}
/>
</Dropdown>
</div>
{/*表格*/}
<div style={{marginTop: "18px", marginLeft: "53px", border: "1px solid #E0E0E0"}}>
{/*<PersonModaltion ></PersonModaltion>*/}
<div>
<div className="reglistviewdivss2 " style={{
width: "100%",
display: "flex",
justifyContent: " space-around",
alignItems: "center",
height: "40px",
backgroundPosition: "center",
backgroundSize: "110% 100%",
backgroundColor: "#E0E0E0",
}}>
<p className=" reglistviewdivss4p"
style={{
textAlign: "center",
}}
>姓名</p>
<p className=" reglistviewdivss4p"
style={{
textAlign: "center",
}}
>角色</p>
<p className=" reglistviewdivss5p"
style={{
textAlign: "center",
}}
>单位</p>
<p className=" reglistviewdivss2p"
style={{
textAlign: "center",
}}
>其他</p>
<p className=" reglistviewdivss3p"
style={{
textAlign: "center",
}}
>操作</p>
</div>
</div>
<Spin spinning={this.state.loading}>
<div className="demo-infinite-container">
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={() => this.handleInfiniteOnLoad()}
hasMore={!this.state.loading && this.state.hasMore}
useWindow={false}
>
{listItems}
</InfiniteScroll>
</div>
</Spin>
</div>
{/*最后一行文字*/}
<p style={{
marginLeft: "53px",
color: "#D0021B",
fontSize: "12px",
marginTop: "9px"
}}>战队导师为{Numberofteammentors},现在为{Thecurrentnumber}</p>
<div style={{
marginTop: "24px",
marginLeft: "53px",
display: "flex",
alignItems: "center",
paddingBottom: "20px"
}}>
<div style={{
display: "flex",
justifyContent: "center",
width: "100%"
}}>
<Button className={"personbut1"}>取消</Button>
<Button className={"personbut2"}>确定</Button>
</div>
</div>
</div>
</Modal>
)
}
}
export default PersonModal;

@ -0,0 +1,51 @@
import React, {Component} from 'react';
import {
BrowserRouter as Router,
Route,
Switch
} from 'react-router-dom';
import axios from 'axios';
import moment from 'moment';
import competition from './comcss/competition.css';
import {Checkbox, Table, Pagination, Menu, Icon} from "antd";
// 团队竞赛报名无报名子组件团队 在线竞赛 > 全国高校计算机大赛-项目挑战>
import Rectanglex from "../../modules/competition/Rectanglex.png";
class PersonModaltion extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="reglistviewdivs">
<div className="reglistviewdivss " style={{
width: "100%",
display: "flex",
justifyContent: " space-around",
alignItems: "center",
height: "50px",
backgroundPosition: "center",
backgroundSize: "110% 100%",
backgroundColor: "#E0E0E0",
}}>
<p className="borders"
style={{fontSize: "16px", color: "#05101A", textAlign: "center"}}>姓名</p>
<p className="borders"
style={{fontSize: "16px", color: "#05101A", textAlign: "center"}}>角色</p>
<p className="borders"
style={{fontSize: "16px", color: "#05101A", textAlign: "center"}}>单位</p>
<p className="borders"
style={{fontSize: "16px", color: "#05101A", textAlign: "center"}}>其他</p>
<p className="borders"
style={{fontSize: "16px", color: "#05101A", textAlign: "center"}}>操作</p>
</div>
</div>
)
}
}
export default PersonModaltion;
Loading…
Cancel
Save