xinkeaboard/xinkeaboard-web/components/retrieve/RetrieveSuccess.vue

<template>
  <div class="register-success">
    <div class="register-success-content">
      <img src="/register/success.png" />
      <div class="register-success-title">
        {{ L["register"]["重置成功"] }}
      </div>
      <div class="register-success-tip">
        <span>{{ L["register"]["重置成功"] }}</span>
        <span>{{ L["register"]["s内跳转到登录页"] }}</span>
        <span class="register-success-tip__seconds">{{ countDownM }}</span>
        <span>{{ L["register"]["秒"] }}</span>
      </div>
    </div>
    <div class="register-success-bottom">
      <el-button @click="goLogin">{{ L["register"]["立即登录"] }}</el-button>
    </div>
  </div>
</template>

<script setup>
import { getCurLanguage } from "@/composables/common.js";
import { useRouter } from "vue-router";

const L = getCurLanguage();
const router = useRouter();

const countDownM = ref(6);
const timeOutId = ref(""); //定时器的返回值

const goLogin = () => {
  router.replace({
    path: "/login",
  });
};

//倒计时
const countDown = () => {
  countDownM.value--;
  if (countDownM.value == 0) {
    clearTimeout(timeOutId.value);
    goLogin()
  } else {
    timeOutId.value = setTimeout(countDown, 1000);
  }
};

countDown();

</script>

<style lang="scss" scoped>
.register-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 20px;

  &-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 431px;
    height: 268px;
    margin-bottom: 100px;
  }

  img {
    width: 88px;
    height: 88px;
  }

  &-title {
    font-weight: bold;
    font-size: 32px;
    color: #282e30;
    margin: 30px 0 20px 0;
  }

  &-tip {
    width: 80%;
    font-weight: 400;
    font-size: 14px;
    color: rgba(40, 46, 48, 0.6);
    text-align: center;

    &__seconds {
      color: $colorMain
    }
  }

  &-bottom {
    width: 100%;
    :deep(.el-button) {
      width: 100%;
      height: 46px;
      background-color: $colorMain;
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      // margin-top: 100px;
    }
  }
}
</style>