feat: 忘记密码页面

src/views/login/ResetPage.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="login-page">
+    <!-- 主要内容区域 -->
+    <div class="content">
+      <!-- 返回按钮 -->
+      <div class="back-button" @click="goBack">
+        <img src="@/assets/images/arrow_left.png" class="back-icon" />
+      </div>
+
+      <!-- 标题区域 -->
+      <div class="header">
+        <div class="title">Log in.</div>
+        <p class="subtitle">Redefine the styling experience with AI.</p>
+        <p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
+      </div>
+
+      <div class="login-container">
+        <div class="login-form">
+          <Mail v-if="step === 'mail'" @nextStep="mailData => handleStep('verify', mailData)" />
+          <Verify
+            :email="email"
+            v-else-if="step === 'verify'"
+            :ct="emailCode"
+            @nextStep="handleStep('password')"
+          />
+          <Password v-else-if="step === 'password'" @sucess="handleSuccess"/>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer">
+      <p>Powered by AiDLab for Lane Crawford</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import Mail from './components/Mail.vue'
+import Verify from './components/Verify.vue'
+import Password from './components/Password.vue'
+
+const router = useRouter()
+const step = ref<'mail' | 'verify' | 'password'>('mail')
+const emailCode = ref(['', '', '', '', ''])
+const email = ref('')
+
+// 加载状态
+const isLoading = ref(false)
+
+// 返回上一页
+const goBack = () => {
+  router.go(-1)
+}
+
+const handleStep = (type: 'mail' | 'verify' | 'password', data?: any) => {
+  if (step.value === 'mail') {
+    email.value = data.email
+  }
+  step.value = type
+}
+
+const handleSuccess = () => {
+  router.push('/login')
+}
+
+</script>
+
+<style scoped lang="less">
+.login-page {
+  position: relative;
+  color: #fff;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-image: url('@/assets/images/login_bg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding-top: 12rem;
+  font-family: 'satoshiRegular';
+}
+
+.back-button {
+  // position: absolute;
+  // top: 2rem;
+  // left: 2rem;
+  margin-top: 2.4rem;
+  margin-left: 6.1rem;
+  width: 2rem;
+  height: 3.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 3;
+  font-size: 3.4rem;
+  .back-icon {
+    width: 2.83rem;
+    height: 3.47rem;
+  }
+}
+
+.header {
+  margin-top: 1.42rem;
+  padding-left: 15.5rem;
+  color: white;
+  font-family: 'satoshiRegular';
+  .title {
+    font-size: 11rem;
+    font-weight: bold;
+    margin-bottom: 0.8rem;
+    color: white;
+    font-family: 'satoshiBold';
+  }
+
+  .subtitle {
+    font-size: 3rem;
+    color: white;
+    font-weight: 400;
+    line-height: 141%;
+    letter-spacing: 0.08rem;
+  }
+}
+
+.content {
+  position: relative;
+  // z-index: 2;
+  flex: 1;
+}
+
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 7.2rem;
+  .login-form {
+    position: relative;
+    width: calc(100% - 28.4rem);
+    height: 107.8rem;
+    background: radial-gradient(
+      100% 100% at 0% 0%,
+      rgba(115, 115, 115, 0.4) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    backdrop-filter: blur(35px);
+    border: 2px solid rgba(255, 255, 255, 0.15);
+    border-radius: 4.79rem;
+    padding: 6.8rem 5.9rem 6.2rem 7.18rem;
+    box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    border: 2px solid #fff;
+    font-size: 3.83rem;
+  }
+}
+
+.footer {
+  position: relative;
+  text-align: center;
+  color: white;
+  font-size: 3rem;
+  margin-bottom: 15.5rem;
+}
+</style>