修改登录注册页面信息

src/components/common/Banner.vue

@@ -2,8 +2,9 @@
     <div class="container">
         <div class="banner">
             <div class="logo fl">
-                <img src="../../images/robot_icon.png" alt="朗通logo"/>
-                <img class="img-title" src="../../images/title.png"/>
+                <img  src="../../images/logo.png" alt="朗通logo"/>
+                <span class="bannerName">云平台</span>
+                <!-- <img class="img-title" src="../../images/title.png"/> -->
             </div>
             <div class="consult fr">
                 <span>咨询热线：{{phone}} &nbsp;</span> |
@@ -53,9 +54,10 @@
     .container {
         width: 100%;
         height: 100%;
-        background-image: url(../../images/bg.jpg);
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
+        background-color: #f3f6fb;
+        // background-image: url(../../images/bg.jpg);
+        // background-size: 100% 100%;
+        // background-repeat: no-repeat;
 
     .banner {
         height: 60px;
@@ -65,8 +67,16 @@
 
     .banner img {
         display: inline-block;
-        margin-top: 10px;
+        // margin-top: 10px;
         margin-left: 30px;
+        position: relative;
+        top: 2px;
+    }
+    .bannerName {
+        margin-left: 13px;
+        font-size: 14px;
+        color: #2871FA;
+        letter-spacing: 0;
     }
 
     .img-title {

src/components/common/CopyRightInfo.vue

@@ -0,0 +1,36 @@
+<template>
+    <footer class="copyRightContainer">
+        <div>
+            <span class="copyRightInfo">版权所有：杭州朗通信息技术有限公司</span>
+            <span class="copyRightNum">浙ICP备：10039268号</span>
+        </div>
+    </footer>
+</template>
+
+<script>
+export default {
+    name: 'CopyRightInfo',
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.copyRightContainer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    background: #F0F0F0;
+    font-size: 14px;
+    color: #545455;
+}
+.copyRightInfo {
+    margin: 0 22px 0 238px;
+}
+</style>
+

src/components/forgetPassword/FindPassword.vue

@@ -2,20 +2,23 @@
     <div class="contentBo">
         <div class="find-container">
             <Banner></Banner>
-            <div class="box">
-                <h3>
+            <div class="login-img fl"><img src="../../images/loginImg.png"/></div>
+            <div :class="['box', { 'box2': flag == 2 ||  flag == 3}]">
+                <!-- <h3>
                   <img v-show="showText=='修改密码'" src="../../images/return.png" height="18" width="18" @click="back">
                   {{showText}}
-                </h3>
+                </h3> -->
+                <div v-if="flag==1" class="title-box clearfix"> <h3 class="login-title fl">找回密码</h3> <h4 class="num fr num2">1/2</h4></div>
+                <div v-if="flag==2" class="title-box clearfix"> <h3 class="login-title fl">输入新密码</h3> <h4 class="num fr num2">2/2</h4></div>
                 <div class="main">
-                    <div class="progress">
+                    <!-- <div class="progress">
                         <p class="progress-info">
                             <span class="finished">输入验证信息</span>
                             <span :class="['unfinished',{'finished':newPawComplete}]">输入新密码</span>
                             <span :class="['unfinished',{'finished':complete}]">完成设置</span>
                         </p>
                         <p :class="['progress-pic',{'progress-new':newPawComplete,'progress-fin':complete}]"></p>
-                    </div>
+                    </div> -->
                     <form>
                         <div class="first" v-if="flag==1">
                             <input type="tel" name="" v-model="phone" maxlength="11" @input="handleTelInput"
@@ -28,8 +31,8 @@
                             </div>
                             <div class="yanzm">
                                 <input type="text" name="" v-model="msgCode" maxlength="6" placeholder="短信验证码" @blur="checkMsgCode">
-                                <div v-if="timerFlag" type="primary" class="getMsg disabled">{{time + 's后重新发送'}}</div>
-                                <div v-else class="getMsg" @click="getMsgCode">点击获取验证码</div>
+                                <div v-if="timerFlag" type="primary" class="getMsg disabled">{{'再次发送(' + time + ')'}}</div>
+                                <div v-else class="getMsg" @click="getMsgCode">获取验证码</div>
                             </div>
                             <span class="tips" v-show="imgCodeErr">{{codeErrText}}</span>
                         </div>
@@ -39,7 +42,9 @@
                             <input type="password" name="" placeholder="确认新密码（6-16位字母、数字组合）" v-model="newPswAgain"  maxlength="16">
                         </div>
                         <div class="third" v-if="flag == 3">
-                            <p class="suc">恭喜，登录密码已修改成功！</p>
+                            <img class="modifyImg" src="../../images/success.png" alt="">
+                            <p class="modifyInfo">修改成功</p>
+                            <p class="suc">恭喜，您的密码已修改成功！</p>
                         </div>
                         <div class="next" v-if="changCor">{{nextText}}</div>
                         <div :class="['next nextCor',{'goLogin':flag == 3}]" @click="toNext(flag)" v-else>{{nextText}}
@@ -48,6 +53,7 @@
                     </form>
                 </div>
             </div>
+            <copy-right-info></copy-right-info>
         </div>
     </div>
 </template>
@@ -55,6 +61,7 @@
   import api from '../../api/index.js';
   import utils from '@api/utils.js';
   import '@components/forgetPassword/findPassword.less';
+  import copyRightInfo from '../common/CopyRightInfo.vue';
   import Banner from '@components/common/Banner.vue';
   import md5 from 'js-md5'
 
@@ -424,7 +431,8 @@
       }
     },
     components: {
-      Banner
+      Banner,
+      copyRightInfo
     },
   }
 </script>

