登录页

master
Zhang Chaojie 2023-04-20 17:46:22 +08:00
parent 1e7d3fcf75
commit 8469eebd3f
7 changed files with 317 additions and 242 deletions

View File

@ -1,9 +1,10 @@
import { memo } from 'react';
import type { FC } from 'react';
import { memo } from "react";
import type { FC } from "react";
import classes from './App.module.css';
import resets from './components/_resets.module.css';
import { Yidian } from './components/Yidian/Yidian';
import classes from "./App.module.css";
import resets from "./components/_resets.module.css";
import { Yidian } from "./components/Yidian/Yidian";
import { Login } from "./screen/login/login";
interface Props {
className?: string;
@ -11,6 +12,7 @@ interface Props {
export const App: FC<Props> = memo(function App(props = {}) {
return (
<div className={`${resets.storybrainResets} ${classes.root}`}>
<Login></Login>
<Yidian />
</div>
);

View File

@ -257,208 +257,6 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
},
]}
></Menu>
{/* <_OnSelected
onClick={() => setCurrentPage("dashboard")}
swap={{
notebookOne: (
<HomeTwo
className={classes.homeTwo}
classes={{ union: classes.union }}
swap={{
union: (
<div className={classes.union}>
<UnionIcon className={classes.icon} />
</div>
),
union2: <UnionIcon2 className={classes.icon2} />,
}}
/>
),
}}
text={{
normal: <div className={classes.normal}></div>,
}}
/>
<_OffSelected
onClick={() => setCurrentPage("dashboard")}
text={{
normal: <div className={classes.normal2}></div>,
}}
/>
<_OffSelected
onClick={() => setCurrentPage("project")}
text={{
normal: <div className={classes.normal2}></div>,
}}
/>
<_OffRegular
onClick={() => setCurrentPage("bigscreen")}
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal3}></div>,
}}
/> */}
{/* <_OnRegular
swap={{
notebookOne: (
<MessageSecurity
className={classes.messageSecurity}
swap={{
union: <UnionIcon3 className={classes.icon3} />,
union2: <UnionIcon4 className={classes.icon4} />,
union3: <UnionIcon5 className={classes.icon5} />,
union4: <UnionIcon6 className={classes.icon6} />,
}}
/>
),
}}
text={{
normal: <div className={classes.normal4}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal5}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal6}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal7}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal8}></div>,
}}
/> */}
{/* <_OnRegular
onClick={() => setCurrentPage("customer")}
swap={{
notebookOne: (
<ViewList
className={classes.viewList}
classes={{ union: classes.union2 }}
swap={{
union: (
<div className={classes.union2}>
<UnionIcon7 className={classes.icon7} />
</div>
),
}}
/>
),
}}
hide={{
keyboard_arrow_down: true,
}}
text={{
normal: <div className={classes.normal9}></div>,
}}
/> */}
{/* <_OnRegular
hide={{
keyboard_arrow_down: true,
}}
text={{
normal: <div className={classes.normal10}></div>,
}}
/> */}
{/* <_OnRegular
swap={{
notebookOne: (
<Me
className={classes.me}
classes={{ union: classes.union3 }}
swap={{
union: <UnionIcon8 className={classes.icon8} />,
union2: (
<div className={classes.union3}>
<UnionIcon9 className={classes.icon9} />
</div>
),
}}
/>
),
}}
text={{
normal: <div className={classes.normal11}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal12}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal13}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal14}></div>,
}}
/>
<_OnRegular
swap={{
notebookOne: (
<SettingTwo
className={classes.settingTwo}
swap={{
union: <UnionIcon10 className={classes.icon10} />,
union2: <UnionIcon11 className={classes.icon11} />,
}}
/>
),
}}
text={{
normal: <div className={classes.normal15}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal16}></div>,
}}
/>
<_OffRegular
hide={{
point: true,
}}
text={{
normal: <div className={classes.normal17}></div>,
}}
/> */}
</div>
</div>
<div className={classes.right18}>
@ -1090,7 +888,7 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
"全部(1340)",
"A级项目(600)",
"B级项目(200)",
"C级项目(640)",
"C级项目(540)",
].map((item) => {
return {
label: <span>{item}</span>,
@ -1411,6 +1209,193 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
</div>
</div>
</div>
<div className={classes.frame427319548}>
<div className={classes.frame916}>
<div className={classes.frame9127}>
<div className={classes.unnamed139}>a123</div>
<div className={classes.frame9117}>
<div className={classes.text21}></div>
<Right
className={classes.right6}
swap={{
vectorStroke: (
<VectorStrokeIcon6 className={classes.icon43} />
),
}}
/>
</div>
</div>
<div className={classes.frame51}>
<div className={classes.frame32}>
<div className={classes.ellipse6}>
<Ellipse6Icon className={classes.icon71} />
</div>
<div className={classes.ellipse11}>
<Ellipse11Icon className={classes.icon72} />
</div>
<div className={classes.ellipse10}>
<Ellipse10Icon className={classes.icon73} />
</div>
<div className={classes.ellipse9}>
<Ellipse9Icon className={classes.icon74} />
</div>
<div className={classes.ellipse8}>
<Ellipse8Icon className={classes.icon75} />
</div>
<div className={classes.ellipse7}>
<Ellipse7Icon className={classes.icon76} />
</div>
<div className={classes.frame33}>
<div className={classes.a}>A</div>
<div className={classes._45}>45%</div>
</div>
</div>
<div className={classes.frame892}>
<div className={classes.frame889}>
<div className={classes.frame888}>
<_Property1
text={{
label: (
<div className={classes.label}>
</div>
),
}}
/>
<div className={classes.line43}></div>
<div className={classes._64}>64.0%</div>
</div>
<div className={classes._120}>120</div>
</div>
<div className={classes.frame890}>
<div className={classes.frame8882}>
<_Property1
classes={{ square: classes.square }}
text={{
label: (
<div className={classes.label2}></div>
),
}}
/>
<div className={classes.line432}></div>
<div className={classes._162}>16.0%</div>
</div>
<div className={classes._30}>30</div>
</div>
<div className={classes.frame891}>
<div className={classes.frame8883}>
<_Property1
classes={{ square: classes.square2 }}
text={{
label: (
<div className={classes.label3}></div>
),
}}
/>
<div className={classes.line433}></div>
<div className={classes._642}>6.4%</div>
</div>
<div className={classes._122}>12</div>
</div>
<div className={classes.frame8922}>
<div className={classes.frame8884}>
<_Property1
classes={{ square: classes.square3 }}
text={{
label: (
<div className={classes.label4}></div>
),
}}
/>
<div className={classes.line434}></div>
<div className={classes._643}>6.4%</div>
</div>
<div className={classes._123}>12</div>
</div>
<div className={classes.frame893}>
<div className={classes.frame8885}>
<_Property1
classes={{ square: classes.square4 }}
text={{
label: (
<div className={classes.label5}></div>
),
}}
/>
<div className={classes.line435}></div>
<div className={classes._644}>6.4%</div>
</div>
<div className={classes._124}>12</div>
</div>
</div>
</div>
</div>
<div className={classes.frame4273194832}>
<div className={classes.frame9128}>
<div className={classes.unnamed140}></div>
<div className={classes.frame9118}>
<div className={classes.text22}></div>
<Right
className={classes.right7}
swap={{
vectorStroke: (
<VectorStrokeIcon7 className={classes.icon44} />
),
}}
/>
</div>
</div>
<div className={classes.frame883}>
<Frame876_Property1Variant2
className={classes.frame912}
text={{
Unnamed: (
<div className={classes.unnamed30}>
2022
</div>
),
_100: <div className={classes._100}>24</div>,
}}
/>
<Frame876_Property1Variant2
className={classes.frame913}
classes={{ rectangle678: classes.rectangle678 }}
text={{
Unnamed: (
<div className={classes.unnamed31}>
2022
</div>
),
_100: <div className={classes._1002}>24</div>,
}}
/>
<Frame876_Property1Variant2
className={classes.frame914}
classes={{ rectangle678: classes.rectangle6782 }}
text={{
Unnamed: (
<div className={classes.unnamed32}>
2022
</div>
),
_100: <div className={classes._1003}>24</div>,
}}
/>
<Frame876_Property1Variant2
className={classes.frame915}
classes={{ rectangle678: classes.rectangle6783 }}
text={{
Unnamed: (
<div className={classes.unnamed33}>
2022
</div>
),
_100: <div className={classes._1004}>24</div>,
}}
/>
</div>
</div>
</div>
<div className={classes.frame4273194844}>
<div className={classes.frame9032}>
<div className={classes.unnamed141}></div>
@ -1900,10 +1885,6 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
<div className={classes.unnamed150}></div>
</div>
<div className={classes.searchContentBox}>
{/* <Input
className={classes.input}
placeholder="请输入您想要查找的内容"
></Input> */}
<AutoComplete
className={classes.input}
placeholder="请输入您想要查找的内容"
@ -1935,33 +1916,6 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
>
</Button>
{/* <_Property1LargeProperty2Regula
className={classes.input}
text={{
text: (
<input
className={classes.text11}
placeholder="请输入您想要查找的内容"
></input>
// <div className={classes.text11}>
// 请输入您想要查找的内容
// </div>
),
}}
/> */}
{/* <Button_PrimaryLargeRegular
text={{
text: (
<div
className={classes.text12}
onClick={() => setCurrentPage("customer")}
>
</div>
),
}}
/> */}
</div>
</div>
<div className={classes.quickEntry}>
@ -2293,9 +2247,9 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
</div>
<div className={classes.missPie}>
<div className={classes.frame91214}>
<div className={classes.unnamed154}></div>
<div className={classes.unnamed154}></div>
<div className={classes.frame91113}>
<div className={classes.text28}></div>
<div className={classes.text28}></div>
<Right
className={classes.right13}
swap={{
@ -2476,7 +2430,7 @@ export const Yidian: FC<Props> = memo(function Yidian(props = {}) {
"全部(1340)",
"优秀项目(600)",
"标杆项目(200)",
"一般项目(640)",
"一般项目(540)",
].map((item) => {
return {
label: <span>{item}</span>,

BIN
src/screen/login/bg.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

BIN
src/screen/login/e9.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -0,0 +1,22 @@
.login {
position: fixed;
top:0;
left: 0;
z-index: 99999;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url(./bg.jpeg) center center no-repeat;
background-size: cover;
}
.bg {
background: url(./bg.jpeg) center center no-repeat;
background-size: cover;
}
:where(.login) :not(span, a, ul, ol, li, p) {
display: inherit;
}

View File

@ -0,0 +1,97 @@
import { Button, Checkbox, Form, Input } from "antd";
import { FC, useState } from "react";
import clases from "./login.module.css";
import logo from "./e9.png";
import loginBox from "./login-box.png";
import bg from "./bg.jpeg";
export const Login: FC<{}> = () => {
const [isLogin, setIsLogin] = useState<boolean>(false);
const [loading, setLoading] = useState<boolean>(false);
return (
<div
className={clases.login}
style={{
display: isLogin ? "none" : "flex",
}}
>
<div
className={clases.bg}
style={{
background: `url(${loginBox})`,
width: "406px",
height: "544px",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
alignItems: "center",
}}
>
<img
style={{
width: "40%",
}}
src={logo}
></img>
<Form
style={{
display: "block",
// display: "flex",
// flexDirection: "column",
// alignItems: "start",
// justifyContent: "center",
// width: "90%",
}}
name="basic"
labelCol={{ span: 5 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
// onFinish={onFinish}
// onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="账号"
name="username"
// rules={[{ required: true, message: "请输入账号" }]}
>
<Input placeholder="输入账号" />
</Form.Item>
<Form.Item
label="密码"
name="password"
// rules={[{ required: true, message: "Please input your password!" }]}
>
<Input.Password placeholder="输入密码" />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{ offset: 8, span: 16 }}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button
type="primary"
htmlType="submit"
onClick={() => {
setLoading(true);
setTimeout(() => {
setIsLogin(true);
}, 1500);
}}
loading={loading}
>
</Button>
</Form.Item>
</Form>
</div>
</div>
);
};