Skip to content

J
jinfa-platform
Commit 57866842 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix

parent 1c8b68d7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 394 additions and 51 deletions
.gitignore
View file @ 57866842
...@@ -20,3 +20,5 @@ ...@@ -20,3 +20,5 @@
# project # project
# mockStatic # mockStatic
/.idea
package.json
View file @ 57866842
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
"@ant-design/icons": "^4.2.1", "@ant-design/icons": "^4.2.1",
"@umijs/preset-react": "1.x", "@umijs/preset-react": "1.x",
"@umijs/test": "^3.2.0", "@umijs/test": "^3.2.0",
"god": "0.0.12", "god": "0.0.24",
"lint-staged": "^10.0.7", "lint-staged": "^10.0.7",
"mobx": "^5.15.4", "mobx": "^5.15.4",
"mobx-react": "^6.2.2", "mobx-react": "^6.2.2",
......
src/app.tsx
View file @ 57866842
...@@ -3,6 +3,7 @@ import { history, RequestConfig } from 'umi'; ...@@ -3,6 +3,7 @@ import { history, RequestConfig } from 'umi';
import React from 'react' import React from 'react'
import MobxProvider from './store' import MobxProvider from './store'
import 'mobx-react-lite/batchingForReactDom' import 'mobx-react-lite/batchingForReactDom'
import './global.less'
let extraRoutes: never[] = [] let extraRoutes: never[] = []
...@@ -12,13 +13,13 @@ let extraRoutes: never[] = [] ...@@ -12,13 +13,13 @@ let extraRoutes: never[] = []
* @date 2020-05-20 * @date 2020-05-20
* @export * @export
* @param {IRoutes} { routes } 预先配置好的路由 * @param {IRoutes} { routes } 预先配置好的路由
* @example * @example
* routes.unshift({ * routes.unshift({
* path: '/foo', * path: '/foo',
* exact: true, * exact: true,
* component: require('/extraRoutes/foo').default, * component: require('/extraRoutes/foo').default,
* }); * });
* *
*/ */
// export function patchRoutes({ routes }: IRoutes) { // export function patchRoutes({ routes }: IRoutes) {
// routes.concat(extraRoutes as []) // routes.concat(extraRoutes as [])
...@@ -40,7 +41,7 @@ let extraRoutes: never[] = [] ...@@ -40,7 +41,7 @@ let extraRoutes: never[] = []
// // 做权限校验 // // 做权限校验
// fetch('/auth').then((res: any) => { // fetch('/auth').then((res: any) => {
// if (res.isLogin) { // if (res.isLogin) {
// oldRender() // oldRender()
// } else { // } else {
// history.push('/login') // history.push('/login')
// } // }
...@@ -95,4 +96,4 @@ export function rootContainer(container) { ...@@ -95,4 +96,4 @@ export function rootContainer(container) {
// ], // ],
// requestInterceptors: [], // requestInterceptors: [],
// responseInterceptors: [] // responseInterceptors: []
// } // }
\ No newline at end of file
src/global.less
View file @ 57866842
@import '~@/styles/theme.less'; @import '~@/styles/theme.less';
// antd default // antd default
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: #6B778C; color: #6B778C;
} }
...@@ -14,4 +14,87 @@ h1, h2, h3, h4, h5, h6 { ...@@ -14,4 +14,87 @@ h1, h2, h3, h4, h5, h6 {
width: 1024px; width: 1024px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
\ No newline at end of file
// 公共的title伪类竖线
.commonPanelTitle {
padding-left: 8px;
position: relative;
&::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
margin-top: -.42667rem;
width: 2px;
height: .85333rem;
background-color: #00B37A;
box-shadow: 0 0.14933rem 0.256rem 0 rgba(97,144,232,.2);
border-radius: 1px;
}
}
// 公共间隔
.mr-10{
margin-right: 10px;
}
.mr-20{
margin-right: 20px;
}
.mr-30{
margin-right: 30px;
}
.mr-50{
margin-right: 50px;
}
.mr-100{
margin-right: 100px;
}
.ml-10{
margin-left: 10px;
}
.ml-20{
margin-left: 20px;
}
.ml-30{
margin-left: 30px;
}
.ml-50{
margin-left: 50px;
}
.ml-100{
margin-left: 100px;
}
.mt-10{
margin-top: 10px;
}
.mt-20{
margin-top: 20px;
}
.mt-30{
margin-top: 30px;
}
.mt-50{
margin-top: 50px;
}
.mt-100{
margin-top: 100px;
}
.mb-10{
margin-bottom: 10px;
}
.mb-20{
margin-bottom: 20px;
}
.mb-30{
margin-bottom: 30px;
}
.mb-50{
margin-bottom: 50px;
}
.mb-100{
margin-bottom: 100px;
}
src/global.less.d.ts
View file @ 57866842
// This file is automatically generated. // This file is automatically generated.
// Please do not change this file! // Please do not change this file!
interface CssExports { interface CssExports {
'commonPanelTitle': string;
'lingxi-business-content1024': string; 'lingxi-business-content1024': string;
'lingxi-business-margin_content': string; 'lingxi-business-margin_content': string;
'lingxiBusinessContent1024': string; 'lingxiBusinessContent1024': string;
'lingxiBusinessMarginContent': string; 'lingxiBusinessMarginContent': string;
'mb-10': string;
'mb-100': string;
'mb-20': string;
'mb-30': string;
'mb-50': string;
'mb10': string;
'mb100': string;
'mb20': string;
'mb30': string;
'mb50': string;
'ml-10': string;
'ml-100': string;
'ml-20': string;
'ml-30': string;
'ml-50': string;
'ml10': string;
'ml100': string;
'ml20': string;
'ml30': string;
'ml50': string;
'mr-10': string;
'mr-100': string;
'mr-20': string;
'mr-30': string;
'mr-50': string;
'mr10': string;
'mr100': string;
'mr20': string;
'mr30': string;
'mr50': string;
'mt-10': string;
'mt-100': string;
'mt-20': string;
'mt-30': string;
'mt-50': string;
'mt10': string;
'mt100': string;
'mt20': string;
'mt30': string;
'mt50': string;
} }
export const cssExports: CssExports; export const cssExports: CssExports;
export default cssExports; export default cssExports;
src/pages/user/components/LoginWrap.tsx
View file @ 57866842
import React from 'react' import React, { useState } from 'react'
import { Form, Row, Col, Input, Button } from 'antd' import { Form, Row, Col, Input, Button } from 'antd'
import {
UserOutlined,
LockOutlined,
ExclamationCircleFilled
} from '@ant-design/icons';
import styles from '../index.less' import styles from '../index.less'
import { ExclamationCircleFilled } from '@ant-design/icons'
const LoginWrap: React.FC = () => { const LoginWrap: React.FC = () => {
const isValied = true const [validFrame, setValidFrame] = useState(false)
const [validButton, setValidButton] = useState(false)
const finish = (value) => { const finish = (value) => {
console.log(value) console.log(value)
} }
return ( return (
<> <>
<p>{isValied ? '当前手机号码：xxxxxxxxx' : '请使用平台账号登录'}</p> <p>{validFrame ? '当前手机号码：xxxxxxxxx' : '请使用平台账号登录'}</p>
{ {
isValied ? validFrame ?
<> <>
<Row style={{marginTop: 62, marginBottom: 74}}> <Row gutter={[0,80]}>
<Col> <Col span={16}>
<Input/> <Input size='large'/>
</Col>
<Col offset={1} span={7}>
<Button type='default' size='large'>获取验证码</Button>
</Col> </Col>
<Col> </Row>
<Button type='default'>获取验证码</Button> <Row>
<Col span={24}>
<Button type='primary' size='large' htmlType='submit' block>点击登录</Button>
</Col> </Col>
</Row> </Row>
<Button type='primary' size='large' htmlType='submit' block>点击登录</Button>
</> </>
: :
<Form <Form
...@@ -39,7 +49,7 @@ const LoginWrap: React.FC = () => { ...@@ -39,7 +49,7 @@ const LoginWrap: React.FC = () => {
] ]
} }
> >
<Input type='text' placeholder='用户名/手机号' size='large'/> <Input prefix={<UserOutlined />} placeholder='用户名/手机号' size='large'/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name='password' name='password'
...@@ -52,23 +62,24 @@ const LoginWrap: React.FC = () => { ...@@ -52,23 +62,24 @@ const LoginWrap: React.FC = () => {
] ]
} }
> >
<Input type='password' placeholder='请输入密码' size='large'/> <Input.Password prefix={<LockOutlined />} placeholder='请输入密码' size='large'/>
</Form.Item>
<Form.Item
className={styles.loginVerBtn}
>
<Button ghost type='primary' block size='large'>点击进行验证</Button>
</Form.Item> </Form.Item>
{ validButton && (<Form.Item
className={styles.loginVerBtn}
>
<Button ghost type='primary' block size='large'>点击进行验证</Button>
</Form.Item>)
}
<Form.Item> <Form.Item>
<Button type='primary' size='large' htmlType='submit' block>点击登录</Button> <Button type='primary' size='large' htmlType='submit' block>点击登录</Button>
</Form.Item> </Form.Item>
</Form> </Form>
} }
</> </>
) )
} }
export default LoginWrap export default LoginWrap
\ No newline at end of file
src/pages/user/components/ScanLoginWrap.tsx 0 → 100644
View file @ 57866842
import React, { useState } from 'react'
import { Form, Row, Col, Input, Button } from 'antd'
import {
UserOutlined,
LockOutlined,
ExclamationCircleFilled
} from '@ant-design/icons';
import styles from '../index.less'
const ScanLoginWrap: React.FC = () => {
return (
<div className={styles.scanLoginWrap}>
<h2>扫码登录</h2>
</div>
)
}
export default ScanLoginWrap
src/pages/user/index.less
View file @ 57866842
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
padding: 141px 0 102px; padding: 141px 0 102px;
} }
.loginMain { .loginMain {
position: relative;
background: @white; background: @white;
padding: 64px 56px 0; padding: 64px 56px 0;
color: #6B778C; color: #6B778C;
...@@ -19,9 +20,39 @@ ...@@ -19,9 +20,39 @@
font-size: 32px; font-size: 32px;
margin-bottom: 32px; margin-bottom: 32px;
} }
& .qrcodeLogin{
position: absolute;
right: 8px;
top: 8px;
width: 32px;
height: 32px;
background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
background-size: cover;
&:hover{
background: url("../../../mockStatic/qr_code2.png") center center no-repeat;
}
}
& .scanTips{
display: flex;
}
} }
.loginDesc { .loginDesc {
background: #9f9; //background: #9f9;
background: url("../../../mockStatic/image_ad.png") center center no-repeat;
background-size: cover;
& .adBox{
color: @white;
text-align: center;
& h2{
color: @white;
margin-top: 20px;
height: 80px;
line-height: 80px;
}
& p{
padding: 10px 60px;
}
}
} }
.thirdLogin { .thirdLogin {
height: 64px; height: 64px;
...@@ -32,6 +63,16 @@ ...@@ -32,6 +63,16 @@
background: #EBF7F2; background: #EBF7F2;
} }
.scanLoginWrap{
text-align: center;
&>h2{
color: #6B778C;
}
}
// register // register
.register { .register {
width: 100%; width: 100%;
...@@ -45,8 +86,9 @@ ...@@ -45,8 +86,9 @@
.registerBox { .registerBox {
width: 100%; width: 100%;
height: 700px; //height: 700px;
background: #fff; background: #fff;
padding-bottom: 40px;
} }
.stepWrap { .stepWrap {
...@@ -56,10 +98,11 @@ ...@@ -56,10 +98,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.form-box { .formBoxStep1 {
width: 320px; width: 320px;
margin: 40px auto 0; margin: 40px auto 0;
} }
.formBefore { .formBefore {
width: 54px; width: 54px;
line-height: 40px; line-height: 40px;
...@@ -69,4 +112,76 @@ ...@@ -69,4 +112,76 @@
color: #42526E; color: #42526E;
border: 1px solid #DFE1E6; border: 1px solid #DFE1E6;
border-right: 0; border-right: 0;
} }
\ No newline at end of file .formBoxStep2{
width: 704px;
margin: 0px auto 0;
& h3{
margin-top: 48px;
}
}
.continueButton{
display: block;
width: 320px;
height: 40px;
margin: 8px auto;
}
.identityRadio{
display: flex;
flex-direction: column;
text-align: center;
& label{
width: 320px;
height: 48px;
margin: 12px auto;
vertical-align: middle;
line-height: 48px;
}
}
.businessRadio{
display: flex;
flex-wrap: wrap;
width: 320px;
margin: 0 auto;
text-align: center;
& label{
width: 148px;
height: 32px;
line-height: 32px;
margin: 8px 0;
}
& label:nth-child(odd) {
margin-right: 24px;
}
}
.formBoxStep3{
width: 704px;
margin: 0px auto 0;
text-align: center;
& .description{
margin-bottom: 40px;
& p{
height:20px;
font-size:14px;
color:rgba(66,82,110,1);
line-height:20px;
}
}
&.guid{
height:22px;
font-size:14px;
color:rgba(107,119,140,1);
line-height:22px;
}
& h2{
font-size:24px;
color:rgba(23,43,77,1);
margin: 24px 0;
}
& img{
display: block;
margin: 0 auto;
}
}
src/pages/user/index.less.d.ts
View file @ 57866842
// This file is automatically generated. // This file is automatically generated.
// Please do not change this file! // Please do not change this file!
interface CssExports { interface CssExports {
'form-box': string; 'adBox': string;
'businessRadio': string;
'commonPanelTitle': string;
'continueButton': string;
'description': string;
'formBefore': string; 'formBefore': string;
'formBox': string; 'formBoxStep1': string;
'formBoxStep2': string;
'formBoxStep3': string;
'guid': string;
'identityRadio': string;
'lingxi-business-content1024': string; 'lingxi-business-content1024': string;
'lingxi-business-margin_content': string; 'lingxi-business-margin_content': string;
'lingxiBusinessContent1024': string; 'lingxiBusinessContent1024': string;
...@@ -16,8 +24,51 @@ interface CssExports { ...@@ -16,8 +24,51 @@ interface CssExports {
'loginMain': string; 'loginMain': string;
'loginVerBtn': string; 'loginVerBtn': string;
'loginWrap': string; 'loginWrap': string;
'mb-10': string;
'mb-100': string;
'mb-20': string;
'mb-30': string;
'mb-50': string;
'mb10': string;
'mb100': string;
'mb20': string;
'mb30': string;
'mb50': string;
'ml-10': string;
'ml-100': string;
'ml-20': string;
'ml-30': string;
'ml-50': string;
'ml10': string;
'ml100': string;
'ml20': string;
'ml30': string;
'ml50': string;
'mr-10': string;
'mr-100': string;
'mr-20': string;
'mr-30': string;
'mr-50': string;
'mr10': string;
'mr100': string;
'mr20': string;
'mr30': string;
'mr50': string;
'mt-10': string;
'mt-100': string;
'mt-20': string;
'mt-30': string;
'mt-50': string;
'mt10': string;
'mt100': string;
'mt20': string;
'mt30': string;
'mt50': string;
'qrcodeLogin': string;
'register': string; 'register': string;
'registerBox': string; 'registerBox': string;
'scanLoginWrap': string;
'scanTips': string;
'stepWrap': string; 'stepWrap': string;
'thirdLogin': string; 'thirdLogin': string;
} }
......
src/pages/user/index.tsx
View file @ 57866842
import React from 'react'; import React, { useState } 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, Form, Input, Button, Space } from 'antd'; import { Row, Col, Form, Input, Button, Space } from 'antd';
import TextLink from '@/components/TextLink'; import TextLink from '@/components/TextLink';
import { ExclamationCircleFilled } from '@ant-design/icons'; import {
ExclamationCircleFilled,
ScanOutlined
} from '@ant-design/icons';
import LoginWrap from './components/loginWrap'; import LoginWrap from './components/loginWrap';
import ScanLoginWrap from './components/ScanLoginWrap';
// import leftPicture from '../../../mockStatic/image_ad.png'
const User: React.FC = () => { const User: React.FC = () => {
const [isScanQrCode,setIsScanQrCode] = useState(true)
return ( return (
<Row className={cx(styles.loginWrap, globalStyles.lingxiBusinessContent1024)}> <Row className={cx(styles.loginWrap, globalStyles.lingxiBusinessContent1024)}>
<Col className={cx(styles.loginItem, styles.loginDesc)}> <Col className={cx(styles.loginItem, styles.loginDesc)}>
left <div className={styles.adBox}>
{/*<img src={leftPicture} alt="数商云"/>*/}
<h2>数商云，驱动全链数字化运营</h2>
<p>「数商云」，是一家领先的企业全链数字化运营服务 提供商。致力于通过大数据、云计算等新技术协助企业打造渠道端—营销端—数据端等全链 数字化运营体系，全面提升企业运营效益与智慧数字化商业转型。</p>
</div>
</Col> </Col>
<Col className={cx(styles.loginItem, styles.loginCtl)}> <Col className={cx(styles.loginItem, styles.loginCtl)}>
<div className={styles.loginMain}> <div className={styles.loginMain}>
<a className={styles.qrcodeLogin} />
<h2>欢迎您</h2> <h2>欢迎您</h2>
<LoginWrap/> { isScanQrCode ? (
<Row justify='end' style={{marginTop: 16}}> <>
<Space size={32}> <ScanLoginWrap/>
<TextLink>免费注册</TextLink> <div className={styles.scanTips}>
<TextLink>忘记密码</TextLink> <ScanOutlined style={{width:28,height:28}} />
</Space> <span>打开 App<br />扫一扫登录</span>
</Row> </div>
</>
) : (
<>
<ScanLoginWrap/>
<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>
...@@ -33,4 +57,4 @@ const User: React.FC = () => { ...@@ -33,4 +57,4 @@ const User: React.FC = () => {
) )
} }
export default User export default User
\ No newline at end of file
src/pages/user/register.tsx
View file @ 57866842
This diff is collapsed.
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