.fl-node-69d5b845bf771 {width: 100%;}.fl-node-69d5b9bc0dab5 {width: 100%;}<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>高端无线降噪耳机 - 产品详情页</title><style>* { box-sizing: border-box; margin: 0; padding: 0; }body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f5f5f5; color: #333; line-height: 1.6; }a { text-decoration: none; color: inherit; }ul { list-style: none; }.container { max-width: 1200px; margin: 0 auto; padding: 20px; }.btn { display: inline-block; padding: 12px 30px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; }.btn-primary { background-color: #ff4d4f; color: white; border: none; }.btn-primary:hover { background-color: #ff7875; }.btn-outline { border: 1px solid #ff4d4f; color: #ff4d4f; background: white; }.btn-outline:hover { background: #fff1f0; }header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 15px 0; }header .container { display: flex; justify-content: space-between; align-items: center; }.logo { font-size: 24px; font-weight: 900; color: #333; letter-spacing: -1px; }.nav-links a { margin-left: 20px; font-size: 14px; color: #666; }.product-core { background: #fff; margin-top: 20px; padding: 40px; border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }.product-gallery { display: flex; gap: 20px; }.thumbnails { display: flex; flex-direction: column; gap: 10px; }.thumb { width: 80px; height: 80px; border: 1px solid #eee; border-radius: 4px; cursor: pointer; object-fit: cover; transition: border-color 0.2s; }.thumb.active, .thumb:hover { border-color: #ff4d4f; }.main-image { flex: 1; height: 500px; background: #f9f9f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }.main-image img { max-width: 100%; max-height: 100%; object-fit: contain; }.product-info h1 { font-size: 28px; margin-bottom: 10px; color: #1f1f1f; }.product-desc { color: #888; font-size: 14px; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }.price-box { margin-bottom: 30px; }.current-price { font-size: 32px; color: #ff4d4f; font-weight: bold; }.original-price { font-size: 16px; color: #999; text-decoration: line-through; margin-left: 10px; }.tag { display: inline-block; background: #fff1f0; color: #ff4d4f; padding: 2px 8px; font-size: 12px; border-radius: 2px; margin-left: 10px; vertical-align: middle; }.sku-selector { margin-bottom: 30px; }.sku-title { font-weight: bold; margin-bottom: 10px; display: block; }.color-options { display: flex; gap: 15px; }.color-item { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; }.color-item.active { border-color: #ff4d4f; }.color-item.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }.actions { display: flex; gap: 20px; align-items: center; }.quantity { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; }.qty-btn { width: 40px; height: 40px; background: #f9f9f9; border: none; cursor: pointer; font-size: 18px; }.qty-input { width: 60px; height: 40px; border: none; text-align: center; font-size: 16px; }.product-details { background: #fff; margin-top: 20px; padding: 0; border-radius: 8px; overflow: hidden; }.tabs-header { display: flex; border-bottom: 1px solid #eee; background: #fcfcfc; }.tab-item { padding: 20px 40px; cursor: pointer; font-size: 16px; font-weight: 500; color: #666; transition: all 0.3s; }.tab-item.active { color: #ff4d4f; border-bottom: 2px solid #ff4d4f; background: #fff; }.tab-content { padding: 40px; display: none; }.tab-content.active { display: block; }.detail-image-placeholder { width: 100%; height: 600px; background: #f0f2f5; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 20px; border-radius: 4px; }@media (max-width: 768px) {.product-core { grid-template-columns: 1fr; gap: 30px; padding: 20px; }.main-image { height: 300px; }.product-gallery { flex-direction: column-reverse; }.thumbnails { flex-direction: row; }.actions { flex-direction: column; align-items: stretch; }.btn { width: 100%; text-align: center; }}</style></head><body><!-- 顶部导航 --><header><div class="container"><div class="logo">LUXE AUDIO</div><nav class="nav-links"><a href="#">首页</a><a href="#">耳机系列</a><a href="#">音箱</a><a href="#">配件</a><a href="#">我的订单</a></nav></div></header><div class="container"><!-- 面包屑 --><div style="margin-bottom: 10px; font-size: 12px; color: #999;">首页 > 耳机系列 > 头戴式耳机 > 降噪大师 Pro</div><!-- 核心购买区 --><section class="product-core"><!-- 左侧：图片 --><div class="product-gallery"><div class="thumbnails"><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=150&h=150&fit=crop" class="thumb active" onclick="changeImage(this, 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop')"><img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?w=150&h=150&fit=crop" class="thumb" onclick="changeImage(this, 'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=800&auto=format&fit=crop')"><img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?w=150&h=150&fit=crop" class="thumb" onclick="changeImage(this, 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=800&auto=format&fit=crop')"></div><div class="main-image"><img id="mainImg" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop" alt="产品主图"></div></div><!-- 右侧：信息 --><div class="product-info"><h1>降噪大师 Pro - 无线头戴式蓝牙耳机</h1><p class="product-desc">智能降噪 | 30小时续航 | 空间音频 | 舒适佩戴</p><div class="price-box"><span class="current-price">¥1,299</span><span class="original-price">¥1,599</span><span class="tag">限时特惠</span></div><div class="sku-selector"><span class="sku-title">颜色分类</span><div class="color-options"><div class="color-item active" style="background-color: #1a1a1a;" onclick="selectColor(this)" title="深空灰"></div><div class="color-item" style="background-color: #e0e0e0;" onclick="selectColor(this)" title="星光白"></div><div class="color-item" style="background-color: #1e3a8a;" onclick="selectColor(this)" title="午夜蓝"></div></div></div><div class="actions"><div class="quantity"><button class="qty-btn" onclick="updateQty(-1)">-</button><input type="text" id="qtyInput" class="qty-input" value="1" readonly><button class="qty-btn" onclick="updateQty(1)">+</button></div><button class="btn btn-primary" style="flex: 2;">立即购买</button><button class="btn btn-outline" style="flex: 1;">加入购物车</button></div><div style="margin-top: 30px; font-size: 12px; color: #666; border-top: 1px solid #eee; padding-top: 15px;"><p>✓ 官方正品保证 &nbsp;&nbsp; ✓ 7天无理由退换 &nbsp;&nbsp; ✓ 全国包邮</p></div></div></section><!-- 底部：详情 Tab --><section class="product-details"><div class="tabs-header"><div class="tab-item active" onclick="switchTab(0)">商品详情</div><div class="tab-item" onclick="switchTab(1)">规格参数</div><div class="tab-item" onclick="switchTab(2)">售后保障</div></div><div class="tab-content active"><h3>沉浸式听觉体验</h3><br><div class="detail-image-placeholder">此处为商品详情长图区域 (800px 宽)</div></div><div class="tab-content"><table style="width: 100%; border-collapse: collapse;"><tr style="border-bottom: 1px solid #eee;"><th style="padding: 15px; text-align: left; width: 20%;">型号</th><td style="padding: 15px;">WH-1000XM5</td></tr><tr style="border-bottom: 1px solid #eee;"><th style="padding: 15px; text-align: left;">佩戴方式</th><td style="padding: 15px;">头戴式</td></tr><tr style="border-bottom: 1px solid #eee;"><th style="padding: 15px; text-align: left;">连接方式</th><td style="padding: 15px;">蓝牙 5.2 / 3.5mm音频线</td></tr><tr style="border-bottom: 1px solid #eee;"><th style="padding: 15px; text-align: left;">电池续航</th><td style="padding: 15px;">开启降噪 30小时</td></tr></table></div><div class="tab-content"><p>1. 本产品支持7天无理由退货（需保持商品完好）。</p><p>2. 自签收之日起享受1年官方质保服务。</p><p>3. 如遇质量问题，请联系在线客服进行换货处理。</p></div></section></div><script>// 图片切换逻辑function changeImage(thumb, src) {// 移除所有缩略图的 active 类document.querySelectorAll('.thumb').forEach(t => t.classList.remove('active'));// 给当前点击的添加 activethumb.classList.add('active');// 更换主图document.getElementById('mainImg').src = src;}// 颜色选择逻辑function selectColor(element) {document.querySelectorAll('.color-item').forEach(c => c.classList.remove('active'));element.classList.add('active');}// 数量增减逻辑function updateQty(change) {const input = document.getElementById('qtyInput');let val = parseInt(input.value);val += change;if (val < 1) val = 1;if (val > 10) val = 10; // 限购10件input.value = val;}// Tab 切换逻辑function switchTab(index) {const headers = document.querySelectorAll('.tab-item');const contents = document.querySelectorAll('.tab-content');headers.forEach(h => h.classList.remove('active'));contents.forEach(c => c.classList.remove('active'));headers[index].classList.add('active');contents[index].classList.add('active');}</script></body></html>