不啰嗦直接上代码

1、有使用全局的class名，请忽略或修改；
2、有本人自定的接口名称，请忽略或修改；
3、SlideAssembly 登录滑块，无需要请忽略，有需要，在下方链接自取；
https://www.jianshu.com/p/2cb40676d71b

  <template>
  <div class="login">
    <div class="right" v-if="active == 1">
      <h2>用户登录</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="formSty demo-ruleForm"
      >
        <el-form-item prop="phone">
          <input
            class="inputSty"
            v-model="ruleForm.phone"
            placeholder="请输入账号"
            :onkeyup="check(ruleForm.phone)"
          />
        </el-form-item>
        <el-form-item prop="password">
          <input
            class="inputSty"
            type="password"
            v-model="ruleForm.password"
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-form>
      <!-- 登录滑块 -->
      <SlideAssembly
        class="slide"
        :successFun="successFun"
        :errorFun="errorFun"
        v-if="SlideAssemblyOk"
      ></SlideAssembly>
      <div class="loginBtn" @click="loginPhone('ruleForm')">
        登录
        <!-- <img class="banner" src="@/assets/images/loginbtn.png" alt="" /> -->
      </div>
      <div style="position: relative">
        <el-button
          style="
            position: absolute;
            bottom: -67px;
            right: 15px;
            border: 1px solid rgb(47, 169, 253);
            padding: 6px;
          "
          type="text"
          @click="active = 2"
          >忘记密码</el-button
        >
      </div>
    </div>
    <div class="right" v-if="active == 2">
      <h2>修改密码</h2>
      <el-form :model="setForm" ref="ruleForm" class="formSty demo-ruleForm">
        <el-form-item>
          <input
            class="inputSty"
            v-model="setForm.tel"
            placeholder="请输入手机号"
            :onkeyup="check2(setForm.tel)"
          />
        </el-form-item>
        <el-form-item>
          <div class="df" style="justify-content: center">
            <input
              class="inputSty"
              style="width: 220px"
              v-model="setForm.code"
              placeholder="请输入验证码"
            />
            <div>
              <el-button
                type="warning"
                @click="setBtn(1)"
                v-if="show"
                class="yanzhengBtn"
                >获取验证码</el-button
              >
              <el-button type="warning" v-if="!show" class="yanzhengBtn"
                >{{ count }}s后重新获取</el-button
              >
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <input
            class="inputSty"
            :type="showpass1 ? 'password' : 'text'"
            v-model="setForm.new_password"
            placeholder="新密码(6~16位字母/数字/符号)"
            maxlength="16"
            :onkeyup="check3(setForm.new_password)"
          />
          <i class="el-icon-view iconsty" @click="eyscli(1)"></i>
        </el-form-item>
        <el-form-item>
          <input
            class="inputSty"
            :type="showpass2 ? 'password' : 'text'"
            v-model="setForm.confirm_password"
            placeholder="确认密码(6~16位字母/数字/符号)"
            maxlength="16"
            :onkeyup="check4(setForm.confirm_password)"
          />
          <i class="el-icon-view iconsty" @click="eyscli(2)"></i>
        </el-form-item>
      </el-form>

      <div class="setBtns" @click="setBtn(2)">修改密码</div>
      <div style="position: relative">
        <el-button
          style="
            position: absolute;
            bottom: -67px;
            right: 15px;
            border: 1px solid rgb(47, 169, 253);
            padding: 6px;
          "
          type="text"
          @click="active = 1"
          >返回登录</el-button
        >
      </div>
    </div>
  </div>
</template>