src/components/forgetPassword/findPassword.less

@@ -6,34 +6,63 @@
 .find-container {
   width: 100%;
   height: 100%;
+  .login-img {
+    left: 10%;
+    top: 0;
+    position: absolute;
+    width: 40%;
+    height: 100%;
+  }
+  .login-img img {
+    position: relative;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
   .box {
-    width: 460px;
+    width: 406px;
+    height: 400px;
     // box-shadow: 0 0 5px #979597;
     box-shadow: 0 0 5px rgba(151, 149, 151, 0.44);
     background: #fff;
     position: absolute;
     left: 50%;
-    top: 47%;
-    transform: translate(-50%, -50%);
+    top: 50%;
+    transform: translate(0, -50%);
     //margin: 0 auto;
     //margin-top: 10%;
     overflow: hidden;
     font-size: 12px; //默认字体
     color: #424243; //默认颜色
     box-sizing: border-box;
-    h3 {
-      width: 100%;
-      height: 36px;
-      line-height: 36px;
-      background: #eee;
-      text-align: left;
-      padding-left: 15px;
+    // h3 {
+    //   width: 100%;
+    //   height: 36px;
+    //   line-height: 36px;
+    //   background: #eee;
+    //   text-align: left;
+    //   padding-left: 15px;
+    //   font-size: 14px;
+    //   margin: 0;
+    //   img{
+    //     vertical-align: middle;
+    //     cursor: pointer;
+    //   }
+    // }
+    .title-box {
+      height: 20px;
+      line-height: 20px;
+      padding: 40px 60px 50px;
+    }
+    .num {
+      cursor: pointer;
       font-size: 14px;
-      margin: 0;
-      img{
-        vertical-align: middle;
-        cursor: pointer;
-      }
+      color: #2871FA;
+      letter-spacing: 0;
+      text-align: right;
+    }
+    .num2 {
+      color: #9C9C9C;
     }
     .main {
       width: 100%;
@@ -65,16 +94,16 @@
         }
       }
       form {
-        width: 292px;
+        width: 286px;
         margin: auto;
         input {
-          width: 285px;
-          height: 34px;
+          width: 256px;
+          height: 42px;
           outline: none;
-          border: none;
-          border: 1px solid #c9c9c9;
-          margin-bottom: 10px;
-          padding-left: 5px;
+          border: 1px solid #C7C7C7;
+          border-radius: 2px;
+          margin-bottom: 16px;
+          padding: 0 15px;
         }
         input::-webkit-input-placeholder {
           color: #c9c9c9;
@@ -93,64 +122,92 @@
           font-size: 12px;
           color: #dd0f0f;
           position: absolute;
+          top: 278px;
         }
         .yanzm {
+          position: relative;
           input {
-            width: 150px;
+            width: 161px;
+            position: relative;
+            padding: 0 110px 0 15px;
           }
           .getMsg {
             display: inline-block;
-            width: 125px;
-            height: 34px;
-            line-height: 34px;
+            width: 95px;
+            height: 44px;
+            line-height: 44px;
             text-align: center;
-            color: #2485c4;
-            border: 1px solid #2485c4;
-            background: #dde8ef;
+            // background: #dde8ef;
+            font-size: 14px;
+            color: #2871FA;
             cursor: pointer;
             vertical-align: middle;
-            margin: -3px 0 0 4px;
+            position: absolute;
+            top: 0;
+            right: -1px;
           }
           img {
-            width: 125px;
-            height: 34px;
+            position: absolute;
+            width: 95px;
+            height: 44px;
             display: inline-block;
             vertical-align: middle;
-            margin: -3px 0 0 4px;
+            top: 0;
+            right: -1px;
             cursor: pointer;
           }
           .disabled {
-            background: #c9c9c9;
-            border: none;
+            background: #D4E3FE;
+            border-radius: 2px;
           }
         }
 
         .next {
-          width: 290px;
+          width: 288px;
           height: 40px;
           line-height: 40px;
           text-align: center;
-          background: #c9c9c9;
+          background: #D4E3FE;
+          border-radius: 2px;
           color: #fff;
-          margin: 30px auto 20px;
+          margin: 10px auto 20px;
           // margin: 12px auto 20px;
           cursor: pointer;
         }
         .nextCor {
-          background: #2485c4;
+          background: #2871FA;
+        }
+        .nextCor:hover {
+          background: #1A63EC;
+        }
+        .nextCor:active {
+          background: #0952DA;
         }
         .suc {
-          font-size: 16px;
-          text-align: center;
-          margin: 80px 0 65px;
+          font-size: 14px;
+          color: #5A5A5A;
+          margin: 6px 0 61px;
         }
         .second {
-          margin-bottom: 76px;
         }
         .goLogin {
           margin-bottom: 32px;
         }
+        .third {
+          text-align: center;
+        }
+        .modifyImg {
+          margin: 60px 0 22px;
+        }
+        .modifyInfo {
+          font-size: 18px;
+          color: #000000;
+          letter-spacing: 0;
+        }
       }
     }
   }
+  .box2 {
+    height: 340px;
+  }
 }

