<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 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>
