xsl/juzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(h5): unify regular slogan typography on splash and photo guide

Browse Source
This commit is contained in:
xsl
2026-10-13 19:01:00 +08:00
parent 84a92137aa
commit 6acc541cd8
4 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
graphify-out/manifest.json
+4 -4
View File
@@ -140,8 +140,8 @@
"semantic_hash": ""
},
"h5/index.html": {
"mtime": 1791885786.4010859,
"ast_hash": "2a9b884da4be536708d26bf69f4a9f12",
"mtime": 1791886665.6930811,
"ast_hash": "f9f520bdd67e32920fc79d387de4a033",
"semantic_hash": ""
},
"h5/vendor/faceapi/README.md": {
@@ -2020,8 +2020,8 @@
"semantic_hash": ""
},
"h5/test/splash-brand-browser.mjs": {
"mtime": 1791885347.4210553,
"ast_hash": "257d77c6cfb00b56b0a0dff9fc8955b1",
"mtime": 1791886665.6930811,
"ast_hash": "99c9c93f6eab48ce6de0d88fa348c50f",
"semantic_hash": ""
},
"docs/\u62cd\u6444\u89d2\u5ea6\u4e0d\u5408\u683c\u9707\u52a8\u63d0\u9192-2026-10-13.md": {
h5/css/ui-20261012.css
+4 -3
View File
@@ -9,9 +9,10 @@
top: max(6.838833%, calc(env(safe-area-inset-top) + 48px));
}
#s-splash .splash-slogan { top: max(6.838833%, calc(env(safe-area-inset-top) + 48px)); }
/* Retain the PSD's two lower slogan lines; the updated brand uses regular type. */
.splash-slogan-updated .splash-slogan-copy { width:100%; height:100%; clip-path:inset(32% 0 0); }
.splash-slogan-brand { position:absolute; top:0; left:50%; transform:translateX(-50%); font-family:Arial,sans-serif; font-size:23px; font-weight:400; line-height:1; white-space:nowrap; }
/* Keep the PSD Chinese line; both English lines share the exact regular font. */
.splash-slogan-updated .splash-slogan-copy { width:100%; height:100%; clip-path:inset(68% 0 0); }
.splash-slogan-brand, .splash-slogan-english { position:absolute; top:0; left:50%; transform:translateX(-50%); font-family:Arial,sans-serif; font-size:23px; font-weight:400; line-height:1; white-space:nowrap; }
.splash-slogan-english { top:26.736111px; }
#s-splash [data-action="open-privacy"],
#s-splash [data-action="open-privacy"]:focus,
#s-splash [data-action="open-privacy"]:active { border:0; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none; }
h5/index.html
+8 -1
View File
@@ -46,6 +46,7 @@
<div class="splash-slogan splash-slogan-updated" role="img" aria-label="1'me，FROM THE INSIDE OUT；以我为始 自有表现">
<img class="splash-slogan-copy" src="assets/img/ui-20261012/splash-slogan.png" width="718" height="217" loading="lazy" alt="">
<span class="splash-slogan-brand" aria-hidden="true">1'me</span>
<span class="splash-slogan-english" aria-hidden="true">FROM THE INSIDE OUT</span>
</div>
<div class="splash-bottom">
<div class="brand-row">
@@ -303,7 +304,13 @@
<!-- ═══════════ 弹窗:拍照引导 ═══════════ -->
<!-- 背景只保留启动页底图 + Slogan(不叠档案表单),对齐设计稿 04 -->
<div class="overlay overlay-guide" id="p-photoguide">
<div class="guide-bg"><img class="splash-slogan" src="assets/img/ui-20261012/splash-slogan.png" width="718" height="217" loading="lazy" alt="ONE ME，FROM THE INSIDE OUT；以我为始 自有表现"></div>
<div class="guide-bg">
<div class="splash-slogan splash-slogan-updated" role="img" aria-label="1'me，FROM THE INSIDE OUT；以我为始 自有表现">
<img class="splash-slogan-copy" src="assets/img/ui-20261012/splash-slogan.png" width="718" height="217" loading="lazy" alt="">
<span class="splash-slogan-brand" aria-hidden="true">1'me</span>
<span class="splash-slogan-english" aria-hidden="true">FROM THE INSIDE OUT</span>
</div>
</div>
<div class="popup">
<button class="popup-close" data-action="close-photoguide" aria-label="关闭">
<img src="assets/img/ui-20261009/icon-close.png" alt="关闭">
h5/test/splash-brand-browser.mjs
+18
View File
@@ -19,6 +19,18 @@ try {
assert.equal(await page.locator('#s-splash .splash-slogan-brand').isVisible(), true);
assert.equal(await page.locator('#s-splash .splash-slogan-brand').textContent(), "1'me");
assert.equal(await page.locator('#s-splash .splash-slogan-brand').evaluate(el => getComputedStyle(el).fontWeight), '400');
for (const root of ['#s-splash', '#p-photoguide']) {
const fonts = await page.locator(root + ' .splash-slogan').evaluate(el => {
return ['.splash-slogan-brand', '.splash-slogan-english'].map(selector => {
const s = getComputedStyle(el.querySelector(selector));
return [s.fontFamily, s.fontSize, s.fontWeight, s.lineHeight];
});
});
assert.deepEqual(fonts[0], fonts[1], root + ': identical English font settings');
assert.equal(fonts[0][1], '23px');
assert.equal(fonts[0][2], '400');
assert.match(await page.locator(root + ' .splash-slogan').getAttribute('aria-label'), /^1'me/);
}
const button = page.locator('#s-splash [data-action="open-privacy"]');
await button.focus();
const style = await button.evaluate(el => {
@@ -31,5 +43,11 @@ try {
await page.screenshot({ path:'/tmp/juzi-splash-brand-20261013.png' });
await button.click();
await page.waitForSelector('#p-privacy.show');
await page.evaluate(() => {
document.querySelector('#p-privacy').classList.remove('show');
document.querySelector('#p-photoguide').classList.add('show');
});
await page.waitForTimeout(400);
await page.screenshot({ path:'/tmp/juzi-photoguide-brand-20261013.png' });
console.log('PASS splash brand, borderless focused start button, yellow fill, privacy entry');
} finally { await browser.close(); }