educoder/public/react/src/modules/login/EducoderLogin.js

import React, {Component} from "react";
import {
    Form,
    Select,
    Input,
    Button,
    Checkbox,
    Upload,
    Icon,
    message,
    Modal,
    Table,
    Divider,
    InputNumber,
    Tag,
    DatePicker,
    Radio,
    Tooltip,
    notification
} from "antd";
import {Link, Switch, Route, Redirect} from 'react-router-dom';
import '../courses/css/members.css';
import "../courses/common/formCommon.css"
import '../courses/css/Courses.css';
import beijintulogontwo from '../../../src/images/login/beijintulogontwo.png';
import educodernet from '../../../src/images/login/educodernet.png';
import LoginRegisterComponent from '../user/LoginRegisterComponent';
import FindPasswordComponent from '../user/FindPasswordComponent';
import passopen from "../../images/login/passopen.png";
//educoder登入页面
var sectionStyle = {
    "height": "100%",
    "width": "100%",
    "min-width": "1000px",
// makesure here is String确保这里是一个字符串，以下是es6写法


};
var imgback = {
   " background-size":"cover",
"background-repeat":"no-repeat",
    backgroundImage: `url(${beijintulogontwo})`,
}
var imgmian ={
    "width": "100%",
     "background": `url(${beijintulogontwo})`,
     "height": "100%",
     "position": "relative",
}

var newContainer={
   "min-height": "100%",
    "background": `url(${beijintulogontwo})`,
    "height": "auto !important",
     "position": "relative",
}
class EducoderLogin extends Component {
    constructor(props) {
        super(props);
        if(  props.match.url === "/changepassword" ){
            this.state = {
                showbool: false,
                logini:3,
            }
        }else {
            if(props.match.url === "/login"){
                this.state = {
                    showbool: true,
                    loginstatus:true,
                    logini:1,

                }
            }else if(props.match.url === "/register"){
                this.state = {
                    showbool: true,
                    loginstatus:false,
                    logini:2,
                }
            }else{
                this.state = {
                    showbool: true,
                    logini:1,

                }
            }

        }

    }

    componentDidMount() {

    }

    Setlogins=(i)=>{
        console.log("96ye");
        console.log(i)
        this.setState({
            logini:i
        })

    }
    Setshowbool = () => {

        if (this.state.showbool === true) {
            this.setState({
                showbool: false
            })

        } else {
            this.setState({
                showbool: true
            })
        }
    }


    render() {
        let {showbool,loginstatus,logini} = this.state;
        return (
            <div style={newContainer} >
                <style>
                    {
                        `
                        html, body, {
  height: 100%;
}
                        `
                    }
                </style>
                <div style={imgmian}>
                    <div style={{
                        "display": "flex",
                        "justify-content": "center",
                        "align-items": "center",
                        "width": "100%"
                    }}>
                        <div style={{"margin-top": "50px"}}>
                            <img src={educodernet}/>
                        </div>


                    </div>
                    {
                        showbool === true ?
                            <div style={{
                                "display": "flex",
                                "justify-content": "center",
                                "align-items": "center",
                                "width": "100%",
                            }}>
                                <div style={{"margin-top": "40px","height":"530px"}}>
                                    <LoginRegisterComponent {...this.props} {...this.state}
                                                            Setshowbool={this.Setshowbool} ></LoginRegisterComponent>

                                </div>

                            </div>
                            :
                            <div style={{
                                "display": "flex",
                                "justify-content": "center",
                                "align-items": "center",
                                "width": "100%",
                            }}>
                                <div style={{"margin-top": "40px","height":"530px"}}>
                                    <FindPasswordComponent {...this.props} {...this.state}
                                                           Setshowbool={this.Setshowbool}></FindPasswordComponent>

                                </div>
                            </div>

                    }
                    <div style={{"height":"180px",
                        "display": "flex",
                        "justify-content": "center",
                        "align-items": "center",
                        "width": "100%",
                    }}>
                        <div className="font-14 color-grey-9 " style={{marginTop:"15px"}}><span className="font-18">©</span>&nbsp;2019&nbsp;EduCoder<span className="ml15 mr15">湘ICP备17009477号</span><a href="https://team.trustie.net" style={{"color":"#888"}} target="_blank">Trustie</a>&nbsp;&nbsp;&nbsp;&amp;&nbsp;&nbsp;&nbsp;IntelliDE inside.</div>
                    </div>
                </div>
            </div>
        )
    }

}

export default EducoderLogin;