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

2025-09-24 07:49:47 +08:00 · 2025-09-02 14:49:58 +08:00
parent e230b0da81
commit 8412a8db16
10 changed files with 608 additions and 112 deletions
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@ -39,45 +39,51 @@ 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" />
+  <!-- Copyright By https://github.com/Daymychen/art-design-pro/blob/main/src/components/core/views/login/LoginLeftView.vue -->
+  <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>
-    <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>
-          </div>
-          <div class="flex-y-center">
-            <ThemeSchemaSwitch
-              :theme-schema="themeStore.themeScheme"
-              :show-tooltip="false"
-              class="text-20px lt-sm:text-18px"
-              @switch="themeStore.toggleThemeScheme"
-            />
-            <LangSwitch
-              v-if="themeStore.header.multilingual.visible"
-              :lang="appStore.locale"
-              :lang-options="appStore.localeOptions"
-              :show-tooltip="false"
-              class="text-20px lt-sm:text-18px"
-              @change-lang="appStore.changeLocale"
-            />
-          </div>
-        </header>
-        <main class="pt-24px">
-          <div>
-            <Transition :name="themeStore.page.animateMode" mode="out-in" appear>
-              <component :is="activeModule.component" />
-            </Transition>
-          </div>
-        </main>
+      <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>
+      <WaveBg />
    </div>
+    <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="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"
+            class="text-20px lt-sm:text-18px"
+            @switch="themeStore.toggleThemeScheme"
+          />
+          <LangSwitch
+            v-if="themeStore.header.multilingual.visible"
+            :lang="appStore.locale"
+            :lang-options="appStore.localeOptions"
+            :show-tooltip="false"
+            class="text-20px lt-sm:text-18px"
+            @change-lang="appStore.changeLocale"
+          />
+        </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>
+      </main>
+    </header>
  </div>
 </template>

--- a/src/views/_builtin/login/modules/code-login.vue
+++ b/src/views/_builtin/login/modules/code-login.vue
@ -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>
--- a/src/views/_builtin/login/modules/pwd-login.vue
+++ b/src/views/_builtin/login/modules/pwd-login.vue
@ -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;
 }
--- a/src/views/_builtin/login/modules/register.vue
+++ b/src/views/_builtin/login/modules/register.vue
@ -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;
 }
--- a/src/views/_builtin/login/modules/reset-pwd.vue
+++ b/src/views/_builtin/login/modules/reset-pwd.vue
@ -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;
 }