import React, {Component} from 'react';
import {Icon, Row, Col} from 'antd';
import './index.css'
import avatar from '../images/avatar.jpg';

class AccountConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {};

    }


    render() {
        return (
            <div>
                <Row style={{marginTop: 100}}>
                    <Col span={12} offset={6} className={'login-wrapper'}>
                        <div className={'mask'} style={{backgroundImage: `url(${avatar})`}}>
                            <div className={'mask-black'}>
                                <div className={'tip'}>
                                    <Icon style={{fontSize: 30, display: 'block'}} type="camera"/>
                                    <span style={{paddingTop: 5, display: 'block'}} className={'tip-span'}>修改我的头像</span>
                                </div>
                            </div>
                        </div>
                        <Row>
                            <Col span={20} offset={4} className={'message-wrapper'}>
                                <div className={'message-top'}>
                                    <div className={'nickname'}>
                                        xy
                                    </div>
                                    <div className="back-to-login" onClick={() => {
                                        this.props.history.push({
                                            pathname: '/login',
                                        })
                                    }}>
                                        login <Icon type="right" style={{color: '#848fa6'}}/>
                                    </div>
                                </div>

                                <Row className={'message'}>
                                    <Col span={5}>
                                        <span className={'message-title'}>tel</span>
                                    </Col>
                                    <Col span={19}>
                                        <span className={'message-content'}>16655168985</span>
                                    </Col>

                                </Row>

                                <Row className={'message'}>
                                    <Col span={5}>
                                        <span className={'message-title'}>email</span>
                                    </Col>
                                    <Col span={19}>
                                        <span className={'message-content'}>contact@szu.im</span>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default AccountConfig;