update

src/pages/forgotPassword/index.vue

@@ -1,11 +1,57 @@
 <script setup>
+import {reactive} from "vue";
+import XNav from "../../components/XNav.vue";
+import XLink from "../../components/XLink.vue";
+import XInput from "../../components/XInput.vue";
 
+const form = reactive({
+    phone: null,
+    verificationCode: null,
+    password: null,
+});
 </script>
 
 <template>
     <!--忘记密码-->
+    <XNav></XNav>
+
+    <view class="relative !px-[36rpx]">
+        <view class="!mt-[56rpx]">
+            <view class="title">修改密码</view>
+            <view class="title-desc">请完成验证后，设置新密码</view>
+        </view>
+
+        <view class="!flex flex-col gap-[56rpx] !mt-[60rpx]">
+            <x-input v-model:model-value="form.phone" placeholder="请输入手机号"></x-input>
+            <x-input v-model:model-value="form.verificationCode" placeholder="验证码">
+                <template #suffix>
+                    <x-link>发送验证码</x-link>
+                </template>
+            </x-input>
+            <x-input v-model:model-value="form.phone" placeholder="请输入密码"></x-input>
+
+            <tui-button>确定修改</tui-button>
+        </view>
+    </view>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 26px;
+    font-weight: 700;
+    line-height: 28px;
+    letter-spacing: 0;
+    text-align: left;
+}
 
+.title-desc {
+    margin-top: 16rpx;
+    color: rgb(78, 89, 105);
+    font-size: 28rpx;
+    font-weight: 400;
+    line-height: 56rpx;
+    letter-spacing: 0;
+    text-align: left;
+}
 </style>