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/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/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<Props, State> {
+  render() {
+    const { header, children, footer } = this.props;
+    return (
+      <div className={style['sign-main']}>
+        <div className={'sign-container'}>
+          <div className={'sign-header'}>
+            <img src={Logo} />
+            <p>{header}</p>
+          </div>
+          {children}
+          <div className={'sign-foot'}>
+            {footer}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/pages/user/register/form.tsx b/src/pages/user/register/form.tsx
new file mode 100644
index 0000000..781e239
--- /dev/null
+++ b/src/pages/user/register/form.tsx
@@ -0,0 +1,231 @@
+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: {
+    [key: string]: any;
+  };
+  sendCode: boolean;
+  [key: string]: any;
+}
+
+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',
+    // textAlign: 'right',
+    color: '#FF40AEA8',
+  },
+  submitButton: {
+    marginTop: 50,
+    borderRadius: 0,
+    color: '#FFFFFF',
+    width: '100%',
+    backgroundColor: '#40AEA8',
+    fontSize: 20,
+  },
+});
+class RegisterForm extends React.Component<Props, State> {
+  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) {
+    // eslint:disable //
+    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 (
+      <div className="register">
+        <form onSubmit={this.handleSubmit} className={classes.form}>
+          <FormControl className={classes.formControl}>
+            <Input
+              name={'phone'}
+              className={classes.input}
+              placeholder="请输入邮箱或手机号"
+              onChange={this.inputChange}
+            />
+          </FormControl>
+          <FormControl className={classes.formControl}>
+            <Input
+              className={classes.input}
+              name={'code'}
+              placeholder="输入6位验证码"
+              onChange={this.inputChange}
+              endAdornment={
+                <Button onClick={this.sendCode} className={classes.button}>{`${
+                  sendCode ? '重新' : ''
+                }获取验证码`}</Button>
+              }
+            />
+          </FormControl>
+          <FormControl className={classes.formControl}>
+            <Input
+              className={classes.input}
+              name={'password'}
+              placeholder="密码"
+              type={showPassword ? 'text' : 'password'}
+              onChange={this.inputChange}
+              endAdornment={
+                <InputAdornment position="end">
+                  <IconButton onClick={this.handleClickShowPassword.bind(this, 'showPassword')}>
+                    {showPassword ? <Visibility /> : <VisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+          </FormControl>
+          <FormControl className={classes.formControl}>
+            <Input
+              className={classes.input}
+              name={'enterpassword'}
+              placeholder="确认密码"
+              type={showEnterPassword ? 'text' : 'password'}
+              onChange={this.inputChange}
+              endAdornment={
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={this.handleClickShowPassword.bind(this, 'showEnterPassword')}
+                  >
+                    {showEnterPassword ? <Visibility /> : <VisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              }
+            />
+          </FormControl>
+          <FormControl className={classes.formControl}>
+            <Input
+              className={classes.input}
+              name={'name'}
+              placeholder="昵称"
+              onChange={this.inputChange}
+            />
+          </FormControl>
+          <FormControl className={`${classes.formSelectControl} ${classes.formLeftSelectControl}`}>
+            {role ? null : <InputLabel shrink={false}>选择角色</InputLabel>}
+            <StyledSelect
+              name={'role'}
+              value={role}
+              onChange={this.inputChange}
+              displayEmpty
+              className={classes.input}
+            >
+              <MenuItem value={10}>产品经理</MenuItem>
+              <MenuItem value={20}>设计师</MenuItem>
+              <MenuItem value={30}>前端工程师</MenuItem>
+              <MenuItem value={40}>移动端端工程师</MenuItem>
+              <MenuItem value={50}>小程序</MenuItem>
+            </StyledSelect>
+          </FormControl>
+          <FormControl
+            className={`${classes.formSelectControl} ${classes.formRighttSelectControl}`}
+          >
+            {exp ? null : <InputLabel shrink={false}>工作经验</InputLabel>}
+            <StyledSelect
+              name={'exp'}
+              value={exp}
+              onChange={this.inputChange}
+              displayEmpty
+              className={classes.input}
+            >
+              <MenuItem value={10}>0-3年</MenuItem>
+              <MenuItem value={20}>3-5年</MenuItem>
+              <MenuItem value={30}>5-9年</MenuItem>
+              <MenuItem value={40}>10年以上</MenuItem>
+            </StyledSelect>
+          </FormControl>
+          <Button type="submit" variant="contained" className={classes.submitButton}>
+            注册
+          </Button>
+        </form>
+      </div>
+    );
+  }
+}
+
+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
new file mode 100644
index 0000000..78bdb43
--- /dev/null
+++ b/src/pages/user/register/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Sign from 'component/user/Sign';
+import RegisterForm, { Props } from './form';
+
+type State = any
+
+export default class Index extends React.Component<Props, State> {
+  render() {
+    const { classes } = this.props;
+    const header = '欢迎加入CodeRiver';
+    const footer = (
+      <span>已有账号？<a href="#">登录</a></span>
+    );
+    return (
+      <Sign
+        header={header}
+        footer={footer}>
+        <RegisterForm />
+      </Sign>
+    );
+  }
+}