90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
|
<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>
|