seewe/hsl-ui
1
0
Fork 0
mirror of https://gitee.com/nicefold/seewis-soybean-plus.git synced 2026-10-14 03:52:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xlsea
2025-09-01 17:05:42 +08:00
parent f9afd27f4b
commit 75cc0e4592
8 changed files with 93 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/langs/en-us.ts
+2
View File
@@ -367,6 +367,8 @@ const local: App.I18n.Schema = {
page: {
login: {
common: {
title: 'Modern enterprise-level multi-tenant management system',
subTitle: 'Provides developers with a complete enterprise management solution',
loginOrRegister: 'Login / Register',
register: 'Register',
userNamePlaceholder: 'Please enter user name',
src/locales/langs/zh-cn.ts
+2
View File
@@ -364,6 +364,8 @@ const local: App.I18n.Schema = {
page: {
login: {
common: {
title: '现代化的企业级多租户管理系统',
subTitle: '为开发者提供了完整的企业管理解决方案',
loginOrRegister: '登录 / 注册',
register: '注册',
userNamePlaceholder: '请输入用户名',
src/typings/app.d.ts
Vendored
+2
View File
@@ -529,6 +529,8 @@ declare namespace App {
};
login: {
common: {
title: string;
subTitle: string;
loginOrRegister: string;
register: string;
userNamePlaceholder: string;
src/views/_builtin/login/index.vue
+21 -17
View File
@@ -39,20 +39,27 @@ const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);
</script>
<template>
<div class="relative min-h-screen w-full flex flex-wrap">
<div class="hidden min-h-screen w-50% bg-primary-100 lg:block dark:bg-primary-800">
<div class="size-full flex-center">
<img class="w-60% sm:w-80%" :src="loginBackground" />
<div class="box-border size-full flex">
<div class="relative box-border hidden h-full w-65vw overflow-hidden bg-primary-50 xl:block dark:bg-primary-900">
<div class="relative z-100 flex items-center pl-30px pt-30px">
<SystemLogo class="text-32px text-primary" />
<h3 class="ml-10px text-20px font-400">{{ $t('system.title') }}</h3>
</div>
<div class="absolute inset-x-0 inset-b-10.5% inset-t-0 z-10 m-auto w-40%">
<img class="size-full" :src="loginBackground" />
</div>
<div class="absolute bottom-80px w-full text-center">
<h1 class="text-24px font-400">{{ $t('page.login.common.title') }}</h1>
<p class="mt-8px text-14px color-gray-500">{{ $t('page.login.common.subTitle') }}</p>
</div>
</div>
<div class="w-full flex-col-center px-24px py-32px lg:w-50%">
<div class="mx-auto max-w-464px w-full">
<header class="flex-y-center justify-between">
<div class="flex-y-center gap-16px">
<SystemLogo class="text-30px text-primary sm:text-42px" />
<h3 class="text-24px text-primary font-500 sm:text-32px">{{ $t('system.title') }}</h3>
<header class="relative h-full flex-1 xl:m-auto sm:!w-full">
<div class="relative z-100 block flex items-center pl-30px pt-30px xl:hidden">
<SystemLogo class="text-32px text-primary" />
<h3 class="ml-10px text-20px font-400">{{ $t('system.title') }}</h3>
</div>
<div class="flex-y-center">
<div class="position-fixed right-30px top-24px z-100 flex items-center justify-end">
<div class="ml-15px inline-block flex cursor-pointer select-none p-5px">
<ThemeSchemaSwitch
:theme-schema="themeStore.themeScheme"
:show-tooltip="false"
@@ -68,16 +75,13 @@ const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);
@change-lang="appStore.changeLocale"
/>
</div>
</header>
<main class="pt-24px">
<div>
</div>
<main class="absolute inset-0 m-auto h-630px max-w-450px w-full overflow-hidden rounded-5px bg-cover px-24px">
<Transition :name="themeStore.page.animateMode" mode="out-in" appear>
<component :is="activeModule.component" />
</Transition>
</div>
</main>
</div>
</div>
</header>
</div>
</template>
src/views/_builtin/login/modules/code-login.vue
+26 -5
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>
src/views/_builtin/login/modules/pwd-login.vue
+10 -10
View File
@@ -124,8 +124,8 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
<template>
<div>
<div class="mb-12px text-24px text-black font-500 sm:text-30px dark:text-white">登录到您的账户</div>
<div class="pb-24px text-18px text-#858585">欢迎回来！请输入您的账户信息</div>
<div class="mb-5px text-32px text-black font-600 dark:text-white">登录到您的账户</div>
<div class="pb-18px text-16px text-#858585">欢迎回来！请输入您的账户信息</div>
<NForm
ref="formRef"
:model="model"
@@ -156,16 +156,16 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
<NFormItem v-if="captchaEnabled" path="code">
<div class="w-full flex-y-center gap-16px">
<NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
<NSpin :show="codeLoading" :size="28" class="h-52px">
<NButton :focusable="false" class="login-code h-52px w-136px" @click="handleFetchCaptchaCode">
<NSpin :show="codeLoading" :size="28" class="h-42px">
<NButton :focusable="false" class="login-code h-42px w-136px" @click="handleFetchCaptchaCode">
<img v-if="codeUrl" :src="codeUrl" />
<NEmpty v-else :show-icon="false" description="暂无验证码" />
</NButton>
</NSpin>
</div>
</NFormItem>
<NSpace vertical :size="16" class="mb-8px">
<div class="mx-6px mb-10px flex-y-center justify-between">
<NSpace vertical :size="12" class="mb-8px">
<div class="mx-6px mb-8px flex-y-center justify-between">
<NCheckbox v-model:checked="remberMe" size="large">{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
<NA type="primary" class="text-18px" @click="toggleLoginModule('reset-pwd')">
{{ $t('page.login.pwdLogin.forgetPassword') }}
@@ -199,7 +199,7 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
</NButton>
</div>
<div class="mt-32px w-full text-center text-18px text-#858585">
<div class="mt-24px w-full text-center text-18px text-#858585">
您还没有账户？
<NA type="primary" class="text-18px" @click="toggleLoginModule('register')">
{{ $t('page.login.common.register') }}
@@ -216,13 +216,13 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
}
img {
height: 52px;
height: 42px;
}
}
:deep(.n-base-selection),
:deep(.n-input) {
--n-height: 52px !important;
--n-height: 42px !important;
--n-font-size: 16px !important;
--n-border-radius: 8px !important;
}
@@ -237,7 +237,7 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
}
:deep(.n-button) {
--n-height: 52px !important;
--n-height: 42px !important;
--n-font-size: 18px !important;
--n-border-radius: 8px !important;
}
src/views/_builtin/login/modules/register.vue
+6 -6
View File
@@ -104,8 +104,8 @@ handleFetchCaptchaCode();
<template>
<div>
<div class="mb-12px text-24px text-black font-500 sm:text-30px dark:text-white">注册新账户</div>
<div class="pb-24px text-18px text-#858585">欢迎注册！请输入您的账户信息</div>
<div class="mb-5px text-32px text-black font-600 sm:text-30px dark:text-white">注册新账户</div>
<div class="pb-18px text-16px text-#858585">欢迎注册！请输入您的账户信息</div>
<NForm
ref="formRef"
:model="model"
@@ -147,14 +147,14 @@ handleFetchCaptchaCode();
</NSpin>
</div>
</NFormItem>
<NSpace vertical :size="18" class="w-full pt-6px">
<NSpace vertical :size="18" class="w-full">
<NButton type="primary" size="large" block :loading="registerLoading" @click="handleSubmit">
{{ $t('page.login.common.register') }}
</NButton>
</NSpace>
</NForm>
<div class="mt-32px w-full text-center text-18px text-#858585">
<div class="mt-24px w-full text-center text-18px text-#858585">
您已有账户？
<NA type="primary" class="text-18px" @click="toggleLoginModule('pwd-login')">
{{ $t('common.login') }}
@@ -177,7 +177,7 @@ handleFetchCaptchaCode();
:deep(.n-base-selection),
:deep(.n-input) {
--n-height: 52px !important;
--n-height: 42px !important;
--n-font-size: 16px !important;
--n-border-radius: 8px !important;
}
@@ -187,7 +187,7 @@ handleFetchCaptchaCode();
}
:deep(.n-button) {
--n-height: 52px !important;
--n-height: 42px !important;
--n-font-size: 18px !important;
--n-border-radius: 8px !important;
}
src/views/_builtin/login/modules/reset-pwd.vue
+5 -5
View File
@@ -46,10 +46,10 @@ async function handleSubmit() {
<template>
<div>
<div class="mb-12px text-24px text-black font-500 sm:text-30px dark:text-white">
<div class="mb-5px text-32px text-black font-600 sm:text-30px dark:text-white">
{{ $t('page.login.resetPwd.title') }}
</div>
<div class="pb-24px text-18px text-#858585">请输入您的手机号，我们将发送验证码到您的手机</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')" />
@@ -73,7 +73,7 @@ async function handleSubmit() {
:placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
/>
</NFormItem>
<NSpace vertical :size="18" class="w-full">
<NSpace vertical :size="20" class="w-full">
<NButton type="primary" size="large" block @click="handleSubmit">
{{ $t('page.login.resetPwd.title') }}
</NButton>
@@ -88,7 +88,7 @@ async function handleSubmit() {
<style scoped>
:deep(.n-base-selection),
:deep(.n-input) {
--n-height: 52px !important;
--n-height: 42px !important;
--n-font-size: 16px !important;
--n-border-radius: 8px !important;
}
@@ -98,7 +98,7 @@ async function handleSubmit() {
}
:deep(.n-button) {
--n-height: 52px !important;
--n-height: 42px !important;
--n-font-size: 18px !important;
--n-border-radius: 8px !important;
}