up

2026-04-16 16:13:38 +08:00
parent 92fb7b34b2
commit a33b220b35
27 changed files with 1250 additions and 92 deletions
--- a/case_alignment_check.html
+++ b/case_alignment_check.html
@@ -0,0 +1,80 @@
+<!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>