This commit is contained in:
yiqiu
@@ -14,6 +14,12 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 首页 section-content 统一左右边距为 20px */
|
||||
#index .section-content {
|
||||
padding-left: var(--container-padding-x);
|
||||
padding-right: var(--container-padding-x);
|
||||
}
|
||||
|
||||
/* 首页 Header 深色玻璃态覆盖 */
|
||||
#index #header {
|
||||
background: transparent;
|
||||
@@ -343,7 +349,7 @@
|
||||
.banner .banner-s .banner-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0; /* 移除额外的 padding，使用 section-content 的统一边距 */
|
||||
padding: 0 !important; /* 移除额外的 padding，使用 section-content 的统一边距 */
|
||||
}
|
||||
|
||||
.banner-s .banner-list .banner-item {
|
||||
@@ -1363,9 +1369,7 @@ html {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide .section-content {
|
||||
max-width: 700px;
|
||||
}
|
||||
/* 移除 section-content 的 max-width 限制，保持容器系统统一 */
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 44px;
|
||||
|
||||
217
debug-alignment.html
Normal file
217
debug-alignment.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user