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/views/_core/authentication/login.vue | 244 +++++-------------------------------------------
1 files changed, 28 insertions(+), 216 deletions(-)
diff --git a/src/views/_core/authentication/login.vue b/src/views/_core/authentication/login.vue
index f78f508..90d4140 100644
--- a/src/views/_core/authentication/login.vue
+++ b/src/views/_core/authentication/login.vue
@@ -22,9 +22,6 @@
defineOptions({ name: 'Login' });
-// vite.config.ts 娉ㄥ叆鐨勫叕鍙� Logo 璺緞
-declare const __APP_LOGO__: string;
-
const authStore = useAuthStore();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
@@ -34,12 +31,6 @@
const verifyRef = ref();
const captchaType = 'blockPuzzle'; // 楠岃瘉鐮佺被鍨嬶細'blockPuzzle' | 'clickWord'
-
-/** 搴旂敤鏍囬锛堢櫥褰曢〉鍝佺墝鏂囧瓧锛� */
-const appTitle = import.meta.env.VITE_APP_TITLE || '姹熻嫃鍟嗚锤';
-
-/** 鍝佺墝寰芥爣锛氬鐢� vite 娉ㄥ叆鐨勫叕鍙� Logo锛岀己鐪佸洖钀藉埌鍐呯疆鍥炬爣 */
-const brandLogo = __APP_LOGO__ || '/logos/JSSM.svg';
/** 鑾峰彇绉熸埛鍒楄〃 */
const tenantList = ref<AuthApi.TenantResult[]>([]); // 绉熸埛鍒楄〃
@@ -123,8 +114,11 @@
{
component: 'VbenInput',
componentProps: {
+ autocomplete: 'username',
placeholder: $t('authentication.usernameTip'),
},
+ hideLabel: false,
+ labelWidth: 44,
fieldName: 'username',
label: $t('authentication.username'),
rules: z
@@ -135,8 +129,11 @@
{
component: 'VbenInputPassword',
componentProps: {
+ autocomplete: 'current-password',
placeholder: $t('authentication.passwordTip'),
},
+ hideLabel: false,
+ labelWidth: 44,
fieldName: 'password',
label: $t('authentication.password'),
rules: z
@@ -150,13 +147,6 @@
<template>
<div class="academic-login-wrapper">
- <!-- 椤堕儴鍝佺墝鏍囪瘑锛氬窘鏍� + 骞冲彴鍚� + 閲戣壊鍒嗛殧绾� -->
- <div class="academic-login-header">
- <img :alt="appTitle" :src="brandLogo" class="academic-brand-logo" />
- <h2 class="academic-brand-name">{{ appTitle }}</h2>
- <div class="academic-decoration-line"></div>
- </div>
-
<AuthenticationLogin
ref="loginRef"
:form-schema="formSchema"
@@ -173,8 +163,8 @@
<!-- 鑷畾涔夋爣棰橈細瑕嗙洊娆㈣繋璇� -->
<template #title>
<div class="academic-title-area">
- <h3 class="academic-title">璐﹀彿鐧诲綍</h3>
- <p class="academic-subtitle">{{ $t('authentication.loginSubtitle') }}</p>
+ <h2 class="academic-title">璐﹀彿鐧诲綍</h2>
+ <p class="academic-subtitle">娆㈣繋鍥炴潵锛岃浣跨敤鎮ㄧ殑璐﹀彿鐧诲綍</p>
</div>
</template>
@@ -214,201 +204,23 @@
</template>
<style scoped>
-/* ========== 瀛︽湳绉戠爺椋庢牸鐧诲綍椤垫牱寮� ========== */
-.academic-login-wrapper {
- @apply relative flex flex-col w-full;
- min-height: 460px;
-}
-
-/* ---- 椤堕儴鍝佺墝鏍囪瘑 ---- */
-.academic-login-header {
- @apply flex flex-col items-center mb-8;
-}
-
-.academic-brand-logo {
- width: 52px;
- height: 52px;
- margin-bottom: 16px;
- filter: drop-shadow(0 3px 10px rgba(15, 36, 64, 0.14));
-}
-
-.academic-brand-name {
- font-size: 19px;
- font-weight: 600;
- letter-spacing: 5px;
- /* 鏈瓧鍙充晶浼氬鍑轰竴浠藉瓧璺濓紝鐢ㄧ瓑閲忕缉杩涙姷娑堬紝瑙嗚鎵嶇湡姝ｅ眳涓� */
- text-indent: 5px;
- color: #0f2440;
- margin: 0 0 14px;
-}
-
-.academic-decoration-line {
- position: relative;
- width: 58px;
- height: 2px;
- background: linear-gradient(
- 90deg,
- transparent,
- #d4af37 32%,
- #d4af37 68%,
- transparent
- );
- border-radius: 2px;
-}
-
-/* 閲戠嚎涓ぎ鐨勮彵褰㈢偣缂� */
-.academic-decoration-line::after {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 6px;
- height: 6px;
- background: #d4af37;
- border-radius: 1px;
- transform: translate(-50%, -50%) rotate(45deg);
-}
-
-/* ---- 鑷畾涔夋爣棰� ---- */
-.academic-title-area {
- @apply text-left mb-6;
-}
-
-.academic-title {
- font-size: 26px;
- font-weight: 600;
- color: #0f2440;
- letter-spacing: 2px;
- margin: 0 0 8px 0;
- line-height: 1.35;
-}
-
-.academic-subtitle {
- font-size: 13.5px;
- color: #8a94a6;
- margin: 0;
- letter-spacing: 0.3px;
-}
-
-/* ---- 瑕嗙洊榛樿鏍囬 ---- */
-:deep(.academic-login-form .mb-7) {
- display: none;
-}
-
-/* ---- 杈撳叆妗嗭細鏆栫櫧搴� + 閲戣壊鑱氱劍 ---- */
-:deep(.academic-login-form .vben-input) {
- border-radius: 8px;
- border-color: #e6e2d8;
- background: #fdfcfa;
- transition: all 0.25s ease;
- height: 48px;
-}
-
-:deep(.academic-login-form .vben-input:hover) {
- border-color: #c9b77a;
-}
-
-:deep(.academic-login-form .vben-input:focus-within) {
- border-color: #d4af37;
- background: #fff;
- box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
-}
-
-/* ---- 鐧诲綍鎸夐挳锛氳棌闈掓笎鍙� + 閲戣壊鎻忚竟涓庢枃瀛� ---- */
-:deep(.academic-login-form .w-full > button),
-:deep(.academic-login-form button[aria-label="login"]) {
- height: 48px;
- border-radius: 8px;
- background: linear-gradient(135deg, #1e4571, #0f2440) !important;
- border: 1px solid rgba(212, 175, 55, 0.45) !important;
- font-size: 15px;
- font-weight: 600;
- letter-spacing: 6px;
- text-indent: 6px;
- box-shadow: 0 6px 18px rgba(15, 36, 64, 0.22);
- transition: all 0.3s ease;
- color: #f5e7c0 !important;
-}
-
-/* 鎮仠鍙姞娣辨弿杈逛笌鎶曞奖锛屼笉鍋氫綅绉伙紝淇濇寔鍏嬪埗 */
-:deep(.academic-login-form .w-full > button:hover),
-:deep(.academic-login-form button[aria-label="login"]:hover) {
- box-shadow:
- 0 8px 22px rgba(15, 36, 64, 0.26),
- 0 0 0 1px rgba(212, 175, 55, 0.6);
-}
-
-:deep(.academic-login-form .w-full > button:active),
-:deep(.academic-login-form button[aria-label="login"]:active) {
- box-shadow: 0 3px 12px rgba(15, 36, 64, 0.24);
-}
-
-/* ---- 璁颁綇璐﹀彿 / 蹇樿瀵嗙爜 ---- */
-:deep(.academic-login-form .vben-link) {
- color: #b8901f;
- font-weight: 500;
- transition: color 0.2s;
-}
-
-:deep(.academic-login-form .vben-link:hover) {
- color: #8a6a12;
-}
-
-/* ---- 绗笁鏂圭櫥褰� ---- */
-.academic-third-party {
- @apply mt-5;
-}
-
-.academic-divider {
- @apply flex items-center gap-3 mb-4;
-}
-
-.academic-divider-line {
- flex: 1;
- height: 1px;
- background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
-}
-
-.academic-divider-text {
- @apply text-xs;
- color: #94a3b8;
- white-space: nowrap;
- letter-spacing: 0.5px;
-}
-
-.academic-wxcp-btn {
- @apply w-full rounded-lg;
- height: 44px;
- border-color: #e6e2d8;
- color: #44546a;
- font-weight: 500;
- transition: all 0.3s;
-}
-
-.academic-wxcp-btn:hover {
- border-color: #d4af37;
- color: #0f2440;
- background: rgba(212, 175, 55, 0.06);
-}
-
-/* ---- 鏆楄壊閫傞厤 ---- */
-:root.dark .academic-title {
- color: #f0ead8;
-}
-
-:root.dark .academic-brand-name {
- color: #f0ead8;
-}
-
-:root.dark .academic-subtitle {
- color: #8a94a6;
-}
-
-:root.dark .academic-decoration-line {
- background: linear-gradient(90deg, #8bb4f0, #4a7ad4);
-}
-
-:root.dark .academic-footer-text {
- color: #64748b;
-}
-</style>
\ No newline at end of file
+.academic-login-wrapper { width: 100%; }
+.academic-title-area { margin-bottom: 28px; }
+.academic-title { margin: 0 0 10px; color: #18365a; font-size: 26px; font-weight: 750; line-height: 1.4; }
+.academic-subtitle { margin: 0; color: #5c7187; font-size: 13px; line-height: 1.7; }
+:deep(.academic-login-form label) { color: #294d70; font-size: 13px; font-weight: 600; }
+:deep(.academic-login-form input:not([type=checkbox])) { min-height: 46px; border-radius: 6px; border-color: #d6e1ec; background: #f8fbfe; color: #18365a; font-size: 14px; }
+:deep(.academic-login-form input::placeholder) { color: #5c7187; }
+:deep(.academic-login-form input:focus-visible) { border-color: #3476b5; outline-color: #3476b5; background: #fff; }
+:deep(.academic-login-form button[aria-label=login]) { height: 46px; border: 0; border-radius: 6px; color: #fff; background: #b7242d; font-size: 15px; font-weight: 650; letter-spacing: .16em; box-shadow: 0 4px 12px rgb(150 30 40 / 12%); }
+:deep(.academic-login-form button[aria-label=login]:hover) { background: #9f1d27; }
+:deep(.academic-login-form button[aria-label=login]:disabled) { opacity: .65; cursor: wait; }
+:deep(.academic-login-form .vben-link) { color: #28659d; }
+.academic-third-party { margin-top: 24px; }
+.academic-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.academic-divider-line { height: 1px; flex: 1; background: #e4ecf3; }
+.academic-divider-text { color: #5c7187; font-size: 12px; white-space: nowrap; }
+.academic-wxcp-btn { width: 100%; height: 44px; border: 1px solid #d8e4ee; border-radius: 6px; color: #315777; background: #fff; font-size: 13px; }
+.academic-wxcp-btn:hover { border-color: #8cb5d5; background: #f3f8fc; }
+:deep(button:focus-visible) { outline: 2px solid #2c70b2; outline-offset: 3px; }
+</style>
--
Gitblit v1.9.3