loginContent.jsx 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import React from 'react';
  2. import { Icon, Tabs,Spin } from 'antd';
  3. import LoginForm from './loginForm.jsx';
  4. import loginqq from '../../../image/login_qq.png';
  5. import loginweixin from '../../../image/login_weixin.png';
  6. import loginweibo from '../../../image/login_weibo.png';
  7. import loginmore from '../../../image/login_more.png';
  8. import './login.less';
  9. const TabPane = Tabs.TabPane;
  10. const LoginContent = React.createClass({
  11. getInitialState() {
  12. return {
  13. theKey: "0",
  14. loading:false
  15. };
  16. },
  17. tabChange(key) {
  18. this.setState({
  19. theKey: key
  20. })
  21. },
  22. spinChange(e) {
  23. this.setState({
  24. loading: e
  25. });
  26. },
  27. render() {
  28. return (
  29. <Spin spinning={this.state.loading} className='spin-box'>
  30. <div className="content clearfix">
  31. <div className="login-left">
  32. <img src="" alt="" />
  33. </div>
  34. <div className="login-right">
  35. <Tabs defaultActiveKey="0" onChange={this.tabChange} className="login-from">
  36. <TabPane tab="个人登录" key="0">
  37. <LoginForm loginProp={this.state.theKey} spinState={this.spinChange}/>
  38. </TabPane>
  39. <TabPane tab="公司登录" key="1" className="tabtwo">
  40. <LoginForm loginProp={this.state.theKey} spinState={this.spinChange}/>
  41. </TabPane>
  42. </Tabs>
  43. <div className="login-other clearfix">
  44. <ul className="clearfix">
  45. <li style={{ 'display': 'none' }}><img src={loginqq} alt="" /><p>QQ</p></li>
  46. <li style={{ 'display': 'none' }}><img src={loginweixin} alt="" /><p>微信</p></li>
  47. <li style={{ 'display': 'none' }}><img src={loginweibo} alt="" /><p>微博</p></li>
  48. <li className="join"><img src={loginmore} alt="" /><p><a href="./signIn.html">立即注册</a></p></li>
  49. </ul>
  50. </div>
  51. </div>
  52. </div>
  53. </Spin>
  54. )
  55. }
  56. });
  57. export default LoginContent;