src/components/login/Login.vue

@@ -1,10 +1,12 @@
 <template>
     <div class="login-container">
         <banner></banner>
+        <div class="login-img fl"><img src="../../images/loginImg.png"/></div>
         <div class="login-box">
-            <div class="box-le"><img src="../../images/left.jpg"/></div>
+            <!-- <div class="box-le"><img src="../../images/left.jpg"/></div> -->
             <div class="box-ri">
-                <h3>账号登录</h3>
+                <div class="title-box clearfix"> <h3 class="login-title fl">登录</h3> <h4 class="num fr" @click="toRegister">立即注册</h4></div>
+               
                 <div class="ri-center">
                     <el-form :model="ruleForm2" :rules="rules2" ref="ruleFormReg">
                         <el-form-item prop="tel">
@@ -13,7 +15,7 @@
                                       clearable class="ri-tel" @keyup.enter.native="submitForm('ruleForm2')"
                                       ref="username"></el-input>
                         </el-form-item>
-                        <div style="height: 30px;"></div>
+                        <div style="height: 15px;"></div>
                         <el-form-item prop="pwd">
                             <el-input v-model="ruleForm2.pwd" name="password" autocomplete="off" maxlength="16"
                                       placeholder="请输入密码"
@@ -21,8 +23,8 @@
                                       @keyup.enter.native="submitForm('ruleForm2')" ref="password"></el-input>
                         </el-form-item>
                         <el-form-item>