//js文件
import { login, forgetPassword, sendCode } from "@/api/common";
export default {
  data() {
    return {
      active: 1,
      ruleForm: {
        phone: "",
        password: "",
        status: false,
      },
      SlideAssemblyOk: true,
      rules: {
        phone: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 5,
            max: 18,
            message: "请输入5~18位的正确账号",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "请输入正确密码", trigger: "blur" },
        ],
      },
      setForm: {
        tel: "",
        code: "",
        new_password: "",
        confirm_password: "",
      },
      show: true,
      count: "",
      timer: null,
      showpass1: true,
      showpass2: true,
    };
  },
  created() {
    let that = this;
    document.addEventListener("keydown", that.watchEnter);
  },
  methods: {
    //监听电脑回车键
    watchEnter(e) {
      //获取被按下的键值
      let keyNum = window.event ? e.keyCode : e.which;
      //判断如果用户按下了回车键（keycody=13）
      if (keyNum == 13) {
        this.loginPhone("ruleForm");
      }
    },
    check(str) {
      var temp = "";
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
          temp += str.charAt(i);
        }
      }
      this.ruleForm.phone = temp.replace(/\s*/g, "");
    },
    check2(str) {
      var temp = "";
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
          temp += str.charAt(i);
        }
      }
      this.setForm.tel = temp.replace(/\s*/g, "");
    },
    check3(str) {
      var temp = "";
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
          temp += str.charAt(i);
        }
      }
      this.setForm.new_password = temp.replace(/\s*/g, "");
    },
    check4(str) {
      var temp = "";
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255) {
          temp += str.charAt(i);
        }
      }
      this.setForm.confirm_password = temp.replace(/\s*/g, "");
    },
    // 登陆
    loginPhone(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.ruleForm.status) {
            this.$message.error("请先完成滑块验证");
            return;
          }
          let param = {
            account: this.ruleForm.phone,
            password: this.ruleForm.password,
          };
          login(param)
            .then((res) => {
              let user = res.data.data;
              localStorage.setItem("userInfo", JSON.stringify(user));
              setTimeout(() => {
                location.reload();
              }, 1000);
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },
    // 登录滑块成功
    successFun(data) {
      this.ruleForm.status = true;
    },
    // 登录滑块失败
    errorFun(data) {
      this.ruleForm.status = false;
    },
    // 开启倒计时
    getCode() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码/修改密码
    setBtn(val) {
      if (val == 1) {
        if (this.setForm.tel) {
          sendCode({ tel: this.setForm.tel }).then((res) => {
            this.$message.success("验证码已发送！");
            this.getCode();
          });
        } else {
          this.$message.info("请输入正确手机号码！");
        }
      }
      if (val == 2) {
        if (!this.setForm.tel) {
          this.$message.info("请输入正确手机号码！");
          return;
        }
        if (!this.setForm.code) {
          this.$message.info("请输入正确验证码！");
          return;
        }
        if (
          !this.setForm.new_password ||
          this.setForm.new_password.length < 6
        ) {
          this.$message.info("请输入新密码！");
          return;
        }
        if (
          !this.setForm.confirm_password ||
          this.setForm.confirm_password != this.setForm.new_password
        ) {
          this.$message.info("请输入正确密码！");
          return;
        }
        forgetPassword(this.setForm).then((res) => {
          this.$message.success("修改成功");
          setTimeout(() => {
            this.ruleForm = {
              phone: this.setForm.tel,
              password: this.setForm.new_password,
              status: true,
            };
            this.loginPhone("ruleForm");
          }, 500);
        });
      }
    },
    eyscli(val) {
      if (val == 1) {
        this.showpass1 = !this.showpass1;
      }
      if (val == 2) {
        this.showpass2 = !this.showpass2;
      }
    },
  },
};

//scss文件
//scss文件
.login {
  min-width: 922px;
  width: 100%;
  height: 100vh;
  position: relative;

  .left {
    width: 100%;
    height: 100%;
    position: relative;

    h1 {
      position: absolute;
      top: 9%;
      left: 6%;
      font-size: 28px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(50, 75, 88, 1);
    }

    .banner {
      position: absolute;
      top: 18%;
      left: 15%;
    }

    .bg {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    position: absolute;
    top: 17%;
    right: 20%;
    width: 400px;
    padding: 50px 20px 80px 20px;
    box-sizing: border-box;
    width: 410px;
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    box-shadow: 0 2px 18px 0 rgba(229, 233, 239, 1);

    h2 {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: normal;
      color: rgba(51, 51, 51, 1);
      margin-left: 10px;
    }

    .formSty {
      margin-top: 30px;
      text-align: center;

      .inputSty {
        text-indent: 15px;
        border: 1px solid #f2f7fd;
        width: 338px;
        height: 54px;
        color: #111a38;
        background: #f2f7fd;
        border-radius: 10px;

        &:focus {
          outline: none;
          border: 1px solid #1d7cff;
        }
      }
    }

    .slide {
      border-radius: 10px;
      margin-bottom: 15px;
      margin-top: 20px;
      padding: 0 13px;
    }

    .loginBtn {
      height: 48px;
      margin: 20px 12px 0;
      cursor: pointer;
      text-align: center;
      background: linear-gradient(-38deg, rgba(36, 95, 244, 1) 0%, rgba(36, 163, 244, 1) 100%);
      line-height: 48px;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
    }

    .setBtns {
      height: 50px;
      width: 90%;
      background: #278ffc;
      margin: 0 auto;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      padding: 0 8px;
      cursor: pointer;
    }
  }
}

/deep/.el-form-item__error {
  left: 5%;
}
.df{
  display: flex;
}
.yanzhengBtn {
  width: 100px;
  padding: 15px 0;
  margin-top: 7px;
  margin-left: 17px;
}

.iconsty {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 18px;
  color: #999;
  cursor: pointer;
}