feat(projects): 重构登录页面样式

This commit is contained in:
xlsea
2025-09-02 14:49:58 +08:00
parent e230b0da81
commit 8412a8db16
10 changed files with 608 additions and 112 deletions

View File

@ -40,6 +40,10 @@ async function handleSubmit() {
</script>
<template>
<div class="mb-5px text-32px text-black font-600 sm:text-30px dark:text-white">
{{ $t('page.login.codeLogin.title') }}
</div>
<div class="pb-18px text-16px text-#858585">请输入您的手机号我们将发送验证码到您的手机</div>
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
<NFormItem path="phone">
<NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
@ -52,15 +56,32 @@ async function handleSubmit() {
</NButton>
</div>
</NFormItem>
<NSpace vertical :size="18" class="w-full">
<NButton type="primary" size="large" round block @click="handleSubmit">
{{ $t('common.confirm') }}
<NSpace vertical :size="20" class="w-full">
<NButton type="primary" size="large" block @click="handleSubmit">
{{ $t('page.login.codeLogin.title') }}
</NButton>
<NButton size="large" round block @click="toggleLoginModule('pwd-login')">
<NButton size="large" block @click="toggleLoginModule('pwd-login')">
{{ $t('page.login.common.back') }}
</NButton>
</NSpace>
</NForm>
</template>
<style scoped></style>
<style scoped>
:deep(.n-base-selection),
:deep(.n-input) {
--n-height: 42px !important;
--n-font-size: 16px !important;
--n-border-radius: 8px !important;
}
:deep(.n-base-selection-label) {
padding: 0 6px !important;
}
:deep(.n-button) {
--n-height: 42px !important;
--n-font-size: 18px !important;
--n-border-radius: 8px !important;
}
</style>