-                            <span class="num" @click="toRegister">注册账号</span>
-                            <span class="pwd" @click="toForgetPsw">忘记密码</span>
+                            <!-- <span class="num" @click="toRegister">注册账号</span> -->
+                            <span class="pwd" @click="toForgetPsw">忘记密码?</span>
                         </el-form-item>
                         <el-form-item>
                             <el-button plain v-if="otherCor" @click="submitForm('ruleForm2')">登录</el-button>
@@ -33,12 +35,14 @@
                 </div>
             </div>
         </div>
+        <copy-right-info></copy-right-info>
     </div>
 </template>
 
 <script>
   import Vue from 'vue';
   import banner from '../common/Banner.vue';
+  import copyRightInfo from '../common/CopyRightInfo.vue';
   import api from '../../api/index.js';
   import './login.less';
   import md5 from 'js-md5'
@@ -203,7 +207,8 @@
       }
     },
     components: {
-      'banner': banner
+      'banner': banner,
+      'copyRightInfo': copyRightInfo
     },
   }
 </script>

src/components/login/login.less

@@ -1,4 +1,5 @@
 .login-container {
+  position: relative;
   width: 100%;
   height: 100%;
   min-width: 700px;
@@ -7,13 +8,25 @@
     float: left;
   }
   .login-box {
-    width: 580px;
+    width: 406px;
     position: absolute;
-    left: 50%;
-    top: 47%;
+    left: calc(50% + 203px);
+    top: 50%;
     transform: translate(-50%, -50%);
   }
-
+  .login-img {
+    left: 10%;
+    top: 0;
+    position: absolute;
+    width: 40%;
+    height: 100%;
+  }
+  .login-img img {
+    position: relative;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+  }
   .box-le img {
     width: 230px;
     height: 380px;
@@ -22,34 +35,30 @@
   }
 
   .box-ri {
-    width: 350px;
-    height: 380px;
+    width: 406px;
+    height: 351px;
     background: #fff;
     float: left;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px
   }
 
-  .box-ri h3 {
-    font-size: 20px;
-    margin: 25px 0 50px 30px;
-    color: #595959;
-  }
+  
 
   .ri-center {
     text-align: center;
   }
 
   .ri-center .el-input__inner {
-    width: 290px;
-    border-top: none;
-    border-right: none;
-    border-left: none;
-    border-radius: 0;
+    width: 286px;
+    background: #fff;
+  
     outline: none;
     color: #424243;
     font-size: 14px;
-    padding: 0px;
+    padding: 0px 15px;
+    border: 1px solid  #C7C7C7;
+    border-radius: 2px;
     /* margin-top: 20px; */
   }
 
@@ -65,23 +74,35 @@
   }
   .ri-pwd {
     /* padding-top: 10px; */
-    width: 290px;
+    width: 286px;
+    height: 44px;
   }
   .ri-tel {
-    width: 290px;
+    width: 286px;
+    height: 44px;
     /* margin-bottom: 20px; */
   }
+  .title-box {
+    height: 20px;
+    line-height: 20px;
+    padding: 40px 60px 50px;
+  }
+  .login-title {
+    font-size: 18px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 20px;
+  }
   .num {
-    float: left;
-    margin-left: 30px;
-    font-size: 12px;
-    color: #454545;
-    margin-top: 6px;
     cursor: pointer;
+    font-size: 14px;
+    color: #2871FA;
+    letter-spacing: 0;
+    text-align: right;
   }
   .pwd {
     float: right;
-    margin-right: 30px;
+    margin-right: 60px;
     font-size: 12px;
     color: #454545;
     margin-top: 6px;
@@ -89,17 +110,23 @@
   }
   .login-box .el-button {
     color: #fff !important;
-    width: 290px;
+    width: 286px;
     height: 40px;
     font-weight: bold;
-    background: #c9c9c9;
-    margin-top: 42px;
+    background: #D4E3FE;
+    margin-top: 12px;
     outline: none;
     cursor: auto;
 		border: 0 !important;
   }
   .otherCor {
-    background: #2485c4 !important;
+    background: #2871FA !important;
+  }
+  .otherCor:hover {
+    background: #1A63EC !important;
+  }
+  .otherCor:active {
+    background: #0952DA !important;
   }
   .login-box .el-form-item.is-success .el-input__inner {
     border-color: #dcdfe6;
@@ -112,7 +139,7 @@
     cursor: auto !important;
   }
   .login-box .el-form-item__error {
-    left: 29px !important;
+    left: 60px !important;
 		top: 39px !important;
     // -webkit-transform: scale(0.91) !important;
   }

