无信息版本

2026-05-30 14:11:13 +08:00
parent 9a9809af05
commit e476086c5a
12 changed files with 1662 additions and 162 deletions
@@ -17,14 +17,19 @@
        --shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
-      html { scroll-behavior: smooth; }
+      html { scroll-behavior: smooth; 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;
        line-height: 1.6;
-        transform-origin: top left;
+        width: 100vw;
+        overflow-x: hidden;
+      }
+      #pageContent {
+        min-width: 1280px;
+        margin: 0;
+        padding: 0;
      }
      a { color: inherit; text-decoration: none; }

@@ -35,6 +40,7 @@
        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);
@@ -96,6 +102,7 @@
      }
      .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; }
      @media (max-width: 768px) {
        .navbar-menu { display: none; }
        .mobile-menu-btn { display: flex; }
@@ -467,7 +474,7 @@
  </head>
  <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" />
@@ -481,16 +488,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"><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><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" 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"><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">
    <!-- 主内容 -->
    <main class="main-content" id="mainContent">
      <!-- 由 JavaScript 动态渲染 -->
@@ -502,6 +522,8 @@
      <p class="footer-text">© 2025 Chookoo 宠科智能科技（苏州）有限公司 保留所有权利</p>
    </footer>

+    </div><!-- /pageContent -->
+

    <script>
      // 视口缩放 - 基于1920px设计稿
@@ -509,25 +531,54 @@
        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>
@@ -1065,5 +1116,79 @@
        renderProduct(productId);
      });
    </script>
+
+    <!-- 购物弹窗 -->
+    <div class="contact-modal-overlay" id="shopModal">
+      <div class="contact-modal">
+        <button class="contact-modal-close" id="shopModalClose">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+        <div class="contact-modal-icon">
+          <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>
+        </div>
+        <h3>官方旗舰店</h3>
+        <p>扫描二维码，进入官方店铺选购</p>
+        <div class="contact-qr-wrapper">
+          <div class="contact-qr-box"><img src="../images/qr-shop.png" alt="旗舰店二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换店铺二维码<br>qr-shop.png</span>'" /></div>
+          <div class="contact-qr-label">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="7" y1="7" x2="7" y2="7"></line>
+              <line x1="17" y1="7" x2="17" y2="7"></line>
+              <line x1="7" y1="12" x2="7" y2="12"></line>
+              <line x1="17" y1="12" x2="17" y2="12"></line>
+              <line x1="7" y1="17" x2="7" y2="17"></line>
+              <line x1="17" y1="17" x2="17" y2="17"></line>
+            </svg>
+            <span>扫码进店</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // 购物弹窗控制
+      var shopModal = document.getElementById('shopModal');
+      var shopBtn = document.getElementById('shopBtn');
+      var shopModalClose = document.getElementById('shopModalClose');
+
+      if (shopBtn) {
+        shopBtn.addEventListener('click', function(e) {
+          e.preventDefault();
+          shopModal.classList.add('active');
+          document.body.style.overflow = 'hidden';
+        });
+      }
+
+      if (shopModalClose) {
+        shopModalClose.addEventListener('click', function() {
+          shopModal.classList.remove('active');
+          document.body.style.overflow = '';
+        });
+      }
+
+      if (shopModal) {
+        shopModal.addEventListener('click', function(e) {
+          if (e.target === shopModal) {
+            shopModal.classList.remove('active');
+            document.body.style.overflow = '';
+          }
+        });
+      }
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && shopModal && shopModal.classList.contains('active')) {
+          shopModal.classList.remove('active');
+          document.body.style.overflow = '';
+        }
+      });
+    </script>
  </body>
 </html>