fix style

front/project/www/app.less

@@ -405,6 +405,11 @@ textarea::-webkit-input-placeholder {
   color: #A7A7A7;
 }
 
+input.empty::-webkit-input-placeholder,
+textarea.empty::-webkit-input-placeholder {
+  color: #f36565;
+}
+
 .d-i-b {
   display: inline-block;
   overflow: hidden;

front/project/www/components/Login/index.js

@@ -21,7 +21,7 @@ export default class Login extends Component {
   constructor(props) {
     super(props);
     this.validNumber = 0;
-    this.state = { type: LOGIN_WX, data: { area: MobileArea[0].value } };
+    this.state = { type: LOGIN_WX, error: {}, data: { area: MobileArea[0].value } };
     window.addEventListener(
       'message',
       event => {
@@ -41,14 +41,12 @@ export default class Login extends Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.user.needLogin && !this.init) {
       this.init = true;
-      Main.getContract('register')
-        .then(result => {
-          this.setState({ registerContract: result });
-        });
-      Main.getContract('privacy')
-        .then(result => {
-          this.setState({ privacyContract: result });
-        });
+      Main.getContract('register').then(result => {
+        this.setState({ registerContract: result });
+      });
+      Main.getContract('privacy').then(result => {
+        this.setState({ privacyContract: result });
+      });
     }
   }
 
@@ -57,11 +55,16 @@ export default class Login extends Component {
   }
 
   login() {
-    const { data, needEmail, mobileError, validError } = this.state;
+    const { data, needEmail, mobileError, validError, error } = this.state;
     const { area, mobile, mobileVerifyCode, email } = data;
     if (mobileError || validError) return;
-    if (!area || !mobile || !mobileVerifyCode) return;
-    if (needEmail && !email) return;
+    if (!area || !mobile || !mobileVerifyCode || (needEmail && !email)) {
+      error[LOGIN_PHONE] = { mobile: !mobile, mobileVerifyCode: !mobileVerifyCode, email: !email };
+      this.setState({ error });
+      return;
+    }
+    error[LOGIN_PHONE] = {};
+    this.setState({ error });
     User.login(area, mobile, mobileVerifyCode, email, null, false)
       .then(result => {
         if (result.bindWechat) {
@@ -80,11 +83,16 @@ export default class Login extends Component {
   }
 
   bind() {
-    const { data, needEmail, mobileError, validError } = this.state;
+    const { data, needEmail, mobileError, validError, error } = this.state;
     const { area, mobile, mobileVerifyCode, email } = data;
     if (mobileError || validError) return;
-    if (!area || !mobile || !mobileVerifyCode) return;
-    if (needEmail && !email) return;
+    if (!area || !mobile || !mobileVerifyCode || (needEmail && !email)) {
+      error[BIND_PHONE] = { mobile: !mobile, mobileVerifyCode: !mobileVerifyCode, email: !email };
+      this.setState({ error });
+      return;
+    }
+    error[BIND_PHONE] = {};
+    this.setState({ error });
     User.bind(area, mobile, mobileVerifyCode, email)
       .then(() => {
         this.close();
@@ -99,13 +107,14 @@ export default class Login extends Component {
   }
 
   scanLogin(code) {
-    User.loginWechat(code, false).then(result => {
-      if (result.bindMobile) {
-        this.close();
-      } else {
-        this.setState({ type: BIND_PHONE });
-      }
-    })
+    User.loginWechat(code, false)
+      .then(result => {
+        if (result.bindMobile) {
+          this.close();
+        } else {
+          this.setState({ type: BIND_PHONE });
+        }
+      })
       .catch(err => {
         this.setState({ type: BIND_WX_ERROR, wechatError: err.message });
       });
@@ -212,7 +221,8 @@ export default class Login extends Component {
   }
 
   renderLoginPhone() {
-    const { needEmail, registerContract = {}, privacyContract } = this.state;
+    const { needEmail, registerContract = {}, privacyContract, error = {} } = this.state;
+    const emptyError = error[LOGIN_PHONE] || {};
     return (
       <div className="body">
         <div className="title">手机号登录</div>
@@ -226,6 +236,7 @@ export default class Login extends Component {
           select={MobileArea}
           value={this.state.data.mobile}
           error={this.state.mobileError}
+          empty={emptyError.mobile}
           onSelect={value => {
             this.changeData('area', value);
             this.validMobile(true);
@@ -239,6 +250,7 @@ export default class Login extends Component {
           placeholder="请输入验证码"
           value={this.state.data.mobileVerifyCode}
           error={this.state.validError}
+          empty={emptyError.mobileVerifyCode}
           onSend={() => {
             return this.sendValid();
           }}
@@ -250,15 +262,26 @@ export default class Login extends Component {
           <Input
             placeholder="请输入邮箱"
             value={this.state.data.email}
+            empty={emptyError.email}
             onChange={e => {
               this.changeData('email', e.target.value);
             }}
           />
         )}
-        {needEmail && (<div>
-          <RadioItem checked theme="white" className="m-r-5" />
-          我已经阅读并同意 <a href={`/contract/${registerContract.key}`} target="_blank">{registerContract.title}</a> 与 <a href={`/contract/${privacyContract.key}`} target="_blank">{privacyContract.title}</a>.
-        </div>)}
+        {needEmail && (
+          <div>
+            <RadioItem checked theme="white" className="m-r-5" />
+            我已经阅读并同意{' '}
+            <a href={`/contract/${registerContract.key}`} target="_blank">
+              {registerContract.title}
+            </a>{' '}
+            与{' '}
+            <a href={`/contract/${privacyContract.key}`} target="_blank">
+              {privacyContract.title}
+            </a>
+            .
+          </div>
+        )}
         <Button
           type="primary"
           size="large"
@@ -311,7 +334,8 @@ export default class Login extends Component {
   }
 
   renderBindPhone() {
-    const { needEmail, contract = {} } = this.state;
+    const { needEmail = true, contract = {}, error = {} } = this.state;
+    const emptyError = error[BIND_PHONE] || {};
     return (
       <div className="body">
         <div className="title">绑定手机号</div>
@@ -325,6 +349,7 @@ export default class Login extends Component {
           select={MobileArea}
           value={this.state.data.mobile}
           error={this.state.mobileError}
+          empty={emptyError.mobile}
           onSelect={value => {
             this.changeData('area', value);
             this.validMobile(false);
@@ -338,6 +363,7 @@ export default class Login extends Component {
           placeholder="请输入验证码"
           value={this.state.data.mobileVerifyCode}
           error={this.state.validError}
+          empty={emptyError.mobileVerifyCode}
           onSend={() => {
             return this.sendValid();
           }}
@@ -349,15 +375,26 @@ export default class Login extends Component {
           <Input
             placeholder="请输入邮箱"
             value={this.state.data.email}
+            empty={emptyError.email}
             onChange={e => {
               this.changeData('email', e.target.value);
             }}
           />
         )}
-        {needEmail && (<div>
-          <RadioItem checked theme="white" className="m-r-5" />
-          我已经阅读并同意 <a href={`/contract/${contract.key}`} target="_blank">{contract.title}</a> 与 <a href={`/contract/${contract.key}`} target="_blank">隐私政策</a>.
-        </div>)}
+        {needEmail && (
+          <div className="m-b-2">
+            <RadioItem checked theme="white" className="m-r-5" />
+            我已经阅读并同意{' '}
+            <a href={`/contract/${contract.key}`} target="_blank">
+              {contract.title}
+            </a>{' '}
+            与{' '}
+            <a href={`/contract/${contract.key}`} target="_blank">
+              隐私政策
+            </a>
+            .
+          </div>
+        )}
         <Button
           type="primary"
           size="large"
@@ -424,13 +461,13 @@ export default class Login extends Component {
 
 export class Input extends Component {
   render() {
-    const { className = '', onChange, placeholder, value, error, left, right } = this.props;
+    const { className = '', onChange, placeholder, value, error, left, right, empty } = this.props;
     return (
       <div className={`g-input-container ${className}`}>
         <div className={`g-input-wrapper ${error ? 'error' : ''}`}>
           {left && <div className="g-input-left">{left}</div>}
           <input
-            className="g-input"
+            className={`g-input ${empty ? 'empty' : ''}`}
             placeholder={placeholder}
             value={value}
             onChange={data => onChange && onChange(data)}
@@ -453,7 +490,7 @@ export class SelectInput extends Component {
 
   render() {
     const { showSelect } = this.state;
-    const { className = '', onChange, placeholder, value, error, selectValue, select, onSelect } = this.props;
+    const { className = '', onChange, placeholder, value, error, empty, selectValue, select, onSelect } = this.props;
     return (
       <Input
         className={className}
@@ -483,6 +520,7 @@ export class SelectInput extends Component {
         placeholder={placeholder}
         onChange={data => onChange && onChange(data)}
         error={error}
+        empty={empty}
       />
     );
   }
@@ -518,7 +556,7 @@ export class VerificationInput extends Component {
 
   render() {
     const { loading } = this.state;
-    const { className = '', onChange, placeholder, value, error } = this.props;
+    const { className = '', onChange, placeholder, value, error, empty } = this.props;
     return (
       <Input
         className={className}
@@ -527,10 +565,13 @@ export class VerificationInput extends Component {
             <span className="g-input-right-verification" onClick={() => this.onSend()}>
               获取验证码
             </span>
-          ) : (<span className="g-input-right-verification-loading">等待{loading}秒</span>)
+          ) : (
+            <span className="g-input-right-verification-loading">等待{loading}秒</span>
+          )
         }
         value={value}
         error={error}
+        empty={empty}
         placeholder={placeholder}
         onChange={data => onChange && onChange(data)}
       />

front/project/www/routes/page/home/index.less

@@ -113,7 +113,7 @@
       padding-top: 90px;
     }
 
-    .step {
+    .step-c {
       .m-title {
         color: #303139;
         font-size: 32px;
@@ -147,7 +147,7 @@
       }
     }
 
-    .step-1 {
+    .step-c-1 {
       margin-bottom: 90px;
 
       .m-title {
@@ -185,7 +185,7 @@
       }
     }
 
-    .step-2 {
+    .step-c-2 {
       margin-bottom: 100px;
 
       .m-title {
@@ -219,9 +219,15 @@
       }
     }
 
-    .step-3 {
+    .step-c-3 {
       margin-bottom: 100px;
 
+      .item:hover {
+        .assets {
+          display: block;
+        }
+      }
+
       .item {
         height: 160px;
         width: 380px;
@@ -230,6 +236,7 @@
 
         .assets {
           position: absolute;
+          display: none;
         }
 
         .foot-1 {
@@ -260,7 +267,7 @@
       }
     }
 
-    .step-4 {
+    .step-c-4 {
       margin-bottom: 130px;
 
       .m-title {
@@ -391,12 +398,18 @@
       }
     }
 
-    .step-5 {
+    .step-c-5 {
 
       .m-title {
         margin-bottom: 30px;
       }
 
+      .item:hover {
+        .sun {
+          display: block;
+        }
+      }
+
       .item {
         width: 380px;
         padding: 30px;
@@ -406,6 +419,7 @@
           position: absolute;
           top: 0;
           right: 0;
+          display: none;
         }
 
         .title {
@@ -469,11 +483,11 @@
       }
     }
 
-    .step-list {
+    .step-c-list {
       display: flex;
     }
 
-    .step {
+    .step-c {
       flex: 1;
       padding: 0 40px;
 

front/project/www/routes/page/home/page.js

@@ -66,7 +66,7 @@ export default class extends Page {
           </div>
           <div className="fixed">
             <div className="body">
-              <div className="step step-1">
+              <div className="step-c step-c-1">
                 <div className="m-title">备考攻略</div>
                 <div className="list">
                   <div className="item m-r-2">
@@ -108,7 +108,7 @@ export default class extends Page {
                           this.location(prepare.classJunior);
                         }}
                       >
-                        从零开始
+                        视频课程
                       </Button>
                       <Button
                         theme="warn"
@@ -118,13 +118,13 @@ export default class extends Page {
                           this.location(prepare.classMiddle);
                         }}
                       >
-                        继续学习
+                        1VS1私教
                       </Button>
                     </div>
                   </div>
                 </div>
               </div>
-              <div className="step step-2">
+              <div className="step-c step-c-2">
                 <div className="m-title">WHY 千行</div>
                 <div className="list">
                   <div className="item m-r-1-5">
@@ -154,7 +154,7 @@ export default class extends Page {
                   </div>
                 </div>
               </div>
-              <div className="step step-3">
+              <div className="step-c step-c-3">
                 <div className="list">
                   <div className="item m-r-1-5">
                     <div className="title" style={{ color: '#4292F0' }}>
@@ -179,7 +179,7 @@ export default class extends Page {
                   </div>
                 </div>
               </div>
-              <div className="step step-4">
+              <div className="step-c step-c-4">
                 <div className="m-title">
                   千⾏课程<span className="sub">Waste Less, Learn More</span>
                 </div>
@@ -211,7 +211,7 @@ export default class extends Page {
                   </div>
                 </div>
               </div>
-              <div className="step step-5">
+              <div className="step-c step-c-5">
                 <div className="m-title">独家服务</div>
                 <div className="list">
                   <div className="item m-r-1-5" style={{ height: 210 }}>
@@ -263,15 +263,15 @@ export default class extends Page {
         <div className="block block-6">
           <div className="body">
             <div className="m-title">发展历程</div>
-            <div className="step-list">
-              <div className="step">
+            <div className="step-c-list">
+              <div className="step-c">
                 <div className="title">
                   <Assets name="dot1" />
                   2012
                 </div>
                 <div className="desc">“OG12语法千行”首次与大家见面，下载量过万，成为当年最热门的备考资料。</div>
               </div>
-              <div className="step">
+              <div className="step-c">
                 <div className="title">
                   <Assets name="dot2" />
                   2015
@@ -281,7 +281,7 @@ export default class extends Page {
                   More." 同时发行“PREP0708语法千行”、“GMAT数学千行”。
                 </div>
               </div>
-              <div className="step">
+              <div className="step-c">
                 <div className="title">
                   <Assets name="dot3" />
                   2019