1749 lines
75 KiB
HTML
1749 lines
75 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 { overflow-y: scroll; 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);
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
line-height: 1.6;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
#pageContent {
|
||
min-width: 1280px;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* 导航栏 */
|
||
.navbar {
|
||
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);
|
||
}
|
||
.navbar-inner {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 64px;
|
||
padding: 0 32px;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
.navbar-menu {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.navbar-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
}
|
||
.navbar-logo img {
|
||
height: 40px;
|
||
width: auto;
|
||
}
|
||
.navbar-link {
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--muted);
|
||
text-decoration: none;
|
||
border-radius: 8px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.navbar-link:hover {
|
||
color: var(--text);
|
||
background: rgba(0, 0, 0, 0.04);
|
||
text-decoration: none;
|
||
}
|
||
.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;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
text-decoration: none;
|
||
}
|
||
.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 {
|
||
padding-top: 100px;
|
||
padding-bottom: 80px;
|
||
min-height: 100vh;
|
||
}
|
||
.container {
|
||
width: 1000px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
/* 搜索区域 */
|
||
.search-section {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
.search-title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
color: var(--text);
|
||
}
|
||
.search-subtitle {
|
||
font-size: 16px;
|
||
color: var(--muted);
|
||
margin-bottom: 32px;
|
||
}
|
||
.search-box {
|
||
position: relative;
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
}
|
||
.search-input {
|
||
width: 100%;
|
||
padding: 16px 24px 16px 52px;
|
||
font-size: 16px;
|
||
border: 2px solid var(--line);
|
||
border-radius: 16px;
|
||
background: var(--card);
|
||
outline: none;
|
||
transition: all 0.3s;
|
||
}
|
||
.search-input:focus {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.1);
|
||
}
|
||
.search-icon {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--muted);
|
||
}
|
||
.search-results {
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--card);
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
display: none;
|
||
z-index: 100;
|
||
}
|
||
.search-results.active { display: block; }
|
||
.search-result-item {
|
||
padding: 14px 20px;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid var(--line);
|
||
transition: background 0.2s;
|
||
}
|
||
.search-result-item:last-child { border-bottom: none; }
|
||
.search-result-item:hover { background: var(--primary-weak); }
|
||
.search-result-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
margin-bottom: 4px;
|
||
}
|
||
.search-result-category {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
.search-no-result {
|
||
padding: 24px;
|
||
text-align: center;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* 分类标签 */
|
||
.category-tabs {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 40px;
|
||
}
|
||
.category-tab {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
border-radius: 999px;
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.category-tab:hover {
|
||
border-color: var(--primary);
|
||
color: var(--primary);
|
||
}
|
||
.category-tab.active {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
color: #fff;
|
||
}
|
||
|
||
/* 文章分类区块 */
|
||
.articles-section {
|
||
margin-bottom: 48px;
|
||
}
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
cursor: pointer;
|
||
}
|
||
.section-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 12px;
|
||
font-size: 20px;
|
||
}
|
||
.section-icon.litter { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
||
.section-icon.fountain { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
|
||
.section-icon.feeder { background: linear-gradient(135deg, #fef3c7, #fde68a); }
|
||
.section-icon.app { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
|
||
.section-icon.other { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
|
||
.section-icon.faq { background: linear-gradient(135deg, #fee2e2, #fecaca); }
|
||
.section-icon.install { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
|
||
.section-title {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
flex: 1;
|
||
}
|
||
.section-count {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
background: var(--bg);
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
}
|
||
.section-toggle {
|
||
color: var(--muted);
|
||
transition: transform 0.3s;
|
||
}
|
||
.section-header.collapsed .section-toggle {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
/* 文章列表 */
|
||
.article-list {
|
||
display: grid;
|
||
gap: 12px;
|
||
padding-left: 56px;
|
||
}
|
||
.article-list.hidden { display: none; }
|
||
.article-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
background: var(--card);
|
||
border-radius: 12px;
|
||
border: 1px solid var(--line);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.article-item:hover {
|
||
border-color: var(--primary);
|
||
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.1);
|
||
transform: translateX(4px);
|
||
}
|
||
.article-item svg {
|
||
color: var(--primary);
|
||
flex-shrink: 0;
|
||
}
|
||
.article-title {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
}
|
||
.article-arrow {
|
||
color: var(--muted);
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.article-item:hover .article-arrow {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 文章详情页 */
|
||
.article-detail {
|
||
display: none;
|
||
}
|
||
.article-detail.active {
|
||
display: block;
|
||
}
|
||
.article-breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
margin-bottom: 24px;
|
||
}
|
||
.article-breadcrumb a:hover { color: var(--primary); }
|
||
.article-detail-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
line-height: 1.4;
|
||
}
|
||
.article-meta {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin-bottom: 32px;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.article-content {
|
||
font-size: 16px;
|
||
line-height: 1.8;
|
||
color: #374151;
|
||
}
|
||
.article-content h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 32px 0 16px;
|
||
color: var(--text);
|
||
}
|
||
.article-content p {
|
||
margin-bottom: 16px;
|
||
}
|
||
.article-content ul, .article-content ol {
|
||
margin-bottom: 16px;
|
||
padding-left: 24px;
|
||
}
|
||
.article-content li {
|
||
margin-bottom: 8px;
|
||
}
|
||
.article-content img {
|
||
max-width: 100%;
|
||
border-radius: 12px;
|
||
margin: 20px 0;
|
||
}
|
||
.article-tip {
|
||
background: var(--primary-weak);
|
||
border-left: 4px solid var(--primary);
|
||
padding: 16px 20px;
|
||
border-radius: 0 12px 12px 0;
|
||
margin: 24px 0;
|
||
}
|
||
.article-tip-title {
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* 返回按钮 */
|
||
.back-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 10px 16px;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
margin-bottom: 24px;
|
||
}
|
||
.back-btn:hover {
|
||
border-color: var(--primary);
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* 相关文章 */
|
||
.related-articles {
|
||
margin-top: 48px;
|
||
padding-top: 32px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.related-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
.related-list {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
.related-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
background: var(--card);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.related-item:hover {
|
||
background: var(--primary-weak);
|
||
}
|
||
.related-item svg {
|
||
color: var(--primary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 页脚 */
|
||
.footer {
|
||
background: #1a1f2e;
|
||
color: #9ca3af;
|
||
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;
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 768px) {
|
||
.search-title { font-size: 24px; }
|
||
.search-input { padding: 14px 20px 14px 48px; font-size: 15px; }
|
||
.article-list { padding-left: 0; margin-top: 16px; }
|
||
.section-header { padding: 12px 16px; background: var(--card); border-radius: 12px; }
|
||
.article-detail-title { font-size: 22px; }
|
||
}
|
||
|
||
/* 列表页隐藏/显示 */
|
||
.articles-list-view { display: block; }
|
||
.articles-list-view.hidden { display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar" style="opacity:0">
|
||
<div class="navbar-inner">
|
||
<a href="../index.html" class="navbar-logo">
|
||
<img src="../images/白字logo.png" alt="Chookoo" />
|
||
</a>
|
||
<div class="navbar-menu">
|
||
<a href="../index.html" class="navbar-link"><span data-i18n="nav_home">首页</span></a>
|
||
<a href="products.html" class="navbar-link"><span data-i18n="nav_products">产品</span></a>
|
||
<a href="stories.html" class="navbar-link"><span data-i18n="nav_stories">故事</span></a>
|
||
<a href="app.html" class="navbar-link"><span data-i18n="nav_app">App</span></a>
|
||
<a href="company.html?article=201" class="navbar-link"><span data-i18n="nav_about">关于我们</span></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" 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>
|
||
</select>
|
||
<a href="../index.html#contact" class="navbar-cta"><span data-i18n="nav_contact">联系我们</span></a>
|
||
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
||
<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">
|
||
<div class="container">
|
||
<!-- 文章列表视图 -->
|
||
<div class="articles-list-view" id="articlesListView">
|
||
<!-- 搜索区域 -->
|
||
<section class="search-section">
|
||
<h1 class="search-title">帮助中心</h1>
|
||
<p class="search-subtitle">搜索您想了解的问题，或浏览下方分类</p>
|
||
<div class="search-box">
|
||
<svg class="search-icon" width="20" height="20" 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>
|
||
<input type="text" class="search-input" id="searchInput" placeholder="搜索问题，如：如何连接WiFi、设备不工作..." />
|
||
<div class="search-results" id="searchResults"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 分类标签 -->
|
||
<div class="category-tabs" id="categoryTabs">
|
||
<div class="category-tab active" data-category="all">全部</div>
|
||
<div class="category-tab" data-category="install">安装指导</div>
|
||
<div class="category-tab" data-category="litter">智能猫厕所</div>
|
||
<div class="category-tab" data-category="fountain">智能饮水机</div>
|
||
<div class="category-tab" data-category="feeder">智能喂食器</div>
|
||
<div class="category-tab" data-category="app">APP使用</div>
|
||
<div class="category-tab" data-category="faq">常见问题</div>
|
||
<div class="category-tab" data-category="other">其他问题</div>
|
||
</div>
|
||
|
||
<!-- 文章分类列表 -->
|
||
<div id="articlesContainer"></div>
|
||
</div>
|
||
|
||
<!-- 文章详情视图 -->
|
||
<div class="article-detail" id="articleDetail">
|
||
<button class="back-btn" id="backToList">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||
返回列表
|
||
</button>
|
||
<div id="articleContent"></div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<img src="../images/白字logo.png" alt="Chookoo" class="footer-logo" />
|
||
<p class="footer-text">© 2025 宠小科智能科技（苏州）有限公司 保留所有权利</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// 视口缩放 - 基于1920px设计稿
|
||
(() => {
|
||
const designWidth = 1920;
|
||
const minWidth = 1280;
|
||
const maxWidth = 2560;
|
||
const content = document.getElementById('pageContent');
|
||
const navbar = document.querySelector('.navbar');
|
||
|
||
function scale() {
|
||
const vw = window.innerWidth;
|
||
let s = 1;
|
||
|
||
if (vw < minWidth) {
|
||
s = vw / minWidth;
|
||
} else if (vw > maxWidth) {
|
||
s = vw / maxWidth;
|
||
} else {
|
||
s = vw / designWidth;
|
||
}
|
||
|
||
// 内容区缩放
|
||
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 s = content.getBoundingClientRect().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);
|
||
// 持续监听 DOM 变化与图片加载，防止底部白边
|
||
new MutationObserver(() => requestAnimationFrame(fixLayout)).observe(content, { childList: true, subtree: true, attributes: true });
|
||
document.querySelectorAll('img').forEach(img => { if (!img.complete) img.addEventListener('load', fixLayout); });
|
||
})();
|
||
</script>
|
||
<script>
|
||
// 文章数据
|
||
const articles = [
|
||
// 安装指导
|
||
{
|
||
id: 101,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能猫砂盆安装指南（C10 Pro / C10）',
|
||
content: `
|
||
<p>本指南适用于 C10 Pro 和 C10 两款智能猫砂盆，请按以下步骤操作：</p>
|
||
|
||
<h3>配件清单</h3>
|
||
<p>开箱后请确认以下配件齐全：主机、电源适配器、净味盒、大颗粒砂网、小颗粒砂网、垃圾袋、控砂垫、踏板。</p>
|
||
|
||
<h3>主机安装</h3>
|
||
<ol>
|
||
<li><strong>安装集便仓</strong>：将集便仓与底座1装好，向下按压确保装紧</li>
|
||
<li><strong>安装底座3</strong>：将机器平放，两个底座3安装至主机上</li>
|
||
<li><strong>安装底座2</strong>：微抬机器，将底座2向上安装好</li>
|
||
<li><strong>安装脚踏</strong>：将脚踏斜插入便仓卡扣</li>
|
||
<li><strong>推入便仓</strong>：按箭头方向推入便仓</li>
|
||
<li><strong>安装砂网</strong>：选择合适的砂网（大/小颗粒），向下扣好卡扣</li>
|
||
</ol>
|
||
|
||
<h3>净味模块安装</h3>
|
||
<ol>
|
||
<li>按箭头方向抽出集便仓</li>
|
||
<li>将净味盒从上向下安装到便仓拉手内侧</li>
|
||
</ol>
|
||
|
||
<h3>垃圾袋安装</h3>
|
||
<ol>
|
||
<li>按箭头方向抽出集便仓</li>
|
||
<li>套好垃圾袋，平整铺于集便仓内</li>
|
||
<li>将垃圾袋的抽绳拉出，从卡槽穿过</li>
|
||
<li>按箭头方向装回集便仓</li>
|
||
</ol>
|
||
|
||
<h3>连接电源</h3>
|
||
<p>取出电源适配器，连接电源。仅限使用原装适配器，其他适配器可能损坏产品。</p>
|
||
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">⚠️ 注意</div>
|
||
<p>首次使用前请撕掉设备上的保护膜，确保传感器表面清洁无遮挡。请将产品置于水平表面上。</p>
|
||
</div>
|
||
`,
|
||
views: 2345,
|
||
date: '2025-01-15'
|
||
},
|
||
{
|
||
id: 102,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能饮水机安装指南',
|
||
content: `
|
||
<p>智能饮水机安装简单，只需几个步骤即可完成：</p>
|
||
<h3>开箱检查</h3>
|
||
<ul>
|
||
<li>水箱 × 1</li>
|
||
<li>底座（含水泵）× 1</li>
|
||
<li>滤芯 × 1</li>
|
||
<li>电源适配器 × 1</li>
|
||
<li>说明书 × 1</li>
|
||
</ul>
|
||
<h3>安装步骤</h3>
|
||
<ol>
|
||
<li><strong>清洗部件</strong>：首次使用前，用清水清洗水箱和底座，不要水洗电机部分</li>
|
||
<li><strong>安装滤芯</strong>：将滤芯浸泡5分钟后冲洗，然后安装到水箱内指定位置</li>
|
||
<li><strong>加水</strong>：向水箱加入清水，注意不要超过MAX水位线</li>
|
||
<li><strong>组装</strong>：将水箱放置到底座上，确保对齐卡扣</li>
|
||
<li><strong>连接电源</strong>：将电源适配器连接到底座，插头插入插座</li>
|
||
<li><strong>开机</strong>：短按电源键开机，选择工作模式（持续出水/间歇出水）</li>
|
||
</ol>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议水位</div>
|
||
<p>建议水位保持在最低线以上，避免水泵空转影响寿命。</p>
|
||
</div>
|
||
`,
|
||
views: 1876,
|
||
date: '2025-01-14'
|
||
},
|
||
{
|
||
id: 103,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能喂食器安装指南',
|
||
content: `
|
||
<p>智能喂食器安装步骤如下：</p>
|
||
<h3>开箱检查</h3>
|
||
<ul>
|
||
<li>粮仓桶 × 1</li>
|
||
<li>底座 × 1</li>
|
||
<li>食盆 × 1</li>
|
||
<li>干燥剂盒 × 1</li>
|
||
<li>电源适配器 × 1</li>
|
||
<li>备用电池仓盖 × 1</li>
|
||
</ul>
|
||
<h3>安装步骤</h3>
|
||
<ol>
|
||
<li><strong>选择位置</strong>：放置在平稳干燥的地面或桌面，远离潮湿环境</li>
|
||
<li><strong>安装食盆</strong>：将食盆对准底座卡槽推入，确保稳固</li>
|
||
<li><strong>装入粮食</strong>：打开粮仓盖，倒入干燥的猫粮/狗粮，注意不要超过MAX刻度</li>
|
||
<li><strong>放入干燥剂</strong>：将干燥剂放入专用盒内，保持粮食干燥</li>
|
||
<li><strong>合上盖子</strong>：确保粮仓盖密封良好</li>
|
||
<li><strong>连接电源</strong>：插入电源适配器，也可安装4节D型电池作为备用电源</li>
|
||
<li><strong>测试出粮</strong>：按手动出粮键，确认出粮正常</li>
|
||
</ol>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 粮食选择</div>
|
||
<p>建议使用直径8-12mm的干粮，过大或过小可能导致出粮不畅。</p>
|
||
</div>
|
||
`,
|
||
views: 1654,
|
||
date: '2025-01-13'
|
||
},
|
||
{
|
||
id: 104,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '设备WiFi配网教程',
|
||
content: `
|
||
<p>首次使用需绑定APP，绑定成功后设备方可正常使用。请先从 App Store 或安卓应用市场下载 Chookoo App。</p>
|
||
|
||
<h3>配网前准备</h3>
|
||
<ul>
|
||
<li>确保设备已上电</li>
|
||
<li>家庭网络为 2.4GHz 或 2.4G/5GHz 混合频段</li>
|
||
<li>手机打开 WiFi 开关、地理位置开关、蓝牙开关</li>
|
||
<li>APP 运行时授予相关权限（附近设备、蓝牙、网络等）</li>
|
||
<li>靠近路由器，保证信号稳定</li>
|
||
</ul>
|
||
|
||
<h3>方式一：蓝牙配网（推荐）</h3>
|
||
<ol>
|
||
<li>确保手机蓝牙和地理位置信息已打开</li>
|
||
<li>确保设备上电，长按配网键3秒，听到"滴滴滴"三声</li>
|
||
<li>在APP中扫描到设备后，点击进行蓝牙连接</li>
|
||
<li>输入WiFi密码（2.4GHz网络），点击下一步</li>
|
||
<li>等待配网完成</li>
|
||
</ol>
|
||
|
||
<h3>方式二：热点配网</h3>
|
||
<ol>
|
||
<li>确保设备上电并开启配网模式</li>
|
||
<li>确保手机 WiFi 和地理位置开关已打开</li>
|
||
<li>在APP中选择WiFi热点并输入密码</li>
|
||
<li>等待配网完成</li>
|
||
</ol>
|
||
|
||
<h3>配网失败排查</h3>
|
||
<ul>
|
||
<li>确保手机 WiFi、地理位置、蓝牙开关均已打开</li>
|
||
<li>确保APP已授予相关权限</li>
|
||
<li>确保WiFi密码正确，网络为 2.4G 或混合频段</li>
|
||
<li>确保靠近路由器，信号稳定</li>
|
||
<li>确保设备已上电，长按配网键并听到3声"滴滴滴"</li>
|
||
<li>如仍失败：将设备断电5秒后重新上电，再执行配网</li>
|
||
<li>反复失败请联系客服</li>
|
||
</ul>
|
||
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 提示</div>
|
||
<p>蓝牙配网时，确保打开蓝牙和地理位置信息开关；热点配网时，确保WiFi和地理位置开关已打开。</p>
|
||
</div>
|
||
`,
|
||
views: 2134,
|
||
date: '2025-01-12'
|
||
},
|
||
{
|
||
id: 105,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '设备指示灯状态说明',
|
||
content: `
|
||
<p>了解设备指示灯状态，可以帮助您快速判断设备运行情况：</p>
|
||
<h3>智能猫厕所指示灯</h3>
|
||
<ul>
|
||
<li><strong>常亮蓝灯</strong>：正常待机状态</li>
|
||
<li><strong>快闪蓝灯</strong>：正在配网</li>
|
||
<li><strong>慢闪蓝灯</strong>：正在清理中</li>
|
||
<li><strong>红灯常亮</strong>：故障或需要维护（如集便袋已满）</li>
|
||
<li><strong>灯灭</strong>：设备关机或断电</li>
|
||
</ul>
|
||
<h3>智能饮水机指示灯</h3>
|
||
<ul>
|
||
<li><strong>常亮蓝灯</strong>：正常工作</li>
|
||
<li><strong>快闪蓝灯</strong>：正在配网</li>
|
||
<li><strong>红灯闪烁</strong>：缺水提醒</li>
|
||
<li><strong>黄灯常亮</strong>：需要更换滤芯</li>
|
||
</ul>
|
||
<h3>智能喂食器指示灯</h3>
|
||
<ul>
|
||
<li><strong>常亮蓝灯</strong>：正常待机</li>
|
||
<li><strong>快闪蓝灯</strong>：正在配网</li>
|
||
<li><strong>绿灯闪烁</strong>：正在出粮</li>
|
||
<li><strong>红灯常亮</strong>：粮仓缺粮</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 提示</div>
|
||
<p>如遇到异常指示灯状态，请先尝试重启设备，如问题仍存在请联系客服。</p>
|
||
</div>
|
||
`,
|
||
views: 1432,
|
||
date: '2025-01-11'
|
||
},
|
||
// 智能猫厕所
|
||
{
|
||
id: 1,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '智能猫厕所支持哪些类型的猫砂？',
|
||
content: `
|
||
<p>Chookoo智能猫厕所支持多种常见猫砂类型，为了获得最佳使用效果，我们推荐以下猫砂：</p>
|
||
<h3>推荐的猫砂类型</h3>
|
||
<ul>
|
||
<li><strong>豆腐砂</strong>：结团性好，环保可冲厕，是我们的首选推荐</li>
|
||
<li><strong>膨润土砂</strong>：结团性强，但粉尘较多，建议选择低尘产品</li>
|
||
<li><strong>混合砂</strong>：豆腐砂与膨润土混合，兼具两者优点</li>
|
||
<li><strong>活性炭砂</strong>：除臭效果好，适合对气味敏感的家庭</li>
|
||
</ul>
|
||
<h3>不推荐的猫砂类型</h3>
|
||
<ul>
|
||
<li>水晶砂（可能损坏设备）</li>
|
||
<li>纸砂（结团性差）</li>
|
||
<li>松木砂（可能堵塞集便仓）</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 小贴士</div>
|
||
<p>建议使用2-3mm粒径的豆腐砂，可以获得最佳的结团效果和过滤效率。</p>
|
||
</div>
|
||
`,
|
||
views: 1234,
|
||
date: '2025-01-15'
|
||
},
|
||
{
|
||
id: 2,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '如何引导猫咪使用智能猫厕所？',
|
||
content: `
|
||
<p>让猫咪适应智能猫厕所需要一定的耐心，以下是我们的建议步骤：</p>
|
||
<h3>第一步：放置位置</h3>
|
||
<p>将智能猫厕所放在猫咪原来使用猫砂盆附近，保持环境安静，避免放在人来人往的地方。</p>
|
||
<h3>第二步：保持原有猫砂</h3>
|
||
<p>刚开始使用时，建议放入猫咪之前使用的同款猫砂，气味熟悉会让猫咪更有安全感。</p>
|
||
<h3>第三步：关闭自动功能</h3>
|
||
<p>前3-5天建议关闭自动清理功能，让猫咪先适应新的如厕环境。</p>
|
||
<h3>第四步：逐步开启功能</h3>
|
||
<p>当猫咪主动使用后，可以开启自动清理功能，建议设置为静音模式或延时清理。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 小贴士</div>
|
||
<p>如果猫咪抗拒使用，可以在猫砂盆中放入一些猫咪的粪便，气味引导会很有效。</p>
|
||
</div>
|
||
`,
|
||
views: 892,
|
||
date: '2025-01-12'
|
||
},
|
||
{
|
||
id: 3,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '智能猫厕所显示"设备离线"怎么办？',
|
||
content: `
|
||
<p>设备离线通常是由网络问题导致的，请按以下步骤排查：</p>
|
||
<h3>检查网络连接</h3>
|
||
<ul>
|
||
<li>确认家中WiFi正常工作，可以用手机测试网络</li>
|
||
<li>确保设备位于WiFi信号覆盖范围内</li>
|
||
<li>检查路由器是否设置了设备连接数量限制</li>
|
||
</ul>
|
||
<h3>重启设备</h3>
|
||
<ul>
|
||
<li>长按电源键5秒关闭设备</li>
|
||
<li>等待10秒后重新开机</li>
|
||
<li>观察指示灯是否正常闪烁</li>
|
||
</ul>
|
||
<h3>重新配网</h3>
|
||
<p>如果重启无效，请在APP中删除设备，重新进行配网操作。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 注意事项</div>
|
||
<p>请确保使用2.4GHz WiFi网络，设备暂不支持5GHz网络。</p>
|
||
</div>
|
||
`,
|
||
views: 756,
|
||
date: '2025-01-10'
|
||
},
|
||
{
|
||
id: 4,
|
||
category: 'litter',
|
||
categoryName: '智能猫厕所',
|
||
title: '多久需要更换一次集便袋？',
|
||
content: `
|
||
<p>集便袋的更换频率取决于猫咪数量和大小：</p>
|
||
<h3>建议更换周期</h3>
|
||
<ul>
|
||
<li><strong>1只猫</strong>：约7-10天更换一次</li>
|
||
<li><strong>2只猫</strong>：约5-7天更换一次</li>
|
||
<li><strong>3只及以上</strong>：约3-5天更换一次</li>
|
||
</ul>
|
||
<h3>更换提示</h3>
|
||
<p>APP会在集便袋即将装满时推送提醒，建议在收到提醒后及时更换，避免影响设备正常工作。</p>
|
||
<h3>更换步骤</h3>
|
||
<ol>
|
||
<li>打开设备上盖</li>
|
||
<li>取出集便仓</li>
|
||
<li>将集便袋打结密封后丢弃</li>
|
||
<li>套上新的集便袋</li>
|
||
<li>将集便仓放回设备</li>
|
||
</ol>
|
||
`,
|
||
views: 623,
|
||
date: '2025-01-08'
|
||
},
|
||
|
||
// 智能饮水机
|
||
{
|
||
id: 5,
|
||
category: 'fountain',
|
||
categoryName: '智能饮水机',
|
||
title: '饮水机多久需要更换滤芯？',
|
||
content: `
|
||
<p>为了保证水质和宠物健康，建议定期更换滤芯：</p>
|
||
<h3>更换周期</h3>
|
||
<ul>
|
||
<li><strong>正常使用</strong>：每30天更换一次</li>
|
||
<li><strong>多宠家庭</strong>：每20-25天更换一次</li>
|
||
<li><strong>水质较硬地区</strong>：每20天更换一次</li>
|
||
</ul>
|
||
<h3>滤芯更换提示</h3>
|
||
<p>APP会记录滤芯使用时间，并在需要更换时推送提醒。您也可以在APP中手动重置滤芯计时。</p>
|
||
<h3>更换步骤</h3>
|
||
<ol>
|
||
<li>关闭电源，取出水箱</li>
|
||
<li>取出旧滤芯</li>
|
||
<li>将新滤芯浸泡5分钟后冲洗</li>
|
||
<li>安装新滤芯</li>
|
||
<li>在APP中重置滤芯计时</li>
|
||
</ol>
|
||
`,
|
||
views: 945,
|
||
date: '2025-01-14'
|
||
},
|
||
{
|
||
id: 6,
|
||
category: 'fountain',
|
||
categoryName: '智能饮水机',
|
||
title: '饮水机水泵噪音大怎么办？',
|
||
content: `
|
||
<p>水泵噪音可能由以下原因造成：</p>
|
||
<h3>水位过低</h3>
|
||
<p>请检查水箱水量，水量不足会导致水泵空转产生噪音。建议保持水位在最低线以上。</p>
|
||
<h3>水泵内有杂质</h3>
|
||
<ul>
|
||
<li>关闭电源，取出水泵</li>
|
||
<li>用清水冲洗水泵进水口</li>
|
||
<li>检查是否有毛发或杂物堵塞</li>
|
||
<li>清理后重新安装</li>
|
||
</ul>
|
||
<h3>放置不平</h3>
|
||
<p>确保饮水机放置在平整的地面上，可以垫一块软垫减少共振。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议</div>
|
||
<p>如果清理后噪音仍然很大，可能是水泵老化，请联系客服申请更换。</p>
|
||
</div>
|
||
`,
|
||
views: 567,
|
||
date: '2025-01-11'
|
||
},
|
||
{
|
||
id: 7,
|
||
category: 'fountain',
|
||
categoryName: '智能饮水机',
|
||
title: '如何清洗饮水机？',
|
||
content: `
|
||
<p>定期清洗可以保证水质卫生，建议每周清洗一次：</p>
|
||
<h3>清洗步骤</h3>
|
||
<ol>
|
||
<li>关闭电源，拔掉插头</li>
|
||
<li>倒掉剩余的水</li>
|
||
<li>拆解所有可拆卸部件</li>
|
||
<li>用温和的洗涤剂和软刷清洗</li>
|
||
<li>用清水彻底冲洗</li>
|
||
<li>晾干后重新组装</li>
|
||
</ol>
|
||
<h3>注意事项</h3>
|
||
<ul>
|
||
<li>不要使用强酸强碱清洗剂</li>
|
||
<li>电机部分不要浸水</li>
|
||
<li>清洗滤芯时只需用清水冲洗，不要使用洗涤剂</li>
|
||
</ul>
|
||
`,
|
||
views: 432,
|
||
date: '2025-01-09'
|
||
},
|
||
|
||
// 智能喂食器
|
||
{
|
||
id: 8,
|
||
category: 'feeder',
|
||
categoryName: '智能喂食器',
|
||
title: '喂食器出粮不准确怎么办？',
|
||
content: `
|
||
<p>出粮不准确可能由以下原因导致：</p>
|
||
<h3>粮仓问题</h3>
|
||
<ul>
|
||
<li>检查粮仓是否有粮食结块或受潮</li>
|
||
<li>确保粮食干燥，颗粒大小均匀</li>
|
||
<li>不要将不同大小的粮食混合使用</li>
|
||
</ul>
|
||
<h3>出粮口堵塞</h3>
|
||
<ul>
|
||
<li>关闭电源</li>
|
||
<li>打开粮仓检查出粮口</li>
|
||
<li>清理可能堵塞的粮食碎屑</li>
|
||
<li>用干布擦拭出粮口周围</li>
|
||
</ul>
|
||
<h3>校准设置</h3>
|
||
<p>在APP中可以设置出粮校准，根据实际出粮量微调参数。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 粮食选择建议</div>
|
||
<p>建议使用直径8-12mm的干粮，过大或过小的粮食都可能导致出粮不准确。</p>
|
||
</div>
|
||
`,
|
||
views: 678,
|
||
date: '2025-01-13'
|
||
},
|
||
{
|
||
id: 9,
|
||
category: 'feeder',
|
||
categoryName: '智能喂食器',
|
||
title: '断网后喂食器还能正常工作吗？',
|
||
content: `
|
||
<p>可以！智能喂食器支持离线工作：</p>
|
||
<h3>离线功能</h3>
|
||
<ul>
|
||
<li>已设置的定时喂食计划会正常执行</li>
|
||
<li>手动按键出粮功能正常使用</li>
|
||
<li>设备会记录喂食日志</li>
|
||
</ul>
|
||
<h3>离线限制</h3>
|
||
<ul>
|
||
<li>无法远程控制出粮</li>
|
||
<li>无法实时查看设备状态</li>
|
||
<li>不会收到低粮提醒推送</li>
|
||
</ul>
|
||
<h3>恢复联网后</h3>
|
||
<p>设备重新联网后，会自动同步离线期间的喂食记录到APP。</p>
|
||
`,
|
||
views: 534,
|
||
date: '2025-01-07'
|
||
},
|
||
{
|
||
id: 10,
|
||
category: 'feeder',
|
||
categoryName: '智能喂食器',
|
||
title: '如何设置喂食计划？',
|
||
content: `
|
||
<p>在APP中设置喂食计划非常简单：</p>
|
||
<h3>创建喂食计划</h3>
|
||
<ol>
|
||
<li>打开Chookoo APP，选择您的喂食器设备</li>
|
||
<li>点击"喂食计划"</li>
|
||
<li>点击"添加计划"</li>
|
||
<li>设置喂食时间和出粮份数</li>
|
||
<li>选择重复周期（每天/指定星期）</li>
|
||
<li>点击保存</li>
|
||
</ol>
|
||
<h3>支持的喂食模式</h3>
|
||
<ul>
|
||
<li><strong>定时喂食</strong>：在指定时间自动出粮</li>
|
||
<li><strong>智能喂食</strong>：根据宠物进食习惯自动调整</li>
|
||
<li><strong>手动加餐</strong>：随时在APP中点击出粮</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议</div>
|
||
<p>建议设置多个少量喂食，模拟自然进食习惯，有利于宠物消化。</p>
|
||
</div>
|
||
`,
|
||
views: 789,
|
||
date: '2025-01-06'
|
||
},
|
||
|
||
// APP使用
|
||
{
|
||
id: 11,
|
||
category: 'app',
|
||
categoryName: 'APP使用',
|
||
title: '如何注册Chookoo账号？',
|
||
content: `
|
||
<p>注册Chookoo账号只需几个简单步骤：</p>
|
||
<h3>注册流程</h3>
|
||
<ol>
|
||
<li>下载并打开Chookoo APP</li>
|
||
<li>点击"注册账号"</li>
|
||
<li>输入手机号码</li>
|
||
<li>获取并输入验证码</li>
|
||
<li>设置密码（8-20位，包含字母和数字）</li>
|
||
<li>完成注册</li>
|
||
</ol>
|
||
<h3>其他注册方式</h3>
|
||
<ul>
|
||
<li>微信一键登录</li>
|
||
<li>Apple ID登录（iOS）</li>
|
||
</ul>
|
||
`,
|
||
views: 1234,
|
||
date: '2025-01-15'
|
||
},
|
||
{
|
||
id: 12,
|
||
category: 'app',
|
||
categoryName: 'APP使用',
|
||
title: '如何添加设备到APP？',
|
||
content: `
|
||
<p>添加新设备的步骤：</p>
|
||
<h3>准备工作</h3>
|
||
<ul>
|
||
<li>确保设备已通电</li>
|
||
<li>手机连接2.4GHz WiFi</li>
|
||
<li>知道WiFi密码</li>
|
||
</ul>
|
||
<h3>添加步骤</h3>
|
||
<ol>
|
||
<li>打开APP，点击右上角"+"号</li>
|
||
<li>选择要添加的设备类型</li>
|
||
<li>确认设备指示灯正在快闪</li>
|
||
<li>输入WiFi密码</li>
|
||
<li>等待配网完成（约30秒）</li>
|
||
<li>设置设备名称和房间</li>
|
||
</ol>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 配网失败？</div>
|
||
<p>如果配网失败，请确保WiFi是2.4GHz频段，并且设备与路由器距离不要太远。</p>
|
||
</div>
|
||
`,
|
||
views: 876,
|
||
date: '2025-01-10'
|
||
},
|
||
{
|
||
id: 13,
|
||
category: 'app',
|
||
categoryName: 'APP使用',
|
||
title: '如何分享设备给家人？',
|
||
content: `
|
||
<p>您可以将设备分享给家人，让他们也能控制设备：</p>
|
||
<h3>分享步骤</h3>
|
||
<ol>
|
||
<li>打开APP，进入设备详情页</li>
|
||
<li>点击右上角设置图标</li>
|
||
<li>选择"设备分享"</li>
|
||
<li>输入家人的Chookoo账号（手机号）</li>
|
||
<li>选择分享权限（完全控制/仅查看）</li>
|
||
<li>点击确认发送邀请</li>
|
||
</ol>
|
||
<h3>接受分享</h3>
|
||
<p>家人会在APP中收到邀请通知，点击接受后即可看到该设备。</p>
|
||
<h3>权限说明</h3>
|
||
<ul>
|
||
<li><strong>完全控制</strong>：可以控制设备、修改设置</li>
|
||
<li><strong>仅查看</strong>：只能查看设备状态，不能操作</li>
|
||
</ul>
|
||
`,
|
||
views: 654,
|
||
date: '2025-01-08'
|
||
},
|
||
|
||
// 其他问题
|
||
{
|
||
id: 14,
|
||
category: 'other',
|
||
categoryName: '其他问题',
|
||
title: '产品保修政策',
|
||
content: `
|
||
<p>Chookoo 智能猫砂盆（C10 Pro / C10）享有以下保修服务：</p>
|
||
<h3>保修期限</h3>
|
||
<ul>
|
||
<li><strong>主机</strong>：1年保修</li>
|
||
<li><strong>附件</strong>（电源适配器等）：不在保修范围内</li>
|
||
</ul>
|
||
<h3>保修范围</h3>
|
||
<p>在正常使用情况下，因产品本身质量问题导致的性能故障，可享受免费维修或更换。</p>
|
||
<h3>以下情况不在保修范围内</h3>
|
||
<ul>
|
||
<li>超过三包有效期的</li>
|
||
<li>未按使用说明要求使用、维护、保管导致损坏的</li>
|
||
<li>非本公司授权人员私自拆装或维修导致损坏的</li>
|
||
<li>无有效购买凭证或发票的</li>
|
||
<li>凭证上的产品型号与实际产品不符或凭证被涂改的</li>
|
||
<li>产品无合格证的</li>
|
||
<li>因不可抗力（如自然灾害等）造成损坏的</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 温馨提示</div>
|
||
<p>请妥善保管购买凭证和产品合格证，以便享受售后服务。如有疑问请联系客服。</p>
|
||
</div>
|
||
`,
|
||
views: 987,
|
||
date: '2025-01-14'
|
||
},
|
||
{
|
||
id: 15,
|
||
category: 'other',
|
||
categoryName: '其他问题',
|
||
title: '如何联系售后服务？',
|
||
content: `
|
||
<p>您可以通过以下方式联系我们：</p>
|
||
<h3>在线客服</h3>
|
||
<p>在APP中点击"我的" > "帮助与反馈" > "在线客服"，工作时间9:00-21:00。</p>
|
||
<h3>客服热线</h3>
|
||
<p>021-60707996（工作时间：周一至周日 9:00-21:00）</p>
|
||
<h3>邮箱</h3>
|
||
<p>support@chookoo.net</p>
|
||
<h3>微信公众号</h3>
|
||
<p>关注"Chookoo宠小科"公众号，在菜单中选择"售后服务"。</p>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 建议</div>
|
||
<p>联系客服时请准备好订单号或设备SN码，以便我们更快为您服务。</p>
|
||
</div>
|
||
`,
|
||
views: 876,
|
||
date: '2025-01-12'
|
||
},
|
||
{
|
||
id: 16,
|
||
category: 'other',
|
||
categoryName: '其他问题',
|
||
title: '在哪里可以购买Chookoo产品？',
|
||
content: `
|
||
<p>您可以通过以下渠道购买Chookoo产品：</p>
|
||
<h3>官方渠道</h3>
|
||
<ul>
|
||
<li>Chookoo官方网站</li>
|
||
<li>Chookoo天猫旗舰店</li>
|
||
<li>Chookoo京东旗舰店</li>
|
||
<li>Chookoo微信小程序</li>
|
||
</ul>
|
||
<h3>线下渠道</h3>
|
||
<ul>
|
||
<li>宠物连锁店</li>
|
||
<li>部分家电卖场</li>
|
||
</ul>
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">💡 温馨提示</div>
|
||
<p>建议通过官方渠道购买，以确保产品质量和售后服务保障。</p>
|
||
</div>
|
||
`,
|
||
views: 765,
|
||
date: '2025-01-10'
|
||
},
|
||
|
||
// 常见问题
|
||
{
|
||
id: 17,
|
||
category: 'faq',
|
||
categoryName: '常见问题',
|
||
title: '智能猫砂盆常见故障与解决方案',
|
||
content: `
|
||
<p>C10 Pro / C10 猫砂盆无法正常工作时，请参阅下表排查：</p>
|
||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||
<tr style="background:var(--primary-weak);">
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">常见故障</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">解决方法</th>
|
||
</tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>设备离线</strong></td><td style="padding:12px;border:1px solid var(--line);">确认设备是否已接入电源，并检查当前网络是否稳定</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>集便仓未装</strong></td><td style="padding:12px;border:1px solid var(--line);">确认集便仓是否已正确安装到位</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>集便仓已满</strong></td><td style="padding:12px;border:1px solid var(--line);">清理集便仓，确认清理后已重新安装到位</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>球仓未装配</strong></td><td style="padding:12px;border:1px solid var(--line);">确认球仓是否已正确安装到位</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>电机堵转</strong></td><td style="padding:12px;border:1px solid var(--line);">优先检查并清理内部异物或猫砂结块。堵转少于3次约3秒自恢复；达3次设备停转，需按对应按键解除</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>防夹保护中</strong></td><td style="padding:12px;border:1px solid var(--line);">检查并移开宠物及异物。少于3次约3秒自恢复；达3次需按对应按键解除</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>宠物突然出现</strong></td><td style="padding:12px;border:1px solid var(--line);">设备检测到宠物会暂停，离开后自动恢复。加猫砂可能被误判，按"抚平"键即可</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>宠物靠近-红外</strong></td><td style="padding:12px;border:1px solid var(--line);">红外检测到物体时暂停。检查红外灯是否亮起、前方有无遮挡；移开后约3秒恢复</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>自检中</strong></td><td style="padding:12px;border:1px solid var(--line);">设备正在自检，请等待完成。自检期间可能旋转，请勿手动干预</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>自检暂停</strong></td><td style="padding:12px;border:1px solid var(--line);">因宠物或外物触发红外：移开遮挡即可；因误按键暂停：按"抚平"恢复</td></tr>
|
||
</table>
|
||
|
||
<h3 style="margin-top:24px;">安全须知</h3>
|
||
<ul>
|
||
<li>严禁6个月以内的幼猫使用，严禁体重低于1.5kg的猫使用</li>
|
||
<li>请在干燥室内环境使用，避免阳光照射、雨淋或受潮</li>
|
||
<li>仅使用原装适配器</li>
|
||
<li>球仓可水洗，整机可擦拭，但电机区域严禁浸泡</li>
|
||
<li>设备配备雷达与称重感应系统，宠物靠近时将立即暂停运转</li>
|
||
</ul>
|
||
`,
|
||
views: 1567,
|
||
date: '2025-01-16'
|
||
},
|
||
{
|
||
id: 18,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能猫砂盆功能模式说明（C10 Pro / C10）',
|
||
content: `
|
||
<h3>功能模式</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||
<tr style="background:var(--primary-weak);">
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">模式</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">说明</th>
|
||
</tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>自动清理</strong></td><td style="padding:12px;border:1px solid var(--line);">宠物如厕后设备将自动清理</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>定时清理</strong></td><td style="padding:12px;border:1px solid var(--line);">可根据需求设定清理时间和次数</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>幼猫保护</strong></td><td style="padding:12px;border:1px solid var(--line);">不再自动/定时清理，可从设备或APP端手动清理</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>软便模式</strong></td><td style="padding:12px;border:1px solid var(--line);">增大摆动幅度和滚动次数，让软便更好被包裹</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);"><strong>夜间模式</strong></td><td style="padding:12px;border:1px solid var(--line);">指定时间段不进行清理，时间可自行设定</td></tr>
|
||
</table>
|
||
|
||
<h3 style="margin-top:24px;">按键操作</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||
<tr style="background:var(--primary-weak);">
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">按键</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">操作</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">功能</th>
|
||
</tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">开关机</td><td style="padding:12px;border:1px solid var(--line);">长按3秒</td><td style="padding:12px;border:1px solid var(--line);">开/关机，提示音"滴"一声</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">抚平/童锁</td><td style="padding:12px;border:1px solid var(--line);">短按/双击</td><td style="padding:12px;border:1px solid var(--line);">短按抚平猫砂；双击(2s内)锁定/解锁童锁</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">清理</td><td style="padding:12px;border:1px solid var(--line);">短按/长按3秒</td><td style="padding:12px;border:1px solid var(--line);">短按开始/暂停清理；长按取消清理，球仓复位</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">清仓</td><td style="padding:12px;border:1px solid var(--line);">短按/长按3秒</td><td style="padding:12px;border:1px solid var(--line);">短按清空猫砂/暂停；长按取消清仓，球仓复位</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">WiFi配网</td><td style="padding:12px;border:1px solid var(--line);">长按3秒</td><td style="padding:12px;border:1px solid var(--line);">听到"滴滴滴"三声后进入配网模式</td></tr>
|
||
</table>
|
||
`,
|
||
views: 1345,
|
||
date: '2025-01-17'
|
||
},
|
||
{
|
||
id: 19,
|
||
category: 'install',
|
||
categoryName: '安装指导',
|
||
title: '智能猫砂盆清洁维护指南',
|
||
content: `
|
||
<h3>日常维护</h3>
|
||
<ul>
|
||
<li><strong>日常加砂</strong>：打开球仓上盖，从球仓口直接倒入猫砂，单机抚平键自动平整。注意不要超过滚筒内部MAX线</li>
|
||
<li><strong>清理集便仓</strong>：抽出集便仓，把抽绳从卡槽拉出，向上拎起垃圾袋取出打包</li>
|
||
</ul>
|
||
|
||
<h3>清洁部件</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||
<tr style="background:var(--primary-weak);">
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">部件</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">何时清洁</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">维护方式</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">注意事项</th>
|
||
</tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">滚筒</td><td style="padding:12px;border:1px solid var(--line);">内壁有脏污时</td><td style="padding:12px;border:1px solid var(--line);">清洁刷刷洗，彻底晾干</td><td style="padding:12px;border:1px solid var(--line);">/</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">滤砂网</td><td style="padding:12px;border:1px solid var(--line);">视脏污程度；有软便时及时清洗</td><td style="padding:12px;border:1px solid var(--line);">清洁刷刷洗，彻底晾干</td><td style="padding:12px;border:1px solid var(--line);">避免暴晒、请勿挤压</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">主机底座</td><td style="padding:12px;border:1px solid var(--line);">拆卸清洗滚筒后</td><td style="padding:12px;border:1px solid var(--line);">湿纸巾擦拭</td><td style="padding:12px;border:1px solid var(--line);">严禁浸水</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">AI摄像头(Pro)</td><td style="padding:12px;border:1px solid var(--line);">表面有灰尘污渍时</td><td style="padding:12px;border:1px solid var(--line);">软布擦拭</td><td style="padding:12px;border:1px solid var(--line);">严禁浸水</td></tr>
|
||
</table>
|
||
|
||
<h3 style="margin-top:16px;">拆卸清洗步骤</h3>
|
||
<ol>
|
||
<li><strong>拆卸砂网</strong>：先将猫砂清空，将砂网提起脱离卡扣取出，清洗并彻底晾干</li>
|
||
<li><strong>拆卸滚筒</strong>：打开球仓上盖，将上球仓提起取出</li>
|
||
<li><strong>清洗滚筒</strong>：清洗后彻底晾干（至少24小时）</li>
|
||
<li><strong>擦拭主机</strong>：用湿纸巾擦拭主机表面和内部，用干燥软布擦拭AI摄像头及接近传感器</li>
|
||
</ol>
|
||
|
||
<div class="article-tip">
|
||
<div class="article-tip-title">⚠️ 重要</div>
|
||
<p>内含电器件，请勿直接水洗！净味盒需定期更换。</p>
|
||
</div>
|
||
`,
|
||
views: 1123,
|
||
date: '2025-01-18'
|
||
},
|
||
{
|
||
id: 20,
|
||
category: 'faq',
|
||
categoryName: '常见问题',
|
||
title: '产品基本参数（C10 Pro / C10）',
|
||
content: `
|
||
<table style="width:100%;border-collapse:collapse;font-size:14px;">
|
||
<tr style="background:var(--primary-weak);">
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">参数</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">C10 Pro</th>
|
||
<th style="padding:12px;text-align:left;border:1px solid var(--line);">C10</th>
|
||
</tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">产品型号</td><td style="padding:12px;border:1px solid var(--line);">C10 Pro</td><td style="padding:12px;border:1px solid var(--line);">C10</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">整机重量</td><td style="padding:12px;border:1px solid var(--line);">约9.26kg</td><td style="padding:12px;border:1px solid var(--line);">约9kg</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">产品尺寸</td><td style="padding:12px;border:1px solid var(--line);">682×503×446mm</td><td style="padding:12px;border:1px solid var(--line);">682×503×446mm</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">额定输入</td><td style="padding:12px;border:1px solid var(--line);">12V 2A</td><td style="padding:12px;border:1px solid var(--line);">12V 2A</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">产品材质</td><td style="padding:12px;border:1px solid var(--line);">ABS、PP、TPE、硅胶</td><td style="padding:12px;border:1px solid var(--line);">ABS、PP、TPE、硅胶</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">连接方式</td><td style="padding:12px;border:1px solid var(--line);">WiFi连接</td><td style="padding:12px;border:1px solid var(--line);">WiFi连接</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">适用范围</td><td style="padding:12px;border:1px solid var(--line);">6月龄及以上，体重≥1.5kg的猫</td><td style="padding:12px;border:1px solid var(--line);">6月龄及以上，体重≥1.5kg的猫</td></tr>
|
||
<tr><td style="padding:12px;border:1px solid var(--line);">特色功能</td><td style="padding:12px;border:1px solid var(--line);">AI摄像头、温度传感器、心率传感器</td><td style="padding:12px;border:1px solid var(--line);">/</td></tr>
|
||
</table>
|
||
|
||
<p style="margin-top:16px;">生产者：宠小科智能科技（苏州）有限公司</p>
|
||
`,
|
||
views: 1890,
|
||
date: '2025-01-19'
|
||
}
|
||
];
|
||
|
||
// 页面类型
|
||
const PAGE_TYPE = 'help';
|
||
|
||
// 分类配置
|
||
const categories = {
|
||
all: { name: '全部', icon: '📋' },
|
||
install: { name: '安装指导', icon: '🔧' },
|
||
litter: { name: '智能猫厕所', icon: '🐱' },
|
||
fountain: { name: '智能饮水机', icon: '💧' },
|
||
feeder: { name: '智能喂食器', icon: '🍽️' },
|
||
app: { name: 'APP使用', icon: '📱' },
|
||
faq: { name: '常见问题', icon: '🔧' },
|
||
other: { name: '其他问题', icon: '❓' }
|
||
};
|
||
|
||
// 当前状态
|
||
let currentCategory = 'all';
|
||
let collapsedSections = {};
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 从 localStorage 加载文章数据（如果有）
|
||
const savedArticles = localStorage.getItem('chookoo_help_articles');
|
||
if (savedArticles) {
|
||
try {
|
||
const parsed = JSON.parse(savedArticles);
|
||
if (Array.isArray(parsed) && parsed.length > 0) {
|
||
// 合并默认文章和管理员添加的文章
|
||
const defaultIds = articles.map(a => a.id);
|
||
const customArticles = parsed.filter(a => !defaultIds.includes(a.id));
|
||
articles.push(...customArticles);
|
||
}
|
||
} catch (e) {
|
||
console.error('加载文章数据失败:', e);
|
||
}
|
||
}
|
||
|
||
// 解析 URL 参数
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const category = urlParams.get('category');
|
||
const articleId = urlParams.get('article');
|
||
const searchQuery = urlParams.get('search');
|
||
|
||
// 处理 URL 参数
|
||
if (articleId) {
|
||
showArticle(parseInt(articleId));
|
||
} else if (category && categories[category]) {
|
||
currentCategory = category;
|
||
// 更新分类标签高亮
|
||
document.querySelectorAll('.category-tab').forEach(tab => {
|
||
tab.classList.toggle('active', tab.dataset.category === category);
|
||
});
|
||
}
|
||
|
||
if (searchQuery) {
|
||
document.getElementById('searchInput').value = searchQuery;
|
||
document.getElementById('searchInput').dispatchEvent(new Event('input'));
|
||
}
|
||
|
||
renderArticles();
|
||
initSearch();
|
||
initCategoryTabs();
|
||
initBackButton();
|
||
});
|
||
|
||
// 渲染文章列表
|
||
function renderArticles() {
|
||
const container = document.getElementById('articlesContainer');
|
||
let html = '';
|
||
|
||
const categoryOrder = ['install', 'litter', 'fountain', 'feeder', 'app', 'faq', 'other'];
|
||
|
||
categoryOrder.forEach(cat => {
|
||
if (currentCategory !== 'all' && currentCategory !== cat) return;
|
||
|
||
const catArticles = articles.filter(a => a.category === cat && (!a.pageType || a.pageType === PAGE_TYPE));
|
||
if (catArticles.length === 0) return;
|
||
|
||
const isCollapsed = collapsedSections[cat];
|
||
const catInfo = categories[cat];
|
||
|
||
html += `
|
||
<section class="articles-section" data-category="${cat}">
|
||
<div class="section-header ${isCollapsed ? 'collapsed' : ''}" onclick="toggleSection('${cat}')">
|
||
<div class="section-icon ${cat}">${catInfo.icon}</div>
|
||
<h2 class="section-title">${catInfo.name}</h2>
|
||
<span class="section-count">${catArticles.length} 篇文章</span>
|
||
<svg class="section-toggle" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||
</div>
|
||
<div class="article-list ${isCollapsed ? 'hidden' : ''}">
|
||
${catArticles.map(article => `
|
||
<div class="article-item" onclick="showArticle(${article.id})">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||
<span class="article-title">${article.title}</span>
|
||
<svg class="article-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</section>
|
||
`;
|
||
});
|
||
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
// 切换分类折叠
|
||
function toggleSection(cat) {
|
||
collapsedSections[cat] = !collapsedSections[cat];
|
||
renderArticles();
|
||
}
|
||
|
||
// 显示文章详情
|
||
function showArticle(id) {
|
||
const article = articles.find(a => a.id === id);
|
||
if (!article) return;
|
||
|
||
const content = document.getElementById('articleContent');
|
||
content.innerHTML = `
|
||
<div class="article-breadcrumb">
|
||
<a href="#" onclick="backToList(); return false;"><span data-i18n="footer_help">帮助中心</span></a>
|
||
<span>/</span>
|
||
<span>${article.categoryName}</span>
|
||
</div>
|
||
<h1 class="article-detail-title">${article.title}</h1>
|
||
<div class="article-meta">
|
||
<span>📅 ${article.date}</span>
|
||
<span>👁️ ${article.views} 次浏览</span>
|
||
</div>
|
||
<div class="article-content">
|
||
${article.content}
|
||
</div>
|
||
${getRelatedArticles(id)}
|
||
`;
|
||
|
||
document.getElementById('articlesListView').classList.add('hidden');
|
||
document.getElementById('articleDetail').classList.add('active');
|
||
window.scrollTo(0, 0);
|
||
}
|
||
|
||
// 获取相关文章
|
||
function getRelatedArticles(currentId) {
|
||
const current = articles.find(a => a.id === currentId);
|
||
const related = articles
|
||
.filter(a => a.category === current.category && a.id !== currentId)
|
||
.slice(0, 3);
|
||
|
||
if (related.length === 0) return '';
|
||
|
||
return `
|
||
<div class="related-articles">
|
||
<h3 class="related-title">相关文章</h3>
|
||
<div class="related-list">
|
||
${related.map(a => `
|
||
<div class="related-item" onclick="showArticle(${a.id})">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||
<span>${a.title}</span>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 返回列表
|
||
function backToList() {
|
||
document.getElementById('articleDetail').classList.remove('active');
|
||
document.getElementById('articlesListView').classList.remove('hidden');
|
||
}
|
||
|
||
// 初始化返回按钮
|
||
function initBackButton() {
|
||
document.getElementById('backToList').addEventListener('click', backToList);
|
||
}
|
||
|
||
// 初始化搜索
|
||
function initSearch() {
|
||
const input = document.getElementById('searchInput');
|
||
const results = document.getElementById('searchResults');
|
||
|
||
input.addEventListener('input', function() {
|
||
const query = this.value.trim().toLowerCase();
|
||
|
||
if (query.length < 2) {
|
||
results.classList.remove('active');
|
||
return;
|
||
}
|
||
|
||
const matched = articles.filter(a =>
|
||
(!a.pageType || a.pageType === PAGE_TYPE) &&
|
||
(a.title.toLowerCase().includes(query) ||
|
||
a.content.toLowerCase().includes(query))
|
||
);
|
||
|
||
if (matched.length === 0) {
|
||
results.innerHTML = '<div class="search-no-result">未找到相关文章</div>';
|
||
} else {
|
||
results.innerHTML = matched.slice(0, 8).map(a => `
|
||
<div class="search-result-item" onclick="showArticle(${a.id})">
|
||
<div class="search-result-title">${a.title}</div>
|
||
<div class="search-result-category">${a.categoryName}</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
results.classList.add('active');
|
||
});
|
||
|
||
// 点击外部关闭搜索结果
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.search-box')) {
|
||
results.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化分类标签
|
||
function initCategoryTabs() {
|
||
document.querySelectorAll('.category-tab').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||
this.classList.add('active');
|
||
currentCategory = this.dataset.category;
|
||
renderArticles();
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</div><!-- /pageContent -->
|
||
<!-- 购物弹窗 -->
|
||
<div class="contact-modal-overlay" id="shopModal" style="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;">
|
||
<div style="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;">
|
||
<button id="shopModalClose" style="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;">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||
</button>
|
||
<div style="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;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:32px;height:32px;"><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 style="font-size:22px;font-weight:700;color:#1f2937;margin:0 0 8px;">官方旗舰店</h3>
|
||
<p style="font-size:14px;color:#6b7280;margin:0 0 24px;">扫描二维码，进入官方店铺选购</p>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;">
|
||
<div style="width:160px;height:160px;background:#f3f4f6;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
(function(){
|
||
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.style.opacity='1';shopModal.style.visibility='visible';shopModal.querySelector('div').style.transform='scale(1) translateY(0)';document.body.style.overflow='hidden';});}
|
||
if(shopModalClose){shopModalClose.addEventListener('click',function(){shopModal.style.opacity='0';shopModal.style.visibility='hidden';shopModal.querySelector('div').style.transform='scale(0.9) translateY(20px)';document.body.style.overflow='';});}
|
||
if(shopModal){shopModal.addEventListener('click',function(e){if(e.target===shopModal){shopModal.style.opacity='0';shopModal.style.visibility='hidden';shopModal.querySelector('div').style.transform='scale(0.9) translateY(20px)';document.body.style.overflow='';}});}
|
||
document.addEventListener('keydown',function(e){if(e.key==='Escape'&&shopModal&&shopModal.style.visibility==='visible'){shopModal.style.opacity='0';shopModal.style.visibility='hidden';shopModal.querySelector('div').style.transform='scale(0.9) translateY(20px)';document.body.style.overflow='';}});
|
||
})();
|
||
</script>
|
||
<script>
|
||
(() => {
|
||
const t = {
|
||
zh: {
|
||
nav_home: "棣栭〉", nav_products: "浜у搧", nav_stories: "鏁呬簨",
|
||
nav_app: "App", nav_about: "鍏充簬鎴戜滑", nav_contact: "鑱旂郴鎴戜滑",
|
||
footer_desc: "AIoT 涓诲姩寮忓疇鐗╁仴搴风鐞嗗紑鍒涜€咃紝璁╁仴搴峰彲瑙併€侀渶姹傚彲瑙ｃ€佸疇鐖辨棤闂淬€?,
|
||
footer_products: "浜у搧", footer_support: "鏀寔", footer_contact: "鑱旂郴鎴戜滑",
|
||
footer_cat: "鏅鸿兘鐚帟鎵€", footer_feeder: "鏅鸿兘鍠傞鍣?,
|
||
footer_fountain: "鏅鸿兘楗按鏈?, footer_camera: "AI 鎽勫儚澶?,
|
||
footer_help: "甯姪涓績", footer_faq: "甯歌闂",
|
||
footer_warranty: "淇濅慨鏀跨瓥", footer_returns: "閫€鎹㈣揣",
|
||
footer_privacy: "闅愮鏀跨瓥", footer_terms: "鏈嶅姟鏉℃",
|
||
footer_copyright: "漏 2025 Chookoo. All rights reserved."
|
||
},
|
||
en: {
|
||
nav_home: "Home", nav_products: "Products", nav_stories: "Stories",
|
||
nav_app: "App", nav_about: "About Us", nav_contact: "Contact Us",
|
||
footer_desc: "AIoT Pioneer in Proactive Pet Health Management 鈥?making health visible, needs understood, and care seamless.",
|
||
footer_products: "Products", footer_support: "Support", footer_contact: "Contact Us",
|
||
footer_cat: "Smart Cat Litter", footer_feeder: "Smart Feeder",
|
||
footer_fountain: "Smart Fountain", footer_camera: "AI Camera",
|
||
footer_help: "Help Center", footer_faq: "FAQ",
|
||
footer_warranty: "Warranty", footer_returns: "Returns",
|
||
footer_privacy: "Privacy Policy", footer_terms: "Terms of Service",
|
||
footer_copyright: "漏 2025 Chookoo. All rights reserved."
|
||
}
|
||
};
|
||
const els = document.querySelectorAll("[data-i18n]");
|
||
const s = document.getElementById("langSelect");
|
||
const apply = (l) => {
|
||
const d = t[l] || t.zh;
|
||
els.forEach(el => { const k = el.dataset.i18n; if (d[k]) el.textContent = d[k]; });
|
||
if (s) s.value = l;
|
||
};
|
||
const lang = (navigator.language||"").toLowerCase().startsWith("zh") ? "zh" : "en";
|
||
apply(lang);
|
||
if (s) s.addEventListener("change", e => apply(e.target.value));
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|