refactor(projects): 登录页面重新设计

This commit is contained in:
2026-06-12 22:42:23 +08:00
parent 6896a86130
commit 5061eced32
9 changed files with 891 additions and 98 deletions

View File

@@ -43,38 +43,60 @@ async function handleSubmit() {
</script>
<template>
<ElForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
<ElForm ref="formRef" :model="model" :rules="rules" size="large" @keyup.enter="handleSubmit">
<ElFormItem prop="phone">
<ElInput v-model="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
<ElInput v-model="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')">
<template #prefix>
<SvgIcon icon="mdi:cellphone" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="code">
<ElInput v-model="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
<ElInput v-model="model.code" :placeholder="$t('page.login.common.codePlaceholder')">
<template #prefix>
<SvgIcon icon="mdi:shield-check-outline" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="password">
<ElInput
v-model="model.password"
type="password"
show-password-on="click"
show-password
:placeholder="$t('page.login.common.passwordPlaceholder')"
/>
>
<template #prefix>
<SvgIcon icon="mdi:lock-outline" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem prop="confirmPassword">
<ElInput
v-model="model.confirmPassword"
type="password"
show-password-on="click"
show-password
:placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
/>
>
<template #prefix>
<SvgIcon icon="mdi:lock-check-outline" />
</template>
</ElInput>
</ElFormItem>
<ElSpace direction="vertical" fill :size="18" class="w-full">
<ElButton type="primary" size="large" round @click="handleSubmit">
{{ $t('common.confirm') }}
</ElButton>
<ElButton size="large" round @click="toggleLoginModule('pwd-login')">
{{ $t('page.login.common.back') }}
</ElButton>
</ElSpace>
<ElButton type="primary" size="large" class="login-submit-button" @click="handleSubmit">
{{ $t('common.confirm') }}
</ElButton>
<ElButton size="large" class="login-back-button" @click="toggleLoginModule('pwd-login')">
{{ $t('page.login.common.back') }}
</ElButton>
</ElForm>
</template>
<style scoped></style>
<style scoped>
.login-back-button {
width: 100%;
height: 44px;
margin-top: 14px;
margin-left: 0;
border-radius: 10px;
}
</style>