src/components/register/Register.vue

@@ -1,37 +1,39 @@
 <template>
     <div class="contentBo">
         <Banner></Banner>
-        <div class="reg-container">
-            <h3>账号注册</h3>
-            <div class="box">
-                <div class="progress">
-                    <span class="apply">申请注册</span>
+         <div class="login-img fl"><img src="../../images/loginImg.png"/></div>
+        <div :class="['reg-container', { 'box2': !flag}]">
+            <!-- <h3>账号注册</h3> -->
+            <div :class="['box', { 'box2': !flag}]">
+                <!-- <div class="progress"> -->
+                    <!-- <span class="apply">申请注册</span> -->
                     <!-- <span class="plan"></span> -->
-                    <span :class="['plan plan_bg1',{'plan_bg2':complete}]"></span>
+                    <!-- <span :class="['plan plan_bg1',{'plan_bg2':complete}]"></span> -->
                     <!-- <span class="finished">完成</span> -->
-                    <span :class="['finished',{'apply':complete}]">完成</span>
-                </div>
+                    <!-- <span :class="['finished',{'apply':complete}]">完成</span> -->
+                     
+                <!-- </div> -->
+                <div v-if="flag" class="title-box clearfix"> <h3 class="login-title fl">注册</h3> <h4 class="num fr" @click="toLogin">登录</h4></div>
+                <div v-else class="title-box clearfix"> <h3 class="login-title fl">其他信息</h3> <h4 class="num fr num2">2/2</h4></div>
                 <form>
                     <div class="main" v-if="flag">
-                        <p>手机号</p>
+                        <!-- <p>手机号</p> -->
                         <input type="tel" name="" v-model="phone" maxlength="11" @input="handleTelInput"
-                               @blur="checkPhone">
-                        <p>密码</p>
-                        <input type="password" name="" v-model="psw" minlength="6" maxlength="16" @blur="checkPsw">
-                        <p>联系人</p>
-                        <!-- <input type="text" name="" v-model="contact" @input="handleContInput"> -->
-                        <input type="text" name="" v-model="contact" maxlength="10" @blur="handleContInput">
+                               @blur="checkPhone" placeholder="请输入用户名或手机号">
+                        <!-- <p>密码</p> -->
+                        <input type="password" name="" v-model="psw" minlength="6" maxlength="16" @blur="checkPsw" placeholder="请输入密码">
+                        
                         <div class="yanzm">
-                            <p>图形验证码</p>
+                            <!-- <p>图形验证码</p> -->
                             <input type="text" name="" v-model="picCode" @blur="checkImgCode" maxlength="4">
                             <img :src='"data:image/png;base64,"+imgCode' @click="refreshCode">
                         </div>
                         <div class="yanzm">
-                            <p>短信验证码</p>
+                            <!-- <p>短信验证码</p> -->
                             <!-- <input type="text" name="" v-model="msgCode" maxlength="6" @input="handleMsg"> -->
                             <input type="text" name="" v-model="msgCode" maxlength="6" @blur="cheeckMsgCode">
