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,
        //大写提示
        bigChar: false,
        firstTochar: false,
        //登录页面小眼睛
        loginEyeShow: false,
        //登录页面小眼睛是否打开
        loginEyeOpen: 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");
      }
      // this.forgetForm.account = this.form.username
  },
  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();
          this.forgetForm.account = this.form.username;
      },
      // 手机号码发送验证码
      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 = "请输入正确的邮箱或手机号码";
              this.handleGetVcodeImage();
              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;
          // this.loginEyeShow = true
      },
      //不允许输入空格
      keydown(event) {
          if (event.keyCode == 32) {
              event.returnValue = false;
              this.resetPswTip = "请勿输入空格";
          }
      },
      changeErr(event,type) {
          this.resetPswTip = "";
          event.target.value = event.target.value.replace(/[^\x00-\xff]/g, '')
          if(type === "newPassword"){
            this.resetForm.newPassword = event.target.value
          }else{
            this.resetForm.confirm_newPassword = event.target.value
          }
      },
      //判断大写状态开启
      loginKeyDown(event) {
        event.target.value = event.target.value.replace(/[^\x00-\xff]/g, '')
        this.form.password = event.target.value
        //是否输入过字母键，且判断是否按键为caps lock
        // if (this.firstTochar) {
        //   if (event.keyCode === 20) {
        //     this.bigChar = !this.bigChar;
        //     return;
        //   }
        // } 
        //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
        let e = event || window.event;
        let keyvalue = e.keyCode ? e.keyCode : e.which;
        let shifKey = e.shiftKey ? e.shiftKey : keyvalue == 16 ? true : false;
        if (typeof this.form.password === "undefined") {
          return;
        }
        let strlen = this.form.password.length;
        let password = this.form.password;
  
        if (strlen) {
          let uniCode = password.charCodeAt(strlen - 1);
          if (keyvalue >= 65 && keyvalue <= 90) {
            //如果是字母键
            this.firstTochar = true;
            if (
              (uniCode >= 65 && uniCode <= 90 && !shifKey) 
              ||
              (uniCode >= 97 && uniCode <= 122 && shifKey)
            ) {
              this.bigChar = true;
            } else {
              this.bigChar = false;
            }
          }
        }
    },
      //展示登录页面小眼睛
      showLoginEye(type){
        if(type === 'focus'){
          setTimeout(() => {
            this.loginEyeShow = true
          }, 300);
          this.loginEyeOpen = false
        }else{
          setTimeout(() => {
            this.loginEyeShow = false
          }, 300);
          const loginInput = this.$refs.loginInput
          loginInput.type = 'password'
          this.bigChar =  false
          this.firstTochar = false
        }
      },
      //展示登录页面小眼睛打开
      showLoginEyeOpen(){
        const loginInput = this.$refs.loginInput
        const len = loginInput.value.length
        loginInput.focus()
        setTimeout(() => {
          loginInput.setSelectionRange(len,len)
        }, 0);
        loginInput.type = 'password'
        this.loginEyeOpen = false
      },
      //展示登录页面小眼睛关闭
      showLoginEyeClose(){
        const loginInput = this.$refs.loginInput
        const len = loginInput.value.length
        loginInput.focus()
        setTimeout(() => {
          loginInput.setSelectionRange(len,len)
        }, 0);
        loginInput.type = 'text'
        this.loginEyeOpen = true
      }
  },
}

</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" ref="loginInput" v-model="form.password" class="login_input_password pwd" type="password" placeholder="密码" 
          @input = "changeLoginTip" @keyup="loginKeyDown" @blur="showLoginEye('blue')" @focus="showLoginEye('focus')" @keydown.enter="handlerLogin">
          <div class="login_input_password_bigChar w-20px h-20px absolute top-90px" v-if="bigChar">
            <div class="login_input_password_bigChar_popover absolute w-72px h-40px text-[#fff] text-[12px]">大写锁定</div>
          </div>
          <div class="login_input_password_show_open w-20px h-20px absolute  cursor-pointer" v-show="loginEyeShow && loginEyeOpen" @click="showLoginEyeOpen"></div>
          <div class="login_input_password_show_close w-20px h-20px absolute  cursor-pointer" v-show="loginEyeShow && !loginEyeOpen" @click="showLoginEyeClose"></div>
          <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 class="w-14px text-12px leading-18px">1.&nbsp;</span>
                <span class="text-12px leading-18px"> 
                  APP端绑定手机号：我的-账号管理- 账号绑定
                </span>
              </div>
              <div>
                <span class="whitespace-nowrap w-14px text-12px leading-18px">2.&nbsp;</span>
                <span class="w-225px text-[12px] leading-18px">
                  网页登录，输入手机号，点击忘记密码,<br>进行账号密码设置，登录账号
                </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" @keydown.enter="handlerResetPsw">
        <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个字符，区分大小写）" @input="changeErr($event,'newPassword')" @keydown="keydown($event)" @keydown.enter="handlerConfirmReset">
          <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="确认新密码" @input="changeErr" @keydown="keydown($event)" @keydown.enter="handlerConfirmReset">
          <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;
    }
    .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;
    }
    .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;
    }
    .login_input_password_span{
      background:url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat
    }
    .login_input_password_bigChar{
      right: 60px;
      background:url(@/assets/images/password/password.png) no-repeat;
      .login_input_password_bigChar_popover{
        top: 20px;
        border-radius: 5px;
        border-top-left-radius: 9px; 
        border-top-right-radius: 9px; 
        padding-top: 15px;
        display: none;
        background: url('http://cn-file.17pdf.com/website/members/ic_tip.svg')
           no-repeat;
           background-size: auto 100%;
      }
      &:hover .login_input_password_bigChar_popover{
        display: block;
      }
    }
    .login_input_password_show_open{
      right: 35px;
      top: 90px;
      background: url(@/assets/images/password/passwordopen.png) no-repeat;
    }
    .login_input_password_show_close{
      right: 35px;
      top: 95px;
      background: url(@/assets/images/password/Union.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: 284px;
        height: 84px;
        padding-top: 12px;
        padding-bottom: 18px;
        padding-left: 10px;
        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: 18px;
          color: #FFFFFF;
        }
      }
    }
    .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;
    }
    .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 35px 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;
    }
    .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;
    }
    .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;
      }
    }
}
input[type="password"]::-ms-reveal{
			display: none;
		}
input[type="password"]::-ms-clear{
			display: none;
		}
input[type="password"]::-o-clear{
			display: none;
		}
</style>
<style scoped>
input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute; 
    right: 0;
}
input::-webkit-caps-lock-indicator{
  display: none !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute; 
    right: 0;
}
</style>