yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-09-10 23:53:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

登录页面央视重构

Browse Source
This commit is contained in:
禺狨 2023-03-03 14:37:17 +08:00
parent afaafeba31
commit f922218389
3 changed files with 49 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/login/index.module.less
View File

@ -28,18 +28,36 @@
.left-box { .left-box {
width: 440px; width: 440px;
height: 100%; height: 100%;
box-sizing: border-box;
padding: 80px 10px 80px 30px;
.icon { .icon {
width: 400px;
height: 400px;
} }
} }
.right-box { .right-box {
width: 440px; width: 440px;
height: 100%; height: 100%;
.captcha { box-sizing: border-box;
padding: 50px 30px;
display: flex;
flex-direction: column;
.title {
width: 120px; width: 120px;
height: 48px; height: auto;
margin-left: 10px; font-size: 30px;
cursor: pointer; font-weight: 600;
color: #333333;
line-height: 30px;
border-bottom: 4px solid #ff4d4f;
box-sizing: border-box;
padding-bottom: 10px;
}
.captcha {
width: 125px;
height: 54px;
margin-left: 15px;
border: none;
cursor: pointer; cursor: pointer;
} }
} }

29
src/pages/login/index.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import styles from "./index.module.less"; import styles from "./index.module.less";
import { Typography, Spin, Input, Button, message } from "antd"; import { Spin, Input, Button, message } from "antd";
import { login, system } from "../../api/index"; import { login, system } from "../../api/index";
import { setToken } from "../../utils/index"; import { setToken } from "../../utils/index";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
@ -91,33 +91,31 @@ export const Login: React.FC = () => {
<img className={styles["icon"]} src={icon} alt="" /> <img className={styles["icon"]} src={icon} alt="" />
</div> </div>
<div className={styles["right-box"]}> <div className={styles["right-box"]}>
<div className="d-flex mr-24"> <div className={styles["title"]}>后台登录</div>
<Typography.Title>登录后台</Typography.Title> <div className="d-flex mt-50">
</div>
<div className="d-flex mb-24">
<Input <Input
value={email} value={email}
onChange={(e) => { onChange={(e) => {
setEmail(e.target.value); setEmail(e.target.value);
}} }}
style={{ width: 300 }} style={{ width: 400, height: 54 }}
placeholder="请输入账号" placeholder="请输入账号"
/> />
</div> </div>
<div className="d-flex mb-24"> <div className="d-flex mt-50">
<Input.Password <Input.Password
value={password} value={password}
onChange={(e) => { onChange={(e) => {
setPassword(e.target.value); setPassword(e.target.value);
}} }}
style={{ width: 300 }} style={{ width: 400, height: 54 }}
placeholder="请输入密码" placeholder="请输入密码"
/> />
</div> </div>
<div className="d-flex mb-24"> <div className="d-flex mt-50">
<Input <Input
value={captcha_val} value={captcha_val}
style={{ width: 160 }} style={{ width: 260, height: 54 }}
placeholder="请输入验证码" placeholder="请输入验证码"
onChange={(e) => { onChange={(e) => {
setCaptcha_val(e.target.value); setCaptcha_val(e.target.value);
@ -130,9 +128,14 @@ export const Login: React.FC = () => {
alt="" alt=""
/> />
</div> </div>
<div className="d-flex"> <div className="d-flex mt-50">
<Button type="primary" danger onClick={loginSubmit}> <Button
登录 style={{ width: 400, height: 54 }}
type="primary"
danger
onClick={loginSubmit}
>
立即登录
</Button> </Button>
</div> </div>
</div> </div>

8
src/utils/index.less
View File

@ -46,6 +46,14 @@
margin-right: 24px; margin-right: 24px;
} }
.mt-50 {
margin-top: 50px;
}
.mb-50 {
margin-bottom: 50px;
}
.float-left { .float-left {
width: 100%; width: 100%;
height: auto; height: auto;