-                            <div v-if="timerFlag" type="primary" class="getMsg disabled">{{time + 's后重新发送'}}</div>
-                            <div v-else class="getMsg" @click="getMsgCode">点击获取验证码</div>
+                            <div v-if="timerFlag" type="primary" class="getMsg disabled">{{ '再次发送('+ time+')'}}</div>
+                            <div v-else class="getMsg" @click="getMsgCode">获取验证码</div>
 
                         </div>
                         <!-- <span class="tips" v-show="imgCodeErr">图形验证码错误</span> -->
@@ -42,16 +44,20 @@
                     </div>
 
                     <div class="main" v-else>
-                        <p>联系邮箱</p>
-                        <input type="email" name="" v-model="email" @blur="checkEmail">
-                        <p>机构名称</p>
-                        <input type="text" name="" v-model="agencyName" maxlength="20">
+                        <!-- <p>联系邮箱</p> -->
+                        <input type="email" name="" v-model="email" @blur="checkEmail"  placeholder="请输入联系邮箱">
+                        <!-- <p>机构名称</p> -->
+                        <input type="text" name="" v-model="agencyName" maxlength="20" placeholder="请输入机构名称">
+                        <!-- <p>联系人</p> -->
+                        <!-- <input type="text" name="" v-model="contact" @input="handleContInput"> -->
+                        <input type="text" name="" v-model="contact" maxlength="10" @blur="handleContInput" placeholder="请输入联系人">
                         <div class="next" v-if="submitCor">立即注册</div>
                         <div class="next nextCor" @click="submit" v-else>立即注册</div>
                     </div>
                 </form>
             </div>
         </div>
+        <copy-right-info></copy-right-info>
     </div>
 </template>
 <script>
@@ -61,7 +67,7 @@
   import '@components/register/register.less';
   import Banner from '@components/common/Banner.vue';
   import md5 from 'js-md5'
