style: login

src/pages/login/components/login-form.tsx

@@ -155,7 +155,7 @@ const LoginForm = () => {
       <div>
         <Form
           form={form}
-          style={{ width: '400px', margin: '0 auto', paddingTop: '10%' }}
+          style={{ width: '400px', margin: '0 auto' }}
           onFinish={handleLogin}
         >
           {renderWelCome(intl)}

src/pages/login/components/password-form.tsx

@@ -46,7 +46,7 @@ const PasswordForm: React.FC = () => {
       </div>
       <Form
         form={form}
-        style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
+        style={{ width: '400px', margin: '0 auto' }}
         onFinish={handleSubmit}
       >
         <h2 className="justify-center m-b-20 flex-column flex-center">

src/pages/login/components/styles.less

@@ -0,0 +1,16 @@
+:local(.login-form-wrapper) {
+  margin: 0 auto;
+  border-radius: 8px;
+  width: max-content;
+  height: max-content;
+  padding: 32px;
+  background-color: rgba(255, 255, 255, 50%);
+
+  :global(.field-wrapper) {
+    background-color: transparent !important;
+  }
+}
+
+:local(.box) {
+  padding-top: 10%;
+}

src/pages/login/index.tsx

@@ -1,9 +1,11 @@
 import { userAtom } from '@/atoms/user';
+import Footer from '@/components/footer';
 import { history } from '@umijs/max';
 import { useAtom } from 'jotai';
 import { useEffect } from 'react';
 import LoginForm from './components/login-form';
 import PasswordForm from './components/password-form';
+import styles from './components/styles.less';
 
 const Login = () => {
   const [userInfo, setUserInfo] = useAtom(userAtom);
@@ -21,9 +23,15 @@ const Login = () => {
   }, [userInfo]);
 
   return (
-    <div className="login-wrapper">
-      {userInfo?.require_password_change ? <PasswordForm /> : <LoginForm />}
-    </div>
+    <>
+      <div className="login-wrapper"></div>
+      <div className={styles.box}>
+        <div className={styles['login-form-wrapper']}>
+          {userInfo?.require_password_change ? <PasswordForm /> : <LoginForm />}
+        </div>
+        <Footer />
+      </div>
+    </>
   );
 };
 

src/pages/users/index.tsx

@@ -24,7 +24,8 @@ import AddModal from './components/add-modal';
 import { FormData, ListItem } from './config/types';
 const { Column } = Table;
 
-const Models: React.FC = () => {
+const Users: React.FC = () => {
+  console.log('users======');
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
@@ -328,4 +329,4 @@ const Models: React.FC = () => {
   );
 };
 
-export default Models;
+export default Users;