From 91bfcf61f44f353dfebc54a57b5b774721de3e9a Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期一, 19 十月 2026 09:39:22 +0800
Subject: [PATCH] feat(auth): 更新门户认证页面布局和样式
---
src/layouts/auth.vue | 77 ++++++++++++++++++++++++++++++--------
1 files changed, 61 insertions(+), 16 deletions(-)
diff --git a/src/layouts/auth.vue b/src/layouts/auth.vue
index 51dc083..8e07a13 100644
--- a/src/layouts/auth.vue
+++ b/src/layouts/auth.vue
@@ -1,11 +1,11 @@
<script lang="ts" setup>
import { computed, onMounted } from 'vue';
-import { AuthPageLayout } from '@vben/layouts';
+import { IconifyIcon } from '@vben/icons';
import { preferences } from '@vben/preferences';
-import { $t } from '#/locales';
import { useCompanyConfigStore } from '#/store/company-config';
+import PortalBrandText from '#/components/portal/portal-brand-text.vue';
declare const __APP_LOGO__: string;
@@ -19,21 +19,66 @@
const appName = computed(() => preferences.copyright.companyName);
// 鐧诲綍椤� logo 浼樺厛鍙栨暟鎹簱閰嶇疆锛坧references.logo.source锛夛紝鏈厤缃椂鍥為��缂栬瘧鏈熼粯璁� __APP_LOGO__
const logo = computed(() => preferences.logo.source || __APP_LOGO__);
-const logoDark = computed(() => preferences.logo.sourceDark);
-// 鐧诲綍椤垫爣棰�/鎻忚堪浣跨敤 i18n 鍥哄畾鏂囨锛屼笉闅忓叕鍙搁厤缃彉鍖�
-const pageTitle = computed(() => $t('authentication.pageTitle'));
-const pageDescription = computed(() => $t('authentication.pageDesc'));
+const pageTitle = computed(() => companyConfigStore.loginTitle || '鏈嶅姟渚涢攢鍚堜綔锛屽姪鍔涗埂鏉戞尟鍏�');
+const pageDescription = computed(() => companyConfigStore.loginDescription || '杩炴帴璇鹃鐮旂┒銆佸鎵瑰崗浣滀笌鏃ュ父涓氬姟锛岃姣忎竴椤瑰伐浣滄湁搴忔帹杩涖��');
</script>
<template>
- <AuthPageLayout
- :app-name="appName"
- :logo="logo"
- :logo-dark="logoDark"
- :page-description="pageDescription"
- :page-title="pageTitle"
- >
- <!-- 鑷畾涔夊伐鍏锋爮 -->
- <!-- <template #toolbar></template> -->
- </AuthPageLayout>
+ <div class="portal-auth">
+ <header class="auth-masthead">
+ <div class="auth-brand">
+ <img :src="logo" :alt="appName" />
+ <PortalBrandText />
+ </div>
+ <span class="auth-motto">寮�鏀惧崗浣� 路 渚挎嵎鏈嶅姟 路 楂樻晥鍔炵悊</span>
+ </header>
+ <main class="auth-main">
+ <div class="auth-landscape" aria-hidden="true"></div>
+ <div class="auth-content">
+ <section class="auth-intro" aria-labelledby="auth-heading">
+ <h1 id="auth-heading">{{ pageTitle }}</h1>
+ <p>{{ pageDescription }}</p>
+ <div class="auth-services">
+ <div><IconifyIcon icon="lucide:workflow" /><strong>瀹℃壒鍗忓悓</strong><span>娴佺▼鍔炵悊 路 寰呭姙璺熻繘</span></div>
+ <div><IconifyIcon icon="lucide:book-open-text" /><strong>璇鹃绠＄悊</strong><span>鎸囧崡鏌ヨ 路 璇鹃鐢虫姤</span></div>
+ <div><IconifyIcon icon="lucide:megaphone" /><strong>淇℃伅浜掗��</strong><span>閫氱煡鍏憡 路 娑堟伅鎻愰啋</span></div>
+ </div>
+ </section>
+ <section class="auth-form-panel" aria-label="韬唤璁よ瘉">
+ <RouterView v-slot="{ Component, route }">
+ <KeepAlive :include="['Login']">
+ <component :is="Component" :key="route.path" />
+ </KeepAlive>
+ </RouterView>
+ </section>
+ </div>
+ </main>
+ <footer class="auth-footer"><span>{{ appName }}</span><span>寤鸿浣跨敤鏈�鏂扮増 Chrome 鎴� Edge 娴忚鍣�</span></footer>
+ </div>
</template>
+
+<style scoped>
+.portal-auth { --background: 0 0% 100%; --foreground: 213 51% 23%; --muted-foreground: 213 19% 43%; --input-background: 210 75% 99%; --input: 211 29% 81%; --border: 211 37% 89%; display: flex; min-height: 100dvh; flex-direction: column; color-scheme: light; color: #18365a; background: #f5f9fd; }
+.auth-masthead { display: flex; width: 100%; min-height: 120px; align-items: center; justify-content: space-between; gap: 24px; padding: 20px max(4vw, calc((100vw - 1280px) / 2)); border-top: 20px solid #d9ecfb; background: #fff; }
+.auth-brand { display: flex; min-width: 0; align-items: center; gap: 16px; }
+.auth-brand img { width: 56px; height: 56px; object-fit: contain; }
+.auth-motto { color: #426689; font-size: 14px; letter-spacing: .12em; white-space: nowrap; }
+.auth-main { position: relative; display: flex; min-height: 650px; flex: 1; align-items: center; overflow: hidden; background: #e3f0f9; }
+.auth-landscape { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(247 251 255 / 90%), rgb(247 251 255 / 55%) 46%, rgb(247 251 255 / 8%) 75%), url('/static/imgs/portal-hero-v2.png') center 58% / cover; }
+.auth-content { position: relative; display: grid; width: min(1320px, 90%); grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: 8%; margin: 52px auto 68px; }
+.auth-intro { align-self: start; max-width: 680px; padding-top: 56px; }
+.auth-intro h1 { max-width: 13em; margin: 0 0 22px; color: #a91e28; font-family: 'KaiTi', 'STKaiti', serif; font-size: clamp(34px, 3.8vw, 54px); font-weight: 800; letter-spacing: .045em; line-height: 1.4; text-wrap: balance; }
+.auth-intro > p { max-width: 32em; margin: 0; color: #294e73; font-size: 17px; line-height: 1.9; }
+.auth-services { display: flex; gap: 32px; margin-top: 42px; }
+.auth-services > div { display: grid; gap: 7px; }
+.auth-services :deep(svg) { width: 25px; height: 25px; margin-bottom: 3px; color: #28689b; }
+.auth-services strong { font-size: 15px; }
+.auth-services span { color: #4c6c88; font-size: 12px; white-space: nowrap; }
+.auth-form-panel { position: relative; padding: 38px 38px 30px; border-radius: 12px; background: #fff; box-shadow: 0 18px 56px rgb(24 62 98 / 15%); }
+.auth-form-panel::before { position: absolute; top: 0; right: 38px; left: 38px; height: 3px; background: #b7242d; content: ''; }
+.auth-footer { display: flex; min-height: 64px; align-items: center; justify-content: center; gap: 28px; padding: 16px 24px; color: #5c7187; background: #fff; font-size: 12px; }
+@media (max-width: 1100px) { .auth-content { grid-template-columns: minmax(0, 1fr) 390px; gap: 5%; } .auth-services { gap: 20px; } .auth-services span { white-space: normal; } .auth-form-panel { padding: 32px; } }
+@media (max-width: 850px) { .auth-masthead { min-height: 90px; padding: 18px 6%; } .auth-motto { display: none; } .auth-content { width: min(460px, 90%); grid-template-columns: 1fr; gap: 25px; margin: 30px auto 42px; } .auth-intro { padding-top: 0; } .auth-intro h1 { margin-bottom: 10px; font-size: 32px; } .auth-intro > p { font-size: 14px; } .auth-services { display: none; } .auth-main { min-height: 0; } .auth-footer { flex-direction: column; gap: 5px; } .auth-landscape { background-position: 35% center; } }
+@media (max-width: 420px) { .auth-form-panel { padding: 28px 24px; } .auth-brand strong { font-size: 22px; } .auth-brand img { width: 46px; height: 46px; } }
+@media (max-width: 850px) { .auth-brand :deep(.shell-brand-main) { gap: 10px; }.auth-brand :deep(.shell-brand strong) { max-width: calc(100vw - 120px); font-size: 18px; white-space: normal; }.auth-brand :deep(.shell-brand em) { display: none; }.auth-brand :deep(.shell-brand small) { font-size: 8px; letter-spacing: 0; } }
+</style>
--
Gitblit v1.9.3