-
+  import copyRightInfo from '../common/CopyRightInfo.vue';
   export default {
     name: 'Register',
     data() {
@@ -100,6 +106,11 @@
       window.clearInterval(this.msgCodeTimer);
     },
     methods: {
+      toLogin() {
+        this.$router.push({
+          path: '/'
+        });
+      },
       CalcuMD5(password){
         // password = password.toUpperCase();
         password = md5(password);
@@ -220,6 +231,7 @@
       },
       getMsgCode() {//获取短信验证码
         //手机号、密码、联系人、图形验证码不为空且符合规则且图形验证码正确--shenq10.26
+        console.log('sadad')
         if(!this.phone.trim() && !this.phoneRg){
           this.imgCodeErr = true;
           this.codeErrText = "手机号不能为空";
@@ -230,9 +242,6 @@
         }else if(!this.psw.trim()){
           this.imgCodeErr = true;
           this.codeErrText = "密码不能为空";
-        }else if(!this.contact.trim()){
-          this.imgCodeErr = true;
-          this.codeErrText = "联系人不能为空";
         }else if(!this.picCode.trim()){
           this.imgCodeErr = true;
           this.codeErrText = "图形验证码不能为空";
@@ -412,13 +421,13 @@
     watch: {
       nextButton: {
         handler: function (val) {//所有数据不为空，且手机格式正确、图形验证码正确
-          if (val.phone.trim() && val.psw.trim() && val.contact.trim() && val.picCode.trim() && val.msgCode.trim() && !val.imgCodeErr) {
+          if (val.phone.trim() && val.psw.trim() && val.picCode.trim() && val.msgCode.trim() && !val.imgCodeErr) {
             this.changCor = false;
           } else {
             this.changCor = true;
           }
 
-          if (val.email.trim() && val.agencyName.trim()) {
+          if (val.email.trim() && val.agencyName.trim() && val.contact.trim()) {
             this.submitCor = false;
             this.complete = true;//完成
           } else {
@@ -430,7 +439,8 @@
     },
     filters: {},
     components: {
-      Banner
+      Banner,
+      copyRightInfo
     },
   }
 </script>

src/components/register/register.less

@@ -2,17 +2,29 @@
   width: 100%;
   height: 100%;
 }
-
+.login-img {
+  left: 10%;
+  top: 0;
+  position: absolute;
+  width: 40%;
+  height: 100%;
+}
+.login-img img {
+  position: relative;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .reg-container {
-  width: 380px;
+  width: 406px;
   //height: 54%;//适配Firefox
   // margin: 0 auto;
   // margin-top: 10%;
-  height: 425px;//适配笔记本360
+  height: 460px;//适配笔记本360
   position: absolute;
   left: 50%;
-  top: 47%;
-  transform: translate(-50%, -50%);
+  top: 50%;
+  transform: translate(0%, -50%);
   font-size: 12px; //默认字体
   color: #424243; //默认颜色
   box-sizing: border-box;
@@ -21,14 +33,32 @@
     font-size: 20px;
     margin-bottom: 20px;
   }
+  .title-box {
+    height: 20px;
+    line-height: 20px;
+    padding: 40px 60px 50px;
+  }
+  .num {
+    cursor: pointer;
+    font-size: 14px;
+    color: #2871FA;
+    letter-spacing: 0;
+    text-align: right;
+  }
+  .num2 {
+    color: #9C9C9C;
+  }
   .box {
     background: #fff;
-    width: 380px;
+    width: 406px;
     // height: 100%;
-    height: 472px;
+    height: 460px;
     position: relative;
     box-shadow: 0 0 5px rgba(151, 149, 151, 0.44);
   }
+  .box2 {
+    height: 399px;
+  }
   .progress {
     height: 40px;
     line-height: 40px;
@@ -60,16 +90,17 @@
 
   }
   form {
-    width: 292px;
+    width: 286px;
     margin: auto;
     input {
       outline: none;
-      width: 285px;
-      height: 34px;
-      margin-bottom: 10px;
+      width: 256px;
+      height: 42px;
+      margin-bottom: 16px;
       border: none;
-      border: 1px solid #c9c9c9;
-      padding-left: 5px;
+      border: 1px solid #C7C7C7;
+      border-radius: 2px;
+      padding: 0 15px;
     }
     p {
       margin-bottom: 6px;
@@ -77,50 +108,66 @@
       font-size: 12px;
     }
     .yanzm {
+      position: relative;
       input {
-        width: 150px;
+        width: 161px;
+        position: relative;
+        padding: 0 110px 0 15px;
+
       }
       // button{
       .getMsg {
         display: inline-block;
-        width: 125px;
-        height: 34px;
-        line-height: 34px;
+        width: 95px;
+        height: 44px;
+        line-height: 44px;
         text-align: center;
-        color: #2485c4;
-        border: 1px solid #2485c4;
-        background: #dde8ef;
+        // background: #dde8ef;
+        font-size: 14px;
+        color: #2871FA;
         cursor: pointer;
         vertical-align: middle;
-        margin: -3px 0 0 4px;
+        position: absolute;
+        top: 0;
+        right: -1px;
       }
       img {
-        width: 125px;
-        height: 34px;
+        position: absolute;
+        width: 95px;
+        height: 44px;
         display: inline-block;
         vertical-align: middle;
-        margin: -3px 0 0 4px;
+        top: 0;
+        right: -1px;
         cursor: pointer;
       }
       .disabled {
-        background: #c9c9c9;
+        // background: #c9c9c9;
         border: none;
+        color: #797676;
       }
     }
     .next {
-      width: 290px;
+      width: 286px;
       height: 40px;
       line-height: 40px;
       text-align: center;
-      background: #c9c9c9;
+      background: #D4E3FE;
+      border-radius: 2px;
       color: #fff;
       // margin: 30px auto 20px;
       // margin: 12px auto 20px;
       cursor: pointer;
-      margin-top: 22px;
+      margin-top: 10px;
     }
     .nextCor {
-      background: #2485c4;
+      background: #2871FA;
+    }
+    .nextCor:hover {
+      background: #1A63EC;
+    }
+    .nextCor:active {
+      background: #0952DA;
     }
     .tips {
       display: inline-block;
@@ -128,7 +175,7 @@
       color: #dd0f0f;
       // margin-top: 4px;
       position: absolute;
-      bottom: 68px;
+      bottom: 108px;
     }
   }
 }