update

src/pages/login/Forgot.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {ref, reactive} from 'vue';
+import VerificationCode from "../../components/VerificationCode/index.vue";
+
+const from = reactive({
+    phone: null,
+    verificationCode: null,
+    password: null,
+});
+</script>
+
+<template>
+    <div class="p-[50px] rounded-[12px] bg-white w-[460px] min-h-[540px] box-border card">
+        <div class="text-[24px] text-center text2">忘记密码</div>
+        <div class="mt-[48px] flex flex-col gap-[20px]">
+            <a-form layout="vertical">
+                <a-form-item>
+                    <a-input v-model:model-value="from.phone" placeholder="手机号"></a-input>
+                </a-form-item>
+                <a-form-item>
+                    <VerificationCode
+                        :phone="from.phone"
+                        v-model:verification-code="from.verificationCode">
+                    </VerificationCode>
+                </a-form-item>
+                <a-form-item>
+                    <a-input v-model:model-value="from.password" placeholder="新密码"></a-input>
+                </a-form-item>
+            </a-form>
+        </div>
+        <div class="flex flex-col mt-[30px] gap-[32px]">
+            <a-button type="primary">确认修改</a-button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.card {
+    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
+    :deep(.arco-form-item-label-col) {
+        line-height: 20px;
+    }
+}
+
+.text2 {
+    color: rgb(29, 33, 41);
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 32px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.text1 {
+    /* 14/CN-Regular */
+    color: rgb(78, 89, 105);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+    cursor: pointer;
+    transition: 500ms;
+
+    &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: rgb(22, 93, 255);
+        margin-top: 12px;
+        opacity: 0;
+        transition: 500ms;
+    }
+}
+
+.text1-cur {
+    color: rgb(22, 93, 255);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+
+    &::after {
+        opacity: 1;
+    }
+}
+</style>