-
+
-
- {/* 中部标语 */}
-
-
-
- {t['login.banner.badge']}
+
+ OmniCard
+ AI
-
+
{t['login.banner.mainTitle']}
-
-
- {t['login.banner.mainSubTitle']}
- {/* 核心价值微卡片 */}
-
- {capabilityCards.map((card) => (
-
-
-
{card.icon}
-
- {card.metric}
-
-
-
{card.title}
-
{card.desc}
-
- ))}
-
-
- {/* 底部信任说明 */}
-
OmniCard Global Digital Identity Architecture · Multi-tenant Cloud
+
Global Digital Identity Platform · Multi-tenant Cloud
);
diff --git a/admin/src/pages/login/style/index.module.less b/admin/src/pages/login/style/index.module.less
index 8d99df9..9a797d8 100644
--- a/admin/src/pages/login/style/index.module.less
+++ b/admin/src/pages/login/style/index.module.less
@@ -28,14 +28,14 @@
.mobile-brand {
display: flex;
align-items: center;
- gap: 8px;
+ gap: 10px;
.logo-badge {
display: flex;
align-items: center;
justify-content: center;
- width: 28px;
- height: 28px;
+ width: 32px;
+ height: 32px;
.logo-svg {
width: 100%;
@@ -44,14 +44,14 @@
}
.brand-name {
- font-size: 16px;
+ font-size: 18px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--omni-color-text, #101828);
}
.brand-tag {
- font-size: 10px;
+ font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 2px 6px;
@@ -110,21 +110,21 @@
height: 100%;
}
-// 左侧品牌展板
+// 左侧品牌展板 (沉稳深空色,超大品牌Logo与纯粹留白)
.banner {
width: 520px;
- min-width: 500px;
+ min-width: 480px;
height: 100%;
background: #0b0d10;
border-right: 1px solid #1e293b;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: space-between;
position: relative;
- overflow-y: auto;
- padding: 48px;
+ overflow: hidden;
+ padding: 72px 64px 48px;
- // 瑞士精密微网格线 (微弱低调,无大面积霓虹渐变)
+ // 瑞士精密微弱网格底纹 (克制高级)
&::before {
content: '';
position: absolute;
@@ -132,55 +132,67 @@
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
- background-size: 36px 36px;
+ background-size: 40px 40px;
pointer-events: none;
}
&-inner {
position: relative;
z-index: 2;
+ height: 100%;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: space-between;
}
&-board {
+ height: 100%;
display: flex;
flex-direction: column;
+ justify-content: space-between;
+ }
+
+ // 大号品牌主视觉
+ .brand-hero {
+ margin-top: auto;
+ margin-bottom: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
gap: 24px;
}
- // 品牌标识
- .brand-identity {
+ .brand-logo-wrap {
+ width: 72px;
+ height: 72px;
display: flex;
align-items: center;
- gap: 10px;
+ justify-content: center;
- .logo-badge {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
-
- .logo-svg {
- width: 100%;
- height: 100%;
- }
+ .brand-logo-svg {
+ width: 100%;
+ height: 100%;
}
+ }
- .brand-name {
- font-size: 20px;
+ .brand-name-wrap {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+
+ .brand-main-name {
+ font-size: 44px;
font-weight: 700;
- letter-spacing: -0.02em;
- color: #f2f4f7;
+ letter-spacing: -0.03em;
+ color: #f8fafc;
+ line-height: 1.1;
}
- .brand-tag {
- font-size: 11px;
- font-weight: 600;
+ .brand-tag-badge {
+ font-size: 14px;
+ font-weight: 700;
line-height: 1;
- padding: 3px 6px;
+ padding: 4px 8px;
border-radius: 6px;
background: rgba(11, 92, 255, 0.2);
border: 1px solid rgba(11, 92, 255, 0.4);
@@ -189,115 +201,23 @@
}
}
- &-header {
- display: flex;
- flex-direction: column;
- gap: 10px;
- }
-
- &-badge {
- display: inline-flex;
- align-items: center;
- gap: 8px;
- width: fit-content;
- padding: 4px 10px;
- background: rgba(255, 255, 255, 0.06);
- border: 1px solid rgba(255, 255, 255, 0.12);
- border-radius: 9999px;
- font-size: 11px;
- font-weight: 600;
- letter-spacing: 0.06em;
- color: #94a3b8;
- text-transform: uppercase;
-
- &-dot {
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background-color: var(--omni-color-success, #12b76a);
- box-shadow: 0 0 6px rgba(18, 183, 106, 0.6);
- }
- }
-
- &-headline {
- margin: 0;
- font-size: 26px;
- font-weight: 600;
- line-height: 1.3;
- letter-spacing: -0.02em;
- color: #f8fafc;
- }
-
- &-description {
- margin: 0;
- font-size: 13px;
+ .brand-tagline {
+ margin: 4px 0 0;
+ font-size: 16px;
line-height: 1.6;
color: #94a3b8;
- }
-
- &-cards {
- display: flex;
- flex-direction: column;
- gap: 10px;
- }
-
- &-metric-card {
- background: #12151a;
- border: 1px solid #262b33;
- border-radius: 12px;
- padding: 14px 18px;
- transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 150ms ease;
-
- &:hover {
- border-color: #334155;
- transform: translateY(-1px);
- }
- }
-
- &-metric-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 4px;
- }
-
- &-metric-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #4d8dff;
- }
-
- &-metric-number {
- font-size: 15px;
- font-weight: 700;
- color: #f8fafc;
- letter-spacing: -0.01em;
- }
-
- &-metric-title {
- font-size: 13px;
- font-weight: 600;
- color: #e2e8f0;
- margin-bottom: 2px;
- }
-
- &-metric-desc {
- font-size: 12px;
- line-height: 1.4;
- color: #64748b;
+ max-width: 380px;
}
&-footer-note {
display: flex;
align-items: center;
- gap: 10px;
- font-size: 11px;
+ gap: 12px;
+ font-size: 12px;
color: #64748b;
- margin-top: 4px;
.banner-quote-line {
- width: 20px;
+ width: 24px;
height: 1px;
background: #334155;
}
diff --git a/admin/tests/login-page-ui.test.ts b/admin/tests/login-page-ui.test.ts
index bcb904a..5c76cb7 100644
--- a/admin/tests/login-page-ui.test.ts
+++ b/admin/tests/login-page-ui.test.ts
@@ -10,7 +10,7 @@ function read(rel: string): string {
return fs.readFileSync(path.join(adminRoot, rel), 'utf8');
}
-test('1. 登录表单样式必须大气宽适并符合设计规范', () => {
+test('1. 登录表单样式必须大气宽适并放大品牌Logo', () => {
const style = read('src/pages/login/style/index.module.less');
// 必须扩展表单宽度至 400px 以上,杜绝 320px 局促感
@@ -25,11 +25,23 @@ test('1. 登录表单样式必须大气宽适并符合设计规范', () => {
'交互元素必须包含 44px 触控尺寸'
);
+ // 品牌Logo尺寸必须显著加大(例如 56px 以上)
+ assert.ok(
+ /width:\s*(56|60|64|72|80)px/.test(style),
+ '品牌Logo尺寸必须显著加大更显大气'
+ );
+
+ // 品牌字号必须显著加大(例如 32px 以上)
+ assert.ok(
+ /font-size:\s*(32|36|40|44|48)px/.test(style),
+ '品牌名称字号必须放大'
+ );
+
// 严禁纯黑 #000
assert.ok(!style.includes('#000;'), '严禁使用纯黑 #000');
});
-test('2. 彻底去除模板化 AI 味与外部廉价插画', () => {
+test('2. 彻底去除多余卡片堆叠与模板化 AI 味', () => {
const banner = read('src/pages/login/banner.tsx');
// 彻底移除 byteimg 外部模板插画
@@ -38,10 +50,14 @@ test('2. 彻底去除模板化 AI 味与外部廉价插画', () => {
'严禁使用 Arco 外部模板图纸插画'
);
- // 必须包含 OmniCard 全球商务品牌核心能力(全球覆盖、访客雷达、安全合规)
+ // 去除多余的指标卡片堆叠(画蛇添足),聚焦大品牌展示
+ assert.ok(!banner.includes('banner-cards'), '去除多余的卡片堆叠,保持极致简约');
+ assert.ok(!banner.includes('banner-metric-card'), '去除指标微卡片');
+
+ // 必须包含 OmniCard 品牌主张
assert.ok(
- banner.includes('Global') || banner.includes('global') || banner.includes('Radar') || banner.includes('radar'),
- '左侧品牌看板必须包含全球商业与访客雷达相关能力陈列'
+ banner.includes('OmniCard'),
+ '左侧品牌看板必须聚焦 OmniCard 核心品牌'
);
// 严禁 emoji 作为图标