m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

实训增加搜索并调整新增

Browse Source
dev_aliyun2
harry 5 years ago
parent 22c736efc1
commit efbbe928e9
14 changed files with 900 additions and 427 deletions
Show Stats Download Patch File Download Diff File

232
public/react/src/App.js
Unescape View File

@ -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} />)
}

5
public/react/src/modal/GotoQQgroup.js
Unescape View File

@ -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) {

301
public/react/src/modules/tpm/shixuns/ShixunSearchBar.js
Unescape View File

@ -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;

32
public/react/src/modules/tpm/shixuns/ShixunsIndex.js
Unescape View File

@ -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 { TPMIndexHOC } from '../TPMIndexHOC';
import { SnackbarHOC, getImageUrl } from 'educoder';
import ShixunCardList from './ShixunCardList';
import ShixunSearchBar from './ShixunSearchBar';
import ShixunCard from './ShixunCard';
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) {
@ -418,7 +400,6 @@ class ShixunsIndex extends Component {
""
}
{/*<Spin spinning={typepvisible} size="large" style={{marginTop:'15%'}}>*/}
<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)}

BIN
public/react/src/modules/tpm/shixuns/btn-new.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

97
public/react/src/modules/tpm/shixuns/shixun-card.js
Unescape View File

@ -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>
)
}

81
public/react/src/modules/tpm/shixuns/shixun-keyword-list.jsx
Unescape View File

@ -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>
)
}

70
public/react/src/modules/tpm/shixuns/shixun-keyword-list.scss
Unescape View File

@ -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;
}

11
public/react/src/modules/tpm/shixuns/shixun-search-bar/A.jsx
Unescape View File

@ -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>
)
}

121
public/react/src/modules/tpm/shixuns/shixun-search-bar/index.jsx
Unescape View File

@ -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>
)
}

5
public/react/src/modules/tpm/shixuns/shixunCss/ShixunSearchBar.css
Unescape View File

@ -4,6 +4,7 @@
right: 3px;
top: 0px;
}
.pt_b_26 {
padding: 26px 0px;
}
@ -11,13 +12,15 @@
.diffSelect {
margin-left: 20px !important;
}
.ant-input-search-button {
/*margin-right: 10px;*/
border: 1px solid transparent;
}
.Mousebox {
width: 800px !important;
}
.subshaicontent a {
height: 30px;
}

78
public/react/src/modules/tpm/shixuns/shixunCss/shixun-search-bar.scss
Unescape View File

@ -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;
}

3
public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.css
Unescape View File

@ -9,9 +9,11 @@
.square-img {
min-height: 210px;
}
.task-hide {
margin-bottom: 0em;
}
.backFAFAFA {
background: #FAFAFA;
}
@ -22,6 +24,7 @@
text-align: center;
padding: 50px;
}
.next-loading {
margin-bottom: 5px;
width: 100%;

101
public/react/src/modules/tpm/shixuns/shixunCss/shixunCard.scss
Unescape View File

@ -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;
}
}
Write Preview
Loading…
Cancel
Save