{todo.map((v: ITodo) => {
return (
diff --git a/src/views/Login/index.module.scss b/src/views/Login/index.module.scss
index b4908d6..0cf0939 100644
--- a/src/views/Login/index.module.scss
+++ b/src/views/Login/index.module.scss
@@ -1,3 +1,134 @@
-.login.page{
- background-color: red;
-}
\ No newline at end of file
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
+
+$color: #53e3a6;
+.login.page {
+ font-family: "Source Sans Pro", sans-serif;
+ color: white;
+ font-weight: 300;
+
+ ::-webkit-input-placeholder {
+ /* WebKit browsers */
+ font-family: "Source Sans Pro", sans-serif;
+ color: white;
+ font-weight: 300;
+ }
+ :-moz-placeholder {
+ /* Mozilla Firefox 4 to 18 */
+ font-family: "Source Sans Pro", sans-serif;
+ color: white;
+ opacity: 1;
+ font-weight: 300;
+ }
+ ::-moz-placeholder {
+ /* Mozilla Firefox 19+ */
+ font-family: "Source Sans Pro", sans-serif;
+ color: white;
+ opacity: 1;
+ font-weight: 300;
+ }
+ :-ms-input-placeholder {
+ /* Internet Explorer 10+ */
+ font-family: "Source Sans Pro", sans-serif;
+ color: white;
+ font-weight: 300;
+ }
+ .wrapper {
+ background: #50a3a2;
+ background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+ background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+ background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+ background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
+
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ height: 400px;
+ margin-top: -200px;
+ overflow: hidden;
+
+ &.form-success {
+ form {
+ opacity: 0;
+ pointer-events: none;
+ }
+ .container {
+ h1 {
+ transform: translateY(85px);
+ }
+ }
+ }
+ }
+
+ .container {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 80px 0;
+ height: 400px;
+ text-align: center;
+
+ h1 {
+ font-size: 40px;
+ transition-duration: 1s;
+ transition-timing-function: ease-in-put;
+ font-weight: 200;
+ }
+ }
+
+ form {
+ padding: 20px 0;
+ position: relative;
+ z-index: 2;
+ transition: opacity 0.5s linear;
+
+ input {
+ display: block;
+ appearance: none;
+ outline: 0;
+ border: 1px solid rgba(255, 255, 255, 0.4);
+ background-color: rgba(255, 255, 255, 0.2);
+ width: 250px;
+
+ border-radius: 3px;
+ padding: 10px 15px;
+ margin: 0 auto 10px auto;
+ display: block;
+ text-align: center;
+ font-size: 18px;
+
+ color: white;
+
+ transition-duration: 0.25s;
+ font-weight: 300;
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ }
+
+ &:focus {
+ background-color: white;
+ width: 300px;
+
+ color: $color;
+ }
+ }
+
+ button {
+ appearance: none;
+ outline: 0;
+ background-color: white;
+ border: 0;
+ padding: 10px 15px;
+ color: $color;
+ border-radius: 3px;
+ width: 250px;
+ cursor: pointer;
+ font-size: 18px;
+ transition-duration: 0.25s;
+
+ &:hover {
+ background-color: rgb(245, 247, 249);
+ }
+ }
+ }
+}
diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
index 3f3eb93..8bbb9b9 100644
--- a/src/views/Login/index.tsx
+++ b/src/views/Login/index.tsx
@@ -2,16 +2,36 @@ import React from "react"
import cn from "classnames"
import style from "./index.module.scss"
import { useLocation, Route, Switch } from "react-router-dom"
+import { useState } from "react"
+import Bubbles from "@/components/Loading/Bubbles"
-function Test() {
- return
test
-}
+export default function Login(props: any) {
+ const [isSuccess, setIsSuccess] = useState(false)
+ const [WelcomeText, setWelcomeText] = useState("青铜时代2021")
+
+ function clickLogin(event: any) {
+ event.preventDefault()
+ setIsSuccess(true)
+ setTimeout(() => {
+ setIsSuccess(false)
+ }, 2000)
+ }
-export default function (props: any) {
return (
-
Login
-
22
+
+
+
{WelcomeText}
+
+
+
+
)
}