@ -0,0 +1,116 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
|
||||
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 = {
|
||||
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="ysllogin_register_contents" style={{width:"800px",height: "620px"}}>
|
||||
|
||||
<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="yslbutton" size={"large"} type="primary" style={{width:"255px",height: "36px",background: "#4CACFF"}}>完成</Button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default (InterestpageComponent);
|
||||
|
After Width: | Height: | Size: 462 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 417 B |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 9.7 KiB |