处理登录页面

zhou3783 · Jul 5, 2018 · 943357f · 943357f
1 parent f6d0be4
commit 943357f
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 27 deletions.
diff --git a/src/routes/Login/index.js b/src/routes/Login/index.js
@@ -27,16 +27,18 @@ class Login extends React.Component {
         <div className='container'>
           <div className='login-box'>
             <div className='owl'>
-              <div className='hand-left hand' style={focusItem === 1 ? styles.focusHandLeft:{}}/>
-              <div className='hand-right hand' style={focusItem === 1 ? styles.focusHandRight:{}}/>
+              <div className='hand-left hand' style={focusItem === 1 ? styles.focusHandLeft : {}}/>
+              <div className='hand-right hand' style={focusItem === 1 ? styles.focusHandRight : {}}/>
               <div className='arms-box'>
-                <div className='arms arms-left' style={focusItem === 1 ? styles.focusArmsLeft:{}}/>
-                <div className='arms arms-right' style={focusItem === 1 ? styles.focusArmsRight:{}}/>
+                <div className='arms arms-left' style={focusItem === 1 ? styles.focusArmsLeft : {}}/>
+                <div className='arms arms-right' style={focusItem === 1 ? styles.focusArmsRight : {}}/>
               </div>
             </div>
             <Form>
               <Form.Item>
-                {getFieldDecorator('username', {})(
+                {getFieldDecorator('username', {
+                  rules: [{required: true, message: '请输入用户名'}]
+                })(
                   <Input
                     addonBefore={<span className='iconfont icon-User'
                                        style={focusItem === 0 ? styles.focus : {}}/>}
@@ -46,16 +48,32 @@ class Login extends React.Component {
                 )}
               </Form.Item>
               <Form.Item>
-                {getFieldDecorator('password', {})(
+                {getFieldDecorator('password', {
+                  rules: [{required: true, message: '请输入密码'}]
+                })(
                   <Input addonBefore={<span className='iconfont icon-suo1'
                                             style={focusItem === 1 ? styles.focus : {}}/>}
+                         type='password'
                          onFocus={() => this.setState({focusItem: 1})}
                          onBlur={() => this.setState({focusItem})}
                          size='large'/>
                 )}
               </Form.Item>
               <Form.Item>
-                {getFieldDecorator('verification', {})(
+                {getFieldDecorator('verification', {
+                  validateFirst: true,
+                  rules: [
+                    {required: true, message: '请输入验证码'},
+                    {
+                      validator: (rule, value, callback) => {
+                        if(value.length>=4&&!this.verifyCode.validate(value)){
+                          callback('验证码错误')
+                        }
+                        callback()
+                      }
+                    }
+                  ]
+                })(
                   <Row gutter={8}>
                     <Col span={16}>
                       <Input addonBefore={<span className='iconfont icon-securityCode-b'
@@ -87,16 +105,16 @@ const styles = {
     transform: 'scale(0.6)',
     width: 40
   },
-  focusHandLeft:{
-    transform:'translateX(-42px) translateY(-15px) scale(0.7)',
+  focusHandLeft: {
+    transform: 'translateX(-42px) translateY(-15px) scale(0.7)',
   },
-  focusHandRight:{
-    transform:'translateX(42px) translateY(-15px) scale(0.7)',
+  focusHandRight: {
+    transform: 'translateX(42px) translateY(-15px) scale(0.7)',
   },
-  focusArmsLeft:{
+  focusArmsLeft: {
     transform: 'translateY(-40px) translateX(-40px) scaleX(-1)'
   },
-  focusArmsRight:{
+  focusArmsRight: {
     transform: 'translateY(-40px) translateX(40px)'
   }
 }

diff --git a/src/routes/Login/style.css b/src/routes/Login/style.css
@@ -1,5 +1,8 @@
 .login-page{
     position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     top: 0;
     left: 0;
     width: 100%;
@@ -10,20 +13,19 @@
 }
 .login-page .container{
     position: relative;
-    margin: 150px auto 0;
     width:400px;
     height: 330px;
     background-color: #f0f8ff;;
 }
-.container .login-box{
+#login-page .container .login-box{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 40px 40px 15px 40px;
 }
-.container .login-box .owl{
+#login-page .container .login-box .owl{
     position: absolute;
     top: -100px;
     left: 50%;
@@ -32,7 +34,7 @@
     height: 108px;
     background-image: url("./img/owl-login.png");
 }
-.owl .hand{
+#login-page .owl .hand{
     position: absolute;
     left: 14px;
     bottom: -8px;
@@ -43,29 +45,29 @@
     transition: .3s ease-out;
     transform: scaleY(0.6);
 }
-.owl .hand.hand-left{
+#login-page .owl .hand.hand-left{
     left: 170px;
 }
-.owl .arms-box{
+#login-page .owl .arms-box{
     position: absolute;
     top: 58px;
     height: 41px;
     width: 100%;
     overflow: hidden;
 }
-.owl .arms{
+#login-page .owl .arms{
     position: absolute;
     top: 40px;
     width: 40px;
     height: 65px;
     transition: 0.3s ease-out;
     background-image: url("./img/owl-login-arm.png");
 }
-.owl .arms-left{
+#login-page .owl .arms-left{
     left: 158px;
     transform: rotate(20deg) scaleX(-1);
 }
-.owl .arms-right{
+#login-page .owl .arms-right{
     left: 20px;
     transform: rotate(-20deg);
 }
@@ -86,14 +88,53 @@
     width: 50px;
     transition: all .3s;
 }
-.container .login-box .bottom{
+#login-page .ant-form-item-with-help{
+    margin-bottom: 24px;
+}
+#login-page .ant-form-explain{
+    position: absolute;
+    z-index: 99;
+    left:110%;
+    top:0;
+    height: 40px;
+    width: 120px;
+    background-color: #fff;
+    border: 1px solid #CFCFCF;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+    line-height: 40px;
+    padding:0 15px;
+    color:rgba(0, 0, 0, 0.65);
+}
+#login-page .ant-form-explain:before{
+    content:'';
+    position: absolute;
+    left: -14px;
+    top:12px;
+    width: 0;
+    height: 0;
+    border-right: 14px solid #CFCFCF;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+}
+#login-page .ant-form-explain:after{
+    content:'';
+    position: absolute;
+    left: -13px;
+    top:12px;
+    width: 0;
+    height: 0;
+    border-right: 14px solid #fff;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+}
+#login-page .container .login-box .bottom{
     padding: 15px 0;
     text-align: right;
 }
-.login-box .bottom .register{
+#login-page .login-box .bottom .register{
      color: #999;
  }
-.login-box .bottom .register:hover{
+#login-page .login-box .bottom .register:hover{
     cursor: pointer;
 }
 
diff --git a/src/utils/gVerify.js b/src/utils/gVerify.js
@@ -110,11 +110,10 @@
 		validate: function(code){
 			var code = code.toLowerCase();
 			var v_code = this.options.code.toLowerCase();
-			console.log(v_code);
 			if(code == v_code){
 				return true;
 			}else{
-				this.refresh();
+				// this.refresh();
 				return false;
 			}
 		}