合并passport

src/common/ClearableInput/clearable-input.scss

@@ -4,7 +4,7 @@
     input {
         width: 300px;
         height: 46px;
-        padding-left: 17px;
+        padding: 15px 0 15px 34px;
         border: 1px solid $border_ccc;
         border-radius: 3px;
         -webkit-appearance: none;
@@ -16,11 +16,14 @@
     }
 
     .iconfont {
-        display: inline-block;
         position: absolute;
         top: 50%;
-        right: 13px;
         transform: translateY(-50%);
         font-size: 21px;
+        color: $color_bbb;
+    }
+
+    .clear {
+        right: 13px;
     }
 }
\ No newline at end of file

src/common/ClearableInput/index.js

@@ -22,7 +22,7 @@ class ClearableInput extends Component {
     }
 
     render() {
-        let {wrapperClass, inputClass, placeholder, type = 'text', onChange, ...rest} = this.props
+        let {wrapperClass, inputClass, placeholder, type = 'text', onChange, icon, ...rest} = this.props
         let clearIconStyle = {
             display: this.state.value.length ? 'block' : 'none'
         }
@@ -36,8 +36,9 @@ class ClearableInput extends Component {
                     placeholder={placeholder}
                     {...rest}
                 />
+                {icon}
                 <i
-                    className={'iconfont icondanseshixintubiao-3'}
+                    className={'iconfont icondanseshixintubiao-3 clear'}
                     onClick={this.clearInput}
                     style={clearIconStyle}
                 />

src/components/passport/accountLogin/index.js

@@ -6,7 +6,8 @@ import { Link } from "react-router-dom";
 import Header from "../common/Header";
 import Input from '../common/Input'
 import LoginButton from '../common/LoginButton'
-import VeriCodeButton from '../common/veriCodeInput'
+import PasswordInput from '../common/passwordInput'
+// import VeriCodeButton from '../common/veriCodeInput'
 // import LoginWays from '../common/LoginWays'
 
 
@@ -17,10 +18,21 @@ class AccountLogin extends Component {
             <div className={'account-login'}>
                 <Header/>
                 <div className="login-info">
-                    <Input inputType={'number'} placeholder={'手机/邮箱/昵称'} wrapperClass={'tel-input'}/>
-                    <VeriCodeButton
+                    <Input inputType={'number'}
+                           placeholder={'手机/邮箱/昵称'}
+                           wrapperClass={'tel-input'}
+                           icon={<i className={'iconfont iconshouji'}
+                                    style={{fontSize: '22px', left: '10px'}}
+                           />}
+                    />
+                    {/*<VeriCodeButton
                         className={'verification'}
+                    />*/}
+
+                    <PasswordInput
+                        placeholder={'密码'}
                     />
+
                     <LoginButton/>
                     <Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
                 </div>

src/components/passport/bindingTel/index.js

@@ -26,11 +26,17 @@ class BindingTel extends Component {
                     type={'number'}
                     placeholder={'请输入需要绑定的手机号'}
                     wrapperClass={'tel'}
+                    icon={<i className={'iconfont iconshouji'}
+                             style={{fontSize: '22px', left: '11px'}}
+                    />}
                 />
                 <VeriCodeInput
                     type={'number'}
                     className={'verification'}
                     onChange={this.handleChange}
+                    icon={<i className={'iconfont iconduanxin'}
+                             style={{fontSize: '20px', left: '12px'}}
+                    />}
                 />
                 <div className="place"/>
                 <Button className={'complete-btn'}>完成</Button>

src/components/passport/common/Input/index.js

@@ -19,7 +19,7 @@ class Index extends Component {
     }
 
     render() {
-        let {type, iconClass, placeholder, wrapperClass, children} = this.props
+        let {type, icon, placeholder, wrapperClass, children} = this.props
         return (
             <div className={classnames('input-wrapper', wrapperClass)}>
                 <input
@@ -29,7 +29,8 @@ class Index extends Component {
                     value={this.state.value}
                     onChange={this.handleChange}
                 />
-                <i className={classnames('icon', iconClass)}/>
+                {/*<i className={classnames('iconfont', iconClass)}/>*/}
+                {icon}
                 {children}
             </div>
         )

src/components/passport/common/Input/input.scss

@@ -16,9 +16,12 @@
             font-size: $font_16;
             color: $color_999;
         }
-
-        .icon {
-
-        }
+    }
+    .iconfont {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: $font_20;
+        color: $color_bbb;
     }
 }
\ No newline at end of file

src/components/passport/common/passwordInput/index.js

 import React, { Component } from 'react';
 import './password-input.scss'
+import classnames from 'classnames'
 
 import Input from '../Input'
 
@@ -24,7 +25,10 @@ class PasswordInput extends Component {
                 placeholder={placeholder}
                 onChange={onChange}
             >
-                <i className={'iconfont iconiconfront-54'} onClick={this.togglePasswordVisibility}/>
+                <i className={classnames('iconfont', {
+                    'iconpwd-hidden': this.state.showPassword,
+                    'iconyanjing': !this.state.showPassword
+                })} onClick={this.togglePasswordVisibility}/>
             </Input>
         );
     }

src/components/passport/common/veriCodeInput/index.js

@@ -44,12 +44,14 @@ class VeriCodeInput extends Component {
     }
 
     render() {
+        let {onChange, type = 'number', placeholder = '', className, ...rest} = this.props
         return (
             <Input
-                type={'number'}
-                placeholder={''}
+                type={type}
+                placeholder={placeholder}
                 onChange={this.handleChange}
-                wrapperClass={this.props.className}
+                wrapperClass={className}
+                {...rest}
             >
                 <button className={classnames('verify', {active: !this.state.counting})} onClick={this.countDown}>
                     {

src/components/passport/forgotPassword/index.js

@@ -35,10 +35,16 @@ class ForgotPassword extends Component {
                     placeholder={'请输入注册时的邮箱账号或手机号'}
                     onChange={this.setTel}
                     wrapperClass={'tel-input'}
+                    icon={<i className={'iconfont iconshouji'}
+                             style={{fontSize: '22px', left: '11px'}}
+                    />}
                 />
                 <VeriCodeButton
                     className={'verify-code'}
                     onChange={this.setVerificationCode}
+                    icon={<i className={'iconfont iconduanxin'}
+                             style={{fontSize: '20px', left: '12px'}}
+                    />}
                 />
                 <div className="place"/>
                 <Button className={'next'}>下一步</Button>

src/components/passport/wechatLogin/index.js

@@ -29,10 +29,20 @@ class WechatLogin extends Component {
                 <Header/>
 
                 <div className="login-info">
-                    <Input inputType={'number'} placeholder={'手机号快捷登录(免注册)'} wrapperClass={'tel-input'}/>
+                    <Input
+                        inputType={'number'}
+                        placeholder={'手机号快捷登录(免注册)'}
+                        wrapperClass={'tel-input'}
+                        icon={<i className={'iconfont iconshouji'}
+                                 style={{fontSize: '22px', left: '10px'}}
+                        />}
+                    />
                     <VeriCodeInput
                         className={'verification'}
                         onChange={this.handleChange}
+                        icon={<i className={'iconfont iconduanxin'}
+                                 style={{fontSize: '20px', left: '12px'}}
+                        />}
                     />
                     <LoginButton/>
                 </div>