feat: 登录页面框架

This commit is contained in:
landaiqing
2024-04-15 02:01:30 +08:00
parent b4a9ad82b9
commit 73a74ccc7c
24 changed files with 2010 additions and 179 deletions

View File

@@ -1,5 +1,5 @@
import { useNavigate } from 'react-router-dom'
import './index.less'
export default () => {
const navigate = useNavigate()
const goBack = () => {
@@ -7,8 +7,149 @@ export default () => {
}
return (
<>
<h1>About Page</h1>
<button onClick={goBack}></button>
<body translate='no'>
<div className='container container-star'>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-1'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
<div className='star-2'></div>
</div>
<div className='container container-bird'>
<div className='bird bird-anim'>
<div className='bird-container'>
<div className='wing wing-left'>
<div className='wing-left-top'></div>
</div>
<div className='wing wing-right'>
<div className='wing-right-top'></div>
</div>
</div>
</div>
<div className='bird bird-anim'>
<div className='bird-container'>
<div className='wing wing-left'>
<div className='wing-left-top'></div>
</div>
<div className='wing wing-right'>
<div className='wing-right-top'></div>
</div>
</div>
</div>
<div className='bird bird-anim'>
<div className='bird-container'>
<div className='wing wing-left'>
<div className='wing-left-top'></div>
</div>
<div className='wing wing-right'>
<div className='wing-right-top'></div>
</div>
</div>
</div>
<div className='bird bird-anim'>
<div className='bird-container'>
<div className='wing wing-left'>
<div className='wing-left-top'></div>
</div>
<div className='wing wing-right'>
<div className='wing-right-top'></div>
</div>
</div>
</div>
<div className='bird bird-anim'>
<div className='bird-container'>
<div className='wing wing-left'>
<div className='wing-left-top'></div>
</div>
<div className='wing wing-right'>
<div className='wing-right-top'></div>
</div>
</div>
</div>
<div className='bird bird-anim'>
<div className='bird-container'>
<div className='wing wing-left'>
<div className='wing-left-top'></div>
</div>
<div className='wing wing-right'>
<div className='wing-right-top'></div>
</div>
</div>
</div>
<div className='container-title'>
<div className='title'>
<div className='number'>4</div>
<div className='moon'>
<div className='face'>
<div className='mouth'></div>
<div className='eyes'>
<div className='eye-left'></div>
<div className='eye-right'></div>
</div>
</div>
</div>
<div className='number'>4</div>
</div>
<div className='subtitle'>Oops. Looks like you took a wrong turn.</div>
<button onClick={goBack}>Go back</button>
</div>
</div>
</body>
</>
)
}

1393
src/views/404/index.less Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,10 +1,11 @@
import {
AlipayOutlined,
GithubOutlined,
GitlabOutlined,
LockOutlined,
MobileOutlined,
TaobaoOutlined,
QqOutlined,
UserOutlined,
WeiboOutlined,
WechatOutlined,
} from '@ant-design/icons'
import {
LoginFormPage,
@@ -12,12 +13,14 @@ import {
ProFormCheckbox,
ProFormText,
} from '@ant-design/pro-components'
import { Divider, Space, Tabs, message } from 'antd'
import type { CSSProperties } from 'react'
import { Divider, Space, Tabs, message, Button } from 'antd'
import { CSSProperties } from 'react'
import { useState } from 'react'
// import { history } from 'umi';
type LoginType = 'phone' | 'account'
import logo from '@/assets/icons/schisandra.svg'
import background from '@/assets/images/background.png'
import { observer } from 'mobx-react'
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'account' | 'phone'
const iconStyles: CSSProperties = {
color: 'rgba(0, 0, 0, 0.2)',
@@ -26,16 +29,17 @@ const iconStyles: CSSProperties = {
cursor: 'pointer',
}
export default () => {
export default observer(() => {
// const store = useStore('user')
const items = [
{ label: '账户密码登录', key: 'account' },
{ label: '手机号登录', key: 'phone' },
]
const [loginType, setLoginType] = useState<LoginType>('phone')
const [loginType, setLoginType] = useState<LoginType>('account')
const onSubmit = async (formData: unknown) => {
const onSubmit = async (formData: object) => {
console.log(formData)
// history.push('/');
}
return (
<div
@@ -46,33 +50,32 @@ export default () => {
}}>
<LoginFormPage
onFinish={onSubmit}
backgroundImageUrl='https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png'
logo='https://github.githubassets.com/images/modules/logos_page/Octocat.png'
title='Github'
subTitle='全球最大的代码托管平台'
// activityConfig={{
// style: {
// boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
// color: '#fff',
// borderRadius: 8,
// backgroundColor: '#1677FF',
// },
// title: '活动标题,可配置图片',
// subTitle: '活动介绍说明文字',
// action: (
// <Button
// size="large"
// style={{
// borderRadius: 20,
// background: '#fff',
// color: '#1677FF',
// width: 120,
// }}
// >
// 去看看
// </Button>
// ),
// }}
backgroundImageUrl={background}
logo={logo}
title='五味子云相册'
subTitle='随时随地分享你的美好瞬间'
activityConfig={{
style: {
boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
color: '#fff',
borderRadius: 8,
backgroundColor: '#1677FF',
},
title: '活动标题,可配置图片',
subTitle: '活动介绍说明文字',
action: (
<Button
size='large'
style={{
borderRadius: 20,
background: '#fff',
color: '#1677FF',
width: 120,
}}>
</Button>
),
}}
actions={
<div
style={{
@@ -98,7 +101,7 @@ export default () => {
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
<QqOutlined style={{ ...iconStyles, color: '#1677FF' }} />
</div>
<div
style={{
@@ -111,7 +114,7 @@ export default () => {
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
<WechatOutlined style={{ ...iconStyles, color: '#08a327' }} />
</div>
<div
style={{
@@ -124,7 +127,20 @@ export default () => {
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<WeiboOutlined style={{ ...iconStyles, color: '#333333' }} />
<GithubOutlined style={{ ...iconStyles, color: '#333333' }} />
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
height: 40,
width: 40,
border: '1px solid #D4D8DD',
borderRadius: '50%',
}}>
<GitlabOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
</div>
</Space>
</div>
@@ -224,4 +240,4 @@ export default () => {
</LoginFormPage>
</div>
)
}
})

View File

@@ -1,14 +0,0 @@
import { useNavigate } from 'react-router-dom'
export default () => {
const navigate = useNavigate()
const goBack = () => {
navigate(-1)
}
return (
<>
<h1>About Page</h1>
<button onClick={goBack}></button>
</>
)
}

View File

@@ -1,16 +0,0 @@
import { Link } from 'react-router-dom'
import { Button, Card, Image } from 'antd'
import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
import wallhaven from '@/assets/images/wallhaven.jpg'
export default () => {
return (
<>
<h1>Home Page</h1>
<Link to='/about'></Link>
<Button></Button>
<Card></Card>
<SvgIcon name='schisandra' size={200} />
<Image src={wallhaven}></Image>
</>
)
}