From 982c97ab82f3beb1b4febcf014562eda34b9fc05 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 29 九月 2026 17:59:41 +0800
Subject: [PATCH] feat(ui): 江苏商贸品牌视觉与首页/登录页改版
---
src/views/_core/authentication/login.vue | 265 +++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 236 insertions(+), 29 deletions(-)
diff --git a/src/views/_core/authentication/login.vue b/src/views/_core/authentication/login.vue
index 0d0f566..3e2356d 100644
--- a/src/views/_core/authentication/login.vue
+++ b/src/views/_core/authentication/login.vue
@@ -22,6 +22,9 @@
defineOptions({ name: 'Login' });
+// vite.config.ts 娉ㄥ叆鐨勫叕鍙� Logo 璺緞
+declare const __APP_LOGO__: string;
+
const authStore = useAuthStore();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
@@ -31,6 +34,12 @@
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[]>([]); // 绉熸埛鍒楄〃
@@ -107,25 +116,6 @@
const formSchema = computed((): VbenFormSchema[] => {
return [
- // {
- // component: 'VbenSelect',
- // componentProps: {
- // options: tenantList.value.map((item) => ({
- // label: item.name,
- // value: item.id.toString(),
- // })),
- // placeholder: $t('authentication.tenantTip'),
- // },
- // fieldName: 'tenantId',
- // label: $t('authentication.tenant'),
- // dependencies: {
- // triggerFields: ['tenantId'],
- // if: tenantEnable,
- // trigger(values) {
- // accessStore.setTenantId(values.tenantId ? Number(values.tenantId) : null);
- // },
- // },
- // },
{
component: 'VbenInput',
componentProps: {
@@ -155,7 +145,14 @@
</script>
<template>
- <div>
+ <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"
@@ -166,29 +163,39 @@
:show-register="false"
:show-forget-password="false"
:show-doc-link="false"
+ class="academic-login-form"
@submit="handleLogin"
>
+ <!-- 鑷畾涔夋爣棰橈細瑕嗙洊娆㈣繋璇� -->
+ <template #title>
+ <div class="academic-title-area">
+ <h3 class="academic-title">璐﹀彿鐧诲綍</h3>
+ <p class="academic-subtitle">{{ $t('authentication.loginSubtitle') }}</p>
+ </div>
+ </template>
+
+ <!-- 绗笁鏂圭櫥褰� -->
<template #third-party-login>
- <div class="mt-4">
- <div class="mb-4 flex items-center justify-between">
- <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
- <span class="text-center text-xs text-muted-foreground">
- 鍏朵粬鐧诲綍鏂瑰紡
- </span>
- <span class="w-[35%] border-b border-input dark:border-gray-600"></span>
+ <div class="academic-third-party">
+ <div class="academic-divider">
+ <span class="academic-divider-line"></span>
+ <span class="academic-divider-text">鍏朵粬鐧诲綍鏂瑰紡</span>
+ <span class="academic-divider-line"></span>
</div>
<VbenButton
- class="w-full"
+ class="academic-wxcp-btn"
variant="outline"
:loading="wxcpLoading"
@click="handleWxcpLogin"
>
- <SvgWeChatIcon class="mr-2 size-5" />
+ <SvgWeChatIcon class="mr-2 size-4" />
浼佷笟寰俊鐧诲綍
</VbenButton>
</div>
</template>
</AuthenticationLogin>
+
+ <!-- 楠岃瘉鐮侊紙婊戝潡鎷煎浘锛夛紝captchaEnable 鏃跺惎鐢� -->
<Verification
ref="verifyRef"
v-if="captchaEnable"
@@ -201,3 +208,203 @@
/>
</div>
</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
--
Gitblit v1.9.3