From f2ed96e999335809e9439055164951fc74476637 Mon Sep 17 00:00:00 2001 From: liliwei <378214138@qq.com> Date: Fri, 18 Jan 2019 22:37:04 +0800 Subject: [PATCH 1/2] feat register page --- .eslintrc.js | 2 +- .umirc.js | 2 +- src/component/user/Sign/index.less | 59 ++++++++ src/component/user/Sign/index.tsx | 23 ++++ src/pages/user/register/form.tsx | 214 +++++++++++++++++++++++++++++ src/pages/user/register/index.tsx | 20 +++ 6 files changed, 318 insertions(+), 2 deletions(-) create mode 100644 src/component/user/Sign/index.less create mode 100644 src/component/user/Sign/index.tsx create mode 100644 src/pages/user/register/form.tsx create mode 100644 src/pages/user/register/index.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 2b5c539..4151321 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -205,7 +205,7 @@ module.exports = { 'no-underscore-dangle': 0, // 允许任意使用下划线 'one-var': [1, 'never'], // 定义变量一行一个 'padded-blocks': [0, 'never'], // 块代码上下不能留空行 - semi: 2, // 校验分号 + semi: 0, // 校验分号 'semi-spacing': 2, // 分号后面留空 'keyword-spacing': 2, // 关键词后面加空格 'space-before-blocks': 2, // 块级代码加空格 diff --git a/.umirc.js b/.umirc.js index f2d8952..043e156 100644 --- a/.umirc.js +++ b/.umirc.js @@ -23,7 +23,7 @@ export default { history: 'hash', cssLoaderOptions: {}, alias: { - component: path.resolve(__dirname, './src/component'), + component: path.resolve(__dirname, './src/component') }, chainWebpack(config, { webpack }) { // config.plugin('analyzer').use( diff --git a/src/component/user/Sign/index.less b/src/component/user/Sign/index.less new file mode 100644 index 0000000..202d966 --- /dev/null +++ b/src/component/user/Sign/index.less @@ -0,0 +1,59 @@ +.sign-main { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: calc(100% - 42px); + box-sizing: border-box; + + :global { + .sign-container{ + background-color: #ffffff; + width: 444px; + margin: 0px auto; + + .sign-header { + margin: 30px 0px 30px 0px; + p{ + margin: 20px auto 0px auto; + font-size: 20px; + font-family: "Adobe Heiti Std R"; + font-weight: normal; + color: rgba(24, 38, 42, 1); + line-height: 26px; + } + } + + .sign-foot { + background:rgba(246,246,246,1); + padding: 38px 0px 40px 0px; + color: #18262A; + a { + color: #40AEA8 + } + } + + form { + ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ + color: #FF40AEA8; + font-weight: bold; + } + :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: #FF40AEA8; + opacity: 1; + font-weight: bold; + } + ::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: #FF40AEA8; + opacity: 1; + font-weight: bold; + } + :-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: #FF40AEA8; + font-weight: bold; + } + } + } + } +} diff --git a/src/component/user/Sign/index.tsx b/src/component/user/Sign/index.tsx new file mode 100644 index 0000000..66fdeb0 --- /dev/null +++ b/src/component/user/Sign/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import style from './index.less' +import Logo from 'assets/images/login/logo.png' + +export default class Index extends React.Component { + render() { + const { header, children, footer } = this.props; + return ( +
+
+
+ +

{header}

+
+ {children} +
+ {footer} +
+
+
+ ) + } +} diff --git a/src/pages/user/register/form.tsx b/src/pages/user/register/form.tsx new file mode 100644 index 0000000..22e5235 --- /dev/null +++ b/src/pages/user/register/form.tsx @@ -0,0 +1,214 @@ +import React from 'react' +import {Input, InputAdornment, IconButton, Button, FormControl, Select, MenuItem, InputLabel} from '@material-ui/core' +import { withStyles } from '@material-ui/core/styles' +import {Visibility, VisibilityOff} from '@material-ui/icons' + +export interface Props { + +} + +interface State { + showPassword: boolean; + showEnterPassword: boolean; + params: object; + sendCode: boolean; +} + +const StyledSelect = withStyles({ + icon: { + display: 'none' + } +})(Select); + +const styles = theme => ({ + form: { + padding: '0px 50px 50px 50px' + }, + formControl: { + minWidth: 120, + width: '100%', + }, + formSelectControl: { + width: 'calc(50% - 6px)' + }, + formLeftSelectControl: { + marginRight: 6 + }, + formRightSelectControl: { + marginLeft: 6 + }, + input: { + height: 60, + marginTop: '0px !important', + icon: { + fontSize: 40 + } + }, + button: { + minWidth: 115, + textAlign: 'right', + color: '#FF40AEA8' + }, + submitButton: { + marginTop: 50, + borderRadius: 0, + color: '#FFFFFF', + width: '100%', + backgroundColor: '#40AEA8', + fontSize: 20 + } +}) +class RegisterForm extends React.Component { + + constructor(props: Props) { + super(props) + this.state = { + showPassword: false, + showEnterPassword: false, + sendCode: false, + params: { + exp: '', + role: '' + } + } + } + + handleSubmit = (e) => { + e.preventDefault(); + console.log(this.state.params) + } + + sendCode = () => { + this.setState({ + sendCode: true + }) + } + + handleClickShowPassword(name: string) { + this.setState({ + [name]: !this.state[name] + }) + } + + inputChange = (e) => { + const {name, value} = e.target + this.setState({ + params: Object.assign({}, this.state.params, {[name]: value}) + }) + } + + render() { + const { classes } = this.props; + const { showPassword, showEnterPassword, sendCode, params } = this.state + const { role, exp } = params + return ( +
+
+ + + + + {`${sendCode ? '重新': ''}获取验证码`} + } + /> + + + + + {showPassword ? : } + + + } + /> + + + + + {showEnterPassword ? : } + + + } + /> + + + + + + {role ? null: 选择角色} + + 产品经理 + 设计师 + 前端工程师 + 移动端端工程师 + 小程序 + + + + {exp ? null: 工作经验} + + 0-3年 + 3-5年 + 5-9年 + 10年以上 + + + +
+
+ ) + } +} + + +export default withStyles(styles)(RegisterForm) diff --git a/src/pages/user/register/index.tsx b/src/pages/user/register/index.tsx new file mode 100644 index 0000000..5816c4f --- /dev/null +++ b/src/pages/user/register/index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import Sign from 'component/user/Sign' +import RegisterForm from './form' + +export default class Index extends React.Component { + render() { + const { classes } = this.props; + const header = '欢迎加入CodeRiver' + const footer = ( + 已有账号？登录 + ) + return ( + + + + ) + } +} From dac7dd20fc3a9420b62cc946838d28bf7bb4e763 Mon Sep 17 00:00:00 2001 From: liang xiaobeibei <290352095@qq.com> Date: Sun, 20 Jan 2019 11:46:36 +0800 Subject: [PATCH 2/2] =?UTF-8?q?ts=E7=B1=BB=E5=9E=8B=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/common/displaFlex.less | 209 ++++++++++++++++++++++++++ src/pages/user/register/form.tsx | 119 ++++++++------- src/pages/user/register/index.tsx | 12 +- 3 files changed, 284 insertions(+), 56 deletions(-) create mode 100755 src/assets/css/common/displaFlex.less diff --git a/src/assets/css/common/displaFlex.less b/src/assets/css/common/displaFlex.less new file mode 100755 index 0000000..4fbc7da --- /dev/null +++ b/src/assets/css/common/displaFlex.less @@ -0,0 +1,209 @@ +@charset "UTF-8"; + +.displayFlex{ + display: flex; + display:-webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; +} + +.flex-direction-row{ + -webkit-box-orient:horizontal; + -webkit-box-direction:normal; + -moz-box-orient:horizontal; + -moz-box-direction:normal; + flex-direction:row; + -webkit-flex-direction:row; +} +.flex-direction-column{ + -webkit-box-orient:vertical; + -webkit-box-direction:normal; + -moz-box-orient:vertical; + -moz-box-direction:normal; + flex-direction:column; + -webkit-flex-direction:column; +} +.flex-justify-content{ + -webkit-justify-content:center; + justify-content:center; + -moz-box-pack:center; + -webkit-box-pack:center; + box-pack:center; +} +.flex-justify-right{ + -webkit-justify-content: flex-end; + justify-content:flex-end; + -moz-box-pack:end; + -webkit-box-pack:end; + box-pack:end; +} +.flex-justify-between{ + -webkit-justify-content: space-between; + justify-content:space-between; + -moz-box-pack:justify; + -webkit-box-pack:justify; + box-pack:space-between; +} +.flex-align-items { + align-items: center; + -webkit-align-items:center; + box-align:center; + -moz-box-align:center; + -webkit-box-align:center; + +} +.flex-align-end { + align-items: end; + -webkit-align-items: flex-end; + -moz-box-align:end; + -webkit-box-align:end; + +} +.flex-wrap{ + -webkit-flex-wrap:wrap; + -webkit-box-lines:multiple; + -moz-flex-wrap:wrap; + flex-wrap:wrap; +} +.flex-1{ + -moz-box-flex: 1.0; /*Firefox*/ + -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/ + box-flex: 1.0; + flex:1; +} +.flex-justify-align{ + display: flex; + display:-webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + -webkit-justify-content:center; + justify-content:center; + -moz-box-pack:center; + -webkit-box-pack:center; + box-pack:center; + align-items:center; + -webkit-align-items:center; + box-align:center; + -moz-box-align:center; + -webkit-box-align:center; +} +.justify-align{ + -webkit-justify-content:center; + justify-content:center; + -moz-box-pack:center; + -webkit-box-pack:center; + box-pack:center; + align-items:center; + -webkit-align-items:center; + box-align:center; + -moz-box-align:center; + -webkit-box-align:center; +} +.flex-justify{ + display: flex; + display:-webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + -webkit-justify-content:center; + justify-content:center; + -moz-box-pack:center; + -webkit-box-pack:center; + box-pack:center; +} +.border_bottom (@color){ + &:before { + position: absolute; + bottom: 0; + left: 0; + content: ''; + width: 100%; + height: 1px; + border-bottom: 1px solid @color; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +.border_top (@color){ + &:before { + position: absolute; + top: -1px; + left: 0; + content: ''; + width: 100%; + height: 1px; + border-top: 1px solid @color; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +.border_right(@color){ + &:before { + position: absolute; + top: 0; + right: -1px; + left: 0; + content: ''; + height: 100%; + width: 1px; + border-right: 1px solid @color; + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); + } +} +.border_left(@color){ + &:before { + position: absolute; + top: 0; + left: -1px; + right: 0; + content: ''; + height: 100%; + width: 1px; + border-lef: 1px solid @color; + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); + } +} +.duohang(@number) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: @number; + overflow: hidden; +} +//单行 +.danhang { + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap +} +.textareaPLaceholder(@color){ + + textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */ + color:@color; + } + textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color:@color; + } + textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ + color:@color; + } + textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ + color:@color; + } + +} + + + + + + + + + + + + diff --git a/src/pages/user/register/form.tsx b/src/pages/user/register/form.tsx index 22e5235..781e239 100644 --- a/src/pages/user/register/form.tsx +++ b/src/pages/user/register/form.tsx @@ -1,53 +1,67 @@ -import React from 'react' -import {Input, InputAdornment, IconButton, Button, FormControl, Select, MenuItem, InputLabel} from '@material-ui/core' -import { withStyles } from '@material-ui/core/styles' -import {Visibility, VisibilityOff} from '@material-ui/icons' +import React from 'react'; +import { + Input, + InputAdornment, + IconButton, + Button, + FormControl, + Select, + MenuItem, + InputLabel, + StyleRulesCallback, +} from '@material-ui/core'; +import { StyleRules, withStyles } from '@material-ui/core/styles'; +import { Visibility, VisibilityOff } from '@material-ui/icons'; export interface Props { - + classes: { [key: string]: string }; } interface State { showPassword: boolean; showEnterPassword: boolean; - params: object; + params: { + [key: string]: any; + }; sendCode: boolean; + [key: string]: any; } const StyledSelect = withStyles({ icon: { - display: 'none' - } + display: 'none', + }, })(Select); const styles = theme => ({ form: { - padding: '0px 50px 50px 50px' + padding: '0px 50px 50px 50px', }, formControl: { minWidth: 120, width: '100%', }, formSelectControl: { - width: 'calc(50% - 6px)' + width: 'calc(50% - 6px)', }, formLeftSelectControl: { - marginRight: 6 + marginRight: 6, }, formRightSelectControl: { - marginLeft: 6 + marginLeft: 6, }, input: { height: 60, marginTop: '0px !important', icon: { - fontSize: 40 - } + fontSize: 40, + }, }, button: { minWidth: 115, - textAlign: 'right', - color: '#FF40AEA8' + TextAlign: 'right', + // textAlign: 'right', + color: '#FF40AEA8', }, submitButton: { marginTop: 50, @@ -55,52 +69,52 @@ const styles = theme => ({ color: '#FFFFFF', width: '100%', backgroundColor: '#40AEA8', - fontSize: 20 - } -}) + fontSize: 20, + }, +}); class RegisterForm extends React.Component { - constructor(props: Props) { - super(props) + super(props); this.state = { showPassword: false, showEnterPassword: false, sendCode: false, params: { exp: '', - role: '' - } - } + role: '', + }, + }; } - handleSubmit = (e) => { + handleSubmit = e => { e.preventDefault(); - console.log(this.state.params) - } + console.log(this.state.params); + }; sendCode = () => { this.setState({ - sendCode: true - }) - } + sendCode: true, + }); + }; handleClickShowPassword(name: string) { + // eslint:disable // this.setState({ - [name]: !this.state[name] - }) + [name]: !this.state[name], + }); } - inputChange = (e) => { - const {name, value} = e.target + inputChange = e => { + const { name, value } = e.target; this.setState({ - params: Object.assign({}, this.state.params, {[name]: value}) - }) - } + params: Object.assign({}, this.state.params, { [name]: value }), + }); + }; render() { const { classes } = this.props; - const { showPassword, showEnterPassword, sendCode, params } = this.state - const { role, exp } = params + const { showPassword, showEnterPassword, sendCode, params } = this.state; + const { role, exp } = params; return (
@@ -119,10 +133,9 @@ class RegisterForm extends React.Component { placeholder="输入6位验证码" onChange={this.inputChange} endAdornment={ - + } /> @@ -135,9 +148,7 @@ class RegisterForm extends React.Component { onChange={this.inputChange} endAdornment={ - + {showPassword ? : } @@ -171,7 +182,7 @@ class RegisterForm extends React.Component { /> - {role ? null: 选择角色} + {role ? null : 选择角色} { 小程序 - - {exp ? null: 工作经验} + + {exp ? null : 工作经验} {
- ) + ); } } +export default withStyles(styles)(RegisterForm); -export default withStyles(styles)(RegisterForm) +// tslint:disable //——忽略该行以下所有代码出现的错误提示 +// tslint:enable //——当前ts文件重新启用tslint +// tslint:disable-line——忽略当前行代码出现的错误提示 +// tslint:disable-next-line——忽略下一行代码出现的错误提示 diff --git a/src/pages/user/register/index.tsx b/src/pages/user/register/index.tsx index 5816c4f..78bdb43 100644 --- a/src/pages/user/register/index.tsx +++ b/src/pages/user/register/index.tsx @@ -1,20 +1,22 @@ import React from 'react'; -import Sign from 'component/user/Sign' -import RegisterForm from './form' +import Sign from 'component/user/Sign'; +import RegisterForm, { Props } from './form'; + +type State = any export default class Index extends React.Component { render() { const { classes } = this.props; - const header = '欢迎加入CodeRiver' + const header = '欢迎加入CodeRiver'; const footer = ( 已有账号？登录 - ) + ); return ( - ) + ); } }