Archived
fix(w05): 落账席那枚印章不再压住旁边的结论 —— 徽章按圈的内径收
用户:「评审放行与落账确认,中间这个有条件推荐这个 svg 挡住旁边的字了」。 在浏览器里量的账:徽章那一坨 .seal-core 139px 宽,而印章圈定死 112px —— 溢出 26px; 右边那句一句话结论从 603px 起,正好被压住。病根是徽章按自己的字宽撑开、又带着 white-space:nowrap 缩不了,而圈是定死的圆(place-items:center 只让它对称地溢出去)。 两条一起治:核心不许超过圈的内径(max-width:calc(100% - 16px));圈里那一枚字号收小、 去掉字距、允许折行(以后有更长的等级名就两行,圆里两行照样是圆)。 改完再量:核心 94px、圈内还余 9px、「有条件推荐」一行放得下、结论那段完全露出来。 验收法记一笔:视觉的账在**真 DOM** 上量 —— 离线渲一份真件挂本地服务, 浏览器里 getBoundingClientRect 前后各取一次,不在脑子里推。包内 +1 测(变异验证过)。 2.24.0 已装库。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LKMZDwMbyKzjw6Hembwvet
This commit is contained in:
@@ -489,6 +489,20 @@ describe('报告模版:编辑面与只读面各就各位', () => {
|
||||
expect(viewHtml('landing-confirm')).not.toContain('data-edit-add=');
|
||||
});
|
||||
|
||||
/*
|
||||
* **印章里的徽章不许溢出圈外**(2026-09-01 用户:「有条件推荐这个 svg 挡住旁边的字了」)。
|
||||
* 浏览器里量的账:徽章那一坨 139px 宽,而印章圈定死 112px —— 溢出 26px,
|
||||
* 右边那句一句话结论从 603px 起,正好被压住;病根是徽章按自己的字宽撑开、
|
||||
* 又带着 white-space:nowrap 缩不了。两条一起治,改完再量:核心 94px、圈内还余 9px、
|
||||
* 「有条件推荐」一行放得下(以后有更长的等级名就折行,圆里两行照样是圆)。
|
||||
*/
|
||||
it('落账席的印章:徽章按圈的内径收,不许再溢出去压住那句结论', () => {
|
||||
const html = viewHtml('landing-confirm');
|
||||
expect(html).toContain('.seal-core{max-width:calc(100% - 16px)');
|
||||
/* 缩不了才会溢出 —— 圈里这一枚必须允许折行 */
|
||||
expect(html).toMatch(/\.seal \.rec\.rec-lg\{[^}]*white-space:normal/);
|
||||
});
|
||||
|
||||
it('每个可编辑格子的 data-col 都在对应台账对象的声明里(input-supplement 一屏四张表,四张台账对象的声明并起来看;difference-review 一张表)', () => {
|
||||
const cases: Array<[string, Array<[string, string]>]> = [
|
||||
['input-supplement', [['parts', 'profile'], ['parts', 'parameter']]],
|
||||
|
||||
@@ -54,7 +54,7 @@ export const manifest: ActivityManifest = {
|
||||
activityId: ACTIVITY_ID,
|
||||
name: 'ACT-WORK-05 · 差异评估',
|
||||
/* 重写不是改 —— 同版重装是 no-op(静默丢失,踩过) */
|
||||
packageVersion: '2.23.0',
|
||||
packageVersion: '2.24.0',
|
||||
category: '需求分析与方案匹配',
|
||||
sdkVersion: '0.1.0-m5',
|
||||
checksum: 'dev-checksum-part-substitution-assessment',
|
||||
|
||||
@@ -117,6 +117,15 @@ i{font-style:normal}
|
||||
.seal{position:relative;flex:none;width:112px;height:112px;border-radius:999px;display:grid;place-items:center}
|
||||
.seal::before{content:"";position:absolute;inset:0;border:1.6px dashed rgba(255,255,255,.34);border-radius:999px;animation:sealspin 16s linear infinite}
|
||||
.seal-core{display:grid;place-items:center;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.97);box-shadow:0 12px 26px rgba(3,10,18,.5)}
|
||||
/*
|
||||
* **印章里的徽章按圈的内径收**(2026-09-01 用户:「有条件推荐这个 svg 挡住旁边的字了」——
|
||||
* 浏览器里量的账:seal-core 139px 宽,而印章圈只有 112px,**溢出 26px**,
|
||||
* 右边那句结论从 603px 起,正好被压住)。
|
||||
* 病根是徽章按自己的字宽撑开、又带着 white-space:nowrap 缩不了,而印章圈是定死的圆。
|
||||
* 治法两条一起:核心不许超过圈的内径;圈里的徽章字号收小、允许折行(圆里两行照样是圆)。
|
||||
*/
|
||||
.seal-core{max-width:calc(100% - 16px);padding:6px 8px}
|
||||
.seal .rec.rec-lg{font-size:12px;letter-spacing:0;padding:5px 8px;white-space:normal;text-align:center;line-height:1.3}
|
||||
.seal-sum{flex:1 1 240px;min-width:200px;max-width:420px;margin:0;font-size:13px;line-height:1.85;color:var(--hero-dim)}
|
||||
.seal-sum:empty::after{content:"—"}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user