feat(h5): align report care and single-product section with updated design

This commit is contained in:
xsl
2026-10-15 01:30:45 +08:00
parent 60ae6c97ef
commit 77493bdff5
18 changed files with 983 additions and 728 deletions
+6 -6
View File
@@ -171,18 +171,18 @@ try {
await route.fulfill({ response, body: await response.text() + '\nMOCK_FIXTURE.result.skin_age = { value: ' + age + ' };' });
});
await page.goto(base + '?mock=1&screen=report'); await loadFonts();
await page.waitForFunction(() => document.querySelector('#product-image').naturalWidth === 504);
assert((await page.locator('#product-image').getAttribute('src')).endsWith('product-' + ({ 1: 25, 2: 35, 3: 50 }[tier]) + '.jpg'));
await page.waitForFunction(() => document.querySelector('#product-image').naturalWidth === 481);
assert((await page.locator('#product-image').getAttribute('src')).endsWith('product-' + ({ 1: 25, 2: 35, 3: 50 }[tier]) + '.png'));
for (const width of widths) {
await page.setViewportSize({ width, height: 844 });
await page.locator('.card-product').scrollIntoViewIfNeeded();
const info = await rect('.prod-info'), name = await rect('#product-name'), title = await rect('#product-title');
assert(title.right <= info.right && name.right <= info.right, 'product text overlaps art at ' + width + ': ' + JSON.stringify({ info, name, title }));
assert(Math.abs(title.x - info.x - 26.736111) < .1);
assert.equal(await page.locator('#product-name').evaluate(e => getComputedStyle(e).fontWeight), '600');
assert.equal((await actualLines('#product-name')).length, 2);
assert(Math.abs(title.x - info.x - 81 / 1080 * width) < .1);
assert.equal(await page.locator('#product-name').evaluate(e => getComputedStyle(e).fontWeight), '700');
assert.equal((await actualLines('#product-name')).length, 1);
const card = await rect('.card-product');
assert(Math.abs(card.width - 984 / 1080 * width) < .1, 'exact PSD card width');
assert(Math.abs(card.width - 945 / 1080 * width) < .1, 'exact current Figma card width');
assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
}
await page.setViewportSize({ width: 375, height: 726 }); await screenshot('05-product-' + tier, '.card-product');