pc端手机号填写与验证信息的样式

html

<div class="mes_box">
      <el-form-item class="mes_li" label="手机号" prop="phone">
              <input type="text" placeholder="" class="mes_text" v-model="user.phone">
       </el-form-item>
       <el-form-item class="mes_li" label="验证码" prop="pas">
              <input type="password" placeholder="" class="mes_text mes_text_short" v-model="user.pas">
              <img class="checked" v-if="codeShow" @click="validateBtn()" src="../assets/images/login/sendmes.png" alt="">
              <div class="checked checkTime" v-if="!codeShow">{{ btnTitle }}</div>
        </el-form-item>
        <div class="mes_but">
             <div class="but">
                   <img @click="hjSubmite('user')" src="../assets/images/login/login.png" alt="">
             </div>
             <div class="but">
                   <img @click="torregister()" src="../assets/images/login/register.png" alt="">
             </div>
        </div>
</div>

data:

codeShow:true,
btnTitle:'',
user: {
      phone: '',
      pas: ''
},

methods:

validateBtn(){
   //倒计时
   let time = 60;
   let timer = setInterval(() => {
         if(time == 0) {
               clearInterval(timer);
               this.codeShow = true;
          } else {
               his.codeShow = false;
               this.btnTitle = time + '秒后重试';
               time--
          }
  },1000)
},

 css:

.mes_box{
    margin-top: 30px;
}
.login .login_box .message .mes_li{
    width: 440px;
    height: 65px;
    line-height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items:flex-end;
    position: relative;
}
.login .login_box .message .mes_li .mes_text{
    width: 367px;
    height: 30px;
    border-width: 0;
    border-bottom-width: 1px;
    border-bottom-color: #999;
    outline:none;

}
.login .login_box .message .mes_li .mes_text_short{
    width: 242px;
}
.checked{
    margin-top: 25px;
    height: 25px;
    width: 125px;
    position: absolute;
    top: -17px;
    right: -133px;
}
.login .login_box .message .mes_but{
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}
.login .login_box .message .mes_li .but{
    height: 25px;
    width: 125px;
    border-radius: 12px;
}
.checkTime{
    height: 23px;
    width: 123px;
    border-radius: 12px;
    border: 1px solid #999;
    line-height: 25px;
    color: #999;
    text-align: center;
}