重置密码适配

src/App.vue

@@ -41,7 +41,7 @@ const navBarIgnore = ['/login', '/register']
 const showNavBar = computed(() => !navBarIgnore.includes(route.path))
 
 watch(
-  () => route.fullPath,
+  () => route.path,
   () => (state.bgWhite = false)
 )
 </script>

src/pages/password/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-password">
-    <div v-if="step === 0" class="step">
+    <div v-if="step === 0" class="step ptc-inner">
       <h3 class="title">Recover password</h3>
       <div class="desc">
         We will send you an email for password reset. Please check it
@@ -17,7 +17,7 @@
         </div>
       </div>
     </div>
-    <div v-else-if="step === 1" class="step">
+    <div v-else-if="step === 1" class="step ptc-inner">
       <h3 class="title">Recover password</h3>
       <div class="desc">
         We will send you an email（ xxx@126.com ）The password reset email has
@@ -29,7 +29,7 @@
         </div>
       </div>
     </div>
-    <div v-if="step === 2" class="step">
+    <div v-if="step === 2" class="step ptc-inner">
       <h3 class="title">Recover password</h3>
       <div class="desc">
         Please set a new password for helloworld@gmail.com. It is recommended to
@@ -48,7 +48,7 @@
         </div>
       </div>
     </div>
-    <div v-else-if="step === 3" class="step">
+    <div v-else-if="step === 3" class="step ptc-inner">
       <i class="icon-success"></i>
       <h3 class="title tac">Password reset successfully</h3>
       <button class="ptc-button mgt96" @click="$router.push('/login')">
@@ -61,12 +61,15 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { state } from '@/store'
 import NavBar from '@/components/nav-bar/index.vue'
 
 const router = useRouter()
 const { query } = useRoute()
 const step = ref(query.step ? +(query.step as string) : 0)
 
+state.bgWhite = true
+
 function next() {
   router.push({
     path: '',
@@ -79,7 +82,10 @@ function next() {
 .p-password {
   .step {
     margin-top: 98px;
-    padding: 0 80px;
+    padding: 0 76px;
+    @include media-breakpoint-up(lg) {
+      min-height: 1084px - 98px;
+    }
   }
 
   .title {