试题库 头部调整题库中

public/react/src/modules/question/Question.js

@@ -92,12 +92,10 @@ class Question extends Component {
 			console.log("Questiondisciplines");
 			console.log(response.data);
 			if (response) {
-				if (response.status === 200) {
 					this.setState({
-						disciplinesdata: response.data,
+						disciplinesdata: response.data.disciplines,
 					})
 			}
-			}
 		});
 	}
 
@@ -565,7 +563,7 @@ class Question extends Component {
 					showDrawer={() => this.showDrawer()}
 					Headertop={Headertop}/>
 				{/*顶部*/}
-				<Headplugselection></Headplugselection>
+				<Headplugselection {...this.props} {...this.state}></Headplugselection>
 				{/*头部*/}
 				<Contentpart {...this.state} {...this.props}
 										 getitem_basketss={(id)=>this.getitem_basketss(id)}

public/react/src/modules/question/component/Contentpart.js

@@ -69,7 +69,7 @@ class Contentpart extends Component {
 		//console.log("Contentpart");
 		//console.log(this.props);
 		return (
-			<div className=" clearfix mt5">
+			<div className=" clearfix mt50">
 				<div className="educontent mt10 pb20 w1200s">
 					<div className="w1200ms contentparttit" style={{
 						position: "relative",

public/react/src/modules/question/component/Headplugselection.js

@@ -14,7 +14,9 @@ class Headplugselection extends Component {
 		super(props);
 		this.state = {
 			page:1,
-			titlestting:["全部","前端开发","后端开发","移动开发","数据库","云计算和大数据","运维与测试","人工测试","其他"],
+			titlestting:"全部",
+			titlesttings:null,
+			titlesttingss:null,
 		}
 	}
 	//初始化
@@ -22,45 +24,130 @@ class Headplugselection extends Component {
 
 
 	}
+  settitlestting=(name)=>{
+		//如果全部其他的选项重置
+		this.setState({
+			titlestting:name,
+			titlesttings:null,
+			titlesttingss:null
+		})
+	}
+
+	settitlesttings=(name)=>{
+		//课程选项
+		this.setState({
+			titlesttings:name,
+			titlesttingss:null,
+		})
+	}
 
+	settitlesttingss=(name)=>{
+		//知识点
+		this.setState({
+			titlesttingss:name
+		})
 
+	}
 	render() {
-		let {page,titlestting}=this.state;
+		let {page,titlestting,titlesttings,titlesttingss}=this.state;
+		// console.log("Headplugselection");
+		// console.log(this.props.disciplinesdata);
 		return (
 			<div className=" clearfix">
 				<div className="educontent mt10 mb20 w1200">
 
-			<div className="clearfix edu-back-white  h177 mt21 tophom">
+			<div className="clearfix edu-back-white   mt21 tophom">
 				{/*课程*/}
-      <div className="h40 sortinxdirection">
-       <div className="w70  tophomsembold">
+      <div className=" sortinxdirection">
+       <div className="w60  tophomsembolds">
+				 方向：
+			 </div>
+				<div className="sortinxdirection minleng40">
+					<div className={titlestting==="全部"?" titlesttingcss xiaoshou":" titlesttingcssmy xiaoshou"} onClick={()=>this.settitlestting("全部")}>
+						全部
+					</div>
+					{this.props.disciplinesdata&&this.props.disciplinesdata.map((object, index) => {
+						return (
+							<div className={titlestting===object.name?" xiaoshou titlesttingcss":" titlesttingcssmy xiaoshou"} onClick={()=>this.settitlestting(object.name)}>
+								{object.name}
+							</div>
+						)
+					})}
+
+				</div>
+
+			</div>
+
+
+      {/*课程*/}
+		  <div className="mt30 sortinxdirection">
+				<div className="w60  tophomsembolds">
 					课程：
 				</div>
+				<div className="sortinxdirection minleng40">
 
-				{this.state.titlestting === undefined ? "" : this.state.titlestting.map((object, index) => {
+					{this.props.disciplinesdata&&this.props.disciplinesdata.map((objectn, index) => {
+						return (
+								objectn.sub_disciplines&&objectn.sub_disciplines.map((object, indexs) => {
 									return (
-						<div className="ml24">
-							{object}
+										<div className={index===0&&indexs===0&&titlesttings===object.name?"titlesttingcss xiaoshou":index===0&&indexs===0&&titlesttings!==object.name?"titlesttingcssmy xiaoshou"
+
+											:titlesttings===object.name?" titlesttingcss xiaoshou":"titlesttingcssmy  xiaoshou"} onClick={()=>this.settitlesttings(object.name)}>
+											{object.name}
 										</div>
 									)
+								})
+						)
 					})}
 
+				</div>
+
 
 			</div>
 
 
+
+
+
 				{/*知识点*/}
-		  <div className="mt30">
-				<div className="w70  tophomsembold">
+				<div className="mt30 sortinxdirection">
+					<div className="w60  tophomsembolds">
 						知识点：
 					</div>
+
+
+					<div className="sortinxdirection minleng40">
+
+						{this.props.disciplinesdata&&this.props.disciplinesdata.map((object, index) => {
+							return (
+								object.sub_disciplines&&object.sub_disciplines.map((object, indexs) => {
+									return (
+										object.tag_disciplines&&object.tag_disciplines.map((object, indexss) => {
+											return (
+												<div className={index===0&&indexs===0&&indexss===0&&titlesttingss===object.name?"titlesttingcss xiaoshou":
+													index===0&&indexs===0&&indexss===0&&titlesttingss!==object.name?"titlesttingcssmy xiaoshou"
+														:titlesttingss===object.name?" titlesttingcss xiaoshou":" titlesttingcssmy xiaoshou"} onClick={()=>this.settitlesttingss(object.name)}>
+													{object.name}
+												</div>
+											)
+										})
+									)
+								})
+							)
+						})}
+
 					</div>
 
 
 				</div>
+			</div>
 
 
 			</div>
+
+
+
+
 			</div>
 		)
 

public/react/src/modules/question/questioncss/questioncom.css

@@ -132,7 +132,7 @@
     width: 64px;
 }
 .w70{
-    width: 70px;
+    width: 70px !important;
 }
 
 .tophomsembold{
@@ -142,6 +142,14 @@
     line-height:21px;
 }
 
+.tophomsembolds{
+    width:42px;
+    height:19px;
+    font-size:14px;
+    font-family:MicrosoftYaHeiSemibold;
+    color:rgba(51,51,51,1);
+    line-height:31px;
+}
 /*Contentpart*/
 .contentparttit{
     padding-top: 10px;
@@ -555,3 +563,29 @@
     height: 251px;
     min-height: 100%;
 }
+
+.titlesttingcss{
+    min-width: 100px;
+    height:32px;
+    line-height: 32px;
+    background:rgba(76,172,255,1);
+    border-radius:16px;
+    text-align: center;
+    color: #fff;
+}
+.titlesttingcssmy{
+    min-width: 100px;
+    height:32px;
+    line-height: 32px;
+    font-size:14px;
+    color:rgba(51,51,51,1);
+    text-align: center;
+}
+.minleng40{
+    min-height: 40px;
+}
+
+.w60{
+    width: 60px !important;
+}
+