以下是您要求的手机品牌展示SPA单页应用的完整代码。它在一个页面内整合了品牌展示、手机详情对比和筛选功能，设计现代且交互流畅。 ```html 极智 · 手机探索

本模板由顾老师AI 生成 | 内容仅供演示使用手机

极智·手机库

探索未来 · 掌上奇迹

发现2026最值得入手的旗舰手机，智能筛选，一目了然。

🔥 热门旗舰

6款精选

品牌系列

参数对比

选择2~3款手机

点击选择

我的收藏

还没有收藏的手机，去首页添加吧！

``` ```css /* ===== style.css 独立样式文件 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background: #f5f7fc; color: #1e1e2f; line-height: 1.5; padding-top: 70px; /* 为固定导航留空间 */ } /* ===== 导航 ===== */ .main-header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.04); z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.3); transition: background 0.2s; } .header-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.5rem; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.4rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .logo i { font-size: 1.8rem; background: linear-gradient(135deg, #6366f1, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .main-nav { display: flex; gap: 2rem; } .nav-link { text-decoration: none; color: #334155; font-weight: 500; padding: 0.5rem 0.2rem; border-bottom: 2px solid transparent; transition: all 0.2s; display: flex; align-items: center; gap: 6px; font-size: 1rem; } .nav-link i { font-size: 1.1rem; } .nav-link:hover, .nav-link.active { color: #6366f1; border-bottom-color: #6366f1; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; } .hamburger .bar { width: 26px; height: 3px; background: #1e293b; border-radius: 4px; transition: all 0.2s; } /* ===== 页面内容 ===== */ .page-content { max-width: 1280px; margin: 0 auto; padding: 1rem 1.5rem 2rem; } .page { display: none; animation: fadeUp 0.35s ease; } .page.active-page { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ===== 首页英雄 ===== */ .hero-section { position: relative; border-radius: 32px; padding: 3rem 2.5rem; margin-bottom: 2.5rem; background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); overflow: hidden; box-shadow: 0 10px 30px rgba(99,102,241,0.15); } .hero-bg { position: absolute; top: -30%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%); border-radius: 50%; } .hero-text h1 { font-size: 2.6rem; font-weight: 800; background: linear-gradient(135deg, #1e293b, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.6rem; } .hero-text p { font-size: 1.2rem; color: #334155; max-width: 520px; margin-bottom: 1.8rem; } .hero-search { display: flex; align-items: center; background: white; border-radius: 60px; padding: 0.6rem 1.5rem; max-width: 480px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); border: 1px solid rgba(99,102,241,0.2); } .hero-search i { color: #6366f1; font-size: 1.2rem; margin-right: 12px; } .hero-search input { border: none; outline: none; flex: 1; font-size: 1rem; padding: 0.5rem 0; background: transparent; } /* ===== 标题区 ===== */ .section-title { display: flex; align-items: center; justify-content: space-between; margin: 2rem 0 1.5rem; } .section-title h2 { font-weight: 700; font-size: 1.8rem; color: #1e293b; } .badge { background: #e0e7ff; color: #6366f1; font-weight: 600; padding: 0.3rem 1rem; border-radius: 30px; font-size: 0.9rem; } /* ===== 手机卡片网格 ===== */ .phone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.8rem; } .phone-card { background: white; border-radius: 28px; padding: 1.5rem; box-shadow: 0 8px 24px rgba(0,0,0,0.04); transition: all 0.25s ease; border: 1px solid rgba(0,0,0,0.02); cursor: pointer; display: flex; flex-direction: column; } .phone-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 40px rgba(99,102,241,0.12); border-color: #c7d2fe; } .phone-card .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.8rem; } .phone-card .brand-tag { background: #eef2ff; padding: 0.2rem 0.9rem; border-radius: 40px; font-size: 0.75rem; font-weight: 600; color: #6366f1; } .phone-card .fav-btn { background: none; border: none; font-size: 1.5rem; color: #cbd5e1; transition: 0.2s; cursor: pointer; } .phone-card .fav-btn.active { color: #ef4444; } .phone-card .fav-btn:hover { transform: scale(1.1); } .phone-card h3 { font-size: 1.4rem; font-weight: 700; margin: 0.4rem 0 0.2rem; } .phone-card .price { font-weight: 700; color: #6366f1; font-size: 1.2rem; margin: 0.5rem 0; } .phone-card .specs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 1rem; } .phone-card .spec { background: #f1f5f9; padding: 0.2rem 0.8rem; border-radius: 30px; font-size: 0.75rem; color: #475569; } .phone-card .detail-btn { margin-top: auto; background: transparent; border: 1.5px solid #6366f1; color: #6366f1; font-weight: 600; padding: 0.5rem; border-radius: 40px; transition: 0.2s; cursor: pointer; width: 100%; } .phone-card .detail-btn:hover { background: #6366f1; color: white; } /* ===== 品牌筛选 ===== */ .brand-filter { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; } .brand-btn { background: white; border: 1px solid #e2e8f0; padding: 0.5rem 1.4rem; border-radius: 40px; font-weight: 500; transition: all 0.2s; cursor: pointer; font-size: 0.9rem; box-shadow: 0 2px 6px rgba(0,0,0,0.02); } .brand-btn.active, .brand-btn:hover { background: #6366f1; color: white; border-color: #6366f1; box-shadow: 0 8px 16px rgba(99,102,241,0.2); } /* ===== 对比区域 ===== */ .compare-selector { background: white; border-radius: 28px; padding: 1.8rem; box-shadow: 0 8px 24px rgba(0,0,0,0.04); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 2rem; } .compare-slots { display: flex; gap: 1rem; flex-wrap: wrap; } .slot { background: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 40px; padding: 0.6rem 1.6rem; font-weight: 500; color: #64748b; min-width: 120px; text-align: center; transition: 0.2s; cursor: pointer; } .slot.filled { border-style: solid; border-color: #6366f1; background: #eef2ff; color: #1e293b; } .btn-compare { background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; padding: 0.7rem 2rem; border-radius: 60px; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; box-shadow: 0 6px 16px rgba(99,102,241,0.3); } .btn-compare:hover { transform: scale(1.02); box-shadow: 0 10px 24px rgba(99,102,241,0.4); } .compare-result { background: white; border-radius: 28px; padding: 1.5rem; min-height: 120px; display: flex; gap: 1rem; flex-wrap: wrap; border: 1px solid #eef2ff; } .compare-item { flex: 1; min-width: 150px; background: #fafaff; padding: 1.2rem; border-radius: 24px; border: 1px solid #e0e7ff; } .compare-item h4 { font-size: 1.2rem; margin-bottom: 0.5rem; } .compare-item p { margin: 0.3rem 0; color: #334155; } /* ===== 收藏 ===== */ .empty-fav { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; color: #94a3b8; } .empty-fav i { font-size: 4rem; margin-bottom: 1rem; } /* ===== 弹窗 ===== */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; visibility: hidden; opacity: 0; transition: 0.25s; } .modal-overlay.open { visibility: visible; opacity: 1; } .modal-box { background: white; max-width: 520px; width: 90%; border-radius: 40px; padding: 2rem; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.2); max-height: 80vh; overflow-y: auto; } .modal-close { position: absolute; top: 1rem; right: 1.2rem; background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #64748b; } .modal-body h2 { margin-bottom: 1rem; } .modal-body .spec-list { margin: 1rem 0; } .modal-body .spec-list li { list-style: none; padding: 0.3rem 0; border-bottom: 1px solid #f1f5f9; } /* ===== 底部 ===== */ .main-footer { text-align: center; padding: 2rem; color: #94a3b8; font-size: 0.9rem; } /* ===== 响应式 ===== */ @media (max-width: 768px) { .header-inner { padding: 0.6rem 1rem; } .main-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); flex-direction: column; padding: 1rem 2rem; gap: 1rem; box-shadow: 0 20px 30px rgba(0,0,0,0.05); } .main-nav.open { display: flex; } .hamburger { display: flex; } .hero-text h1 { font-size: 2rem; } .phone-grid { grid-template-columns: 1fr; } .compare-slots { flex-direction: column; align-items: stretch; } .slot { width: 100%; } } @media (min-width: 769px) and (max-width: 1024px) { .phone-grid { grid-template-columns: repeat(2, 1fr); } } ``` ```javascript // ===== script.js 独立JS文件 ===== // ---------- 手机数据 (模拟) ---------- const phoneData = [ { id: 1, name: 'iPhone 16 Pro Max', brand: 'Apple', price: '¥9,999', specs: ['A18 Pro', '6.9" OLED', '4800万'], img: '📱', description: '苹果旗舰，钛金属设计，强悍性能。' }, { id: 2, name: 'Samsung Galaxy S25 Ultra', brand: 'Samsung', price: '¥10,699', specs: ['骁龙8 Gen4', '6.8" AMOLED', '2亿像素'], img: '📲', description: '安卓机皇，S Pen加持，AI影像。' }, { id: 3, name: 'Xiaomi 15 Ultra', brand: 'Xiaomi', price: '¥6,999', specs: ['骁龙8 Gen4', '6.73" AMOLED', '徕卡四摄'], img: '📱', description: '徕卡光学，专业影像旗舰。' }, { id: 4, name: 'OPPO Find X8 Pro', brand: 'OPPO', price: '¥5,999', specs: ['天玑9400', '6.78" AMOLED', '哈苏三摄'], img: '📲', description: '潮流设计，哈苏人像大师。' }, { id: 5, name: 'Huawei Pura 80 Ultra', brand: 'Huawei', price: '¥8,999', specs: ['麒麟9100', '6.8" OLED', 'XMAGE影像'], img: '📱', description: '自研芯片，卫星通信，影像新高度。' }, { id: 6, name: 'iPhone 16 Pro', brand: 'Apple', price: '¥8,499', specs: ['A18 Pro', '6.3" OLED', '4800万'], img: '📲', description: '专业级拍摄，轻巧旗舰。' }, { id: 7, name: 'Samsung Galaxy Z Fold6', brand: 'Samsung', price: '¥14,999', specs: ['骁龙8 Gen4', '7.6"折叠', '2亿像素'], img: '📱', description: '折叠巨幕，PC级多任务。' }, { id: 8, name: 'Xiaomi 14 Pro', brand: 'Xiaomi', price: '¥4,999', specs: ['骁龙8 Gen3', '6.73" AMOLED', '徕卡三摄'], img: '📲', description: '小尺寸旗舰，均衡之作。' }, ]; // ---------- 状态管理 ---------- let favorites = JSON.parse(localStorage.getItem('phoneFavs')) || []; let compareSlots = [null, null, null]; // 存储手机对象 // DOM 引用 const pageContent = document.getElementById('pageContent'); const homeGrid = document.getElementById('homeGrid'); const brandGrid = document.getElementById('brandGrid'); const favGrid = document.getElementById('favGrid'); const emptyFav = document.getElementById('emptyFav'); const favCount = document.getElementById('favCount'); const globalSearch = document.getElementById('globalSearch'); const brandFilterBtns = document.querySelectorAll('.brand-btn'); const modalOverlay = document.getElementById('modalOverlay'); const modalBody = document.getElementById('modalBody'); const modalClose = document.getElementById('modalClose'); const hamburgerBtn = document.getElementById('hamburgerBtn'); const mainNav = document.getElementById('mainNav'); const slots = document.querySelectorAll('.slot'); const compareBtn = document.getElementById('compareBtn'); const compareResult = document.getElementById('compareResult'); // ---------- 辅助函数 ---------- function saveFavs() { localStorage.setItem('phoneFavs', JSON.stringify(favorites)); } function isFav(id) { return favorites.includes(id); } function toggleFav(id) { if (isFav(id)) { favorites = favorites.filter(f => f !== id); } else { favorites.push(id); } saveFavs(); renderAll(); } // 渲染卡片 (带收藏状态) function createPhoneCard(phone, showFav = true) { const card = document.createElement('div'); card.className = 'phone-card'; card.dataset.id = phone.id; const favActive = isFav(phone.id) ? 'active' : ''; card.innerHTML = `

