1070 lines
39 KiB
HTML
1070 lines
39 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>产品详情 - Chookoo 宠科智能科技</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: light;
|
||
--bg: #f5f7fb;
|
||
--text: #0f172a;
|
||
--muted: #5b6472;
|
||
--primary: #2f6bff;
|
||
--primary-weak: #e8f1ff;
|
||
--card: #ffffff;
|
||
--line: #e5e7eb;
|
||
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
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;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
|
||
/* 导航栏 */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
background: rgba(255, 255, 255, 0.92);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.navbar-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 64px;
|
||
padding: 0 32px;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
.navbar-menu {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.navbar-logo img { height: 40px; width: auto; }
|
||
.navbar-link {
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
border-radius: 8px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.navbar-link:hover { color: var(--text); background: rgba(0, 0, 0, 0.04); }
|
||
.navbar-link.active { color: var(--primary); background: var(--primary-weak); }
|
||
.navbar-actions { display: flex; align-items: center; gap: 12px; }
|
||
.navbar-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--muted);
|
||
transition: all 0.2s ease;
|
||
}
|
||
.navbar-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }
|
||
.navbar-btn svg { width: 20px; height: 20px; }
|
||
.navbar-cta {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
||
border: none;
|
||
border-radius: 10px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.navbar-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3); }
|
||
.mobile-menu-btn { display: none; }
|
||
@media (max-width: 768px) {
|
||
.navbar-menu { display: none; }
|
||
.mobile-menu-btn { display: flex; }
|
||
.navbar-cta { display: none; }
|
||
}
|
||
|
||
/* 主内容 */
|
||
.main-content {
|
||
padding-top: 100px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
/* 面包屑 */
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
margin-bottom: 32px;
|
||
}
|
||
.breadcrumb a:hover { color: var(--primary); }
|
||
.breadcrumb span { color: var(--text); }
|
||
|
||
/* 产品详情区 */
|
||
.product-detail {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 60px;
|
||
margin-bottom: 80px;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.product-detail { grid-template-columns: 1fr; gap: 40px; }
|
||
}
|
||
|
||
/* 产品图片区 */
|
||
.product-gallery {
|
||
position: sticky;
|
||
top: 100px;
|
||
}
|
||
.product-main-image {
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
border-radius: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
}
|
||
.product-main-image img {
|
||
max-width: 80%;
|
||
max-height: 80%;
|
||
object-fit: contain;
|
||
}
|
||
.product-thumbnails {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
.product-thumb {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: var(--card);
|
||
border: 2px solid var(--line);
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.product-thumb:hover, .product-thumb.active { border-color: var(--primary); }
|
||
.product-thumb img { max-width: 60%; max-height: 60%; object-fit: contain; }
|
||
|
||
/* 产品信息区 */
|
||
.product-info { padding-top: 20px; }
|
||
.product-tags { display: flex; gap: 8px; margin-bottom: 16px; }
|
||
.product-tag {
|
||
padding: 6px 14px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
border-radius: 100px;
|
||
background: var(--primary-weak);
|
||
color: var(--primary);
|
||
}
|
||
.product-tag.green { background: #dcfce7; color: #16a34a; }
|
||
.product-tag.orange { background: #ffedd5; color: #ea580c; }
|
||
.product-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
line-height: 1.2;
|
||
}
|
||
.product-subtitle {
|
||
font-size: 18px;
|
||
color: var(--muted);
|
||
margin-bottom: 24px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 产品亮点 */
|
||
.product-highlights {
|
||
background: var(--card);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
border: 1px solid var(--line);
|
||
}
|
||
.product-highlights h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.product-highlights h3 svg { width: 20px; height: 20px; color: var(--primary); }
|
||
.highlight-list { display: flex; flex-direction: column; gap: 12px; }
|
||
.highlight-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
font-size: 14px;
|
||
color: #374151;
|
||
}
|
||
.highlight-item svg { width: 20px; height: 20px; color: #10b981; flex-shrink: 0; margin-top: 2px; }
|
||
|
||
/* 产品特性区 */
|
||
.product-features {
|
||
margin-bottom: 80px;
|
||
}
|
||
.section-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin-bottom: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.section-title::before {
|
||
content: '';
|
||
width: 4px;
|
||
height: 28px;
|
||
background: linear-gradient(180deg, var(--primary) 0%, #06b6d4 100%);
|
||
border-radius: 2px;
|
||
}
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
}
|
||
.feature-card {
|
||
background: var(--card);
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
border: 1px solid var(--line);
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
}
|
||
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
|
||
.feature-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto 20px;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.feature-icon svg { width: 32px; height: 32px; }
|
||
.feature-icon.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; }
|
||
.feature-icon.green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
|
||
.feature-icon.purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; }
|
||
.feature-icon.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; }
|
||
.feature-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
|
||
.feature-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }
|
||
|
||
/* 产品规格区 */
|
||
.product-specs {
|
||
margin-bottom: 80px;
|
||
}
|
||
.specs-table {
|
||
background: var(--card);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
}
|
||
.specs-row {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.specs-row:last-child { border-bottom: none; }
|
||
.specs-label {
|
||
padding: 16px 24px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
background: #f8fafc;
|
||
}
|
||
.specs-value {
|
||
padding: 16px 24px;
|
||
font-size: 14px;
|
||
color: var(--text);
|
||
}
|
||
@media (max-width: 600px) {
|
||
.specs-row { grid-template-columns: 1fr; }
|
||
.specs-label { border-bottom: 1px solid var(--line); }
|
||
}
|
||
|
||
/* 相关产品 */
|
||
.related-products {
|
||
margin-bottom: 40px;
|
||
}
|
||
.related-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
}
|
||
@media (max-width: 1024px) {
|
||
.related-grid { grid-template-columns: repeat(3, 1fr); }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.related-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
.related-card {
|
||
background: var(--card);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--line);
|
||
transition: all 0.3s;
|
||
}
|
||
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
|
||
.related-card-image {
|
||
height: 140px;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.related-card-image img { max-width: 70%; max-height: 70%; object-fit: contain; }
|
||
.related-card-content { padding: 16px; }
|
||
.related-card-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||
.related-card-desc { font-size: 12px; color: var(--muted); }
|
||
|
||
/* 页脚 */
|
||
.footer {
|
||
background: #0f172a;
|
||
color: #94a3b8;
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
}
|
||
.footer-logo {
|
||
height: 32px;
|
||
margin-bottom: 16px;
|
||
filter: brightness(0) invert(1);
|
||
opacity: 0.8;
|
||
}
|
||
.footer-text { font-size: 13px; }
|
||
|
||
/* 购物弹窗 */
|
||
.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; }
|
||
|
||
/* 404状态 */
|
||
.not-found {
|
||
text-align: center;
|
||
padding: 100px 24px;
|
||
}
|
||
.not-found h1 { font-size: 48px; margin-bottom: 16px; }
|
||
.not-found p { color: var(--muted); margin-bottom: 24px; }
|
||
.not-found a {
|
||
display: inline-block;
|
||
padding: 12px 24px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="navbar-inner">
|
||
<a href="index.html" class="navbar-logo">
|
||
<img src="logo.png" alt="Chookoo" />
|
||
</a>
|
||
<div class="navbar-menu">
|
||
<a href="index.html" class="navbar-link">首页</a>
|
||
<a href="products.html" class="navbar-link active">产品</a>
|
||
<a href="stories.html" class="navbar-link">故事</a>
|
||
<a href="app.html" class="navbar-link">App</a>
|
||
<a href="company.html?article=201" class="navbar-link">关于我们</a>
|
||
</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>
|
||
</a>
|
||
<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>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容 -->
|
||
<main class="main-content" id="mainContent">
|
||
<!-- 由 JavaScript 动态渲染 -->
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<img src="logo.png" alt="Chookoo" class="footer-logo" />
|
||
<p class="footer-text">© 2025 Chookoo 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
||
</footer>
|
||
|
||
|
||
<script>
|
||
// 视口缩放 - 基于1920px设计稿
|
||
(() => {
|
||
const designWidth = 1920;
|
||
const minWidth = 1280;
|
||
const maxWidth = 2560;
|
||
|
||
function scale() {
|
||
const vw = window.innerWidth;
|
||
let scale = 1;
|
||
|
||
if (vw < minWidth) {
|
||
scale = vw / minWidth;
|
||
} else if (vw > maxWidth) {
|
||
scale = vw / maxWidth;
|
||
} else {
|
||
scale = vw / designWidth;
|
||
}
|
||
|
||
document.body.style.transform = `scale(${scale})`;
|
||
document.body.style.width = `${designWidth}px`;
|
||
}
|
||
|
||
scale();
|
||
window.addEventListener('resize', scale);
|
||
})();
|
||
</script>
|
||
<script>
|
||
// 产品数据库
|
||
const products = {
|
||
'cat-toilet-pro': {
|
||
id: 'cat-toilet-pro',
|
||
name: '智能猫厕所 Pro',
|
||
subtitle: 'AkiWell主动健康，全方位守护毛孩子健康',
|
||
image: 'cat.png',
|
||
tags: ['AI智能', '自动', '猫用', '健康', '热销'],
|
||
category: 'toilet',
|
||
highlights: [
|
||
'心跳呼吸体温非接触式监测',
|
||
'AI健康识别智能摄像头',
|
||
'猫咪精准称重传感器',
|
||
'五重防夹猫设计'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '主动健康', desc: '心跳+呼吸+体温多维度监测，主动告知健康风险' },
|
||
{ icon: 'green', title: 'AI摄像头', desc: '体态+如厕行为+眼鼻，全方位无接触扫描' },
|
||
{ icon: 'purple', title: '数据互联', desc: '智宠之家智能产品多数据联动，形成猫咪独立数据库' },
|
||
{ icon: 'orange', title: '防夹猫设计', desc: '四重传感器+物理防夹，安全感满满' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '682*503*446mm' },
|
||
{ label: '球仓容量', value: '52L' },
|
||
{ label: '铺砂容量', value: '4.5L' },
|
||
{ label: '集便仓容量', value: '5.2L' },
|
||
{ label: '适配猫砂', value: '豆腐、混合、矿砂、膨润土' },
|
||
{ label: '适用猫大小', value: '1.5-7.5kg' },
|
||
{ label: '产品净重', value: '8.69kg' },
|
||
{ label: '工作电压', value: '12V DC' },
|
||
{ label: '额定功率', value: '24W' },
|
||
{ label: '连接方式', value: 'wifi 2.4GHz' },
|
||
{ label: '工作噪音', value: '35dB' }
|
||
]
|
||
},
|
||
'cat-toilet-lite': {
|
||
id: 'cat-toilet-lite',
|
||
name: '智能猫厕所 Lite',
|
||
subtitle: '宠小科入门之选，泌尿系统异常提前知',
|
||
image: 'cat.png',
|
||
tags: ['健康', '智能', '猫用', '新品'],
|
||
category: 'toilet',
|
||
highlights: [
|
||
'猫咪泌尿系统异常告知',
|
||
'猫咪精准称重传感器',
|
||
'猫咪数据库搭建',
|
||
'AI数据互联'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '泌尿系统风险告知', desc: '结合称重，通过AI分析潜在的泌尿系统健康风险' },
|
||
{ icon: 'green', title: '称重传感器', desc: '针对猫咪定制的体重监测，精度1%' },
|
||
{ icon: 'purple', title: '数据互联', desc: '智宠之家智能产品多数据联动，全方面守护健康' },
|
||
{ icon: 'orange', title: '数据库搭建', desc: '针对每只猫打造它们的专属数据库' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '682*503*446mm' },
|
||
{ label: '球仓容量', value: '52L' },
|
||
{ label: '铺砂容量', value: '4.5L' },
|
||
{ label: '集便仓容量', value: '5.2L' },
|
||
{ label: '适配猫砂', value: '豆腐、混合、矿砂、膨润土' },
|
||
{ label: '适用猫大小', value: '1.5-7.5kg' },
|
||
{ label: '产品净重', value: '8.69kg' },
|
||
{ label: '工作电压', value: '12V DC' },
|
||
{ label: '额定功率', value: '24W' },
|
||
{ label: '连接方式', value: 'wifi 2.4GHz' },
|
||
{ label: '工作噪音', value: '35dB' }
|
||
]
|
||
},
|
||
'dog-toilet': {
|
||
id: 'dog-toilet',
|
||
name: '智能狗厕所',
|
||
subtitle: '科学如厕训练，智能清洁管理',
|
||
image: 'dog.jpeg',
|
||
tags: ['狗用'],
|
||
category: 'toilet',
|
||
highlights: [
|
||
'智能诱导训练',
|
||
'自动冲水清洁',
|
||
'除臭杀菌系统',
|
||
'APP训练报告'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '智能训练', desc: '科学诱导狗狗养成定点如厕习惯' },
|
||
{ icon: 'green', title: '自动清洁', desc: '一键冲洗，保持卫生洁净' },
|
||
{ icon: 'purple', title: '除臭杀菌', desc: '内置除臭系统，有效去除异味' },
|
||
{ icon: 'orange', title: '训练报告', desc: 'APP记录训练进度，帮助狗狗快速学会' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '650 × 550 × 150 mm' },
|
||
{ label: '适用体重', value: '5-35 kg' },
|
||
{ label: '水箱容量', value: '2L' },
|
||
{ label: '工作电压', value: 'DC 24V / 2A' },
|
||
{ label: '额定功率', value: '48W' },
|
||
{ label: '连接方式', value: 'WiFi 2.4GHz' },
|
||
{ label: '净重', value: '5.8 kg' }
|
||
]
|
||
},
|
||
'smart-feeder': {
|
||
id: 'smart-feeder',
|
||
name: '智能喂食器',
|
||
subtitle: '定时定量精准投喂，养成健康饮食习惯',
|
||
image: 'feeder.png',
|
||
tags: ['通用', '热销'],
|
||
category: 'feeding',
|
||
highlights: [
|
||
'定时定量投喂',
|
||
'手机远程控制',
|
||
'语音呼叫功能',
|
||
'断电记忆保护'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '精准投喂', desc: '每份食量可精确调节，满足不同体型宠物需求' },
|
||
{ icon: 'green', title: '远程控制', desc: '随时随地通过APP控制投喂，出差旅行无忧' },
|
||
{ icon: 'purple', title: '语音呼叫', desc: '录制备餐语音，让宠物准时开饭' },
|
||
{ icon: 'orange', title: '双供电', desc: '支持电源+电池双供电，断电也能正常工作' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '200 × 200 × 350 mm' },
|
||
{ label: '储粮容量', value: '4L (约2kg)' },
|
||
{ label: '适用粮径', value: '5-15 mm' },
|
||
{ label: '工作电压', value: 'DC 5V / 2A' },
|
||
{ label: '额定功率', value: '5W' },
|
||
{ label: '备用电池', value: '3节D型电池' },
|
||
{ label: '连接方式', value: 'WiFi 2.4GHz' },
|
||
{ label: '净重', value: '1.8 kg' }
|
||
]
|
||
},
|
||
'smart-fountain': {
|
||
id: 'smart-fountain',
|
||
name: '智能饮水机',
|
||
subtitle: '四重过滤循环净化，提升饮水健康',
|
||
image: 'water.jpeg',
|
||
tags: ['通用'],
|
||
category: 'feeding',
|
||
highlights: [
|
||
'四重过滤系统',
|
||
'循环活水设计',
|
||
'智能缺水提醒',
|
||
'静音运行'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '四重过滤', desc: '活性炭+离子树脂+超滤膜+高密度棉，有效过滤杂质' },
|
||
{ icon: 'green', title: '循环活水', desc: '持续循环流动，保持水质新鲜' },
|
||
{ icon: 'purple', title: '智能提醒', desc: '缺水、换滤芯自动推送提醒' },
|
||
{ icon: 'orange', title: '静音设计', desc: '低噪音水泵，不影响家人休息' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '220 × 220 × 150 mm' },
|
||
{ label: '水箱容量', value: '2.5L' },
|
||
{ label: '滤芯寿命', value: '约30天' },
|
||
{ label: '工作电压', value: 'DC 5V / 1A' },
|
||
{ label: '额定功率', value: '3W' },
|
||
{ label: '连接方式', value: 'WiFi 2.4GHz' },
|
||
{ label: '净重', value: '0.8 kg' }
|
||
]
|
||
},
|
||
'cat-food-bucket': {
|
||
id: 'cat-food-bucket',
|
||
name: '智能猫粮桶',
|
||
subtitle: '真空保鲜，智能控湿，锁住新鲜',
|
||
image: 'cat.png',
|
||
tags: ['猫用'],
|
||
category: 'feeding',
|
||
highlights: [
|
||
'真空密封保鲜',
|
||
'智能控湿防潮',
|
||
'一键出粮',
|
||
'防虫防尘设计'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '真空保鲜', desc: '一键抽真空，延长猫粮保质期' },
|
||
{ icon: 'green', title: '智能控湿', desc: '内置湿度传感器，自动调节桶内湿度' },
|
||
{ icon: 'purple', title: '一键出粮', desc: '按键即可出粮，方便卫生' },
|
||
{ icon: 'orange', title: '密封设计', desc: '防止虫害和灰尘进入' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '250 × 250 × 350 mm' },
|
||
{ label: '储粮容量', value: '8L (约4kg)' },
|
||
{ label: '工作电压', value: 'DC 5V / 1A' },
|
||
{ label: '额定功率', value: '5W' },
|
||
{ label: '净重', value: '1.2 kg' }
|
||
]
|
||
},
|
||
'dog-food-bucket': {
|
||
id: 'dog-food-bucket',
|
||
name: '智能狗粮桶',
|
||
subtitle: '大容量设计，适合多狗家庭',
|
||
image: 'dog.jpeg',
|
||
tags: ['狗用'],
|
||
category: 'feeding',
|
||
highlights: [
|
||
'超大容量',
|
||
'真空密封保鲜',
|
||
'智能控湿',
|
||
'坚固耐用'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '大容量', desc: '12L超大容量，适合大型犬或多狗家庭' },
|
||
{ icon: 'green', title: '真空保鲜', desc: '一键抽真空，保持狗粮新鲜' },
|
||
{ icon: 'purple', title: '智能控湿', desc: '自动监测并调节湿度' },
|
||
{ icon: 'orange', title: '坚固耐用', desc: '加厚材质，防止狗狗啃咬破坏' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '300 × 300 × 400 mm' },
|
||
{ label: '储粮容量', value: '12L (约6kg)' },
|
||
{ label: '工作电压', value: 'DC 5V / 1A' },
|
||
{ label: '额定功率', value: '5W' },
|
||
{ label: '净重', value: '1.8 kg' }
|
||
]
|
||
},
|
||
'ai-camera': {
|
||
id: 'ai-camera',
|
||
name: 'AI宠物摄像头',
|
||
subtitle: '1080P高清夜视，AI行为识别，双向语音',
|
||
image: 'camera.jpeg',
|
||
tags: ['通用', '新品'],
|
||
category: 'monitor',
|
||
highlights: [
|
||
'1080P高清画质',
|
||
'AI行为识别',
|
||
'双向语音通话',
|
||
'夜视功能'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '高清画质', desc: '1080P全高清，看清宠物每个动作' },
|
||
{ icon: 'green', title: 'AI识别', desc: '智能识别宠物行为，异常情况即时提醒' },
|
||
{ icon: 'purple', title: '双向语音', desc: '远程与宠物对话，安抚宠物情绪' },
|
||
{ icon: 'orange', title: '夜视功能', desc: '红外夜视，24小时守护不间断' }
|
||
],
|
||
specs: [
|
||
{ label: '分辨率', value: '1080P / 720P 可选' },
|
||
{ label: '视角', value: '110° 广角' },
|
||
{ label: '夜视距离', value: '10 m' },
|
||
{ label: '存储方式', value: '云存储 / TF卡 (最大128GB)' },
|
||
{ label: '工作电压', value: 'DC 5V / 2A' },
|
||
{ label: '连接方式', value: 'WiFi 2.4GHz' },
|
||
{ label: '净重', value: '0.3 kg' }
|
||
]
|
||
},
|
||
'health-tracker': {
|
||
id: 'health-tracker',
|
||
name: '宠物健康追踪器',
|
||
subtitle: '轻便佩戴，实时监测活动量与睡眠',
|
||
image: 'cat.png',
|
||
tags: ['通用'],
|
||
category: 'monitor',
|
||
highlights: [
|
||
'轻便舒适佩戴',
|
||
'活动量监测',
|
||
'睡眠质量分析',
|
||
'GPS定位防丢'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '活动监测', desc: '记录宠物每日活动量，科学管理健康' },
|
||
{ icon: 'green', title: '睡眠分析', desc: '监测睡眠质量，发现健康隐患' },
|
||
{ icon: 'purple', title: 'GPS定位', desc: '实时定位，防止宠物走失' },
|
||
{ icon: 'orange', title: '轻便设计', desc: '仅15g重量，宠物佩戴无负担' }
|
||
],
|
||
specs: [
|
||
{ label: '尺寸', value: '35 × 35 × 12 mm' },
|
||
{ label: '重量', value: '15 g' },
|
||
{ label: '电池续航', value: '约7天' },
|
||
{ label: '防水等级', value: 'IP67' },
|
||
{ label: '定位方式', value: 'GPS + LBS + WiFi' },
|
||
{ label: '连接方式', value: '蓝牙5.0' }
|
||
]
|
||
},
|
||
'environment-monitor': {
|
||
id: 'environment-monitor',
|
||
name: '环境监测仪',
|
||
subtitle: '温湿度、空气质量实时监测',
|
||
image: 'dog.jpeg',
|
||
tags: ['通用'],
|
||
category: 'monitor',
|
||
highlights: [
|
||
'温湿度监测',
|
||
'空气质量检测',
|
||
'异常提醒',
|
||
'历史数据记录'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '温湿度监测', desc: '实时显示环境温湿度，自动调节提醒' },
|
||
{ icon: 'green', title: '空气质量', desc: '检测PM2.5、甲醛等有害物质' },
|
||
{ icon: 'purple', title: '异常提醒', desc: '环境参数异常即时推送通知' },
|
||
{ icon: 'orange', title: '数据记录', desc: '记录历史数据，分析环境变化趋势' }
|
||
],
|
||
specs: [
|
||
{ label: '产品尺寸', value: '80 × 80 × 25 mm' },
|
||
{ label: '温度范围', value: '-10°C ~ 50°C' },
|
||
{ label: '湿度范围', value: '0% ~ 100% RH' },
|
||
{ label: 'PM2.5检测', value: '0 ~ 500 μg/m³' },
|
||
{ label: '工作电压', value: 'DC 5V / 0.5A' },
|
||
{ label: '连接方式', value: 'WiFi 2.4GHz' },
|
||
{ label: '净重', value: '0.1 kg' }
|
||
]
|
||
},
|
||
'filter-set': {
|
||
id: 'filter-set',
|
||
name: '替换滤网套装',
|
||
subtitle: '适用于饮水机，建议3个月更换',
|
||
image: 'cat.png',
|
||
tags: ['配件'],
|
||
category: 'accessories',
|
||
highlights: [
|
||
'四重过滤',
|
||
'3片装',
|
||
'建议3个月更换',
|
||
'原厂正品'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '四重过滤', desc: '活性炭+离子树脂+超滤膜+高密度棉' },
|
||
{ icon: 'green', title: '长效使用', desc: '每片可使用约30天' },
|
||
{ icon: 'purple', title: '原厂品质', desc: '官方正品，保证过滤效果' },
|
||
{ icon: 'orange', title: '易于更换', desc: '简单几步即可完成更换' }
|
||
],
|
||
specs: [
|
||
{ label: '包装规格', value: '3片/盒' },
|
||
{ label: '单片寿命', value: '约30天' },
|
||
{ label: '适用机型', value: 'Chookoo智能饮水机全系' }
|
||
]
|
||
},
|
||
'cleaning-kit': {
|
||
id: 'cleaning-kit',
|
||
name: '清洁耗材包',
|
||
subtitle: '适用于智能厕所，保持卫生洁净',
|
||
image: 'dog.jpeg',
|
||
tags: ['配件'],
|
||
category: 'accessories',
|
||
highlights: [
|
||
'含集便袋10个',
|
||
'含除臭颗粒',
|
||
'含清洁刷',
|
||
'原厂配件'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '集便袋', desc: '可降解材质，环保卫生' },
|
||
{ icon: 'green', title: '除臭颗粒', desc: '有效分解异味，保持清新' },
|
||
{ icon: 'purple', title: '清洁刷', desc: '专用设计，清洁更彻底' },
|
||
{ icon: 'orange', title: '套装优惠', desc: '组合购买更划算' }
|
||
],
|
||
specs: [
|
||
{ label: '集便袋数量', value: '10个' },
|
||
{ label: '除臭颗粒', value: '200g' },
|
||
{ label: '适用机型', value: 'Chookoo智能厕所全系' }
|
||
]
|
||
},
|
||
'power-adapter': {
|
||
id: 'power-adapter',
|
||
name: '备用电源适配器',
|
||
subtitle: '通用设计，支持全系产品',
|
||
image: 'cat.png',
|
||
tags: ['配件'],
|
||
category: 'accessories',
|
||
highlights: [
|
||
'全系通用',
|
||
'过压保护',
|
||
'安全认证',
|
||
'长线设计'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '通用设计', desc: '支持全系Chookoo智能产品' },
|
||
{ icon: 'green', title: '安全保护', desc: '过压、过流、短路多重保护' },
|
||
{ icon: 'purple', title: '品质认证', desc: '通过3C、CE等多项安全认证' },
|
||
{ icon: 'orange', title: '1.8米线长', desc: '满足各种安装场景需求' }
|
||
],
|
||
specs: [
|
||
{ label: '输出规格', value: 'DC 24V / 2A' },
|
||
{ label: '输入电压', value: 'AC 100-240V' },
|
||
{ label: '线长', value: '1.8 m' },
|
||
{ label: '认证', value: '3C、CE、FCC' }
|
||
]
|
||
},
|
||
'extended-warranty': {
|
||
id: 'extended-warranty',
|
||
name: '延长保修服务',
|
||
subtitle: '额外1年保修，安心无忧',
|
||
image: 'dog.jpeg',
|
||
tags: ['服务'],
|
||
category: 'accessories',
|
||
highlights: [
|
||
'额外1年保修',
|
||
'全国联保',
|
||
'优先客服',
|
||
'免费上门'
|
||
],
|
||
features: [
|
||
{ icon: 'blue', title: '延保1年', desc: '标准保修基础上延长1年' },
|
||
{ icon: 'green', title: '全国联保', desc: '全国任意官方售后点可享服务' },
|
||
{ icon: 'purple', title: '优先客服', desc: '专属客服通道，响应更快速' },
|
||
{ icon: 'orange', title: '免费上门', desc: '部分城市提供免费上门服务' }
|
||
],
|
||
specs: [
|
||
{ label: '服务内容', value: '延长保修1年' },
|
||
{ label: '服务范围', value: '中国大陆地区' },
|
||
{ label: '有效期', value: '购买后自动激活' }
|
||
]
|
||
}
|
||
};
|
||
|
||
// 获取相关产品
|
||
function getRelatedProducts(currentId, category) {
|
||
const allProducts = Object.values(products);
|
||
return allProducts
|
||
.filter(p => p.id !== currentId)
|
||
.filter(p => p.category === category || Math.random() > 0.5)
|
||
.slice(0, 4);
|
||
}
|
||
|
||
// 渲染产品详情
|
||
function renderProduct(productId) {
|
||
const product = products[productId];
|
||
const mainContent = document.getElementById('mainContent');
|
||
|
||
if (!product) {
|
||
mainContent.innerHTML = `
|
||
<div class="not-found">
|
||
<h1>产品未找到</h1>
|
||
<p>抱歉，您访问的产品不存在或已下架</p>
|
||
<a href="products.html">返回产品列表</a>
|
||
</div>
|
||
`;
|
||
document.title = '产品未找到 - Chookoo';
|
||
return;
|
||
}
|
||
|
||
document.title = `${product.name} - Chookoo`;
|
||
|
||
const relatedProducts = getRelatedProducts(product.id, product.category);
|
||
|
||
mainContent.innerHTML = `
|
||
<!-- 面包屑 -->
|
||
<div class="breadcrumb">
|
||
<a href="index.html">首页</a>
|
||
<span>/</span>
|
||
<a href="products.html">产品</a>
|
||
<span>/</span>
|
||
<span>${product.name}</span>
|
||
</div>
|
||
|
||
<!-- 产品详情 -->
|
||
<div class="product-detail">
|
||
<div class="product-gallery">
|
||
<div class="product-main-image">
|
||
<img src="${product.image}" alt="${product.name}" />
|
||
</div>
|
||
<div class="product-thumbnails">
|
||
<div class="product-thumb active">
|
||
<img src="${product.image}" alt="${product.name}" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="product-info">
|
||
<div class="product-tags">
|
||
${product.tags.map(tag => `<span class="product-tag ${tag === '热销' ? 'green' : tag === '新品' ? 'orange' : ''}">${tag}</span>`).join('')}
|
||
</div>
|
||
<h1 class="product-title">${product.name}</h1>
|
||
<p class="product-subtitle">${product.subtitle}</p>
|
||
|
||
<div class="product-highlights">
|
||
<h3>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
产品亮点
|
||
</h3>
|
||
<div class="highlight-list">
|
||
${product.highlights.map(h => `
|
||
<div class="highlight-item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span>${h}</span>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品特性 -->
|
||
<section class="product-features">
|
||
<h2 class="section-title">产品特性</h2>
|
||
<div class="features-grid">
|
||
${product.features.map(f => `
|
||
<div class="feature-card">
|
||
<div class="feature-icon ${f.icon}">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
|
||
</div>
|
||
<h3>${f.title}</h3>
|
||
<p>${f.desc}</p>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品规格 -->
|
||
<section class="product-specs">
|
||
<h2 class="section-title">产品规格</h2>
|
||
<div class="specs-table">
|
||
${product.specs.map(s => `
|
||
<div class="specs-row">
|
||
<div class="specs-label">${s.label}</div>
|
||
<div class="specs-value">${s.value}</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 相关产品 -->
|
||
${relatedProducts.length > 0 ? `
|
||
<section class="related-products">
|
||
<h2 class="section-title">相关产品</h2>
|
||
<div class="related-grid">
|
||
${relatedProducts.map(p => `
|
||
<a href="product-detail.html?id=${p.id}" class="related-card">
|
||
<div class="related-card-image">
|
||
<img src="${p.image}" alt="${p.name}" />
|
||
</div>
|
||
<div class="related-card-content">
|
||
<h3 class="related-card-title">${p.name}</h3>
|
||
<p class="related-card-desc">${p.subtitle}</p>
|
||
</div>
|
||
</a>
|
||
`).join('')}
|
||
</div>
|
||
</section>
|
||
` : ''}
|
||
`;
|
||
}
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const productId = urlParams.get('id') || 'cat-toilet-pro';
|
||
renderProduct(productId);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|