vue-ptc/src/pages/password/index.vue

<template>
  <div class="p-password">
    <div v-if="step === 0" class="step">
      <h3 class="title">Recover password</h3>
      <div class="desc">
        We will send you an email for password reset. Please check it
      </div>
      <div class="ptc-form">
        <div class="ptc-form-item">
          <input class="ptc-input" placeholder="email address" />
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button" @click="next">NEXT</button>
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button ptc-button--stroke">BACK</button>
        </div>
      </div>
    </div>
    <div v-else-if="step === 1" class="step">
      <h3 class="title">Recover password</h3>
      <div class="desc">
        We will send you an email（ xxx@126.com ）The password reset email has
        been sent. Please go to check it
      </div>
      <div class="ptc-form">
        <div class="ptc-form-item">
          <button class="ptc-button" @click="next">GO</button>
        </div>
      </div>
    </div>
    <div v-if="step === 2" class="step">
      <h3 class="title">Recover password</h3>
      <div class="desc">
        Please set a new password for helloworld@gmail.com. It is recommended to
        use a combination of numbers, letters, and characters to improve the
        password security level
      </div>
      <div class="ptc-form">
        <div class="ptc-form-item">
          <input
            class="ptc-input"
            placeholder="6-20 digits password, case sensitive"
          />
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button" @click="next">SUBMIT</button>
        </div>
      </div>
    </div>
    <div v-else-if="step === 3" class="step">
      <i class="icon-success"></i>
      <h3 class="title tac">Password reset successfully</h3>
      <button class="ptc-button mgt96">TO LOG IN</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NavBar from '@/components/nav-bar/index.vue'

const router = useRouter()
const { query } = useRoute()
const step = ref(query.step ? +(query.step as string) : 0)

function next() {
  router.push({
    path: '',
    query: { step: ++step.value },
  })
}
</script>

<style lang="scss">
.p-password {
  .step {
    margin-top: 98px;
    padding: 0 80px;
  }

  .title {
    line-height: 56px;
    font-size: 40px;
    font-weight: 500;
    color: #333;
  }

  .desc {
    margin: 36px 0 64px;
    line-height: 44px;
    font-size: 32px;
    color: #333;
  }

  .icon-success {
    display: block;
    margin: 0 auto 32px;
    width: 96px;
    height: 96px;
    background: teal;
  }

  .mgt96 {
    margin-top: 96px;
  }
}
</style>