style(login): 去除冗余卡片堆叠，大幅提升品牌Logo与名称视觉分量，极致简约留白
这个提交包含在：
wikiboss
@@ -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: (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="2" y1="12" x2="22" y2="12" />
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'radar',
|
||||
title: t['login.banner.card2.title'],
|
||||
metric: t['login.banner.card2.metric'],
|
||||
desc: t['login.banner.card2.desc'],
|
||||
icon: (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="2" />
|
||||
<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'shield',
|
||||
title: t['login.banner.card3.title'],
|
||||
metric: t['login.banner.card3.metric'],
|
||||
desc: t['login.banner.card3.desc'],
|
||||
icon: (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles['banner-board']}>
|
||||
{/* 顶部品牌 */}
|
||||
<div className={styles['brand-identity']}>
|
||||
<div className={styles['logo-badge']}>
|
||||
<Logo className={styles['logo-svg']} />
|
||||
<div className={styles['brand-hero']}>
|
||||
<div className={styles['brand-logo-wrap']}>
|
||||
<Logo className={styles['brand-logo-svg']} />
|
||||
</div>
|
||||
<span className={styles['brand-name']}>OmniCard</span>
|
||||
<span className={styles['brand-tag']}>AI</span>
|
||||
</div>
|
||||
|
||||
{/* 中部标语 */}
|
||||
<div className={styles['banner-header']}>
|
||||
<div className={styles['banner-badge']}>
|
||||
<span className={styles['banner-badge-dot']} />
|
||||
{t['login.banner.badge']}
|
||||
<div className={styles['brand-name-wrap']}>
|
||||
<span className={styles['brand-main-name']}>OmniCard</span>
|
||||
<span className={styles['brand-tag-badge']}>AI</span>
|
||||
</div>
|
||||
<h1 className={styles['banner-headline']}>
|
||||
<p className={styles['brand-tagline']}>
|
||||
{t['login.banner.mainTitle']}
|
||||
</h1>
|
||||
<p className={styles['banner-description']}>
|
||||
{t['login.banner.mainSubTitle']}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 核心价值微卡片 */}
|
||||
<div className={styles['banner-cards']}>
|
||||
{capabilityCards.map((card) => (
|
||||
<div key={card.key} className={styles['banner-metric-card']}>
|
||||
<div className={styles['banner-metric-header']}>
|
||||
<div className={styles['banner-metric-icon']}>{card.icon}</div>
|
||||
<span className={styles['banner-metric-number']}>
|
||||
{card.metric}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles['banner-metric-title']}>{card.title}</div>
|
||||
<div className={styles['banner-metric-desc']}>{card.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 底部信任说明 */}
|
||||
<div className={styles['banner-footer-note']}>
|
||||
<div className={styles['banner-quote-line']} />
|
||||
<span>OmniCard Global Digital Identity Architecture · Multi-tenant Cloud</span>
|
||||
<span>Global Digital Identity Platform · Multi-tenant Cloud</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户