默认更改列表

public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/PackageIndexNEITaskDetails.js

@@ -7,6 +7,9 @@ import locale from 'antd/lib/date-picker/locale/zh_CN';
 import MDEditors from '../MDEditors';
 import PhoneModel from '../PackageIndexNewandEdit/PhoneModel';
 import '../packageconcnet.css';
+import './pds.css'
+import gouxuan from './img/gouxuan.png'
+import weigouxuan from './img/weigouxuan.png'
 const { Search } = Input;
 
 class PackageIndexNEITaskDetails extends Component {
@@ -14,10 +17,83 @@ class PackageIndexNEITaskDetails extends Component {
 		super(props)
 		this.contentMdRef = React.createRef();
 		this.state = {
-			modalCancel:false
+			modalCancel: false,
+			gouxuans1: [{id: 1, name: "前端开发", bool: false, url: ""}, {id: 2, name: "后端开发", bool: false, url: ""}, {
+				id: 3,
+				name: "移动开发",
+				bool: false,
+				url: ""
+			}, {id: 4, name: "数据库", bool: false, url: ""}, {id: 5, name: "云计算和大数据", bool: false, url: ""}, {
+				id: 6,
+				name: "运维与测试",
+				bool: false,
+				url: ""
+			}, {id: 7, name: "人工智能", bool: false, url: ""}, {id: 8, name: "其他", bool: false, url: ""}, {
+				id: 9,
+				name: "人工智能9",
+				bool: false,
+				url: ""
+			}, {id: 10, name: "其他10", bool: false, url: ""}, {id: 1, name: "其他10", bool: false, url: ""}],
+			gouxuans2: [{id: 1, name: "前端开发", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 2,
+				name: "后端开发",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 3, name: "移动开发", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 4,
+				name: "数据库",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 5, name: "云计算和大数据", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 6,
+				name: "运维与测试",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 7, name: "人工智能", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 8,
+				name: "其他",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 9, name: "人工智能9", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 10,
+				name: "其他10",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 11, name: "其他10", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id:12,
+				name: "前端开发",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 13, name: "后端开发", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 14,
+				name: "移动开发",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 15, name: "数据库", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 16,
+				name: "云计算和大数据",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 17, name: "运维与测试", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 18,
+				name: "人工智能",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 19, name: "其他", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 20,
+				name: "人工智能9",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"
+			}, {id: 21, name: "其他10", bool: false, url: "https://www.educoder.net/images/avatars/User/1"}, {
+				id: 22,
+				name: "其他10",
+				bool: false,
+				url: "https://www.educoder.net/images/avatars/User/1"},],
+
+
 		}
 	}
-
+;
 	componentDidMount() {
 
 
@@ -50,9 +126,27 @@ class PackageIndexNEITaskDetails extends Component {
 		})
 	}
 
+	Clickteacher2=(e)=>{
+		let {gouxuans2} =this.state;
+		for (var i=0;i<gouxuans2.length;i++){
+			if(gouxuans2[i].id === e){
+				console.log("51");
+				console.log(e);
+				if(gouxuans2[i].bool === true){
+					gouxuans2[i].bool=false;
+				}else{
+					gouxuans2[i].bool=true;
+				}
+			}
+		}
+		console.log(gouxuans2);
+		this.setState({
+			gouxuans3:gouxuans2,
+		})
 
+	}
 	render() {
-		let {modalCancel}=this.state;
+		let {modalCancel,gouxuans2}=this.state;
 		return (
 			<div>
 				<div className="clearfix">
@@ -143,16 +237,48 @@ class PackageIndexNEITaskDetails extends Component {
 
 
 							{/*发布者和竞选者状态show*/}
-							<div className={"stud-class-set padding30 coursenavbox edu-back-white mt20"}>
-
+							<div className={"stud-class-set  coursenavbox edu-back-white mt20"}>
+								{/*下面是头像*/}
+								<div className={"ysllogin_register_contents   edu-back-white "}>
+									<div className="ysllogin_section">
+										<div className="ysldivhome2">
+											<div style={{height: "20px"}}> </div>
+											{gouxuans2&&gouxuans2.map((item,key)=>{
+												return(
+													<div className="ysldivhomediv1">
+														<img className="div1img" src={item.url}/>
+														<span className="textall">{item.name}</span>
+													</div>
+												)
+											})}
+										</div>
+									</div>
+								</div>
 							</div>
 
 
 							
 							{/*发布人选择状态*/}
-							<div className={"stud-class-set padding30 coursenavbox edu-back-white mt20"}>
-
+							<div className={"stud-class-set  coursenavbox edu-back-white mt20"}>
+              {/*下面是头像*/}
+							<div className={"ysllogin_register_contents   edu-back-white "}>
+								<div className="ysllogin_section">
+									<div className="ysldivhome2">
+										<div style={{height: "20px"}}> </div>
+								{gouxuans2&&gouxuans2.map((item,key)=>{
+										return(
+											<div className="ysldivhomediv1" onClick={()=>this.Clickteacher2(item.id)}>
+												{item.bool===true?<img src={gouxuan} className="yslgouxuanimg"/>:<img src={weigouxuan} className="yslgouxuanimg"/>}
+												<img className="div1img" src={item.url}/>
+												<span className="textall">{item.name}</span>
+											</div>
+										)
+									})}
+								</div>
+							</div>
 							</div>
+							</div>
+
 						</p>
 
 					</div>

public/react/src/modules/projectPackages/PackageIndexNEITaskDetails/pds.css

@@ -0,0 +1,49 @@
+.ysldivhome2{
+    display: flex;
+    flex-flow: row wrap;
+    align-content:stretch;
+    flex-direction: row;
+    margin-bottom: 20px;
+}
+.ysllogin_register_contents{
+    display: flex;
+    margin-top: 20px;
+    justify-content: center;
+    background: #fff;
+
+}
+.ysldivhomediv1{
+    width: 75px;
+    height: 110px;
+    display: flex;
+    flex-direction:column;
+    margin-left: 53px;
+    margin-top: 20px;
+}
+.yslgouxuanimg{
+    width: 20px;
+    height: 20px;
+    margin-left: 64px;
+
+}
+.yslgouxuanimg2{
+    height: 20px;
+}
+.div1img{
+    display: flex;
+    justify-content:center;
+    width: 70px;
+    height: 70px;
+    border-radius:50%;
+
+}
+.textall{
+    text-align: center;
+    font-size: 13px;
+    color: #4B4B4B;
+}
+.ysllogin_section {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}