From efbbe928e9c709ac110b6af3de6d4a00c222f617 Mon Sep 17 00:00:00 2001
From: harry <harry@fangmingyi.com>
Date: Sat, 7 Mar 2020 01:05:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E8=AE=AD=E5=A2=9E=E5=8A=A0=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E5=B9=B6=E8=B0=83=E6=95=B4=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/react/src/App.js                       | 320 +++++++++++++++---
 public/react/src/modal/GotoQQgroup.js         |   5 -
 .../modules/tpm/shixuns/ShixunSearchBar.js    | 301 ----------------
 .../src/modules/tpm/shixuns/ShixunsIndex.js   |  76 ++---
 .../react/src/modules/tpm/shixuns/btn-new.png | Bin 0 -> 1970 bytes
 .../src/modules/tpm/shixuns/shixun-card.js    |  97 ++++++
 .../tpm/shixuns/shixun-keyword-list.jsx       |  81 +++++
 .../tpm/shixuns/shixun-keyword-list.scss      |  70 ++++
 .../tpm/shixuns/shixun-search-bar/A.jsx       |  11 +
 .../tpm/shixuns/shixun-search-bar/index.jsx   | 121 +++++++
 .../tpm/shixuns/shixunCss/ShixunSearchBar.css |  39 ++-
 .../shixuns/shixunCss/shixun-search-bar.scss  |  78 +++++
 .../tpm/shixuns/shixunCss/shixunCard.css      |  27 +-
 .../tpm/shixuns/shixunCss/shixunCard.scss     | 101 ++++++
 14 files changed, 900 insertions(+), 427 deletions(-)
 delete mode 100644 public/react/src/modules/tpm/shixuns/ShixunSearchBar.js
 create mode 100644 public/react/src/modules/tpm/shixuns/btn-new.png
 create mode 100644 public/react/src/modules/tpm/shixuns/shixun-card.js
 create mode 100644 public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx
 create mode 100644 public/react/src/modules/tpm/shixuns/shixun-keyword-list.scss
 create mode 100644 public/react/src/modules/tpm/shixuns/shixun-search-bar/A.jsx
 create mode 100644 public/react/src/modules/tpm/shixuns/shixun-search-bar/index.jsx
 create mode 100644 public/react/src/modules/tpm/shixuns/shixunCss/shixun-search-bar.scss
 create mode 100644 public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.scss

