竞赛添加加入战队弹框

public/react/src/modules/competition/Registration.js

@@ -17,6 +17,7 @@ import RegistrationSearch from './RegistrationSearch';
 import RegisListview from './RegisListview';
 import RegisListviewdata from './RegisListviewdata';
 import PersonModal from './competmodal/PersonModal';
+import PersonalModalteam from './competmodal/PersonalModalteam';
 // 团队竞赛报名无报名
 class Registration extends React.Component {
 	constructor(props) {
@@ -26,7 +27,9 @@ class Registration extends React.Component {
 			loadingstate: false,
 			page: 1,
 			limit: 20,
-			type: 5,
+			type: 3,
+			tmodalsType: false,
+			tmodalsTypes: true,
 		}
 	}
 
@@ -39,7 +42,7 @@ class Registration extends React.Component {
 	}
 
 	render() {
-		const {test, page, limit, type} = this.state;
+		const {test, page, limit, type, tmodalsType, tmodalsTypes} = this.state;
 		const listItems = test.map((item, index) =>
 			<RegisListviewdata></RegisListviewdata>
 		);
@@ -57,7 +60,8 @@ class Registration extends React.Component {
 							`
 						}
 					</style>
-					<PersonModal modalsType={true}></PersonModal>
+					<PersonModal modalsType={tmodalsType} {...this.props} {...this.state}></PersonModal>
+					<PersonalModalteam tmodalsTypes={tmodalsTypes} {...this.props} {...this.state}></PersonalModalteam>
 					<div className="educontent mb20 ">
 						<p className="clearfix mb20 mt10">
 							<a className="btn colorgrey fl hovercolorblue ">在线竞赛</a>

public/react/src/modules/competition/comcss/competition.css

@@ -19,6 +19,13 @@
     background: #0dcecb;
 }
 
+.registrationbackcenter {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .registrationback1 {
     height: 368px;
     width: 1200px;
@@ -565,8 +572,19 @@ reglistviewdivs2 {
     height: 38px;
     color: #4A4A4A;
     font-size: 16px;
+    border-radius: 3px;
+    cursor: pointer;
 }
 
+.personbut1 p {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    margin-top: 10px;
+    color: #4A4A4A;
+    font-size: 16px;
+    cursor: pointer;
+}
 .personbut2 {
     background: #459BE5;
     border-color: #459BE5;
@@ -575,6 +593,74 @@ reglistviewdivs2 {
     height: 38px;
     color: #ffffff;
     font-size: 16px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.personbut2 p {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    margin-top: 10px;
+    color: #ffffff;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+/*PersonModal.js*/
+
+
+/*PersonalModalteam.js*/
+.personaldiv {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.personaldivbutt1 {
+
+    background: #F2F2F2;
+    border-color: #F2F2F2;
+    margin-right: 23px;
+    width: 100px;
+    height: 38px;
+    color: #4A4A4A;
+    font-size: 16px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.personaldivbutt1 p {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    margin-top: 10px;
+    color: #666666;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.personaldivbutt2 {
+    background: #459BE5;
+    border-color: #459BE5;
+    width: 100px;
+    height: 38px;
+    color: #ffffff;
+    font-size: 16px;
+    border-radius: 3px;
+    cursor: pointer;
 }
 
-/*PersonModal.js*/
+.personaldivbutt2 p {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    margin-top: 10px;
+    color: #ffffff;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+
+/*PersonalModalteam.js*/

public/react/src/modules/competition/competmodal/PersonModal.js

@@ -537,8 +537,12 @@ class PersonModal extends Component {
 							justifyContent: "center",
 							width: "100%"
 						}}>
-							<Button className={"personbut1"}>取消</Button>
-							<Button className={"personbut2"}>确定</Button>
+							<div className="personbut1">
+								<p>取消</p>
+							</div>
+							<div className="personbut2">
+								<p>确定</p>
+							</div>
 						</div>
 					</div>
 				</div>

public/react/src/modules/competition/competmodal/PersonalModalteam.js

@@ -0,0 +1,101 @@
+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 PersonalModalteam extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {}
+	}
+
+
+	render() {
+		const {
+			addonAfter, test, test3, Numberofteammentors, Thecurrentnumber, person1, person2
+		} = this.state;
+		//Modal
+		//keyboard是否支持键盘 esc 关闭
+		//closable    是否显示右上角的关闭按钮
+		//底部内容，当不需要默认底部按钮时，可以设为 footer={null}
+		//destroyOnClose 关闭时销毁 Modal 里的子元素
+		//centered 垂直居中展示 Modal
+		//visible 弹出框是否显示
+
+		return (
+
+			<Modal
+				keyboard={false}
+				closable={false}
+				footer={null}
+				destroyOnClose={true}
+				title="加入战队"
+				centered={true}
+				visible={this.props.tmodalsTypes === undefined ? false : this.props.tmodalsTypes}
+				width="600px"
+				heigth="300px"
+			>
+
+				<div className="personaldiv">
+					<div style={{
+						display: "flex",
+						flexDirection: "initial",
+						marginTop: "10px",
+					}}>
+						<p style={{
+							width: "67px",
+							fontSize: "16px",
+							color: '#05101A',
+							height: "40px",
+							lineHeight: "40px",
+						}}>
+							邀请码：
+						</p>
+						<style>
+							{
+								`
+								.yslzxueshiskmcdm1 {
+																		height: 40px !important;
+																		width: 329px !important;
+																		}
+								`
+							}
+						</style>
+						<Input className={"yslzxueshiskmcdm1"} placeholder="请输入您的邀请码"/>
+
+					</div>
+
+					<div style={{
+						marginTop: "48px",
+						display: "flex",
+						alignItems: "center",
+						paddingBottom: "12px",
+
+					}}>
+						<div style={{
+							display: "flex",
+							justifyContent: "center",
+							width: "100%"
+						}}>
+							<div className="personaldivbutt1">
+								<p>取消</p>
+							</div>
+							<div className="personaldivbutt2">
+								<p>确定</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</Modal>
+		)
+	}
+}
+
+export default PersonalModalteam;