feat: 登录页面框架
This commit is contained in:
@@ -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
1393
src/views/404/index.less
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
Reference in New Issue
Block a user