diff --git a/public/react/src/App.js b/public/react/src/App.js
index 4bab8e1e0..a592d1c77 100644
--- a/public/react/src/App.js
+++ b/public/react/src/App.js
@@ -334,6 +334,23 @@ class App extends Component {
 
 		initAxiosInterceptors(this.props);
 		this.getAppdata();
+<<<<<<< HEAD
+=======
+		//
+		// axios.interceptors.response.use((response) => {
+		// 	// console.log("response"+response);
+		// 	if(response!=undefined)
+		// 		// console.log("response"+response.data.statu);
+		// 	if (response&&response.data.status === 407) {
+		// 		this.setState({
+		// 			isRenders: true,
+		// 		})
+		// 	}
+		// 	return response;
+		// }, (error) => {
+		// 	//TODO 这里如果样式变了会出现css不加载的情况
+		// });
+>>>>>>> a190075... 实训增加搜索并调整新增
 
 		window.addEventListener('error', (event) => {
 			const msg = `${event.type}: ${event.message}`;
@@ -381,6 +398,11 @@ class App extends Component {
 	getAppdata = () => {
 		let url = "/setting.json";
 		axios.get(url).then((response) => {
+<<<<<<< HEAD
+=======
+			// console.log("app.js开始请求/setting.json");
+			// console.log("获取当前定制信息");
+>>>>>>> a190075... 实训增加搜索并调整新增
 			if (response) {
 				if (response.data) {
 					this.setState({
@@ -418,6 +440,7 @@ class App extends Component {
 	};
 
 	render() {
+<<<<<<< HEAD
 		return (
 			<Provider store={store}>
 				<ConfigProvider locale={zhCN}>
@@ -453,11 +476,138 @@ class App extends Component {
 							<Route path={"/competitions"}
 								render={
 									(props) => {
+=======
+		let { mygetHelmetapi } = this.state;
+		// console.log("appappapp");
+		// console.log(mygetHelmetapi);
+		return (
+			<Provider store={store}>
+				<ConfigProvider locale={zhCN}>
+					<MuiThemeProvider theme={theme}>
+						<Accountnewprofile {...this.props}{...this.state} />
+						<LoginDialog {...this.props} {...this.state} Modifyloginvalue={() => this.Modifyloginvalue()}></LoginDialog>
+						<Notcompletedysl {...this.props} {...this.state}></Notcompletedysl>
+						<Trialapplicationysl  {...this.props} {...this.state}></Trialapplicationysl>
+						<Trialapplicationreview  {...this.props} {...this.state}></Trialapplicationreview>
+						<Addcourses {...this.props} {...this.state} HideAddcoursestypess={(i) => this.HideAddcoursestypess(i)} />
+						<AccountProfile {...this.props} {...this.state} />
+						<Certifiedprofessional {...this.props} {...this.state} ModalCancelsy={this.ModalCancelsy} ModalshowCancelsy={this.ModalshowCancelsy} />
+						<Router>
+							<Switch>
+
+								{/*题库*/}
+								<Route path="/topicbank/:username/:topicstype"
+									render={
+										(props) => {
+
+											return (<Topicbank {...this.props} {...props} {...this.state} />)
+										}
+									}></Route>
+								{/*题库*/}
+								<Route path="/topicbank/:topicstype"
+									render={
+										(props) => {
+
+											return (<Topicbank {...this.props} {...props} {...this.state} />)
+										}
+									}></Route>
+								{/*/!*众包创新*!/*/}
+								{/*<Route path={"/crowdsourcing"} component={ProjectPackages}/>*/}
+								{/*竞赛*/}
+								<Route path={"/competitions"}
+									render={
+										(props) => {
+
+											return (<NewCompetitions {...this.props} {...props} {...this.state} />)
+										}
+									}></Route>
+
+								{/*黑客松定制竞赛*/}
+								<Route
+									path={"/osshackathon"}
+									render={
+										(props) => {
+											return (
+												<Osshackathon {...this.props} {...props} {...this.state} />
+											)
+										}
+									}
+								/>
+
+								{/*认证*/}
+								<Route path="/account" component={AccountPage} />
+
+								{/*403*/}
+								<Route path="/403" component={Shixunauthority} />
+
+								<Route path="/500" component={http500} />
+
+								{/*404*/}
+								<Route path="/nopage" component={Shixunnopage} />
+
+								<Route path="/compatibility" component={CompatibilityPageLoadable} />
+								<Route
+									path="/login"
+									render={
+										(props) => {
+
+											return (<EducoderLogin {...this.props} {...props} {...this.state} />)
+										}
+									}
+								/>
+								<Route
+									path="/register"
+									render={
+										(props) => {
+
+											return (<EducoderLogin {...this.props} {...props} {...this.state} />)
+										}
+									}
+								/>
+								<Route
+									path="/otherloginstart" component={Otherloginstart}
+								/>
+								<Route
+									path={"/otherloginqq"} component={Otherloginsqq}
+								/>
+								<Route
+									path="/otherlogin" component={Otherlogin}
+								/>
+								<Route
+									path="/loginqq" component={Loginqq}
+								/>
+
+								<Route path="/users/:username"
+									render={
+										(props) => {
+
+											return (<InfosIndex {...this.props} {...props} {...this.state} />)
+										}
+									}></Route>
+
+								<Route path="/banks"
+									render={
+										(props) => {
+											return (<BanksIndex {...this.props} {...props} {...this.state} />)
+										}
+									}></Route>
+								{/*<Route*/}
+								{/*path="/personalcompetit"*/}
+								{/*render={*/}
+								{/*(props) => (<PersonalCompetit {...this.props} {...props} {...this.state}></PersonalCompetit>)*/}
+								{/*}*/}
+								{/*/>*/}
+								<Route
+									path="/changepassword"
+									render={
+										(props) => {
+>>>>>>> a190075... 实训增加搜索并调整新增
 
 										return (<NewCompetitions {...this.props} {...props} {...this.state} />)
 									}
 								}></Route>
 
+<<<<<<< HEAD
 							{/*黑客松定制竞赛*/}
 							<Route
 								path={"/osshackathon"}
@@ -531,6 +681,88 @@ class App extends Component {
 								path="/changepassword"
 								render={
 									(props) => {
+=======
+								{/*/>*/}
+								<Route path="/shixuns/new" component={Newshixuns}>
+								</Route>
+								<Route path="/colleges/:id/statistics"
+									render={
+										(props) => (<College  {...this.props} {...props} {...this.state} />)
+									} />
+								{/* jupyter */}
+								<Route path="/tasks/:identifier/jupyter/"
+									render={
+										(props) => {
+											return (<JupyterTPI {...this.props} {...props} {...this.state} />)
+										}
+									}
+								/>
+
+								<Route path="/tasks/:stageId" component={IndexWrapperComponent} />
+
+								{/*<Route path="/shixuns/:shixunId" component={TPMIndexComponent}>*/}
+								{/*</Route>*/}
+
+								<Route path="/shixuns/:shixunId"
+									render={
+										(props) => (<TPMIndexComponent {...this.props} {...props} {...this.state}></TPMIndexComponent>)
+									}
+								></Route>
+								<Route path="/shixuns"
+									render={
+										(props) => (<TPMShixunsIndexComponent {...this.props} {...props} {...this.state}></TPMShixunsIndexComponent>)
+									}
+								></Route>
+								{/*实训课程（原实训路径）*/}
+								<Route path="/paths" component={ShixunPaths}></Route>
+								<Route path="/search"
+									render={
+										(props) => (<SearchPage {...this.props} {...props} {...this.state}></SearchPage>)
+									}
+								></Route>
+								{/*课堂*/}
+								<Route path="/courses" component={CoursesIndex} {...this.props}  {...this.state}></Route>
+
+								{/* <Route path="/forums" component={ForumsIndexComponent}>
+								</Route> */}
+								{/* 教学案例 */}
+								<Route path="/moop_cases" render={
+									(props) => (<MoopCases {...this.props} {...props} {...this.state} />)
+								} />
+
+								<Route path="/forums"
+									render={
+										(props) => (<ForumsIndexComponent {...this.props} {...props} {...this.state}></ForumsIndexComponent>)
+									}
+								>
+								</Route>
+								<Route path="/comment" component={CommentComponent} />
+								{/*<Route path="/testMaterial" component={TestMaterialDesignComponent}/>*/}
+								{/*<Route path="/test" component={TestIndex}/>*/}
+								{/*<Route path="/testCodeMirror" component={TestCodeMirrorComponent}/>*/}
+								{/*<Route path="/testRCComponent" component={TestComponent}/>*/}
+								{/*<Route path="/testUrlQuery" component={TestUrlQueryComponent}/>*/}
+								{/*<Route*/}
+								{/*path="/registration"*/}
+								{/*render={*/}
+								{/*(props) => (<Registration {...this.props} {...props} {...this.state}></Registration>)*/}
+								{/*}*/}
+								{/*/>*/}
+
+								<Route path="/messages"
+									render={
+										(props) => (<Messagerouting {...this.props} {...props} {...this.state}></Messagerouting>)
+									}
+								></Route>
+								<Route path="/help/:type"
+									render={
+										(props) => (<Help {...this.props} {...props} {...this.state}></Help>)
+									} />
+								<Route path="/ecs"
+									render={
+										(props) => (<Ecs {...this.props} {...props} {...this.state}></Ecs>)
+									} />
+>>>>>>> a190075... 实训增加搜索并调整新增
 
 										return (<EducoderLogin {...this.props} {...props} {...this.state} />)
 									}
@@ -555,9 +787,9 @@ class App extends Component {
 								/>
 
 								<Route path="/myproblems/record_detail/:id"
-											 render={
-												 (props) => (<RecordDetail  {...this.props} {...props} {...this.state} />)
-											 }
+									render={
+										(props) => (<RecordDetail  {...this.props} {...props} {...this.state} />)
+									}
 								/>
 								<Route
 									path="/problems/:id/edit"
@@ -565,71 +797,71 @@ class App extends Component {
 										(props) => (<NewOrEditTask {...this.props} {...props} {...this.state} />)
 									} />
 								<Route path="/Integeneration/:type/:id"
-											 render={
-												 (props) => (<Paperreview  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Paperreview  {...this.props} {...props} {...this.state} />)
+									} />
 								<Route path="/paperreview/:type"
-											 render={
-												 (props) => (<Paperreview  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Paperreview  {...this.props} {...props} {...this.state} />)
+									} />
 								<Route path="/paperlibrary/edit/:id"
-											 render={
-												 (props) => (<Paperlibraryeditid  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Paperlibraryeditid  {...this.props} {...props} {...this.state} />)
+									} />
 
 								<Route path="/paperlibrary/see/:id"
-											 render={
-												 (props) => (<Paperlibraryseeid  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Paperlibraryseeid  {...this.props} {...props} {...this.state} />)
+									} />
 
 								<Route path="/myproblems/:id/:tab?"
-											 render={
-												 (props) => (<StudentStudy  {...this.props} {...props} {...this.state} />)
-											 } />
+									render={
+										(props) => (<StudentStudy  {...this.props} {...props} {...this.state} />)
+									} />
 								<Route path="/question/edit/:id"
-											 render={
-												 (props) => (<Questionitem_banks  {...this.props} {...props} {...this.state} />)
-											 } />
+									render={
+										(props) => (<Questionitem_banks  {...this.props} {...props} {...this.state} />)
+									} />
 
 								<Route path="/question/newitem"
-											 render={
-												 (props) => (<Questionitem_banks  {...this.props} {...props} {...this.state} />)
-											 } />
+									render={
+										(props) => (<Questionitem_banks  {...this.props} {...props} {...this.state} />)
+									} />
 								<Route path="/question/:type"
-											 render={
-												 (props) => (<Headplugselection  {...this.props} {...props} {...this.state} />)
-											 } />
+									render={
+										(props) => (<Headplugselection  {...this.props} {...props} {...this.state} />)
+									} />
 								<Route path="/paperlibrary"
-											 render={
-												 (props) => (<Testpaperlibrary  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Testpaperlibrary  {...this.props} {...props} {...this.state} />)
+									} />
 
 								<Route path="/Integeneration"
-											 render={
-												 (props) => (<Integeneration  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Integeneration  {...this.props} {...props} {...this.state} />)
+									} />
 
 								<Route path="/problems"
-											 render={
-												 (props) => (<Developer  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Developer  {...this.props} {...props} {...this.state} />)
+									} />
 
 								<Route path="/question"
-											 render={
-												 (props) => (<Headplugselection  {...this.props} {...props} {...this.state} />)
-											 }/>
+									render={
+										(props) => (<Headplugselection  {...this.props} {...props} {...this.state} />)
+									} />
 								{/*<Route path="/wxcode/:identifier?" component={WXCode}*/}
 								{/*	render={*/}
 								{/*		(props)=>(<WXCode {...this.props} {...props} {...this.state}></WXCode>)*/}
 								{/*	}*/}
 								{/*/>*/}
 								<Route exact path="/"
-											// component={ShixunsHome}
-											render={
-												(props)=>(<ShixunsHome {...this.props} {...props} {...this.state}></ShixunsHome>)
-											}
+									// component={ShixunsHome}
+									render={
+										(props) => (<ShixunsHome {...this.props} {...props} {...this.state}></ShixunsHome>)
+									}
 								/>
-								<Route component={Shixunnopage}/>
+								<Route component={Shixunnopage} />
 
 							</Switch>
 						</Router>
diff --git a/public/react/src/modal/GotoQQgroup.js b/public/react/src/modal/GotoQQgroup.js
index c2a2deed2..bab39b08f 100644
--- a/public/react/src/modal/GotoQQgroup.js
+++ b/public/react/src/modal/GotoQQgroup.js
@@ -7,21 +7,16 @@ class GotoQQgroup extends Component {
 
 	constructor(props) {
 		super(props);
-		this.state = {
-
-		}
 	}
 
 	modalCancel = () => {
 		try {
 			this.props.setgoshowqqgtounp(false);
 		} catch (e) {
-
 		}
 	}
 
 	setDownload = () => {
-		//立即联系
 		try {
 			this.props.setgoshowqqgtounp(false);
 		} catch (e) {
diff --git a/public/react/src/modules/tpm/shixuns/ShixunSearchBar.js b/public/react/src/modules/tpm/shixuns/ShixunSearchBar.js
deleted file mode 100644
index 71f2cce90..000000000
--- a/public/react/src/modules/tpm/shixuns/ShixunSearchBar.js
+++ /dev/null
@@ -1,301 +0,0 @@
-import React, { Component } from 'react';
-
-import { Select, Input,Menu, Dropdown } from 'antd';
-
-import 'antd/lib/style/index.css';
-
-import 'antd/lib/select/style/index.css';
-
-import 'antd/lib/input/style/index.css';
-
-import './shixunCss/ShixunSearchBar.css'; 
-
-import axios from 'axios';
-
-const $ = window.$;
-
-const Option = Select.Option;
-
-const Search = Input.Search;
-
-
-class ShixunSearchBar extends Component {
-
- constructor(props) {
-      super(props)
-      this.state = {
-            status: undefined,
-            diff: 0,
-            InputValue: undefined,
-            shixunhoverData: [],
-            shixunchildValues:'',
-          shixunsearchAllvalue:"a",
-          openStatus:false,
-          openLevel:false
-      }
-}
-
-      //状态筛选
-    status_search = (value) => {
-        let newvalue = value;
-        if (newvalue === "0") {
-            newvalue = " "
-        } else if (newvalue === "1") {
-            newvalue = 2
-        } else if (newvalue === "2") {
-            newvalue = 1
-        } else if (newvalue === "3") {
-            newvalue = 3
-        }
-
-      this.setState({
-          status: newvalue,
-          openStatus:false
-      })
-        let list = [{'type': 1}, {'value': newvalue}];
-      this.props.StatusEnquiry(list);
-}
-
-      //难度筛选
-diff_search = (value) => {
-      this.setState({
-        diff: value,
-        openLevel:false
-      })
-      let list=[{'type':2},{'value':value}];
-      this.props.StatusEnquiry(list);
-}
-
-      //输入框搜索
-Input_search = (value) => {
-      this.setState({
-          InputValue: value
-      })
-      this.props.OnSearchInput(value);
-}
-      //查询
-shixunsearchAll = (e) => {
-     let{shixunsearchAllvalue}=this.state;
-    let id = e.target.value;
-
-    if(shixunsearchAllvalue===id){
-        return
-    }
-    if(id===0){
-        id=" "
-        this.setState({
-            InputValue: " "
-        })
-        this.props.OnSearchInput("");
-    }
-    let list=[{'tag_level':1},{'tag_id':id}];
-    if(id!=undefined){
-        this.setState({
-            shixunsearchAllvalue:id,
-            shixunchildValues:""
-        })
-        this.props.Updatasearchlist(list);
-    }
-
-}
-
-    shixunsearchall=(e)=>{
-        let{shixunsearchAllvalue}=this.state;
-        let id = "a";
-
-        if(shixunsearchAllvalue===id){
-            return
-        }
-        this.setState({
-            shixunsearchAllvalue:"a",
-            shixunchildValues:""
-        })
-        this.props.allUpdatashixunlist();
-    }
-
-					//选择Tab页详情
-		getshixunchildValue = (e) => {
-					 let id = e.target.name;
-					 let newid=e.target.id;
-					 let list=[{'tag_level':2},{'tag_id':id}];
-					 if(id!=undefined||newid!=undefined){
-						this.setState({
-								shixunsearchAllvalue:newid
-						})
-						this.props.Updatasearchlist(list);
-				}
-		}
-
-getshixunchildValues = (e) => {
-    let id = e.target.id;
-    let newid=e.target.name;
-    let list=[{'tag_level':3},{'tag_id':id}];
-    if(id!=undefined||newid!=undefined){
-        this.setState({
-            shixunchildValues:id,
-            shixunsearchAllvalue:newid
-        })
-        this.props.Updatasearchlist(list);
-    }
-
-}
-
-componentDidMount() {
-      let hoverUrlArr = [];
-      let hoverUrl = `/shixuns/menus.json`;
-      axios.get(hoverUrl
-      ).then((response) => {
-            hoverUrlArr = response.data;
-            // hoverUrlArr.reverse();
-            this.setState({
-                  shixunhoverData: hoverUrlArr
-            })
-      }).catch((error) => {
-            console.log(error)
-      })
-}
-
-render() {
-    let {shixunhoverData, shixunchildValues, shixunsearchAllvalue, InputValue,openStatus,openLevel} = this.state;
-    let {typepvisible} = this.props;
-     // //实训首页筛选的移入和点击事件
-     // $(".shaiItem").hover(function(){
-     //      var hei=parseInt($(".shaiAllItem").height())-2;
-     //     $(this).find(".subshaicontent").css("top", '34px');
-     //      $(this).find(".subshaicontent").show();
-     //  },function(){
-     //      $(this).find(".subshaicontent").hide();
-     //  });
-		 //
-     //  $(".shaiItem").live("click",function(){
-     //      $(".shaiItem").removeClass("active");
-     //      $(this).addClass("active");
-     //      $(".subshaicontent").hide();
-     //  });
-		 //
-     //  $(".subshaicontent").live("click", function(event){
-     //      $(".subshaicontent").hide();
-     //      event.stopPropagation();
-     //  });
-
-		 let overlaymenu=(item,id)=>(
-				 <Menu>
-					{
-						item.map((list,k)=>{
-							return(
-								<Menu.Item>
-								<div className="mt5 subshaicontent-part" key={k}>
-									<a style={{ height: '20px' }} className={ "mb15 shixun_repertoire color-dark"}  name={list.id} id={id} onClick={this.getshixunchildValue}>{list.name}</a>
-									<div className="sub-Item clearfix">
-										{
-											list.tags.map((tag,e)=>{
-												return(
-													<a className={parseInt(shixunchildValues)===tag.id?"shixun_repertoire active":"shixun_repertoire"} key={e} id={tag.id} name={id} rel="subshaicontent" onClick={this.getshixunchildValues}>{tag.name}</a>
-												)
-											})
-										}
-									</div>
-								</div>
-								</Menu.Item>
-							)
-						})
-					}
-				 </Menu>
-		)
-
-    return (
-        <div className="edu-back-white" >
-            <div className="educontent">
-                <div className="pt_b_26">
-                    <div className="clearfix mb20 shaiContent">
-                        <span className="shaiTitle fl">方向：</span>
-                        <div className="fl pr shaiAllItem">
-                        <li className={shixunsearchAllvalue==="a"?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} value= "a"    onClick={this.shixunsearchall}>全部</li>
-													<style>
-														{
-															`
-															.ant-dropdown{
-														     width: 800px;
-															}
-															.shixun_repertoire{
-																	cursor: pointer;
-																	float: left;
-																	margin-right: 20px;
-																	color: #999;
-                                                                    cursor: pointer;
-                                                                    margin-bottom:10px;
-															}
-															.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title{
-    															padding: 0px 12px;
-															}
-															.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover{
-													      background:transparent !important;
-															}
-															`
-														}
-													</style>
-													{
-														shixunhoverData.map((item,key)=>{
-															return(
-																	<Dropdown overlay={overlaymenu(item.sub_repertoires,item.id)} key={key} placement={item.id<4?"bottomRight":item.id>=8?"bottomLeft":"bottomCenter"}>
-																		<li  key={key} className={parseInt(shixunsearchAllvalue)===item.id?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} value={item.id}  onClick={this.shixunsearchAll}>
-																			{item.name}
-																		</li>
-																	</Dropdown>
-															)
-														})
-													}
-
-
-                        </div>
-                        </div>
-                        <div className="clearfix">
-                        <span className="shaiTitle fl">筛选：</span>
-													{
-														<style>
-                                                            {`
-                                                            .shaiContent li.shaiItem{
-                                                                padding:0px 15px;
-                                                                line-height:32px;
-                                                                height:32px
-                                                            }
-                                                            .shaiTitle{
-                                                                height:32px;
-                                                                line-height:32px;
-                                                            }
-															  .shaiItems{
-                                                                padding:0px 15px;
-                                                                line-height:32px;
-                                                                height:32px;
-																		float: left;
-																		border-radius: 4px;
-																		color: #4C4C4C;
-																		cursor: pointer;
-																		margin-right: 15px;
-																		display: block;
-																		float:left;
-																	}
-																	.shaiItems.active {
-																			background-color: #4CACFF!important;
-																			color: #fff!important;
-																	}
-															`}
-														</style>
-													}
-													<div className="fl pr shaiAllItem mt1">
-														<li className={this.state.diff===0?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(0)}>全部难度</li>
-														<li className={this.state.diff===1?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(1)}>初级</li>
-														<li className={this.state.diff===2?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(2)}>中级</li>
-														<li className={this.state.diff===3?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(3)}>中高级</li>
-														<li className={this.state.diff===4?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(4)}>高级</li>
-													</div>
-
-                    </div>
-                </div>
-        </div>
-    </div>
-      );
-}
-}
-
-export default ShixunSearchBar;
diff --git a/public/react/src/modules/tpm/shixuns/ShixunsIndex.js b/public/react/src/modules/tpm/shixuns/ShixunsIndex.js
index 6fc6147c6..e42a2bd36 100644
--- a/public/react/src/modules/tpm/shixuns/ShixunsIndex.js
+++ b/public/react/src/modules/tpm/shixuns/ShixunsIndex.js
@@ -1,29 +1,13 @@
 import React, { Component } from 'react';
-
-import { Redirect } from 'react-router';
-
-import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
-
 import axios from 'axios';
-
-import { Spin } from 'antd';
-
-import TPMIndexHOC from '../TPMIndexHOC';
-
-import { SnackbarHOC,getImageUrl} from 'educoder';
-
-import ShixunCardList from './ShixunCardList';
-
-import ShixunSearchBar from './ShixunSearchBar';
-
-import ShixunCard from './ShixunCard';
-
+import { TPMIndexHOC } from '../TPMIndexHOC';
+import { SnackbarHOC, getImageUrl } from 'educoder';
+import ShixunCardList from './shixun-keyword-list';
+import ShixunSearchBar from './shixun-search-bar';
+import ShixunCard from './shixun-card';
 import UpgradeModals from '../../modals/UpgradeModals';
-
 const queryString = require('query-string');
-
-const $ = window.$;
-
+import btnUrl from './btn-new.png'
 class ShixunsIndex extends Component {
     constructor(props) {
         super(props)
@@ -173,8 +157,6 @@ class ShixunsIndex extends Component {
     }
 
     StatusEnquiry = (key) => {
-
-        let Vrl = `/shixuns.json`;
         let newstatus;
         let newdiff;
         if (key[0].type === 1) {
@@ -386,39 +368,38 @@ class ShixunsIndex extends Component {
         // console.log(this.state.updata)
         return (
             <div className="newMain clearfix  backFAFAFA">
-							{this.state.updata===undefined?"":<UpgradeModals
-								{...this.state}
-							/>}
-							<style>
-								{
-									`    ::-webkit-scrollbar {
+                {this.state.updata === undefined ? "" : <UpgradeModals
+                    {...this.state}
+                />}
+                <style>
+                    {
+                        `    ::-webkit-scrollbar {
                       width: 0px !important;
                     }
 										.myshixin-head{
 												width: 100%;
 												height: 240px;
-												background-image: url(${getImageUrl(this.props.mygetHelmetapi && this.props.mygetHelmetapi.shixun_banner_url === null ?`images/educoder/courses/courses.jpg`:this.props.mygetHelmetapi&&this.props.mygetHelmetapi.shixun_banner_url)});
+												background-image: url(${getImageUrl(this.props.mygetHelmetapi && this.props.mygetHelmetapi.shixun_banner_url === null ? `images/educoder/courses/courses.jpg` : this.props.mygetHelmetapi && this.props.mygetHelmetapi.shixun_banner_url)});
 											  background-color: #081C4B;
 												background-position: center;
 												background-repeat: no-repeat;
 										}
 
 									`
-								}
-							</style>
-							{
-								this.props.mygetHelmetapi&&this.props.mygetHelmetapi.shixun_banner_url?
-									<div className="myshixin-head pr" >
-										<div className="edu-txt-center pathNavLine">
-											<div className="inline path-nav">
-											</div>
-										</div>
-									</div>
-									:
-									""
-							}
-
-                {/*<Spin spinning={typepvisible}  size="large" style={{marginTop:'15%'}}>*/}
+                    }
+                </style>
+                {
+                    this.props.mygetHelmetapi && this.props.mygetHelmetapi.shixun_banner_url ?
+                        <div className="myshixin-head pr" >
+                            <div className="edu-txt-center pathNavLine">
+                                <div className="inline path-nav">
+                                </div>
+                            </div>
+                        </div>
+                        :
+                        ""
+                }
+
                 <ShixunSearchBar
                     Updatasearchlist={this.Updatasearchlist.bind(this)}
                     allUpdatashixunlist={this.allUpdatashixunlist}
@@ -433,10 +414,11 @@ class ShixunsIndex extends Component {
                 />
 
                 <ShixunCardList
-                    ShixunsState={this.ShixunsState.bind(this)}
+                    onChangeLabel={this.ShixunsState.bind(this)}
                     ShixunsSwitch={this.ShixunsSwitch.bind(this)}
                     Shixunsupcircles={this.Shixunsupcircles.bind(this)}
                     allUpdatashixunlist={this.allUpdatashixunlist}
+                    btnUrl={btnUrl}
                     {...this.props}
                     {...this.state}
                     OnSearchInput={this.OnSearchInput.bind(this)}
diff --git a/public/react/src/modules/tpm/shixuns/btn-new.png b/public/react/src/modules/tpm/shixuns/btn-new.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b584c54886ffe7cd32cf38eda4f2cd7d2b6a685
GIT binary patch
literal 1970
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
Ef<v>E-T(jq

literal 0
HcmV?d00001

diff --git a/public/react/src/modules/tpm/shixuns/shixun-card.js b/public/react/src/modules/tpm/shixuns/shixun-card.js
new file mode 100644
index 000000000..5fe07d074
--- /dev/null
+++ b/public/react/src/modules/tpm/shixuns/shixun-card.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import { getImageUrl, setImagesUrl, getUrl } from 'educoder';
+import { Spin, Tooltip, Rate, Pagination } from 'antd';
+import './shixunCss/shixunCard.scss';
+
+export default ({ middleshixundata, pagination, typepvisible, pages, totalcount, shixunsPage }) => {
+  function onPageChange(number) {
+    shixunsPage(number)
+  }
+
+  return (
+    <div className="educontent mb80 shixun-card">
+      <Spin spinning={typepvisible} tip="正在获取相关数据..." size="large" style={{ marginTop: '15%' }}>
+        {middleshixundata === undefined ? "" : middleshixundata.length === 0 ? <div className="edu-tab-con-box clearfix edu-txt-center">
+          <img className="edu-nodata-img mb20" src={getUrl("/images/educoder/nodata.png")} />
+          <p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p>
+        </div> : ""}
+
+        <div className="mb20 clearfix">
+          <div className="shixun_list_content">
+            <div className="square-list clearfix">
+              {middleshixundata === undefined || middleshixundata.length === 0 ? " " : middleshixundata.map((item, key) => {
+                return (
+                  <div className="square-Item" key={item.id} id={item.id}>
+                    {
+                      item.tag_name === null ? "" :
+                        <div className="tag-green">
+                          <span className="tag-name"> {item.tag_name}</span>
+                        </div>
+                    }
+                    {
+                      item.is_jupyter === true ?
+                        <div className="tag-org">
+                          <p className="tag-org-name intermediatecenter"> <span className="tag-org-name-test">Jupyter</span></p>
+                        </div>
+                        : ""}
+
+                    <div className={item.power === false ? "closeSquare" : "none"}>
+                      <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
+                        className="mt80 mb25" />
+                      <p className="font-14 color-white">非试用内容，需要授权</p>
+                    </div>
+
+                    <a href={"/shixuns/" + item.identifier + "/challenges"} className="square-img" target="_blank">
+                      <img src={setImagesUrl(`${item.pic}`)} />
+                    </a>
+
+                    <div className="square-main">
+                      <p className="task-hide">
+                        <a href={"/shixuns/" + item.identifier + "/challenges"} className="justify color-grey-name" title={item.name} target="_blank">
+                          {item.name}
+                        </a>
+                      </p>
+
+                      <p className="clearfix mt8 ml-3">
+                        <span className="rateYoStar fl" style={{ padding: '0px', height: '20px', lineHeight: '19px', cursor: 'default' }} title="">
+                          <Rate key={key} allowHalf defaultValue={item.score_info === null ? 5 : item.score_info} disabled />
+                        </span>
+                        <span className="fl ml25 font-12 color-grey-9 lineh-12 mt5">{item.score_info === null ? "5分" : item.score_info + "分"}</span>
+                      </p>
+
+                      <p className="clearfix mt8 font-12 color-grey-B4">
+                        {item.is_jupyter === false ? <Tooltip placement="bottom" title={"关卡"}>
+                          <span className="mr10 fl squareIconSpan">
+                            <i className="iconfont icon-shixunguanqia fl mr3"></i>{item.challenges_count}
+                          </span>
+                        </Tooltip> : ""}
+
+                        <Tooltip placement="bottom" title={"学习人数"}>
+                          <span className="mr10 fl squareIconSpan" style={{ display: item.stu_num === 0 ? "none" : "block" }}>
+                            <i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
+                          </span>
+                        </Tooltip>
+
+                        <span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
+                      </p>
+
+                    </div>
+                  </div>
+                )
+              })
+              }
+
+            </div>
+            <div className="both"></div>
+            <div className={"ml425"}
+              style={{ display: pagination ? "block" : "none" }}>
+              <Pagination defaultCurrent={1} current={pages} total={totalcount || 1299} type="mini" pageSize={16} onChange={onPageChange} />
+            </div>
+
+          </div>
+
+        </div>
+      </Spin>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx b/public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx
new file mode 100644
index 000000000..ca0fc5025
--- /dev/null
+++ b/public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx
@@ -0,0 +1,81 @@
+import React, { useState, Fragment } from 'react';
+import GotoQQgroup from '../../../modal/GotoQQgroup'
+import { Input, Icon } from 'antd'
+import './shixun-keyword-list.scss'
+
+function AddonAfter({ callback }) {
+	return <a className='btn-search' onClick={callback}>
+		<Icon type='search' />
+		<span>搜索</span>
+	</a>
+}
+export default ({ onChangeLabel, btnUrl, OnSearchInput, checkIfLogin, showLoginDialog, checkIfProfileCompleted, showProfileCompleteDialog, current_user }) => {
+	const [data, setData] = useState({
+		type: 'new',
+		showQQ: false,
+		keyword: '',
+	})
+
+	function onChangeTag(e) {
+		const id = e.target.id
+		setData({ ...data, type: id })
+		onChangeLabel(false, id, "desc")
+	}
+	function onSetKeyword(e) {
+		setData({ ...data, keyword: e.target.value })
+	}
+
+	function callback() {
+		if (keyword) {
+			OnSearchInput(keyword, true)
+		}
+	}
+
+	function setShowQQ(v) {
+		setData({ ...data, showQQ: v })
+	}
+
+	function onNewShiXun() {
+		if (!checkIfLogin()) {
+			showLoginDialog()
+			return
+		}
+		if (!checkIfProfileCompleted()) {
+			showProfileCompleteDialog()
+			return
+		}
+		if (current_user && current_user.is_shixun_marker === false) {
+			setShowQQ(true)
+			return
+		}
+		window.location.href = '/shixuns/new'
+	}
+
+	const { type, keyword, showQQ } = data
+	return (
+		<Fragment>
+			<div className="wrapper">
+				<div className="educontent  search-keyword-container">
+					<div className="btn-groups">
+						<a id='new' className={type === 'new' ? 'active' : ''} onClick={onChangeTag} title='最新'>最新</a>
+						<a id='hot' className={type === 'hot' ? 'active' : ''} onClick={onChangeTag} title='最热'>最热</a>
+					</div>
+					<div className='search-container'>
+						<Input onChange={onSetKeyword} value={keyword} addonAfter={<AddonAfter callback={callback} />} defaultValue="" placeholder='请输入课程名称进行搜索' />
+					</div>
+				</div>
+				<a className="btn-new" onClick={onNewShiXun}>
+					<img src={btnUrl} width={40} alt="创建实训" />
+				</a>
+			</div>
+
+			{
+				showQQ ?
+					<GotoQQgroup goshowqqgtounp={showQQ} setgoshowqqgtounp={setShowQQ}></GotoQQgroup>
+					:
+					""
+			}
+		</Fragment>
+
+	)
+}
diff --git a/public/react/src/modules/tpm/shixuns/shixun-keyword-list.scss b/public/react/src/modules/tpm/shixuns/shixun-keyword-list.scss
new file mode 100644
index 000000000..d3ecd2008
--- /dev/null
+++ b/public/react/src/modules/tpm/shixuns/shixun-keyword-list.scss
@@ -0,0 +1,70 @@
+.search-keyword-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0;
+
+  .ant-input-group-addon {
+    background-color: #4CACFF;
+  }
+
+  .ant-input:focus+.ant-input-group-addon {
+    background-color: #4CACFF !important;
+  }
+
+  .search-container {
+    width: 320px;
+  }
+
+  .btn-search {
+    display: block;
+    text-align: center;
+    color: #fff;
+
+    span {
+      margin-left: 5px;
+    }
+  }
+
+
+  .btn-groups {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: start;
+
+    a {
+      display: block;
+      width: 60px;
+      border-radius: 14px;
+      text-align: center;
+      height: 28px;
+      line-height: 28px;
+
+      &:first-child {
+        margin-right: 20px;
+      }
+
+      color: #999;
+      background-color: #eee;
+
+      &.active {
+        color: #fff;
+        background-color: #4CACFF;
+      }
+    }
+  }
+}
+
+.wrapper {
+  position: relative;
+}
+
+.btn-new {
+  position: absolute;
+  width: 40px;
+  right: 39px;
+  top: 76px;
+  z-index: 10;
+}
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/shixuns/shixun-search-bar/A.jsx b/public/react/src/modules/tpm/shixuns/shixun-search-bar/A.jsx
new file mode 100644
index 000000000..7e933462e
--- /dev/null
+++ b/public/react/src/modules/tpm/shixuns/shixun-search-bar/A.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+export default ({
+  activeId, id, callback, text
+}) => {
+  function onClickHandler() {
+    callback(id)
+  }
+  return (
+    <a className={id === activeId ? "shaiItems shixun_repertoire active" : "shaiItems shixun_repertoire"} onClick={onClickHandler}>{text}</a>
+  )
+}
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/shixuns/shixun-search-bar/index.jsx b/public/react/src/modules/tpm/shixuns/shixun-search-bar/index.jsx
new file mode 100644
index 000000000..29a3b8485
--- /dev/null
+++ b/public/react/src/modules/tpm/shixuns/shixun-search-bar/index.jsx
@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react'
+import { Menu, Dropdown } from 'antd'
+import 'antd/lib/style/index.css';
+import '../shixunCss/shixun-search-bar.scss'
+import axios from 'axios'
+import A from './A.jsx'
+
+const DiffObject = [
+    { id: 0, text: '全部难度' },
+    { id: 1, text: '初级' },
+    { id: 2, text: '中级' },
+    { id: 3, text: '中高级' },
+    { id: 4, text: '高级' }
+]
+export default ({ StatusEnquiry, allUpdatashixunlist, Updatasearchlist }) => {
+    const [data, setData] = useState({
+        diff: 0,
+        searchValue: 'a',
+        navs: [],
+        searchKey: '',
+        childValue: ''
+    })
+    const { diff, searchValue, navs, childValue, searchKey } = data
+    function diffSearch(diff) {
+        setData({
+            ...data,
+            diff
+        })
+        StatusEnquiry([{ 'type': 2 }, { 'value': diff }])
+    }
+    function onSearchAll() {
+        if (searchValue !== 'a') {
+            setData({ ...data, searchValue: 'a', childValue: '' })
+            allUpdatashixunlist()
+        }
+    }
+    function getChildValue(e) {
+        let id = e.target.name
+        let newid = e.target.id
+        if (id || newid) {
+            setData({ ...data, searchValue: newid })
+            Updatasearchlist([{ 'tag_level': 2 }, { 'tag_id': id }])
+        }
+    }
+    function getChildValues(e) {
+        let id = e.target.id;
+        let newid = e.target.name;
+        if (id || newid) {
+            setData({ ...data, searchValue: newid, childValue: id })
+            Updatasearchlist([{ 'tag_level': 3 }, { 'tag_id': id }])
+        }
+    }
+    function onSearchBranch(e) {
+        const id = e.target.value
+        if (id != searchValue) {
+            setData({ ...data, searchValue: id, childValue: '' })
+            Updatasearchlist([{ 'tag_level': 1 }, { 'tag_id': id }])
+        }
+
+    }
+    function overlayMenu(item, id) {
+        return <Menu>
+            {
+                item.map((list, k) => <Menu.Item>
+                    <div className="mt5 subshaicontent-part" key={k}>
+                        <a style={{ height: '20px' }} className={"mb15 shixun_repertoire color-dark"} name={list.id} id={id} onClick={getChildValue}>{list.name}</a>
+                        <div className="sub-Item clearfix">
+                            {
+                                list.tags.map((tag, e) => <a className={childValue === tag.id ? "shixun_repertoire active" : "shixun_repertoire"} key={e} id={tag.id} name={id} rel="subshaicontent" onClick={getChildValues}>{tag.name}</a>
+                                )
+                            }
+                        </div>
+                    </div>
+                </Menu.Item>
+                )
+            }
+        </Menu>
+
+    }
+    useEffect(() => {
+        async function init() {
+            const response = await axios.get('/shixuns/menus.json')
+            setData({ ...data, navs: response.data })
+        }
+        init()
+    }, [])
+    return (
+        <div className="edu-back-white shixun-search-bar" >
+            <div className="educontent">
+                <div className="pt_b_26">
+                    <div className="clearfix mb20 shaiContent">
+                        <span className="shaiTitle fl">方向：</span>
+                        <div className="fl pr shaiAllItem">
+                            <a className={searchValue === "a" ? "shaiItem shixun_repertoire active" : "shaiItem shixun_repertoire"} value="a" onClick={onSearchAll}>全部</a>
+                            {
+                                navs.map((item, key) => {
+                                    return (
+                                        <Dropdown overlay={overlayMenu(item.sub_repertoires, item.id)} key={key} placement={item.id < 4 ? "bottomRight" : item.id >= 8 ? "bottomLeft" : "bottomCenter"}>
+                                            <li key={item.id} className={searchValue == item.id ? "shaiItem shixun_repertoire active" : "shaiItem shixun_repertoire"} value={item.id} onClick={onSearchBranch}>
+                                                {item.name}
+                                            </li>
+                                        </Dropdown>
+                                    )
+                                })
+                            }
+
+
+                        </div>
+                    </div>
+                    <div className="clearfix">
+                        <span className="shaiTitle fl">筛选：</span>
+                        <div className="fl pr shaiAllItem mt1">
+                            {DiffObject.map(item => <A {...item} callback={diffSearch} activeId={diff} />)}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/public/react/src/modules/tpm/shixuns/shixunCss/ShixunSearchBar.css b/public/react/src/modules/tpm/shixuns/shixunCss/ShixunSearchBar.css
index 7ea80bd26..433bd4693 100644
--- a/public/react/src/modules/tpm/shixuns/shixunCss/ShixunSearchBar.css
+++ b/public/react/src/modules/tpm/shixuns/shixunCss/ShixunSearchBar.css
@@ -1,23 +1,26 @@
-.iconfontShixunSearchBar{
-    z-index: 1000;
-    position: absolute;
-    right: 3px;
-    top: 0px;
+.iconfontShixunSearchBar {
+  z-index: 1000;
+  position: absolute;
+  right: 3px;
+  top: 0px;
 }
-.pt_b_26{
-    padding:26px 0px;
+
+.pt_b_26 {
+  padding: 26px 0px;
+}
+
+.diffSelect {
+  margin-left: 20px !important;
 }
 
-.diffSelect{
-    margin-left:20px !important;
- }
- .ant-input-search-button{
-     /*margin-right: 10px;*/
-    border: 1px solid transparent;
- }
-.Mousebox{
-    width: 800px !important;
+.ant-input-search-button {
+  border: 1px solid transparent;
 }
-.subshaicontent a{
-  height:30px;
+
+.Mousebox {
+  width: 800px !important;
+}
+
+.subshaicontent a {
+  height: 30px;
 }
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/shixuns/shixunCss/shixun-search-bar.scss b/public/react/src/modules/tpm/shixuns/shixunCss/shixun-search-bar.scss
new file mode 100644
index 000000000..1195598cd
--- /dev/null
+++ b/public/react/src/modules/tpm/shixuns/shixunCss/shixun-search-bar.scss
@@ -0,0 +1,78 @@
+.iconfontShixunSearchBar {
+  z-index: 1000;
+  position: absolute;
+  right: 3px;
+  top: 0px;
+}
+
+.pt_b_26 {
+  padding: 26px 0px;
+}
+
+.diffSelect {
+  margin-left: 20px !important;
+}
+
+.ant-input-search-button {
+  border: 1px solid transparent;
+}
+
+.Mousebox {
+  width: 800px !important;
+}
+
+.subshaicontent a {
+  height: 30px;
+}
+
+.ant-dropdown {
+  width: 800px;
+}
+
+.shixun_repertoire {
+  cursor: pointer;
+  float: left;
+  margin-right: 20px;
+  color: #999;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.ant-dropdown-menu-item,
+.ant-dropdown-menu-submenu-title {
+  padding: 0px 12px;
+}
+
+.ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-submenu-title:hover {
+  background: transparent !important;
+}
+
+.shaiContent li.shaiItem {
+  padding: 0px 15px;
+  line-height: 32px;
+  height: 32px
+}
+
+.shaiTitle {
+  height: 32px;
+  line-height: 32px;
+}
+
+.shaiItems {
+  padding: 0px 15px;
+  line-height: 32px;
+  height: 32px;
+  float: left;
+  border-radius: 4px;
+  color: #4C4C4C;
+  cursor: pointer;
+  margin-right: 15px;
+  display: block;
+  float: left;
+}
+
+.shaiItems.active {
+  background-color: #4CACFF !important;
+  color: #fff !important;
+}
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.css b/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.css
index 1ec00a26e..ccb51ed13 100644
--- a/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.css
+++ b/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.css
@@ -6,29 +6,32 @@
   margin-left: 32%;
 }
 
-.square-img{
-    min-height: 210px;
+.square-img {
+  min-height: 210px;
 }
-.task-hide{
+
+.task-hide {
   margin-bottom: 0em;
 }
-.backFAFAFA{
-  background:#FAFAFA;
+
+.backFAFAFA {
+  background: #FAFAFA;
 }
 
 .demo {
   width: 500px;
   background-color: #0dcecb;
   text-align: center;
-  padding:50px;
+  padding: 50px;
 }
+
 .next-loading {
   margin-bottom: 5px;
-  width:100%;
+  width: 100%;
 }
 
-.next-rating-overlay .next-icon{
-  color: #FFA800!important;
+.next-rating-overlay .next-icon {
+  color: #FFA800 !important;
 }
 
 .custom-pagination {
@@ -36,7 +39,7 @@
   margin-left: 10px;
 }
 
-.ml425{
-  margin-left:42.5%;
-  margin-top:20px;
+.ml425 {
+  margin-left: 42.5%;
+  margin-top: 20px;
 }
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.scss b/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.scss
new file mode 100644
index 000000000..8ff3390a3
--- /dev/null
+++ b/public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.scss
@@ -0,0 +1,101 @@
+.ml350 {
+  margin-left: 40%;
+}
+
+.ml32 {
+  margin-left: 32%;
+}
+
+.square-img {
+  min-height: 210px;
+}
+
+.task-hide {
+  margin-bottom: 0em;
+}
+
+.backFAFAFA {
+  background: #FAFAFA;
+}
+
+.demo {
+  width: 500px;
+  background-color: #0dcecb;
+  text-align: center;
+  padding: 50px;
+}
+
+.next-loading {
+  margin-bottom: 5px;
+  width: 100%;
+}
+
+.next-rating-overlay .next-icon {
+  color: #FFA800 !important;
+}
+
+.custom-pagination {
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.ml425 {
+  margin-left: 42.5%;
+  margin-top: 20px;
+}
+
+.shixun-card {
+
+  .edu-tab-con-box {
+    padding: 100px 0px;
+  }
+
+  .ant-modal-body .edu-tab-con-box {
+    padding: 0px !important;
+  }
+
+  img.edu-nodata-img {
+    margin: 40px auto 20px;
+  }
+
+  .square-list {
+    margin-top: 5px;
+  }
+
+  .tag-green {
+    position: absolute;
+    left: 10px;
+    bottom: 125px;
+  }
+
+  .tag-org {
+    position: absolute;
+    left: 0px;
+    top: 20px;
+  }
+
+  .tag-org-name {
+    width: 66px;
+    height: 28px;
+    background: #FF6802;
+    width: 66px;
+    height: 28px;
+    border-radius: 0px 20px 20px 0px;
+  }
+
+  .tag-org-name-test {
+    width: 45px;
+    height: 23px;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 19px;
+    margin-right: 6px;
+  }
+
+  .intermediatecenter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
\ No newline at end of file