Commit 3b54ad83 authored by 前端-许佳敏's avatar 前端-许佳敏

feat:register

parent 34f8af75
registry = "http://10.0.0.21:8081/repository/npm-group/" registry = "http://10.0.0.21:8081/repository/node-group/"
\ No newline at end of file \ No newline at end of file
{
"global": {
"hi": 1
}
}
\ No newline at end of file
.link {
color: #6B778C;
font-size: 14px;
cursor: pointer;
}
\ No newline at end of file
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'link': string;
}
export const cssExports: CssExports;
export default cssExports;
import React from 'react'
import styles from './index.less'
export interface TextLinkProps {
url: string,
}
const TextLink:React.FC = (props) => {
return (
<span className={styles.link}>
{props.children}
</span>
)
}
export default TextLink
\ No newline at end of file
...@@ -2,20 +2,20 @@ import React from 'react'; ...@@ -2,20 +2,20 @@ import React from 'react';
import styles from './styles/UserLayouts.less' import styles from './styles/UserLayouts.less'
import UserHeader from './components/UserHeader'; import UserHeader from './components/UserHeader';
import BaseFooter from './components/BaseFooter'; import BaseFooter from './components/BaseFooter';
import { Row } from 'antd';
/** /**
* 登录、注册等用户界面布局 * 登录、注册等用户界面布局
* @author xjm * @author xjm
*/ */
const UserLayouts:React.FC = (props) => { const UserLayouts:React.FC = (props) => {
console.log(props)
return ( return (
<div className={styles.lingxiBusinessUserLayout}> <div className={styles.lingxiBusinessUserLayout}>
<UserHeader/> <UserHeader/>
<div className={styles.lingxiBusinessUserBg}> <div className={styles.lingxiBusinessUserBg}>
{ props.children } { props.children }
<BaseFooter/>
</div> </div>
<BaseFooter/>
</div> </div>
) )
} }
......
import React from 'react' import React from 'react'
import styles from '../styles/UserLayouts.less' import styles from '../styles/UserLayouts.less'
import cx from 'classnames'
const BaseFooter: React.FC = (props) => { const BaseFooter: React.FC = (props) => {
return ( return (
<footer className={styles.lingxiBusinessUserFooter}>Copy Right©广州市数商云网络科技有限公司 粤ICP备13044797号-5</footer> <footer className={cx(styles.lingxiBusinessUserFooter, styles.fixed)}>Copy Right©广州市数商云网络科技有限公司 粤ICP备13044797号-5</footer>
) )
} }
......
...@@ -9,6 +9,9 @@ ...@@ -9,6 +9,9 @@
.@{prefix}-user-bg { .@{prefix}-user-bg {
width: 100%; width: 100%;
min-height: @layout-min-content-height; min-height: @layout-min-content-height;
display: flex;
align-items: center;
justify-content: center;
background: url('../../../mockStatic/login_bg.jpg') no-repeat center; background: url('../../../mockStatic/login_bg.jpg') no-repeat center;
background-size: cover; background-size: cover;
} }
...@@ -32,6 +35,7 @@ ...@@ -32,6 +35,7 @@
&.fixed { &.fixed {
padding: 0; padding: 0;
position: fixed; position: fixed;
width: 100%;
bottom: 48px; bottom: 48px;
left: 0; left: 0;
} }
......
import React from 'react'
import { Form, Row, Col, Input, Button } from 'antd'
import styles from '../index.less'
import { ExclamationCircleFilled } from '@ant-design/icons'
const LoginWrap: React.FC = () => {
const isValied = true
const finish = (value) => {
console.log(value)
}
return (
<>
<p>{isValied ? '当前手机号码:xxxxxxxxx' : '请使用平台账号登录'}</p>
{
isValied ?
<>
<Row style={{marginTop: 62, marginBottom: 74}}>
<Col>
<Input/>
</Col>
<Col>
<Button type='default'>获取验证码</Button>
</Col>
</Row>
<Button type='primary' size='large' htmlType='submit' block>点击登录</Button>
</>
:
<Form
onFinish={finish}
>
<Form.Item
name='username'
rules={
[
{
required: true,
message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入正确的用户名</span></>
}
]
}
>
<Input type='text' placeholder='用户名/手机号' size='large'/>
</Form.Item>
<Form.Item
name='password'
rules={
[
{
required: true,
message: <><ExclamationCircleFilled style={{marginRight: 6}}/><span>请输入正确的密码</span></>
}
]
}
>
<Input type='password' placeholder='请输入密码' size='large'/>
</Form.Item>
<Form.Item
className={styles.loginVerBtn}
>
<Button ghost type='primary' block size='large'>点击进行验证</Button>
</Form.Item>
<Form.Item>
<Button type='primary' size='large' htmlType='submit' block>点击登录</Button>
</Form.Item>
</Form>
}
</>
)
}
export default LoginWrap
\ No newline at end of file
...@@ -17,8 +17,14 @@ ...@@ -17,8 +17,14 @@
margin-bottom: 32px; margin-bottom: 32px;
} }
} }
.loginDesc {
background: #9f9;
}
.thirdLogin { .thirdLogin {
height: 64px; height: 64px;
background: #FAFBFC; background: #FAFBFC;
margin-top: 90px;
}
.loginVerBtn {
background: #EBF7F2;
} }
\ No newline at end of file
...@@ -8,8 +8,10 @@ interface CssExports { ...@@ -8,8 +8,10 @@ interface CssExports {
'login-ctl': string; 'login-ctl': string;
'login-item': string; 'login-item': string;
'loginCtl': string; 'loginCtl': string;
'loginDesc': string;
'loginItem': string; 'loginItem': string;
'loginMain': string; 'loginMain': string;
'loginVerBtn': string;
'thirdLogin': string; 'thirdLogin': string;
} }
export const cssExports: CssExports; export const cssExports: CssExports;
......
...@@ -2,18 +2,28 @@ import React from 'react'; ...@@ -2,18 +2,28 @@ import React from 'react';
import globalStyles from '@/global.less'; import globalStyles from '@/global.less';
import styles from './index.less' import styles from './index.less'
import cx from 'classnames'; import cx from 'classnames';
import { Row, Col } from 'antd'; import { Row, Col, Form, Input, Button, Space } from 'antd';
import TextLink from '@/components/TextLink';
import { ExclamationCircleFilled } from '@ant-design/icons';
import LoginWrap from './components/loginWrap';
const User: React.FC = () => { const User: React.FC = () => {
return ( return (
<Row className={cx(globalStyles.lingxiBusinessContent1024)}> <Row className={cx(globalStyles.lingxiBusinessContent1024)}>
<Col className={styles.loginItem}> <Col className={cx(styles.loginItem, styles.loginDesc)}>
left left
</Col> </Col>
<Col className={cx(styles.loginItem, styles.loginCtl)}> <Col className={cx(styles.loginItem, styles.loginCtl)}>
<div className={styles.loginMain}> <div className={styles.loginMain}>
<h2>欢迎您</h2> <h2>欢迎您</h2>
<p>请使用平台账号登录</p> <LoginWrap/>
<Row justify='end' style={{marginTop: 16}}>
<Space size={32}>
<TextLink>免费注册</TextLink>
<TextLink>忘记密码</TextLink>
</Space>
</Row>
</div> </div>
<Row className={styles.thirdLogin} align='middle' justify='center'> <Row className={styles.thirdLogin} align='middle' justify='center'>
<Col>其他方式登录</Col> <Col>其他方式登录</Col>
......
import React from 'react'
import { Input, Form } from 'antd'
import { FormPage } from 'god'
const UserRegistry = () => {
return (
<div>
<FormPage
renderFormLists={
[
{
type: 'Input',
name: 'demo',
size: 'large',
},
{
type: 'Input',
name: 'fuck',
size: 'large'
},
{
type: 'Input',
name: 'a',
size: 'large'
},
]
}
>
</FormPage>
</div>
)
}
export default UserRegistry
\ No newline at end of file
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
// layout // layout
@header-nav-height: 64px; @header-nav-height: 64px;
@layout-min-content-height: calc(100vh - @header-nav-height); @layout-min-content-height: 100vh;
/** /**
* colors * colors
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment