找回密码完善

postcss.config.js

@@ -5,7 +5,7 @@ module.exports = {
         return /[\\/]node_modules[\\/]vant/.test(input.file) ? 37.5 : 75
       },
       propList: ['*', '!filter'],
-      minPixelValue: 3,
+      minPixelValue: 2,
     },
   },
 }

src/App.vue

@@ -1,3 +1,3 @@
 <template>
-  <router-view />
+  <router-view :key="$route.fullPath" />
 </template>

src/pages/password/index.vue

@@ -13,10 +13,10 @@
           <input class="ptc-input" placeholder="email address" />
         </div>
         <div class="ptc-form-item">
-          <button class="ptc-button" @click="step++">NEXT</button>
+          <button class="ptc-button" @click="next">NEXT</button>
         </div>
         <div class="ptc-form-item">
-          <button class="ptc-button ptc-button--strok">BACK</button>
+          <button class="ptc-button ptc-button--stroke">BACK</button>
         </div>
       </div>
     </div>
@@ -28,7 +28,7 @@
       </div>
       <div class="ptc-form">
         <div class="ptc-form-item">
-          <button class="ptc-button" @click="step++">GO</button>
+          <button class="ptc-button" @click="next">GO</button>
         </div>
       </div>
     </div>
@@ -47,19 +47,32 @@
           />
         </div>
         <div class="ptc-form-item">
-          <button class="ptc-button" @click="step++">SUBMIT</button>
+          <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 } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
+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">
@@ -95,5 +108,17 @@ const step = ref(query.step ? +(query.step as string) : 0)
     font-size: 32px;
     color: #333;
   }
+
+  .icon-success {
+    display: block;
+    margin: 0 auto 32px;
+    width: 96px;
+    height: 96px;
+    background: teal;
+  }
+
+  .mgt96 {
+    margin-top: 96px;
+  }
 }
 </style>

src/pages/register/index.vue

@@ -9,11 +9,7 @@
           <input class="ptc-input" placeholder="email address" />
         </div>
         <div class="ptc-form-item">
-          <input
-            class="ptc-input"
-            type="password"
-            placeholder="password"
-          />
+          <input class="ptc-input" type="password" placeholder="password" />
         </div>
         <div class="ptc-form-item">
           <button class="ptc-button">CONTINUE</button>

src/style/atom.scss

@@ -0,0 +1,3 @@
+.tac {
+  text-align: center;
+}

src/style/components.scss

@@ -7,7 +7,7 @@
   font-weight: 600;
   color: #fff;
 
-  &--strok {
+  &--stroke {
     background: none;
     border: 2Px solid $primary-color;
     color: $primary-color;

src/style/index.js

@@ -1,3 +1,4 @@
 import './normalize.scss'
+import './atom.scss'
 import './components.scss'
 import './login.scss'