Mortar_peng/Chookoo.netPro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

无信息版本

Browse Source
This commit is contained in:
Mortar
2026-05-30 14:11:13 +08:00
parent 9a9809af05
commit e476086c5a
12 changed files with 1662 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/stories.html
+58 -14
View File
@@ -23,10 +23,16 @@
"Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
min-width: 1280px;
overflow-x: hidden;
}
body {
transform-origin: top left;
width: 100vw;
overflow-x: hidden;
}
#pageContent {
min-width: 1280px;
margin: 0;
padding: 0;
}
a {
color: inherit;
@@ -48,10 +54,10 @@
left: 0;
right: 0;
z-index: 1000;
opacity: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.navbar-inner {
display: flex;
@@ -143,6 +149,7 @@
.mobile-menu-btn {
display: none;
}
.lang-select-hero { background: transparent; border: none; font-size: 13px; color: var(--muted); cursor: pointer; padding: 8px; }
@media (max-width: 768px) {
.navbar-menu {
display: none;
@@ -786,7 +793,7 @@
</style>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
@@ -800,24 +807,29 @@
</div>
<div class="navbar-actions">
<a href="help.html" class="navbar-btn" aria-label="Search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
</a>
<button class="navbar-btn" id="shopBtn" aria-label="Cart">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
</button>
<select id="langSelect" aria-label="Language" style="background:transparent;border:none;font-size:13px;color:var(--muted);cursor:pointer;padding:8px;">
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
</nav>
<script>
// 同步缩放导航栏，防止闪烁（script 是渲染阻塞的，浏览器不会画出未缩放的 nav）
(function(){var n=document.querySelector('.navbar');var vw=window.innerWidth;var s=vw<1280?vw/1280:vw>2560?vw/2560:vw/1920;n.style.transform='scale('+s+')';n.style.transformOrigin='top left';n.style.width='1920px';n.style.opacity='1';})();
</script>
<div id="pageContent" style="opacity:0">
<!-- 页面头部 -->
<header class="page-header">
<div class="container">
@@ -1078,6 +1090,8 @@
</div>
</footer>
</div><!-- /pageContent -->
<!-- 社交媒体二维码弹窗 -->
<div class="social-modal-overlay" id="socialModal">
<div class="social-modal">
@@ -1138,28 +1152,58 @@
<script>
// 视口缩放 - 基于1920px设计稿
(() => {
const designWidth = 1920;
const minWidth = 1280;
const maxWidth = 2560;
const content = document.getElementById('pageContent');
const navbar = document.querySelector('.navbar');
function scale() {
const vw = window.innerWidth;
let scale = 1;
let s = 1;
if (vw < minWidth) {
scale = vw / minWidth;
s = vw / minWidth;
} else if (vw > maxWidth) {
scale = vw / maxWidth;
s = vw / maxWidth;
} else {
scale = vw / designWidth;
s = vw / designWidth;
}
document.body.style.transform = `scale(${scale})`;
document.body.style.width = `${designWidth}px`;
// 内容区缩放
content.style.transform = `scale(${s})`;
content.style.transformOrigin = 'top left';
content.style.width = `${designWidth}px`;
// 修复底部空白
const layoutH = content.scrollHeight;
const visualH = layoutH * s;
content.style.marginBottom = `-${Math.ceil(layoutH - visualH)}px`;
// 内容区显示
content.style.opacity = '1';
// navbar 单独缩放（fixed 不受 content transform 影响）
if (navbar) {
navbar.style.transform = `scale(${s})`;
navbar.style.transformOrigin = 'top left';
navbar.style.width = `${designWidth}px`;
navbar.style.opacity = '1';
}
}
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);
})();
</script>
<script>