218 lines
8.4 KiB
HTML
218 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>对齐调试工具</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
font-family: monospace;
|
|
}
|
|
.debug-info {
|
|
background: #f0f0f0;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border-radius: 5px;
|
|
}
|
|
.element-box {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: white;
|
|
border-left: 3px solid #38BDF8;
|
|
}
|
|
.highlight {
|
|
color: #38BDF8;
|
|
font-weight: bold;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
background: #38BDF8;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
button:hover {
|
|
background: #0EA5E9;
|
|
}
|
|
.ruler {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 2px;
|
|
height: 100vh;
|
|
background: red;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
}
|
|
.label {
|
|
position: fixed;
|
|
top: 50%;
|
|
background: red;
|
|
color: white;
|
|
padding: 2px 5px;
|
|
font-size: 12px;
|
|
z-index: 9999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="debug-info">
|
|
<h2>🔍 首页对齐调试工具</h2>
|
|
<p>此工具帮助你检查导航菜单、轮播图文案、云服务器卡片的左对齐情况</p>
|
|
<button onclick="checkAlignment()">检查对齐</button>
|
|
<button onclick="showRulers()">显示参考线</button>
|
|
<button onclick="clearRulers()">清除参考线</button>
|
|
</div>
|
|
|
|
<div id="results"></div>
|
|
|
|
<script>
|
|
function checkAlignment() {
|
|
// 清空之前的结果
|
|
document.getElementById('results').innerHTML = '';
|
|
|
|
// 获取元素
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
const navFirstItem = document.querySelector('.nav-menu .nav-item');
|
|
const bannerContent = document.querySelector('.banner-cont .swiper-slide .section-content');
|
|
const cloudBox = document.querySelector('#cloud-box');
|
|
|
|
const elements = [
|
|
{ name: 'nav-menu容器', el: navMenu },
|
|
{ name: 'nav-menu第一个菜单项', el: navFirstItem },
|
|
{ name: '轮播图文案容器', el: bannerContent },
|
|
{ name: 'cloud-box卡片', el: cloudBox }
|
|
];
|
|
|
|
let html = '<div class="debug-info"><h3>对齐检查结果：</h3>';
|
|
|
|
elements.forEach(item => {
|
|
if (item.el) {
|
|
const rect = item.el.getBoundingClientRect();
|
|
const computed = window.getComputedStyle(item.el);
|
|
|
|
html += `
|
|
<div class="element-box">
|
|
<strong>${item.name}</strong><br>
|
|
距离视口左边缘: <span class="highlight">${rect.left.toFixed(2)}px</span><br>
|
|
padding-left: ${computed.paddingLeft}<br>
|
|
margin-left: ${computed.marginLeft}<br>
|
|
实际内容左边距: <span class="highlight">${(rect.left + parseFloat(computed.paddingLeft)).toFixed(2)}px</span>
|
|
</div>
|
|
`;
|
|
} else {
|
|
html += `
|
|
<div class="element-box" style="border-color: #ccc;">
|
|
<strong>${item.name}</strong><br>
|
|
<span style="color: #999;">未找到元素</span>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
|
|
// 计算是否对齐
|
|
if (navFirstItem && cloudBox && bannerContent) {
|
|
const navLeft = navFirstItem.getBoundingClientRect().left;
|
|
const cloudLeft = cloudBox.getBoundingClientRect().left;
|
|
const bannerLeft = bannerContent.getBoundingClientRect().left + parseFloat(window.getComputedStyle(bannerContent).paddingLeft);
|
|
|
|
const diff1 = Math.abs(navLeft - cloudLeft);
|
|
const diff2 = Math.abs(navLeft - bannerLeft);
|
|
const diff3 = Math.abs(cloudLeft - bannerLeft);
|
|
|
|
html += '<div class="debug-info" style="background: #e8f5e9;">';
|
|
html += '<h3>对齐分析：</h3>';
|
|
html += `nav-menu vs cloud-box 差异: <span class="highlight">${diff1.toFixed(2)}px</span> ${diff1 < 1 ? '✅ 对齐' : '❌ 未对齐'}<br>`;
|
|
html += `nav-menu vs 轮播图文案 差异: <span class="highlight">${diff2.toFixed(2)}px</span> ${diff2 < 1 ? '✅ 对齐' : '❌ 未对齐'}<br>`;
|
|
html += `cloud-box vs 轮播图文案 差异: <span class="highlight">${diff3.toFixed(2)}px</span> ${diff3 < 1 ? '✅ 对齐' : '❌ 未对齐'}<br>`;
|
|
html += '</div>';
|
|
}
|
|
|
|
html += '</div>';
|
|
document.getElementById('results').innerHTML = html;
|
|
}
|
|
|
|
function showRulers() {
|
|
clearRulers();
|
|
|
|
const navFirstItem = document.querySelector('.nav-menu .nav-item');
|
|
const cloudBox = document.querySelector('#cloud-box');
|
|
const bannerContent = document.querySelector('.banner-cont .swiper-slide .section-content');
|
|
|
|
if (navFirstItem) {
|
|
const left = navFirstItem.getBoundingClientRect().left;
|
|
const ruler = document.createElement('div');
|
|
ruler.className = 'ruler';
|
|
ruler.style.left = left + 'px';
|
|
ruler.id = 'ruler-nav';
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'label';
|
|
label.style.left = (left + 5) + 'px';
|
|
label.textContent = 'nav-menu';
|
|
label.id = 'label-nav';
|
|
|
|
document.body.appendChild(ruler);
|
|
document.body.appendChild(label);
|
|
}
|
|
|
|
if (cloudBox) {
|
|
const left = cloudBox.getBoundingClientRect().left;
|
|
const ruler = document.createElement('div');
|
|
ruler.className = 'ruler';
|
|
ruler.style.left = left + 'px';
|
|
ruler.style.background = 'blue';
|
|
ruler.id = 'ruler-cloud';
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'label';
|
|
label.style.left = (left + 5) + 'px';
|
|
label.style.background = 'blue';
|
|
label.style.top = '55%';
|
|
label.textContent = 'cloud-box';
|
|
label.id = 'label-cloud';
|
|
|
|
document.body.appendChild(ruler);
|
|
document.body.appendChild(label);
|
|
}
|
|
|
|
if (bannerContent) {
|
|
const computed = window.getComputedStyle(bannerContent);
|
|
const left = bannerContent.getBoundingClientRect().left + parseFloat(computed.paddingLeft);
|
|
const ruler = document.createElement('div');
|
|
ruler.className = 'ruler';
|
|
ruler.style.left = left + 'px';
|
|
ruler.style.background = 'green';
|
|
ruler.id = 'ruler-banner';
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'label';
|
|
label.style.left = (left + 5) + 'px';
|
|
label.style.background = 'green';
|
|
label.style.top = '60%';
|
|
label.textContent = '轮播文案';
|
|
label.id = 'label-banner';
|
|
|
|
document.body.appendChild(ruler);
|
|
document.body.appendChild(label);
|
|
}
|
|
}
|
|
|
|
function clearRulers() {
|
|
['ruler-nav', 'ruler-cloud', 'ruler-banner', 'label-nav', 'label-cloud', 'label-banner'].forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el) el.remove();
|
|
});
|
|
}
|
|
|
|
// 页面加载后自动检查
|
|
window.addEventListener('load', () => {
|
|
setTimeout(checkAlignment, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|