feats

config/defaultSettings.js

   menu: {
     locale: false,
   },
-  title: '新 联 家',
+  title: '新 联 宝',
   pwa: false,
   iconfontUrl: '',
 };

src/components/Poster/Preview.jsx

       <Row gutter={24} style={{padding: '2em'}}>
         <Col span={6}><Avatar size={78} src={avatar} /></Col>
         <Col span={10}>
-          <Title level={4}>新联家</Title>
+          <Title level={4}>新联宝</Title>
           <div>长按识别看房</div>
         </Col>
         <Col span={8}><img src={qrCode} alt="" style={qrStyle} /></Col>

src/layouts/UserLayout.jsx

           <SelectLang />
         </div> */}
         <div className={styles.content}>
-          <div className={styles.top}>
+          {/* <div className={styles.top}>
             <div className={styles.header}>
               <Link to="/">
                 <img alt="logo" className={styles.logo} src={logo} />
               </Link>
             </div>
             <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
-          </div>
+          </div> */}
           {children}
         </div>
         <GlobalFooter />

src/pages/user/login/index.jsx

-import { Alert, Icon } from 'antd';
-import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { connect } from 'dva';
 import md5 from "md5";
-import LoginComponents from './components/Login';
+import { Form, Input, Button } from 'antd'
 import styles from './style.less';
-import { defineLocale } from 'moment';
 
-const { UserName, Password, Submit } = LoginComponents;
+const buttonItemLayout = {
+  wrapperCol: { span: 14, offset: 4 },
+}
 
-@connect(({ login, loading }) => ({
-  userLogin: login,
-  submitting: loading.effects['login/login'],
-}))
-class Login extends Component {
-  loginForm = undefined;
+const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18 },
+}
 
-  handleSubmit = (err, values) => {
-    if (!err) {
-      const { dispatch } = this.props;
-      try {
-        dispatch({
-          type: 'login/login',
-          payload: { ...values, loginPassword: md5(values.loginPassword) },
-        });
-      } catch (e) {
-        console.error(e)
-      }
-    }
+const LoginForm = React.forwardRef((props, ref) => {
+  const { form, dispatch } = props;
+  const { getFieldDecorator, validateFields } = form;
 
-  };
+  const [loading, setLoading] = useState(false)
 
-  renderMessage = (content) => (
-    <Alert
-      style={{
-        marginBottom: 24,
-      }}
-      message={content}
-      type="error"
-      showIcon
-    />
-  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    validateFields((err, values) => {
+      if (!err) {
+        try {
+          setLoading(true)
+          dispatch({
+            type: 'login/login',
+            payload: { ...values, loginPassword: md5(values.loginPassword) },
+          }).then(() => {
+            setLoading(false)
+          });
+        } catch (e) {
+          console.error(e)
+          setLoading(false)
+        }
+      }
+    });
+  }
 
-  render() {
-    const { userLogin = {}, submitting } = this.props;
-    const { status } = userLogin;
-    // const { type, autoLogin } = this.state;
-    return (
-      <div className={styles.main}>
-        <LoginComponents
-          onTabChange={this.onTabChange}
-          onSubmit={this.handleSubmit}
-          onCreate={(form) => {
-            this.loginForm = form;
-          }}
-          >
-          {status === 'error' &&
-            !submitting &&
-            this.renderMessage(
-              formatMessage({
-                id: 'user-login.login.message-invalid-credentials',
-              }),
-            )}
-          <UserName
-            name="loginName"
-            placeholder={`${formatMessage({
-              id: 'user-login.login.userName',
-            })}: admin or user`}
-            rules={[
-              {
-                required: true,
-                message: formatMessage({
-                  id: 'user-login.userName.required',
-                }),
-              },
-            ]}
-          />
-          <Password
-            name="loginPassword"
-            placeholder={`${formatMessage({
-              id: 'user-login.login.password',
-            })}: ant.design`}
-            rules={[
-              {
-                required: true,
-                message: formatMessage({
-                  id: 'user-login.password.required',
-                }),
-              },
-            ]}
-            onPressEnter={(e) => {
-              e.preventDefault();
+  return (
+    <div className={styles.main}>
+      <div></div>
+      <div>
+        <Form onSubmit={handleSubmit}>
+          <Form.Item label="用户名" {...formItemLayout} colon={false}>
+            {getFieldDecorator('loginName', {
+              rules: [{ required: true, message: '请输入用户名' }]
+            })(<Input />)}          
+          </Form.Item>
+          <Form.Item label="密 码" {...formItemLayout} colon={false}>
+            {getFieldDecorator('loginPassword', {
+              rules: [{ required: true, message: '请输入密码' }]
+            })(<Input.Password visibilityToggle={false}/>)}          
+          </Form.Item>
 
-              if (this.loginForm) {
-                this.loginForm.validateFields(this.handleSubmit);
-              }
-            }}
-          />
-          <Submit loading={submitting}>
-            <FormattedMessage id="user-login.login.login" />
-          </Submit>
-        </LoginComponents>
+          <Button
+            loading={loading}
+            htmlType="submit"
+            className={styles['login-form-button']}
+          >登录</Button>
+        </Form>
       </div>
-    );
-  }
-}
+    </div>
+  )
+});
 
 export default connect(({ login, loading }) => ({
   userLogin: login,
   submitting: loading.effects['login/login'],
-}))(Login);
+}))(Form.create({})(LoginForm));

src/pages/user/login/style.less

 @import '~antd/es/style/themes/default.less';
 
 .main {
-  width: 368px;
-  margin: 0 auto;
+  width: 840px;
+  margin: 20vh auto 0;
+  background: rgba(17, 40, 81, 0.41);
+  box-shadow: 0px 8px 38px 0px rgba(4, 0, 0, 0.12);
+  border-radius: 24px;
+  box-sizing: border-box;
+  padding: 87px 0 120px;
+  display: flex;
   @media screen and (max-width: @screen-sm) {
     width: 95%;
   }
 
+  & > div {
+    flex: none;
+    width: 50%;
+  }
+
   .icon {
     margin-left: 16px;
     color: rgba(0, 0, 0, 0.2);
     }
   }
 
+  .login-form-button {
+    width: 100%;
+    font-size: 18px;
+    line-height: 48px;
+    height: 48px !important;
+    color: #fff !important;
+    background: #1548B6 !important;
+    border-radius: 48px;
+    border: none !important;
+  }
+
   :global {
+    .ant-form {
+      width: 260px;
+      margin-left: 60px;
+    }
+
+    .ant-form-item {
+      border-bottom: 2px solid #fff;
+    }
+
+    .ant-form-item-label > label {
+      color: #fff;
+    }
+
+    .ant-input {
+      color: #fff;
+      border: none;
+      background: transparent;
+      outline: none;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
     .antd-pro-login-submit {
       width: 100%;
       margin-top: 24px;

src/utils/request.js

 
   return (
     {
-      // url: 'https://xlk.njyz.tech' + apiURL,
-      url: apiURL,
+      url: 'https://xlk.njyz.tech' + apiURL,
+      // url: apiURL,
       options: {
         ...opts,
         headers: {