17pdf_front_end/components/LoginBar.vue

<script>
import qs from 'qs'
import { mapActions } from 'vuex'
import { setToken } from '~/utils/cookie';

export default {
  data() {
    const regPhone = /^1[3456789]\d{9}$/
    const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
    return {
      form: {
        username:'',
        password:''
      },
      forgetForm: {
        account:'',
        code: '',
        key:''
      },
      resetForm: {
        newPassword: '',
        confirm_newPassword: '',
        verifyCode: '',
        type: '1'
      },
      receiver:'',
      checked:true,
      logging:false,
      interfaceStatus: 'login',
      forgetPswErrTip: '',
      codeImg:'',
      sending: false,
      clock: 60,
      resetPswTip:'',
      regEmail,
      regPhone,
      loginError: false
    }
  },
  computed: {
    loginBtnDisabled() {
      return !(this.form.username && this.form.password && this.form.password.length >= 6)
    },
    forgetDisabled() {
      return !(this.forgetForm.account && this.forgetForm.code)
    }
  },
  mounted() {
    if(localStorage.getItem('username')) {
      this.form.username = localStorage.getItem('username')
      this.form.password = localStorage.getItem('password')
    }
  },
  methods: {
    ...mapActions(['login']),
    handlerLogin() {
      this.logging = true
      this.loginError = false
      this.$axios.post('login',qs.stringify(this.form)).then((res)=> {
        if(res.code === 200) {
            this.$store.dispatch('login',res.result).then((token)=> {
            this.$axios.setToken(token, 'Bearer')
            localStorage.setItem('token',token)
            if(this.checked) {
              localStorage.setItem('username',this.form.username)
              localStorage.setItem('password',this.form.password)
            }else {
              localStorage.removeItem('username',this.form.username)
              localStorage.removeItem('password',this.form.password)
              this.form.username = ''
              this.form.password = ''
            }
            this.handlerClose()
            this.getUserInfo()
          })
        } else {
          this.loginError = true
        }
      })
      .finally(()=> {this.logging = false})
    },
    getUserInfo()  {
      this.$axios.get('members/getMemberInfo').then((res)=> {
        if(res.code === 200) {
          this.$store.commit('setUser',res.result.memberInfo)
          setToken('vuex',JSON.stringify(res.result.memberInfo))
          this.logging = false
          this.$emit('loginSucess')
        }
      })
    },
    handlerForgetPsw() {
      this.interfaceStatus = 'forgetPsw'
      this.handleGetVcodeImage()
    },
    // 手机号码发送验证码
    handlePostCode() {
      if(this.sending) return
      const params = {
        action: '1', // 找回密码
        receiver: this.forgetForm.account
      }
      if(this.regPhone.test(this.forgetForm.account)) params.type = '1'
      if(this.regEmail.test(this.forgetForm.account)) params.type = '0'
      this.$axios.get('auth/getVerifyCode', {params}).then((res)=> {
        if(res.code === 200) {
          this.sending = true
          let interval = setInterval(() => {
            this.clock--
            if(this.clock === 0) {
              clearInterval(interval)
              interval = null
              this.clock = 60
              this.sending = false
            }
          }, 1000);
        }
      })
    },
    // 获取二维码图片
    handleGetVcodeImage() {
      const params = {
        width: '140',
        height: '46',
        codeCount: '6',
        lineCount: '1',
        type: 'forget_password'
      }
      this.$axios.get('/auth/getImageCode',{params,responseType: 'arraybuffer'}).then((res)=> {
        this.codeImg = 'data:image/png;base64,' + btoa(
          new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
        this.forgetForm.key = res.headers['x-auth-token']
      })   
    },
    resetInterfaceStatus() {
      this.forgetForm.account = ''
      this.forgetForm.code = ''
      this.forgetPswErrTip = ''
      this.resetPswTip = ''
      this.resetForm.newPassword = ''
      this.resetForm.confirm_newPassword = ''
      this.resetForm.verifyCode = ''
      this.resetForm.forgetPswErrTip = ''
      setTimeout(() => {
        this.interfaceStatus = 'login'
      }, 500);
    },
    // 切换注册页面
    handlerRegister() {
      this.$emit('register','register')
    },
    // 重置密码验证
    handlerResetPsw() {
      if(!this.regPhone.test(this.forgetForm.account) && !this.regEmail.test(this.forgetForm.account)) {
        this.forgetPswErrTip = '请输入正确的邮箱或手机号码'
        return
      }
      this.logging = true
      this.$axios.post('auth/checkExist',qs.stringify(this.forgetForm)).then((res)=> {
        if(res.code === 200) {
          if(this.regPhone.test(this.forgetForm.account)) {
            this.interfaceStatus = 'resetPhonePsw'
          }
          if(this.regEmail.test(this.forgetForm.account)) {
            this.postEmail()
          }
        }else if(res.data && res?.data?.code !== 200){
          this.forgetPswErrTip = res.data.msg 
          this.handleGetVcodeImage()
        } else {
          this.forgetPswErrTip = res.msg
          this.handleGetVcodeImage()
        }
      }).finally(()=> {
        this.logging = false
      })
    },
    // 邮箱找回密码，发送邮箱
    postEmail() {
      const params = {
        action: '1',
        type: '0',
        receiver: this.forgetForm.account
      }
      this.$axios.get('auth/getVerifyCode', {params}).then((res) => {
        if(res.code === 200 ) {
          this.interfaceStatus = 'resetEmailPsw'
        }
      })
    },
    handlerConfirmReset() {
     if(this.resetForm.newPassword !== this.resetForm.confirm_newPassword) {
        this.resetPswTip = '两次输入的密码不一致'
      }else if(this.resetForm.newPassword.length < 6) {
        this.resetPswTip = '密码位数不能少于6位'
      }else if(this.resetForm.newPassword.charCodeAtlength> 16){
        this.resetPswTip = '密码位数不能大于16位'
      }else {
        this.resetPswTip = ''
        this.submitReset()
      }
    },
    submitReset() {
      this.resetForm.account = this.forgetForm.account
      this.$axios.post('members/resetPassword', this.resetForm).then((res)=> {
        if(res.code === 200) {
          this.$message.success('修改成功')
          this.handlerClose()
        }
        if(res.data && res?.data?.code !== 200){
          this.resetPswTip = res.data.msg
        }
      })
    },
    handlerClose() {
      this.$emit('close')
    },
    // 忘记密码错误提示
    changeForgetPswErrTip(){
      this.forgetPswErrTip = ''
    },
    //登录错误提示
    changeLoginTip(){
      this.loginError = false
    }
  }
}

</script>

<template>
  <div>
    <!-- 登录 -->
    <div v-if="interfaceStatus === 'login'" class="user-login">
      <div class="logo">
        <h4 class="logo_PDF"></h4>
      </div>
      <div class="login_content relative">
          <div class="login_input_user_span w-20px h-20px absolute top-30px left-34px"></div>
          <input id="account" v-model="form.username" class="login_input_user account" type="text" placeholder="邮箱/手机号" @input = "changeLoginTip">
          <br /> 
          <div class="login_input_password_span w-20px h-20px absolute top-90px left-34px"></div>
          <input id="pwd" v-model="form.password" class="login_input_password pwd" type="password" placeholder="密码" @input = "changeLoginTip">
          <br />
          <div class="forget-password">
            <span class="pwd-container">
              <input v-model="checked" id="rememberMe" type="checkbox" class="remember_pass align-text-bottom">
              <label for="rememberMe">记住密码</label>
            </span>
            <span class="right">
              <a class="forgotpwd cursor-pointer" @click="handlerForgetPsw">忘记密码？</a>
            </span>
          </div>
          <div v-show="loginError" class="error-mess">
            <span id="error-message error-tip">账号或密码错误</span>
          </div>
          <div class="tips">
            <span>只有QQ/微信账号，如何进行网页登录</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M0 7C0 10.866 3.13414 14 7 14C10.866 14 14 10.866 14 7C14 3.134 10.866 0 7 0C3.13414 0 0 3.13414 0 7ZM0.950469 7C0.950469 3.659 3.659 0.950469 7 0.950469C10.341 0.950469 13.0495 3.659 13.0495 7C13.0495 10.3411 10.3411 13.0495 7 13.0495C3.65887 13.0495 0.950469 10.3411 0.950469 7ZM5.42094 4.11538C5.82657 3.70192 6.38673 3.5 7.10141 3.5C7.71951 3.5 8.22172 3.66346 8.60803 4.00962C8.99434 4.34615 9.1875 4.80769 9.1875 5.38462C9.1875 5.85577 9.06195 6.25 8.8205 6.55769C8.73358 6.66346 8.46316 6.91346 8.00924 7.30769C7.82575 7.46154 7.69054 7.63462 7.60361 7.80769C7.49738 8 7.44909 8.21154 7.44909 8.44231V8.60577H6.4157V8.44231C6.4157 8.08654 6.47365 7.77885 6.60886 7.52885C6.73441 7.25962 7.10141 6.86538 7.70019 6.33654L7.86438 6.15385C8.03822 5.93269 8.1348 5.70192 8.1348 5.45192C8.1348 5.11539 8.03822 4.85577 7.85472 4.66346C7.66156 4.47115 7.38148 4.375 7.0338 4.375C6.5992 4.375 6.28049 4.50962 6.08733 4.78846C5.91349 5.01923 5.82657 5.34615 5.82657 5.76923H4.8125C4.8125 5.06731 5.01532 4.51923 5.42094 4.11538ZM6.42536 9.31731C6.56057 9.18269 6.73441 9.125 6.92757 9.125C7.13038 9.125 7.30422 9.18269 7.43943 9.31731C7.57464 9.44231 7.64225 9.60577 7.64225 9.80769C7.64225 10.0096 7.56498 10.1731 7.42977 10.3077C7.29456 10.4327 7.12072 10.5 6.92757 10.5C6.73441 10.5 6.56057 10.4327 6.42536 10.2981C6.29015 10.1635 6.22254 10 6.22254 9.80769C6.22254 9.60577 6.29015 9.44231 6.42536 9.31731Z" fill="currentColor"/>
            </svg>
            <div class="tips-content">
              <div><span>1.&nbsp;</span>APP端绑定手机号：我的 - 账户绑定</div>
              <div><span>2.&nbsp;</span>网页登录，输入手机号，点击忘记密码，进行账号密码设置，登录账号</div>
            </div>
          </div>
          <button id="btn-login" type="submit" class="logging" :class="{'btn-signin': loginBtnDisabled}" 
          :disabled="loginBtnDisabled" @click="handlerLogin">登录</button>
          <div v-show="logging" class="loading"></div>
          <div class="register-now">
            <span>还没有帐号？</span>
            <span class="switch_signup">
              <a class="cursor-pointer" @click="handlerRegister">注册</a>
            </span>
          </div>
      </div>
    </div>
    <!-- 忘记密码 -->
    <div v-if="interfaceStatus === 'forgetPsw'" class="user-forget">
      <div class="changepwd-tittle">
        <p>找回账号密码</p>
      </div>
      <div class="getbackpwd_content relative">
        <div class="getbackpwd_input_user_span w-20px h-20px absolute top-30px left-34px"></div>
        <input v-model="forgetForm.account" class="getbackpwd_input_user account" type="text" placeholder="邮箱/手机号" @input="changeForgetPswErrTip">
        <!-- 用这个password接收密码 -->
        <input class="hidden" type="password">
        <br />
        <input v-model="forgetForm.code" class="getbackpwd_input_vcode" type="text" placeholder="验证码" @input="changeForgetPswErrTip">
        <img :src="codeImg" class="mt-10px cursor-pointer" @click="handleGetVcodeImage">
        <br />
        <div v-if=" !!forgetPswErrTip " class="error-mess">
          <span id="error-message error-tip">{{forgetPswErrTip}}</span>
        </div>
        <button id="btn-validate" type="submit" class="validate" :class="{'now_validate': forgetDisabled}" @click="handlerResetPsw">立即验证
        </button>
        <div v-show="logging" class="loading"></div>
      </div>
    </div>
    <!-- 重置手机密码 -->
    <div v-if="interfaceStatus === 'resetPhonePsw'" class="phone-reset">
      <div class="changepwd-tittle">
        <p>手机验证</p>
      </div>
      <div class="getbackpwd_content setnewpwd relative">
          <p class="phone_num mb-5px">{{forgetForm.account}}</p>
          <div class="mobilevali relative">
            <div class="getbackpwd_input_vcodes_span w-20px h-20px absolute top-30px left-34px"></div>
            <input v-model="resetForm.verifyCode" class="getbackpwd_input_vcodes input_vcode_conform " placeholder="验证码" type="text">  
            <span class="sent-vcode sent-vcode-getbackpwd" :class="{'sent-vcode-disabled': sending}" @click="handlePostCode"><a>{{sending ? clock+'秒' : '发送验证码'}}</a></span>
            <!-- 用这个password接收密码 -->
            <input class="hidden" type="password">
          </div>
          <br />
          <p class="mb-5px">设置新密码</p>
          <div class="getbackpwd_input_pwd_span w-20px h-20px absolute top-185px left-34px"></div>
          <input v-model="resetForm.newPassword" class="getbackpwd_input_pwd input_newpwd" type="password" value="" placeholder="新密码（6-16个字符，区分大小写）">
          <br />
          <div class="getbackpwd_input_pwd_span w-20px h-20px absolute top-245px left-34px"></div>
          <input v-model="resetForm.confirm_newPassword" class="getbackpwd_input_pwd input_newpwd_conform" type="password" placeholder="确认新密码">
          <br />
          <div v-if="resetPswTip !== ''" class="error-mess">
            <span id="error-message error-tip">{{resetPswTip}}</span>
          </div>
          <button id="btn-validate-conform" type="submit" class="validate" @click="handlerConfirmReset">确认
          </button>
          <div class="loading"></div>
      </div>
    </div>
    <!-- 重置邮箱密码 -->
    <div v-if="interfaceStatus === 'resetEmailPsw'" class="user-reset">
      <div class="changepwd-tittle">
          <p>邮箱验证</p>
        </div>
        <div class="prompt-content">
          <p>重置密码的链接已被发送到您的邮箱，请在30分钟内前往你的邮箱查收邮件以重置密码。</p>
        </div>
    </div>
  </div>
</template>


<style lang="scss">
.user-login {
  margin-top:35px;
  .logo {
    width: 96px;
    height: 96px;
    border-radius: 96px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: -48px;
    left: 50%;
    margin-left: -48px;
    .logo_PDF {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 8px;
      margin-left: 8px;
      background: url(http://cn-file.17pdf.com/website/index/logo_pdf.png) no-repeat 50%;
      background-size: 100%;
      }
    }
  .login_content {
    text-align: center;
    font-size: 14px;
    margin-top: -40px;
    .error-mess {
      position: relative;
      font-size: 14px;
      span{
        display: inline-block;
        background: #808080;
        color: rgb(255, 255, 255);
        padding: 5px 15px;
        border-radius: 4px;
      }
    }
    .error-mess-signup {
      position: initial;
      clear: both;
      margin-top: 15px;
    }
    // input:focus {
    //   outline: none;
    //   border-color: rgb(233, 54, 54);
    // }
    // input:checked{ 
    //   background: url(http://cn-file.17pdf.com/website/index/ic_checkbox_selected.png) no-repeat 0px 0px;
    // }
    .login_input_user {
      height: 60px;
      width: 360px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      outline:none;
      // background: url(http://cn-file.17pdf.com/website/account/ic_login_inputuser.png) no-repeat 0px 28px;
    }
    .login_input_user_span {
      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputuser.png) no-repeat;
    }
    .login_input_user:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset;
    }
    .login_input_password {
      height: 60px;
      width: 360px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      outline:none;
      // background:url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat 0px 28px;
    }
    .login_input_password_span{
      background:url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat
    }
    .login_input_password:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset;
    }
    .vcode_content {
      // display: none;
      padding: 0px 36px;
      height: 60px;
      .input_vcode_signup {
        height: 60px;
        width: 220px;
        border-width: 0 0 1px 0;
        border-color: rgb(238, 238, 238);
        padding-left: 42px;
        padding-top: 16px;
        line-height: 44px;
        float: left;
        background: url(http://cn-file.17pdf.com/website/account/ic_login_input_code.png) no-repeat 0px 28px;
        outline: none;
      }
      .sent-vcode-disabled {
        border: 1px solid rgb(153, 153, 153) !important;
        a {
          color: rgb(153, 153, 153) !important;
        }
      }
      .sent-vcode {
        border: 1px solid rgb(255, 79, 79);
        border-radius: 3px;
        padding: 10px 20px;
        margin-left: 10px; 
        cursor:pointer;
        margin-top: 10px;
        float: right;
        width: 120px;
        a {
          color: rgb(255, 79, 79);
        }
      }
    }
    
    .new {
      background: url(http://cn-file.17pdf.com/website/account/ic_lock_new.png) no-repeat 0px 28px;
    }
    .confirm {
      background: url(http://cn-file.17pdf.com/website/account/ic_lock_sure.png) no-repeat 0px 28px;
    }
    .forget-password {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 21px;
      padding: 0px 60px;
      font-size: 12px;
      color: rgb(102, 102, 102);
      input {
        margin: 0;
      }
      .left {
        display: flex;
        align-items: center;
        label{
          margin: 0 0 0 5px;
          color: rgb(153, 153, 153);
          font-weight: normal;
        }
      }
      .right {
        a {
          color: rgb(153, 153, 153);
          &:hover {
            text-decoration: none;
            color: rgb(255, 79, 79);
          }
        }
      }
    }
    .tips {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      color: #999999;
      margin-top: 30px;
      margin-bottom: 20px;
      cursor: default;
      svg {
        margin-left: 5px;
      }
      &:hover {
        .tips-content {
          display: block;
        }
        color: #FF4F4F;
      }
      .tips-content {
        display: none;
        position: absolute;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        width: 250px;
        padding: 15px 4px 25px 13px;
        background: url('~/assets/images/common/tip_bg.svg') center bottom no-repeat;
        border-radius: 4px;
        text-align: left;
        div {
          display: flex;
          font-size: 12px;
          line-height: 14px;
          color: #FFFFFF;
          & + div {
            margin-top: 9px;
          }
        }
      }
    }
    .logging {
      width: 360px;
      height: 48px;
      font-size: 16px;
      color: rgb(255, 255, 255);
      border: none;
      background-color: rgb(255, 79, 79);
      margin-bottom: 20px;
      border-radius: 4px;
      outline:none;
    }
    .btn-signup{
      background-color: rgb(204,204,204);
    }
    .btn-signin{
      background-color: rgb(204,204,204);
    }
    .login {
      background-color: rgb(204, 204, 204);
    }
    .loading {
      border: 3px solid #fff;
      border-bottom: 3px solid rgb(204, 204, 204);;
      height: 28px;
      width: 28px;
      border-radius: 50%;
      position: absolute;
      bottom: 50px;
      left: 350px;
      -webkit-animation: loading 1s infinite linear;
      -moz-animation: loading 1s infinite linear;
      -o-animation: loading 1s infinite linear;
      animation: loading 1s infinite linear;
      @keyframes loading {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }

    .register-now {
      margin-bottom: 10px;
      font-size: 12px;
      span {
        color: rgb(184, 184, 184);
      }
      a {
        color: rgb(233, 54, 54);
      }
    }
    .login-now {
      margin: 20px 0 30px 0;
      font-size: 12px;
      .term {
        padding-bottom: 6px;
      }
      span {
        color: rgb(184, 184, 184);
        line-height: 16px;
      }
      a {
        color: rgb(233, 54, 54);
      }
    }
  }
}
.user-forget{
  .changepwd-tittle {
      color: rgb(255, 79, 79);
      text-align: center;
      p {
        font-size: 20px;
      }
    }
  .getbackpwd_content {
    text-align: center;
    padding: 0px 35px;
    font-size: 14px;
    margin-top: 40px;
    .mobilevali{
      height: 85px;
    }
    &.setnewpwd p{
      font-size: 18px;
      text-align: left;
      height: 20px;
    }
    p {
      color: rgb(102, 102, 102);
      font-size: 24px;
    }
    .getbackpwd_input_user {
      height: 60px;
      width: 360px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      outline:none;
      // background: url(http://cn-file.17pdf.com/website/account/ic_login_inputuser.png) no-repeat 0px 28px;
    }
    .getbackpwd_input_user:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset;
    }
    .getbackpwd_input_user_span{
      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputuser.png) no-repeat
    }
    .getbackpwd_input_pwd {
      height: 60px;
      width: 360px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      outline:none;
      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat 0px 28px;
    }
    .getbackpwd_input_vcode {
      height: 60px;
      width: 220px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      float: left;
      outline:none;
      background: url(http://cn-file.17pdf.com/website/account/ic_login_input_code.png) no-repeat 0px 28px;
    }
    .sent-vcode {
      border: 1px solid rgb(255, 79, 79);
      border-radius: 3px;
      padding: 10px 20px;
      cursor:pointer;
      margin-left: 10px; 
      margin-top: 10px;
      float: right;
      width: 120px;
      a {
        color: rgb(255, 79, 79);
      }
    }
    .sent-vcode-disabled {
      border: 1px solid rgb(153, 153, 153);
      a {
        color: rgb(153, 153, 153);
      }
    }
    .vcode-content {
      float: right;
      padding: 15px 30px 15px 0px;
      display: inline-block;
      background: url(http://cn-file.17pdf.com/website/account/path.png) no-repeat 0px 28px;
      a{
        width: 90px;
        color: rgb(148, 143, 141);
        font-size: 20px;
        transform: rotate(-6deg);
        letter-spacing: 1px;
        display: inline-block;
        &:hover, &:active {
          text-decoration: none;
        }
      } 
    }
    .error-mess {
      position: relative;
      clear: both;
      top: 15px;
      span{
        background: #808080;
        color: rgb(255, 255, 255);
        padding: 5px 15px;
        border-radius: 4px;
      }
    }
    .validate {
      width: 360px;
      height: 48px;
      font-size: 16px;
      color: rgb(255, 255, 255);
      border: none;
      background-color: rgb(255,82,79);
      margin: 31px 0 10px 0;
      border-radius: 4px;
      outline:none;
    }
    .now_validate{
      background-color: rgb(204, 204, 204);
    }
  }
}
.phone-reset {
  .changepwd-tittle {
    color: rgb(255, 79, 79);
    text-align: center;
    p {
      font-size: 20px;
    }
  }
  .getbackpwd_content {
    text-align: center;
    font-size: 14px;
    .mobilevali{
      height: 85px;
      padding: 0 36px;
    }
    &.setnewpwd p{
      font-size: 18px;
      text-align: left;
      padding-left: 36px;
      height: 20px;
    }
    p {
      color: rgb(102, 102, 102);
      font-size: 24px;
    }
    .getbackpwd_input_user {
      height: 60px;
      width: 360px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      outline:none;
      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputuser.png) no-repeat 0px 28px;
    }
    .getbackpwd_input_pwd {
      height: 60px;
      width: 360px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      outline:none;
      // background: url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat 0px 28px;
    }
    .getbackpwd_input_pwd:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset;
    }
    .getbackpwd_input_pwd_span{
      background: url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png)
    }
    .getbackpwd_input_vcodes {
      height: 60px;
      width: 220px;
      border-width: 0 0 1px 0;
      border-color: rgb(238, 238, 238);
      padding-left: 42px;
      padding-top: 16px;
      line-height: 44px;
      float: left;
      outline:none;
      // background: url(http://cn-file.17pdf.com/website/account/ic_login_input_code.png) no-repeat 0px 28px;
    }
    .getbackpwd_input_vcodes:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset;
    }
    .getbackpwd_input_vcodes_span{
      background: url(http://cn-file.17pdf.com/website/account/ic_login_input_code.png) no-repeat
    }
    .sent-vcode {
      border: 1px solid rgb(255, 79, 79);
      border-radius: 3px;
      padding: 10px 20px;
      margin-left: 10px; 
      margin-top: 10px;
      cursor:pointer;
      float: right;
      width: 120px;
      a {
        color: rgb(255, 79, 79);
      }
    }
    .sent-vcode-disabled {
      border: 1px solid rgb(153, 153, 153);
      a {
        color: rgb(153, 153, 153);
      }
    }
    .vcode-content {
      float: right;
      padding: 15px 30px 15px 0px;
      display: inline-block;
      background: url(http://cn-file.17pdf.com/website/account/path.png) no-repeat 0px 28px;
      a{
        width: 90px;
        color: rgb(148, 143, 141);
        font-size: 20px;
        transform: rotate(-6deg);
        letter-spacing: 1px;
        display: inline-block;
        &:hover, &:active {
          text-decoration: none;
        }
      } 
    }
    .error-mess {
      position: relative;
      clear: both;
      top: 15px;
      span{
        background: #808080;
        color: rgb(255, 255, 255);
        padding: 5px 15px;
        border-radius: 4px;
      }
    }
    .validate {
      width: 360px;
      height: 48px;
      font-size: 16px;
      color: rgb(255, 255, 255);
      border: none;
      background-color: rgb(255,82,79);
      margin: 31px 0 40px 0;
      border-radius: 4px;
      outline:none;
    }
    .now_validate{
      background-color: rgb(204, 204, 204);
    }
  }
}
.user-reset {
  .changepwd-tittle {
      color: rgb(255, 79, 79);
      text-align: center;
      p {
        font-size: 20px;
      }
    }

    .prompt-content {
      margin-top: 30px;
      text-align: center;
      padding: 0px 50px;
      margin-bottom: 20px;
      font-size: 16px;
      p {
        color: rgb(112, 112, 112);
        line-height: 28px;
      }
      a {
        color: rgb(255, 79, 79);
        cursor:pointer;
      }
    }
}
</style>