81 lines
3.1 KiB
HTML
81 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Case Alignment Check</title>
|
|
</head>
|
|
<body>
|
|
<pre id="result">pending</pre>
|
|
<script>
|
|
const params = new URLSearchParams(window.location.search);
|
|
const page = params.get("page");
|
|
const iframe = document.createElement("iframe");
|
|
iframe.style.width = "1440px";
|
|
iframe.style.height = "2200px";
|
|
iframe.style.border = "0";
|
|
iframe.src = page;
|
|
document.body.appendChild(iframe);
|
|
|
|
function centerDelta(rectA, rectB) {
|
|
const centerA = rectA.left + rectA.width / 2;
|
|
const centerB = rectB.left + rectB.width / 2;
|
|
return Math.round((centerA - centerB) * 100) / 100;
|
|
}
|
|
|
|
iframe.addEventListener("load", () => {
|
|
const doc = iframe.contentDocument;
|
|
const resultNode = document.getElementById("result");
|
|
try {
|
|
const section = doc.querySelector(".cases-section");
|
|
const row = doc.querySelector(".cases-section .row");
|
|
const header = doc.querySelector(".cases-section .product-advantages-header");
|
|
const title = doc.querySelector(".cases-section .product-advantages-title");
|
|
const subtitle = doc.querySelector(".cases-section .product-advantages-header p");
|
|
const cards = Array.from(doc.querySelectorAll(".cases-section .case-card-header h3"));
|
|
const report = {
|
|
page,
|
|
hasCasesSection: !!section,
|
|
headerVsRow: null,
|
|
titleVsRow: null,
|
|
subtitleVsRow: null,
|
|
cardTitles: []
|
|
};
|
|
|
|
if (!section || !row || !header || !title || !subtitle) {
|
|
resultNode.textContent = JSON.stringify(report, null, 2);
|
|
return;
|
|
}
|
|
|
|
const rowRect = row.getBoundingClientRect();
|
|
report.headerVsRow = {
|
|
delta: centerDelta(header.getBoundingClientRect(), rowRect),
|
|
width: Math.round(header.getBoundingClientRect().width * 100) / 100,
|
|
rowWidth: Math.round(rowRect.width * 100) / 100
|
|
};
|
|
report.titleVsRow = {
|
|
delta: centerDelta(title.getBoundingClientRect(), rowRect),
|
|
textAlign: getComputedStyle(title).textAlign
|
|
};
|
|
report.subtitleVsRow = {
|
|
delta: centerDelta(subtitle.getBoundingClientRect(), rowRect),
|
|
textAlign: getComputedStyle(subtitle).textAlign
|
|
};
|
|
|
|
report.cardTitles = cards.map((card) => {
|
|
const cardHeader = card.closest(".case-card-header");
|
|
return {
|
|
text: card.textContent.trim(),
|
|
delta: centerDelta(card.getBoundingClientRect(), cardHeader.getBoundingClientRect()),
|
|
textAlign: getComputedStyle(card).textAlign
|
|
};
|
|
});
|
|
|
|
resultNode.textContent = JSON.stringify(report, null, 2);
|
|
} catch (error) {
|
|
resultNode.textContent = JSON.stringify({ page, error: String(error) }, null, 2);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|