无信息版本

pages/story-detail.html

@@ -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; }
 
@@ -33,6 +38,7 @@
         position: fixed;
         top: 0; 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);
@@ -82,6 +88,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; }
 
       /* 主内容 */
       .main-content {
@@ -334,11 +341,125 @@
       .story-hero { animation: fadeInUp 0.6s ease; }
       .story-body { animation: fadeInUp 0.6s ease 0.15s both; }
       .related-stories { animation: fadeInUp 0.6s ease 0.3s both; }
+      /* 购物弹窗样式 */
+      .contact-modal-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(8px);
+        z-index: 2000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+      }
+      .contact-modal-overlay.active {
+        opacity: 1;
+        visibility: visible;
+      }
+      .contact-modal {
+        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+        border-radius: 24px;
+        padding: 40px;
+        max-width: 400px;
+        width: 90%;
+        transform: scale(0.9) translateY(20px);
+        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
+        position: relative;
+        text-align: center;
+      }
+      .contact-modal-overlay.active .contact-modal {
+        transform: scale(1) translateY(0);
+      }
+      .contact-modal-close {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.05);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #6b7280;
+        transition: all 0.2s ease;
+      }
+      .contact-modal-close:hover {
+        background: rgba(0, 0, 0, 0.1);
+        color: #1f2937;
+      }
+      .contact-modal-icon {
+        width: 64px;
+        height: 64px;
+        margin: 0 auto 16px;
+        background: linear-gradient(135deg, #2f6bff 0%, #06b6d4 100%);
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+      }
+      .contact-modal-icon svg {
+        width: 32px;
+        height: 32px;
+      }
+      .contact-modal h3 {
+        font-size: 22px;
+        font-weight: 700;
+        color: #1f2937;
+        margin: 0 0 8px;
+      }
+      .contact-modal p {
+        font-size: 14px;
+        color: #6b7280;
+        margin: 0 0 24px;
+      }
+      .contact-qr-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+      }
+      .contact-qr-box {
+        width: 160px;
+        height: 160px;
+        background: #f3f4f6;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      .contact-qr-box img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .contact-qr-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background: #f3f4f6;
+        border-radius: 8px;
+        font-size: 13px;
+        color: #4b5563;
+      }
+      .contact-qr-label svg {
+        width: 16px;
+        height: 16px;
+      }
     </style>
   </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" />
@@ -352,16 +473,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 动态渲染 -->
@@ -372,18 +506,53 @@
       <p class="footer-text">&copy; 2025 Chookoo 宠科智能科技（苏州）有限公司 保留所有权利</p>
     </footer>
 
+    </div><!-- /pageContent -->
+
     <script>
-    // 视口缩放
+    // 视口缩放 - 基于1920px设计稿
     (() => {
       const designWidth = 1920, minWidth = 1280, maxWidth = 2560;
+      const content = document.getElementById('pageContent');
+      const navbar = document.querySelector('.navbar');
+
       function scale() {
         const vw = window.innerWidth;
         let s = vw < minWidth ? vw / minWidth : vw > maxWidth ? vw / maxWidth : vw / designWidth;
-        document.body.style.transform = 'scale(' + s + ')';
-        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 rect = content.getBoundingClientRect();
+        const s = rect.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);
     })();
 
     // 故事数据库
@@ -632,5 +801,79 @@
       renderStory(storyId);
     });
     </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>