|
|
|
|
@ -1,51 +1,110 @@
|
|
|
|
|
import React, {Component} from 'react';
|
|
|
|
|
|
|
|
|
|
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
import {getImageUrl, DragValidator} from 'educoder';
|
|
|
|
|
import {Tabs, Input, Checkbox, Button, notification} from 'antd';
|
|
|
|
|
import {Button} from 'antd';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import './common.css'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import mytc from './img/mytc.png';
|
|
|
|
|
import skzbdx from './img/skzbdx.png';
|
|
|
|
|
import zyrs1 from './img/zyrs1.png';
|
|
|
|
|
import gouxuan from './img/gouxuan.png';
|
|
|
|
|
import meigouxuan from './img/meigouxuan.png';
|
|
|
|
|
import qdkf from './img/qdkf.png';
|
|
|
|
|
import hdkf from './img/hdkf.png';
|
|
|
|
|
import ydkf from './img/ydkf.png';
|
|
|
|
|
import sjk from './img/sjk.png';
|
|
|
|
|
import ysj from './img/ysj.png';
|
|
|
|
|
import yunwei from './img/yunwei.png';
|
|
|
|
|
import rgzn from './img/rgzn.png';
|
|
|
|
|
import qita from './img/qita.png';
|
|
|
|
|
//父组件 EducoderLogin.js
|
|
|
|
|
class InterestpageComponent extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
this.state = {
|
|
|
|
|
login: "",
|
|
|
|
|
password: "",
|
|
|
|
|
passwords: "",
|
|
|
|
|
seconds: 60,
|
|
|
|
|
codes: "",
|
|
|
|
|
getverificationcodes: true,
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
s: 'text',
|
|
|
|
|
classpass: "text",
|
|
|
|
|
readonlyInput: true,
|
|
|
|
|
gouxuans: 0,
|
|
|
|
|
gouxuans2:0,
|
|
|
|
|
gouxuans3:[{id:1,name:"前端开发",bool:false,url:qdkf},{id:2,name:"后端开发",bool:false,url:hdkf},{id:3,name:"移动开发",bool:false,url:ydkf},{id:4,name:"数据库",bool:false,url:sjk},{id:5,name:"云计算和大数据",bool:false,url:ysj},{id:6,name:"运维与测试",bool:false,url:yunwei},{id:7,name:"人工智能",bool:false,url:rgzn},{id:8,name:"其他",bool:false,url:qita}],
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
Clickteacher=(e)=>{
|
|
|
|
|
console.log(e);
|
|
|
|
|
if(e === 1){
|
|
|
|
|
this.setState({
|
|
|
|
|
gouxuans:1,
|
|
|
|
|
})
|
|
|
|
|
}else if(e === 2){
|
|
|
|
|
this.setState({
|
|
|
|
|
gouxuans:2,
|
|
|
|
|
})
|
|
|
|
|
}else if(e === 3){
|
|
|
|
|
this.setState({
|
|
|
|
|
gouxuans:3,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
Clickteacher2=(e)=>{
|
|
|
|
|
console.log(e);
|
|
|
|
|
let {gouxuans3} =this.state;
|
|
|
|
|
for (var i=0;i<gouxuans3.length;i++){
|
|
|
|
|
if(gouxuans3[i].id === e){
|
|
|
|
|
console.log("51");
|
|
|
|
|
console.log(e);
|
|
|
|
|
if(gouxuans3[i].bool === true){
|
|
|
|
|
gouxuans3[i].bool=false;
|
|
|
|
|
}else{
|
|
|
|
|
gouxuans3[i].bool=true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(gouxuans3);
|
|
|
|
|
this.setState({
|
|
|
|
|
gouxuans3:gouxuans3,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
render() {
|
|
|
|
|
const {
|
|
|
|
|
gouxuans,
|
|
|
|
|
gouxuans3
|
|
|
|
|
} = this.state
|
|
|
|
|
// height: 346px;
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
|
|
<div className="login_register_content" style={{height: "824px"}}>
|
|
|
|
|
<div className="ysllogin_register_contents" style={{width:"800px",height: "620px"}}>
|
|
|
|
|
|
|
|
|
|
<div className="login_section">
|
|
|
|
|
<div className="ysldivhome">
|
|
|
|
|
<div>1</div>
|
|
|
|
|
<div>2</div>
|
|
|
|
|
<div>3</div>
|
|
|
|
|
<div className="ysllogin_section">
|
|
|
|
|
<div className="mt15"><span className="yslspans1">请选择你的职业</span></div>
|
|
|
|
|
<div className="ysldivhome1" >
|
|
|
|
|
<div className="ysldivhomediv" style={{marginLeft:"30px"}} >
|
|
|
|
|
<div className="ysldivhomedivtxt" onClick={()=>this.Clickteacher(1)}>{gouxuans ===1? <img src={gouxuan} className="gouxuanimg"/>:<img className="gouxuanimg" src={meigouxuan}/>}老师</div>
|
|
|
|
|
<div className="ysldivhomedivimg" ><img src={skzbdx} className="ysldivhomedivimg"/></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="ysldivhomediv" style={{ marginLeft:"101px",marginRight:"101px"}}>
|
|
|
|
|
<div className="ysldivhomedivtxt" onClick={()=>this.Clickteacher(2)}>{gouxuans===2? <img src={gouxuan} className="gouxuanimg"/>:<img className="gouxuanimg" src={meigouxuan}/>}学生</div>
|
|
|
|
|
<div className="ysldivhomedivimg"><img src={mytc} className="ysldivhomedivimg"/></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="ysldivhomediv" >
|
|
|
|
|
<div className="ysldivhomedivtxt" onClick={()=>this.Clickteacher(3)}>{gouxuans===3?<img src={gouxuan} className="gouxuanimg"/>:<img className="gouxuanimg" src={meigouxuan}/>}专业人士</div>
|
|
|
|
|
<div className="ysldivhomedivimg"><img src={zyrs1} className="ysldivhomedivimg"/></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="mt5"><span className="yslspans2">选择你可能感兴趣的内容</span></div>
|
|
|
|
|
|
|
|
|
|
<div ><span className="yslspans3">基于你关注的内容推荐</span></div>
|
|
|
|
|
<div className="ysldivhome2">
|
|
|
|
|
|
|
|
|
|
{gouxuans3&&gouxuans3.map((item,key)=>{
|
|
|
|
|
return(
|
|
|
|
|
<div className={item.id<5?"ysldivhomediv1":"ysldivhomediv2"} onClick={()=>this.Clickteacher2(item.id)}>
|
|
|
|
|
{item.bool===true?<img src={gouxuan} className="yslgouxuanimg"/>:<div className="yslgouxuanimg2"></div>}
|
|
|
|
|
<img className="div1img" src={item.url}/>
|
|
|
|
|
<span className="textall">{item.name}</span>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
<Button className="login_btn" size={"large"} type="primary" style={{height: "46px"}}>完成</Button>
|
|
|
|
|
<Button className="yslbutton" size={"large"} type="primary" style={{width:"255px",height: "36px",background: "#4CACFF"}}>完成</Button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
