diff --git a/index.html b/index.html index 7210678..43ef2af 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,7 @@ } * { box-sizing: border-box; } html { - overflow-y: scroll; - overflow-x: auto; + overflow-x: hidden; margin: 0; padding: 0; } @@ -30,7 +29,8 @@ "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); - overflow-x: auto; + overflow-x: hidden; + width: 100vw; scroll-behavior: smooth; } #pageContent { @@ -56,6 +56,7 @@ position: fixed; top: 0; left: 0; + right: 0; z-index: 1000; background: transparent; border-bottom: none; @@ -72,8 +73,8 @@ justify-content: space-between; height: 64px; padding: 0 32px; - width: 1280px; - max-width: 1280px; + max-width: 1400px; + width: 100%; margin: 0 auto; position: relative; } @@ -3558,6 +3559,13 @@ content.style.transformOrigin = 'top left'; content.style.width = `${designWidth}px`; + // 用负 margin 收回 scale 后多出的底部布局空间 + // transform:scale 不改变 DOM 布局尺寸，视觉缩小但布局仍占原大小 + // marginBottom = -(原高度 - 缩放后高度) 让滚动范围刚好匹配视觉内容 + const layoutH = content.scrollHeight; + const visualH = layoutH * s; + content.style.marginBottom = `-${Math.ceil(layoutH - visualH)}px`; + // navbar 单独缩放（fixed 不受 content transform 影响） if (navbar) { navbar.style.transform = `scale(${s})`; @@ -3571,8 +3579,17 @@ } } + function fixLayout() { + const s = content.getBoundingClientRect().width / content.scrollWidth; + const layoutH = content.scrollHeight; + const visualH = layoutH * s; + content.style.marginBottom = `-${Math.ceil(layoutH - visualH)}px`; + } + scale(); window.addEventListener('resize', scale); + window.addEventListener('load', fixLayout); + setTimeout(fixLayout, 2000); })(); +
@@ -999,32 +1131,136 @@
+ + + +
+
+ +
+ + + + + +
+

官方旗舰店

+

扫描二维码，进入官方店铺选购

+
+
旗舰店二维码
+
+ + + + + + + + + + 扫码进店 +
+
+
+
+ + diff --git a/pages/company.html b/pages/company.html index aad2587..baf3c20 100644 --- a/pages/company.html +++ b/pages/company.html @@ -17,16 +17,21 @@ --shadow: 0 20px 60px rgba(15, 23, 42, 0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } - html { overflow-y: scroll; } + html { overflow-y: scroll; overflow-x: hidden; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); - min-width: 1280px; + width: 100vw; + overflow-x: hidden; line-height: 1.6; - transform-origin: top left; } a { color: inherit; text-decoration: none; } + #pageContent { + min-width: 1280px; + margin: 0; + padding: 0; + } /* 导航栏 */ .navbar { @@ -35,29 +40,109 @@ left: 0; right: 0; z-index: 1000; - background: rgba(255, 255, 255, 0.95); + opacity: 0; + background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .navbar-inner { + position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 32px; - max-width: 1200px; + max-width: 1400px; margin: 0 auto; } - .navbar-logo img { height: 40px; } - .navbar-back { + .navbar-menu { display: flex; align-items: center; - gap: 6px; - font-size: 14px; - color: var(--muted); - transition: color 0.2s; + gap: 8px; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + .navbar-logo { + display: flex; + align-items: center; + text-decoration: none; + } + .navbar-logo img { + height: 40px; + width: auto; + } + .navbar-link { + padding: 8px 16px; + font-size: 14px; + font-weight: 500; + color: var(--muted); + text-decoration: none; + border-radius: 8px; + transition: all 0.2s ease; + } + .navbar-link:hover { + color: var(--text); + background: rgba(0, 0, 0, 0.04); + text-decoration: none; + } + .navbar-link.active { + color: var(--primary); + background: var(--primary-weak); + } + .navbar-actions { + display: flex; + align-items: center; + gap: 12px; + } + .navbar-btn { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 10px; + background: transparent; + border: none; + cursor: pointer; + color: var(--muted); + transition: all 0.2s ease; + } + .navbar-btn:hover { + background: rgba(0, 0, 0, 0.04); + color: var(--text); + } + .navbar-btn svg { + width: 20px; + height: 20px; + } + .navbar-cta { + padding: 10px 20px; + font-size: 14px; + font-weight: 600; + color: #fff; + background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%); + border: none; + border-radius: 10px; + cursor: pointer; + transition: all 0.2s ease; + text-decoration: none; + } + .navbar-cta:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3); + } + .mobile-menu-btn { + display: none; + } + .lang-select-hero { + background: transparent; + border: none; + font-size: 13px; + color: var(--muted); + cursor: pointer; + padding: 8px; } - .navbar-back:hover { color: var(--text); } /* 主内容区 */ .main-content { @@ -420,18 +505,43 @@ -