feats

src/pages/login/Effect.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default (props) => {
+  return (
+    <div className='login-effect-box'>
+      <div className="login-effect">
+        <div className="login-effect-arc"></div>
+        <div className="login-effect-rect"></div>
+      </div>
+    </div>
+  )
+}

src/pages/login/LoginForm.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button, Form, Input, Radio } from 'antd';
+
+export default (props) => {
+  const [form] = Form.useForm();
+
+  return (
+    <Form form={form} layout="vertical">
+      <Form.Item label="用户名" required>
+        <Input placeholder="请输入用户名" />
+      </Form.Item>
+      <Form.Item label="密 码" required>
+        <Input.Password placeholder="请输入密码" />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" size='large' style={{ width: '100%', marginTop: '24px' }}>登录</Button>
+      </Form.Item>
+    </Form>
+  )
+}

src/pages/login/index.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
+import LoginForm from './LoginForm';
+import LoginEffect from './Effect';
 import './style.less'
 
+const year = new Date().getFullYear();
+
 export default (props) => {
   return (
     <div className='login-page'>
@@ -8,15 +12,18 @@ export default (props) => {
         <div className="login-card-left">
           <div className="login-form-box">
             <div className="login-form">
-              <h3>登录系统</h3>
+              <h2>登录系统</h2>
               <div className="login-subtitle">欢迎使用云致管理系统</div>
+              <LoginForm />
             </div>
           </div>
           <div className="login-copyright">
-            @南京云致
+          南京云致 @ {year}
           </div>
         </div>
-        <div className="login-card-right"></div>
+        <div className="login-card-right">
+          <LoginEffect />
+        </div>
       </div>
     </div>
   )

src/pages/login/style.less

@@ -1,7 +1,7 @@
 
 .login-page {
   height: 100%;
-  background: rgba(0, 0, 0, 0.06);
+  background: #e6f7ff3b;
   display: grid;
   place-items: center;
 
@@ -19,14 +19,60 @@
   .login-card-left {
     background: #fff;
   }
+  .login-card-right {
+    background: rgba(0, 0, 0, .02);
+  }
 
   .login-form-box {
     height: 560px;
     display: grid;
     place-items: center;
 
-    .login-form {
-      
+    .login-subtitle {
+      font-size: .9em;
+      color: #666;
+      margin-bottom: 24px;
+    }
+  }
+
+  .login-effect-box {
+    height: 100%;
+    display: grid;
+    place-items: center;
+
+    .login-effect {
+      width: 120px;
+      height: 120px;
+      position: relative;
+    }
+
+    .login-effect-arc {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: #1890ff;
+
+      // &::after {
+      //   content: '';
+      //   position: absolute;
+      //   top: 50%;
+      //   height: 50%;
+      //   width: 100%;
+      //   background: #fff;
+      //   z-index: 2;
+      // }
+    }
+
+    .login-effect-rect {
+      width: 100%;
+      height: 50%;
+      top: 50%;
+      left: 0;
+      position: absolute;
+      border-radius:0 0 100px 100px;
+      z-index: 10;
+      background-color: #fff;
+      filter: blur(10px);
     }
   }