login页面初始化

Kylin93CN · Jun 13, 2020 · 8355daf · 8355daf
1 parent a068fb5
commit 8355daf
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 11 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>麒麟后台管理页面</title>
 </head>
 <body>
   <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,14 +1,8 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import 'antd/dist/antd.css';
-import Main from './Layout/Main';
+import Routes from './routes';
 
 export default function App() {
   return (
-    <Router>
-      <Switch>
-        <Route path="/" component={Main} />
-      </Switch>
-    </Router>
+    <Routes />
   );
 }
diff --git a/src/Layout/Main.jsx b/src/Layout/Main.jsx
@@ -7,7 +7,7 @@ import {
   VideoCameraOutlined,
   UploadOutlined,
 } from '@ant-design/icons';
-import styles from './main.less';
+import styles from './Main.less';
 
 const { Header, Sider, Content } = Layout;
 

diff --git a/src/Layout/main.less → src/Layout/Main.less b/src/Layout/main.less → src/Layout/Main.less
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Form, Input, Button } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { Helmet } from 'react-helmet';
+import styles from './Login.less';
+
+const LoginForm = () => {
+  const onFinish = values => {
+    console.log('Received values of form: ', values);
+  };
+
+  return (
+    <div className={styles.loginContainer}>
+      <Helmet>
+        <title>登录 - 麒麟后台</title>
+      </Helmet>
+      <Form
+        className={styles.loginForm}
+        onFinish={onFinish}
+      >
+        <Form.Item
+          name="username"
+          rules={[{ required: true, message: 'Please input your Username!' }]}
+        >
+          <Input
+            prefix={<UserOutlined />}
+            placeholder="Username"
+          />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          rules={[{ required: true, message: 'Please input your Password!' }]}
+        >
+          <Input
+            prefix={<LockOutlined />}
+            type="password"
+            placeholder="Password"
+          />
+        </Form.Item>
+        <Form.Item className={styles.loginFormButton}>
+          <Button
+            type="primary"
+            htmlType="submit"
+          >
+            登录
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+
+export default LoginForm;
diff --git a/src/Pages/Login.less b/src/Pages/Login.less
@@ -0,0 +1,22 @@
+.login-container {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  background-color: lightcyan;
+  justify-content: center;
+  align-items: center;
+  background-image: url(../images/login-bg.jpeg) no-repeat;
+  .login-form {
+    width: 200px;
+    height: 200px;
+    .login-form-button {
+      :global {
+        .ant-form-item-control-input-content {
+          display: flex;
+          justify-content: center;
+        }
+      }
+
+    }
+  }
+}
diff --git a/src/images/login-bg.jpeg b/src/images/login-bg.jpeg
diff --git a/src/routes.js b/src/routes.js
@@ -1 +1,19 @@
-// import { BrowserRouter, Route } from 'react-router-dom';
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import 'antd/dist/antd.css';
+import Main from './Layout/Main';
+import Login from './Pages/Login';
+
+const Routes = () => {
+  console.log('');
+  return (
+    <Router>
+      <Switch>
+        <Route path="/" exact component={Main} />
+        <Route path="/login" component={Login} />
+      </Switch>
+    </Router>
+  );
+};
+
+export default Routes;