背景: - 登录页左栏四张比例缩略图在真实页面中观感偏廉价; - 输入框前缀图标与占位文字间距仅 8px,视觉上偏挤。 改动: - 左栏移除 9:16 / 1:1 / 16:9 / 4:3 素材缩略及相关数据与样式,保留品牌、定位与三条能力; - 登录卡片输入框前缀图标改为左 10px / 右 14px,后缀图标左 12px / 右 8px,图标与提示文字拉开距离; - 清理 login-content 与 pages.css 中不再使用的素材墙代码。 影响面: - 仅登录页视觉,不影响登录逻辑、接口与权限。 回滚方式: - 回滚本提交即恢复原素材墙与输入框间距。 验证证据: - pnpm --filter @lingxi/web lint / typecheck / test 通过(15 files / 55 tests); - pnpm --filter @lingxi/web build 通过; - 1440×900 与 1280×900 截图核对,无溢出、图标与文字间距正常。
This commit is contained in:
1 parent
f11d6759fb
commit
340a8ed176
3 files changed
+19
-103
No files matched your search
@@ -1,11 +1,6 @@
|
|||||||
import type { ReactNode } from 'react';
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
import {
|
import { LOGIN_CAPABILITIES, type LoginCapability } from './login-content';
|
||||||
LOGIN_CAPABILITIES,
|
|
||||||
LOGIN_MATERIAL_SAMPLES,
|
|
||||||
type LoginCapability,
|
|
||||||
type LoginMaterialSample,
|
|
||||||
} from './login-content';
|
|
||||||
|
|
||||||
function LoginBrand(): ReactNode {
|
function LoginBrand(): ReactNode {
|
||||||
return (
|
return (
|
||||||
@@ -34,21 +29,7 @@ function CapabilityItem({ capability }: { capability: LoginCapability }): ReactN
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MaterialSample({ sample }: { sample: LoginMaterialSample }): ReactNode {
|
/** 左栏:品牌 + 一句定位 + 三条能力(不引入图片资源) */
|
||||||
return (
|
|
||||||
<figure className="lx-login__sample">
|
|
||||||
<span
|
|
||||||
className={`lx-login__sample-thumb lx-login__sample-thumb--${String(sample.tone)}`}
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<span className="lx-login__sample-ratio">{sample.ratio}</span>
|
|
||||||
</span>
|
|
||||||
<figcaption className="lx-login__sample-label">{sample.label}</figcaption>
|
|
||||||
</figure>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 左栏:品牌 + 一句定位 + 三条能力 + CSS 素材墙(与方案 B 原型一致,不引图片) */
|
|
||||||
export function LoginBrandPanel(): ReactNode {
|
export function LoginBrandPanel(): ReactNode {
|
||||||
return (
|
return (
|
||||||
<aside className="lx-login__aside" aria-label="灵犀产品介绍">
|
<aside className="lx-login__aside" aria-label="灵犀产品介绍">
|
||||||
@@ -69,12 +50,6 @@ export function LoginBrandPanel(): ReactNode {
|
|||||||
<CapabilityItem key={capability.key} capability={capability} />
|
<CapabilityItem key={capability.key} capability={capability} />
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div className="lx-login__samples" aria-label="可交付素材规格示例">
|
|
||||||
{LOGIN_MATERIAL_SAMPLES.map((sample) => (
|
|
||||||
<MaterialSample key={sample.key} sample={sample} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="lx-login__aside-foot">灵犀 · 素材生产平台 · v2.4.0</p>
|
<p className="lx-login__aside-foot">灵犀 · 素材生产平台 · v2.4.0</p>
|
||||||
|
|||||||
@@ -31,18 +31,3 @@ export const LOGIN_CAPABILITIES: readonly LoginCapability[] = [
|
|||||||
icon: IconCheck,
|
icon: IconCheck,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
/** 素材墙:用 CSS 渐变模拟同一支片子的四种规格,不引图片资源 */
|
|
||||||
export interface LoginMaterialSample {
|
|
||||||
key: string;
|
|
||||||
ratio: string;
|
|
||||||
label: string;
|
|
||||||
tone: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const LOGIN_MATERIAL_SAMPLES: readonly LoginMaterialSample[] = [
|
|
||||||
{ key: 'vertical', ratio: '9:16', label: '竖版主图', tone: 1 },
|
|
||||||
{ key: 'square', ratio: '1:1', label: '方形主图', tone: 2 },
|
|
||||||
{ key: 'wide', ratio: '16:9', label: '横版封面', tone: 3 },
|
|
||||||
{ key: 'classic', ratio: '4:3', label: '经典比例', tone: 4 },
|
|
||||||
];
|
|
||||||
@@ -161,67 +161,6 @@
|
|||||||
color: var(--lx-color-text-tertiary);
|
color: var(--lx-color-text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 素材墙:同一支片子的四种规格,用 CSS 渐变示意 */
|
|
||||||
.lx-login__samples {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample-thumb {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding: 6px;
|
|
||||||
border: 1px solid var(--lx-color-border);
|
|
||||||
border-radius: var(--lx-radius-sm);
|
|
||||||
background:
|
|
||||||
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 46%),
|
|
||||||
linear-gradient(150deg, #fde8c8, #f7c98b 55%, #eeb26a);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample-thumb--1 {
|
|
||||||
width: 50px;
|
|
||||||
aspect-ratio: 9 / 16;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample-thumb--2 {
|
|
||||||
width: 52px;
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample-thumb--3 {
|
|
||||||
width: 88px;
|
|
||||||
aspect-ratio: 16 / 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample-thumb--4 {
|
|
||||||
width: 66px;
|
|
||||||
aspect-ratio: 4 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample-ratio {
|
|
||||||
border-radius: 3px;
|
|
||||||
background: rgba(31, 35, 41, 0.55);
|
|
||||||
color: var(--lx-color-text-inverse);
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 14px;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__sample-label {
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--lx-color-text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lx-login__aside-foot {
|
.lx-login__aside-foot {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
color: var(--lx-color-text-tertiary);
|
color: var(--lx-color-text-tertiary);
|
||||||
@@ -282,6 +221,23 @@
|
|||||||
color: var(--lx-color-text-tertiary);
|
color: var(--lx-color-text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 登录卡片:输入框内图标与占位文字之间留出呼吸感 */
|
||||||
|
.lx-login__card .semi-input-prefix {
|
||||||
|
margin: 0 14px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lx-login__card .semi-input-prefix-icon {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lx-login__card .semi-input-suffix {
|
||||||
|
margin: 0 8px 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lx-login__card .semi-input-suffix-icon {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.lx-login__card form {
|
.lx-login__card form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in new issue
Block a user