From 96422c22b77f1ac6df72470e0bbef094a4393c72 Mon Sep 17 00:00:00 2001 From: liuwh <hugeinfo123> Date: Mon, 06 Apr 2020 11:49:07 +0800 Subject: [PATCH] 登录页 --- src/pages/login/login.jsx | 76 +++++++++++++++++++++++--------------- 1 files changed, 46 insertions(+), 30 deletions(-) diff --git a/src/pages/login/login.jsx b/src/pages/login/login.jsx index 4a6a87b..c967383 100644 --- a/src/pages/login/login.jsx +++ b/src/pages/login/login.jsx @@ -8,6 +8,9 @@ import React, { ReactNode, ReactEventHandler, Component } from 'react'; import { Form, Icon, Input, Button, Checkbox, message } from 'antd'; import './login.scss'; + +import logo from '../../img/logo.png'; + import fetch from '../../api/request'; class NormalLoginForm extends React.Component { @@ -70,42 +73,55 @@ const { btnLoading } = this.state; return ( <div className="login-main"> - <Form onSubmit={this.handleSubmit} className="login-form"> - <Form.Item> - {getFieldDecorator('loginName', { - rules: [{ required: true, message: '请输入账号!' }], - })( - <Input - prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} - placeholder="请输入账号" - />, - )} - </Form.Item> - <Form.Item> - {getFieldDecorator('passWord', { - rules: [{ required: true, message: '请输入密码!' }], - initialValue: 'psw' - })( - <Input - prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} - type="password" - placeholder="请输入密码" - />, - )} - </Form.Item> - <Form.Item> - {/* {getFieldDecorator('remember', { + <div className="login-div"> + <div className="login-div-top"> + <img className="login-div-top-img" src={logo} /> + </div> + <div className="login-div-content"> + <div className="login-div-content-div"> + <div className="login-div-content-div-title">登录OA云平台</div> + <Form onSubmit={this.handleSubmit} className="login-form"> + <Form.Item className="login-div-content-form-flex" > + {getFieldDecorator('loginName', { + rules: [{ required: true, message: '请输入账号!' }], + })( + <Input + style={{ width: '32vh',height: '5vh',margin:'12px' }} + prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} + placeholder="请输入账号" + />, + )} + </Form.Item> + <Form.Item className="login-div-content-form-flex"> + {getFieldDecorator('passWord', { + rules: [{ required: true, message: '请输入密码!' }], + initialValue: 'psw' + })( + <Input + style={{ width: '32vh',height: '5vh',margin:'12px' }} + prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)'}} />} + type="password" + placeholder="请输入密码" + />, + )} + </Form.Item> + <Form.Item className="login-div-content-form-flex"> + {/* {getFieldDecorator('remember', { valuePropName: 'checked', initialValue: true, })(<Checkbox>记住</Checkbox>)} <a className="login-form-forgot" href=""> 忘记密码 </a> */} - <Button type="primary" htmlType="submit" className="login-form-button" loading={btnLoading}> - 登录 - </Button> - </Form.Item> - </Form> + <Button type="primary" htmlType="submit" className="login-form-button" loading={btnLoading}>登录</Button> + </Form.Item> + </Form> + + </div> + </div> + <div className="login-div-bottom">2011 10215489广州恒巨信息科技有限公司 版权所有 - 粤ICP备10215489号</div> + </div> + </div> ); } -- Gitblit v1.8.0