${phone.brand} ${showFav ? `` : ''}

${phone.img}

${phone.name}

${phone.price}

${phone.specs.map(s => `${s}`).join('')}

`; // 收藏按钮事件 if (showFav) { const favBtn = card.querySelector('.fav-btn'); favBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleFav(phone.id); }); } // 详情按钮 card.querySelector('.detail-btn').addEventListener('click', (e) => { e.stopPropagation(); showDetail(phone); }); // 整卡点击也可以查看详情 (但排除收藏按钮点击) card.addEventListener('click', (e) => { if (e.target.closest('.fav-btn')) return; showDetail(phone); }); return card; } // 显示详情弹窗 function showDetail(phone) { modalBody.innerHTML = `

${phone.img}

${phone.name} ${phone.brand}

${phone.price}

${phone.description}

🔹 ${s}

`; modalOverlay.classList.add('open'); // 弹窗内收藏 document.getElementById('favFromModal').addEventListener('click', () => { toggleFav(phone.id); modalOverlay.classList.remove('open'); }); } // 关闭弹窗 modalClose.addEventListener('click', () => modalOverlay.classList.remove('open')); modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) modalOverlay.classList.remove('open'); }); // ---------- 渲染各个视图 ---------- function renderHome(filter = '') { homeGrid.innerHTML = ''; let list = phoneData; if (filter) { const kw = filter.toLowerCase(); list = phoneData.filter(p => p.name.toLowerCase().includes(kw) || p.brand.toLowerCase().includes(kw)); } if (list.length === 0) { homeGrid.innerHTML = '

没有找到匹配的手机

'; return; } list.forEach(p => homeGrid.appendChild(createPhoneCard(p))); } function renderBrands(brand = 'all') { brandGrid.innerHTML = ''; let list = brand === 'all' ? phoneData : phoneData.filter(p => p.brand === brand); if (list.length === 0) { brandGrid.innerHTML = '

该品牌暂无机型

'; return; } list.forEach(p => brandGrid.appendChild(createPhoneCard(p))); } function renderFavorites() { favGrid.innerHTML = ''; const favPhones = phoneData.filter(p => favorites.includes(p.id)); emptyFav.style.display = favPhones.length === 0 ? 'flex' : 'none'; favCount.textContent = favorites.length; favPhones.forEach(p => favGrid.appendChild(createPhoneCard(p))); } function renderAll() { const searchVal = globalSearch.value.trim(); renderHome(searchVal); // 保持品牌筛选状态 const activeBrand = document.querySelector('.brand-btn.active')?.dataset.brand || 'all'; renderBrands(activeBrand); renderFavorites(); updateCompareSlotsUI(); } // ---------- 导航 SPA 切换 ---------- document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const page = link.dataset.page; document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active')); link.classList.add('active'); document.querySelectorAll('.page').forEach(p => p.classList.remove('active-page')); document.getElementById(`page-${page}`).classList.add('active-page'); // 关闭移动菜单 mainNav.classList.remove('open'); // 渲染收藏专用 if (page === 'favorites') renderFavorites(); if (page === 'brands') { const active = document.querySelector('.brand-btn.active')?.dataset.brand || 'all'; renderBrands(active); } if (page === 'home') renderHome(globalSearch.value.trim()); }); }); // 汉堡菜单 hamburgerBtn.addEventListener('click', () => { mainNav.classList.toggle('open'); }); // ---------- 全局搜索 ---------- globalSearch.addEventListener('input', (e) => { renderHome(e.target.value.trim()); }); // ---------- 品牌筛选 ---------- brandFilterBtns.forEach(btn => { btn.addEventListener('click', () => { brandFilterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); renderBrands(btn.dataset.brand); }); }); // ---------- 对比功能 ---------- slots.forEach((slot, index) => { slot.addEventListener('click', () => { // 简单模拟：弹出一个选择列表 (这里简化：轮换手机) // 实际可用选择器，这里直接使用未对比的手机循环填充 const available = phoneData.filter(p => !compareSlots.includes(p) || p === compareSlots[index]); if (available.length === 0) return; // 简单循环切换 let idx = 0; if (compareSlots[index]) { const curIdx = available.findIndex(p => p.id === compareSlots[index].id); idx = (curIdx + 1) % available.length; } compareSlots[index] = available[idx]; updateCompareSlotsUI(); }); }); function updateCompareSlotsUI() { slots.forEach((slot, i) => { if (compareSlots[i]) { slot.textContent = compareSlots[i].name; slot.classList.add('filled'); } else { slot.textContent = '点击选择'; slot.classList.remove('filled'); } }); } compareBtn.addEventListener('click', () => { const selected = compareSlots.filter(s => s !== null); if (selected.length < 2) { compareResult.innerHTML = '

请至少选择2款手机进行对比

'; return; } let html = ''; selected.forEach(p => { html += `

${p.img} ${p.name}

品牌 ${p.brand}

价格 ${p.price}

规格 ${p.specs.join(' · ')}

${p.description}

`; }); compareResult.innerHTML = html; }); // ---------- 初始化 ---------- renderAll(); // 默认首页激活 document.querySelector('.nav-link[data-page="home"]').classList.add('active'); ``` ### 探索与对比：手机库的功能设计您可以像操作一个本地应用一样浏览和筛选手机。其核心功能围绕浏览、对比和收藏展开。 - **多视图浏览与筛选**：通过顶部导航可在“首页”、“品牌”、“对比”和“收藏”视图间切换。首页支持全局搜索，品牌页可按Apple、Samsung等标签快速筛选。 - **详情与收藏**：点击任意手机卡片可查看其详细参数和描述。您可以通过卡片或详情弹窗上的心形按钮，将心仪的手机加入收藏列表，方便集中查看。 - **参数对比**：在“对比”页面，您可以通过点击三个槽位来选择2-3款手机，点击“对比”按钮即可并排查看它们的核心参数与描述，辅助决策。