diff --git a/admin/src/pages/login/banner.tsx b/admin/src/pages/login/banner.tsx index 72056d0..142a695 100644 --- a/admin/src/pages/login/banner.tsx +++ b/admin/src/pages/login/banner.tsx @@ -7,120 +7,24 @@ import styles from './style/index.module.less'; export default function LoginBanner() { const t = useLocale(locale); - const capabilityCards = [ - { - key: 'global', - title: t['login.banner.card1.title'], - metric: t['login.banner.card1.metric'], - desc: t['login.banner.card1.desc'], - icon: ( - - ), - }, - { - key: 'radar', - title: t['login.banner.card2.title'], - metric: t['login.banner.card2.metric'], - desc: t['login.banner.card2.desc'], - icon: ( - - ), - }, - { - key: 'shield', - title: t['login.banner.card3.title'], - metric: t['login.banner.card3.metric'], - desc: t['login.banner.card3.desc'], - icon: ( - - ), - }, - ]; - return (
- {/* 顶部品牌 */} -
-
- +
+
+
- OmniCard - AI -
- - {/* 中部标语 */} -
-
- - {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 作为图标