feats

src/pages/user/login/index.jsx

@@ -40,27 +40,32 @@ const LoginForm = React.forwardRef((props, ref) => {
   }
 
   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>
+    <div className={styles['login-form-wapper']}>
+      <div className={styles.main}>
+        <div className={styles['login-wedget']}>
+          <h3>欢迎来到新联宝</h3>
+          <img src="http://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/login-wedget.png" alt="" />
+        </div>
+        <div className={styles['login-form']}>
+          <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>
 
-          <Button
-            loading={loading}
-            htmlType="submit"
-            className={styles['login-form-button']}
-          >登录</Button>
-        </Form>
+            <Button
+              loading={loading}
+              htmlType="submit"
+              className={styles['login-form-button']}
+            >登录</Button>
+          </Form>
+        </div>
       </div>
     </div>
   )

src/pages/user/login/style.less

@@ -1,86 +1,118 @@
 @import '~antd/es/style/themes/default.less';
 
-.main {
-  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);
-    font-size: 24px;
-    vertical-align: middle;
-    cursor: pointer;
-    transition: color 0.3s;
+.login-form-wapper {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  top: -32px;
+  background: url(http://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/login-background.png) no-repeat;
+  background-size: 100% 100%;
 
-    &:hover {
-      color: @primary-color;
+  .main {
+    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 80px;
+    display: flex;
+    @media screen and (max-width: @screen-sm) {
+      width: 95%;
     }
-  }
-
-  .other {
-    margin-top: 24px;
-    line-height: 22px;
-    text-align: left;
 
-    .register {
-      float: right;
+    & > div {
+      flex: none;
+      width: 50%;
+      box-sizing: border-box;
     }
-  }
 
-  .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;
-    margin-top: 50px;
-  }
+    .login-wedget {
+      text-align: center;
+
+      h3 {
+        color: #f8f8f8;
+        font-size: 24px;
+        line-height: 52px;
+      }
 
-  :global {
-    .ant-form {
-      width: 260px;
-      margin-left: 60px;
+      img {
+        width: 300px;
+        display: block;
+        margin: 0 auto;
+      }
     }
 
-    .ant-form-item {
-      border-bottom: 2px solid #fff;
+    .login-form {
+      background: url('@/assets/login/light.png') no-repeat;
+      background-size: auto 100%;
+      padding-top: 30px;
     }
 
-    .ant-form-item-label > label {
-      color: #fff;
+    .icon {
+      margin-left: 16px;
+      color: rgba(0, 0, 0, 0.2);
+      font-size: 24px;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: color 0.3s;
+
+      &:hover {
+        color: @primary-color;
+      }
     }
 
-    .ant-input {
-      color: #fff;
-      border: none;
-      background: transparent;
-      outline: none;
+    .other {
+      margin-top: 24px;
+      line-height: 22px;
+      text-align: left;
 
-      &:focus {
-        box-shadow: none;
+      .register {
+        float: right;
       }
     }
 
-    .antd-pro-login-submit {
+    .login-form-button {
       width: 100%;
-      margin-top: 24px;
+      font-size: 18px;
+      line-height: 48px;
+      height: 48px !important;
+      color: #fff !important;
+      background: #1548B6 !important;
+      border-radius: 48px;
+      border: none !important;
+      margin-top: 50px;
+    }
+
+    :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;
+      }
     }
   }
 }