Model C50 - 商业展示�?/title> <style> /* 淡入动画 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* 应用于主要内容区�?*/ .hero-text, .details-container { animation: fadeIn 0.8s ease-out; animation-fill-mode: both; } body, html { margin: 0; padding: 0; width: 100%; height: 100%; /* overflow: hidden; Removed to allow scrolling */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #000; scroll-behavior: smooth; } .hero { width: 100%; height: 100vh; background: url('../tupian/DISIGEKAPIANZU/landscape.png') no-repeat center center/cover; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); } .hero-text { position: relative; z-index: 2; text-align: center; color: white; padding: 0 20px; } .hero-text h1 { font-size: 4rem; margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .hero-text p { font-size: 1.5rem; font-weight: 300; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } #container { width: 100%; height: 100vh; /* Occupy full viewport height */ position: relative; z-index: 1; } /* Product Details Section */ .details-section { background: #111; color: #fff; padding: 80px 20px; position: relative; z-index: 2; } .details-container { max-width: 1200px; margin: 0 auto; } .detail-row { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; } .detail-row.reverse { flex-direction: row-reverse; } .detail-img-box { flex: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .detail-img-box img { width: 100%; height: auto; display: block; transition: transform 0.5s; } .detail-img-box:hover img { transform: scale(1.05); } .detail-content { flex: 1; } .detail-content h3 { font-size: 2.5rem; margin-bottom: 20px; background: linear-gradient(45deg, #fff, #aaa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .detail-content p { font-size: 1.1rem; line-height: 1.8; color: rgba(255,255,255,0.7); } .params-box { margin-top: 20px; padding: 20px 24px; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); } .params-box h4 { margin: 0 0 12px 0; font-size: 1.1rem; } .params-box p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: rgba(255,255,255,0.8); white-space: pre-line; } .structure-note { margin-top: 16px; font-size: 0.95rem; color: rgba(255,255,255,0.75); } .structure-link { color: rgba(148,163,184,1); text-decoration: underline; } @media (max-width: 768px) { .detail-row, .detail-row.reverse { flex-direction: column; gap: 30px; } .detail-content h3 { font-size: 2rem; } } /* Back Button */ .lang-switch-fixed { position: fixed; top: 20px; right: 20px; z-index: 1000; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 16px; border-radius: 30px; color: white; font-family: sans-serif; display: flex; gap: 10px; font-size: 0.9rem; } .lang-switch-fixed a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; } .lang-switch-fixed a.active { color: #fff; font-weight: bold; } .lang-switch-fixed a:hover { color: #fff; } .back-btn { position: fixed; top: 20px; left: 20px; z-index: 1000; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 8px; transition: all 0.3s; font-weight: 500; } .back-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateX(5px); } /* Audio Toggle */ .audio-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 1000; background: rgba(255, 255, 255, 0.1); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); } </style>  <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } } </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-REPLACE-ME-REAL-ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-REPLACE-ME-REAL-ID'); </script>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-REPLACE-ME-REAL-ID');</script>  </head> <body> <div class="lang-switch-fixed"> <a href="#" class="active">CN</a> <span style="color:rgba(255,255,255,0.3)">|</span> <a href='/yemian/view4_en'>EN</a> <span style="color:rgba(255,255,255,0.3)">|</span> <a href='/yemian/view4_ar'>AR</a> </div> <a aria-label='返回首页' class='back-btn' href='/'> <span>←</span> 返回首页 </a> <div class="hero"> <div class="hero-text"> <h1>Model C50</h1> <p>商业场景体验</p> </div> </div>  <section class="details-section"> <div class="details-container">  <div class="detail-row"> <div class="detail-img-box"> <img src="../tupian/DISIGEKAPIANZU/landscape.png" loading="lazy" alt="Model C50 Landscape View"> </div> <div class="detail-content"> <h3>商业多功能�?/h3> <p>Model C50 是商业运营的颠覆性产品。其模块化设计允许作为快闪店、移动办公室或展览展位快速部署。以充满未来感的设计脱颖而出，吸引眼球�?/p> </div> </div>  <div class="detail-row reverse"> <div class="detail-img-box"> <img src="../tupian/DISIGEKAPIANZU/structure.png" loading="lazy" alt="Model C50 Structural Diagram"> </div> <div class="detail-content"> <h3>商业级结构与空间配置</h3> <p>Model C50 采用加厚钢制框架与铝合金外饰面板构成主体结构，结合聚氨酯保温层与大面积全景幕墙玻璃，在满足商业展示通透感的同时保证舒适度与耐候性。内部空间预留充足动线与展示面，可作为快闪店、接待前厅或小型展示空间长期使用�?/p> <div class="params-box"> <h4>产品参数</h4> <p>外形尺寸/L*W*H: 8m*3.3m*3.2m 占地面积/Area covered: 27m2 重量/Weight: 6T 使用人数/Number of users: 2-6 主体结构: 加厚钢制框架、铝合金外饰面板、聚氨酯保温层、全景式幕墙玻璃(6+12+6中空玻璃)，配置多樘门窗�? 内部结构: 竹炭纤维板墙、先进防水复合木地板、室内外多色暖光照明、电动窗帘、大型天窗、全屋智能控制、品牌插座面板�? 卫浴设备: 玻璃侧滑门、智能马桶、热水器、淋浴器、品牌洗手盆、品牌水龙头�? 主要设备: 格力中央空调、热水器、浴缸、风暖一体式多功能浴室设备�? 可选配�? 电地暖、水管防冻、投影仪、烟雾报警器、星空屋顶、智能门禁系统、支撑装置�?/p> </div> <p class="structure-note"> 本产品采用与 C 系列通用的模块化壳体结构，详细材料与分层说明可在首页 <a class='structure-link' href='/#structure'>「结构与材料说明�?/a> 模块查看�? </p> </div> </div> </div> </section>  <audio id="bgm" loop autoplay> <source src="https://cdn.pixabay.com/download/audio/2022/05/27/audio_1808fbf07a.mp3?filename=lofi-study-112762.mp3" type="audio/mpeg"> </audio> <div class="audio-toggle" onclick="toggleAudio()">�?/div> <script> // Audio const bgm = document.getElementById('bgm'); if (bgm) bgm.volume = 0.2; function toggleAudio() { if (bgm.paused) bgm.play().catch(e => console.log(e)); else bgm.pause(); } // Ensure audio plays document.body.addEventListener('click', () => { if (bgm.paused) bgm.play().catch(()=>{}); }, { once: true }); </script>  <style> /* Floating Button */ .float-contact-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #6366f1; /* Accent Color */ border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); cursor: pointer; z-index: 1000; transition: transform 0.3s, box-shadow 0.3s; animation: pulse 2s infinite; } .float-contact-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6); } .float-contact-btn svg { width: 30px; height: 30px; fill: white; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } } /* Quote Modal Overlay */ .quote-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 5000; /* Higher than lightbox */ display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; } .quote-modal-overlay.active { display: flex; opacity: 1; } /* Quote Modal Content */ .quote-modal { background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; width: 90%; max-width: 500px; padding: 30px; position: relative; transform: translateY(20px); transition: transform 0.3s; box-shadow: 0 20px 50px rgba(0,0,0,0.5); color: #fff; } .quote-modal-overlay.active .quote-modal { transform: translateY(0); } .quote-modal-close { position: absolute; top: 15px; right: 15px; color: #94a3b8; font-size: 1.5rem; cursor: pointer; line-height: 1; } .quote-modal-close:hover { color: #fff; } .quote-title { color: #6366f1; font-size: 1.5rem; margin-bottom: 10px; text-align: center; } .quote-desc { color: #94a3b8; text-align: center; margin-bottom: 25px; font-size: 0.9rem; } /* Contact Options */ .contact-options { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; } .contact-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: 0.8rem; cursor: pointer; transition: transform 0.2s; text-decoration: none; } .contact-opt:hover { transform: translateY(-3px); color: #6366f1; } .contact-opt-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } /* Quote Form */ .quote-form-group { margin-bottom: 15px; } .quote-form-label { display: block; color: #fff; margin-bottom: 5px; font-size: 0.9rem; } .quote-form-input, .quote-form-select, .quote-form-textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; padding: 10px; border-radius: 8px; font-family: inherit; box-sizing: border-box; } .quote-form-input:focus, .quote-form-select:focus, .quote-form-textarea:focus { outline: none; border-color: #6366f1; background: rgba(255,255,255,0.1); } .quote-submit-btn { width: 100%; background: #6366f1; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.3s; margin-top: 10px; } .quote-submit-btn:hover { background: #4f46e5; } </style>  <div class="float-contact-btn" onclick="openQuoteModal()" title="Contact Us / Get Quote"> <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg> </div>  <div class="quote-modal-overlay" id="quoteModal"> <div class="quote-modal"> <span class="quote-modal-close" onclick="closeQuoteModal()">×</span> <h3 class="quote-title">获取报价</h3> <p class="quote-desc">告诉我们您的需求，我们将在24小时内回复�?/p>  <div class="contact-options"> <a href="https://wa.me/8618660162933" target="_blank" class="contact-opt"> <div class="contact-opt-icon">📞</div> <span>WhatsApp</span> </a> <a href="mailto:shenpaiguoji@outlook.com" class="contact-opt"> <div class="contact-opt-icon">✉️</div> <span>Email</span> </a> <a href="tel:+8618660162933" class="contact-opt"> <div class="contact-opt-icon">📱</div> <span>电话</span> </a> </div> <div style="border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 20px 0;"></div>  <form id="quoteForm" onsubmit="handleQuoteSubmit(event)"> <div class="quote-form-group"> <label class="quote-form-label">姓名</label> <input type="text" class="quote-form-input" required placeholder="您的姓名"> </div> <div class="quote-form-group"> <label class="quote-form-label">联系方式 (Email/微信/WhatsApp)</label> <input type="text" class="quote-form-input" required placeholder="联系方式"> </div> <div class="quote-form-group"> <label class="quote-form-label">感兴趣的型号</label> <select class="quote-form-select"> <option value="C50" selected>Model C50</option> <option value="General">通用咨询</option> <option value="K30">Model K30</option> <option value="K50">Model K50</option> <option value="K70">Model K70</option> <option value="C30">Model C30</option> </select> </div> <div class="quote-form-group"> <label class="quote-form-label">留言内容</label> <textarea class="quote-form-textarea" rows="3" placeholder="目的港、数量或特殊需�?.."></textarea> </div> <button type="submit" class="quote-submit-btn">发送咨�?/button> </form> </div> </div> <script> // Modal Logic function openQuoteModal() { const modal = document.getElementById('quoteModal'); modal.style.display = 'flex'; setTimeout(() => modal.classList.add('active'), 10); } function closeQuoteModal() { const modal = document.getElementById('quoteModal'); modal.classList.remove('active'); setTimeout(() => modal.style.display = 'none', 300); } function handleQuoteSubmit(e) { e.preventDefault(); // Here you would typically send the data to a backend // For now, we'll just show an alert alert('感谢您的咨询！我们将尽快与您联系�?); closeQuoteModal(); } </script> <script> const GALLERY_IMAGES = [ 'landscape.png', 'structure.png' ]; </script>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-REPLACE-ME-REAL-ID" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  </body> </html>