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

<template>
  <div class="p-password">
    <div class="header">
      <i class="logo"></i>
    </div>
    <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="step++">NEXT</button>
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button ptc-button--strok">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="step++">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="step++">SUBMIT</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const { query } = useRoute()
const step = ref(query.step ? +(query.step as string) : 0)
</script>

<style lang="scss">
.p-password {
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 116px;
    border-bottom: 1px solid #d9d9d9;
    .logo {
      width: 160px;
      height: 88px;
      background: #efefef;
    }
  }

  .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;
  }
}
</style>