Files
Chookoo.netPro/pages/legal.html
T
2026-06-03 10:27:17 +08:00

900 lines
70 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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.privacy { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.section-icon.terms { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.section-icon.cookies { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.section-icon.warranty { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.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="搜索..." />
<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>
<!-- 文章分类列表 -->
<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);
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 PAGE_TYPE = 'legal';
// 分类配置(服务条款和Cookie说明待正式内容后恢复)
const categories = {
all: { name: '全部', icon: '📋' },
privacy: { name: '隐私政策', icon: '🔒' }
};
// 默认文章数据(法律条款)
const defaultArticles = [
{ id: 401, pageType: 'legal', category: 'privacy', categoryName: '隐私政策', title: '宠科智能隐私政策', content: '<p>宠科智能隐私政策</p><p>202656</p><p>202656</p><p> 23582</p><p>使AppApp</p><h2></h2><p>使使App便使App使</p><p>使使App使App使</p><p>访</p><p>使AppApp使</p><p>400-087-0203 便</p><h2>使?</h2><h3></h3><p></p><p></p><p>1使便使 () </p><p>2App</p><p>3SIMSDK/API/JSiOS广IDFA)广MACDIDIMEI/WiFi</p><p>4/</p><p>5使cookieIP</p><p>6使App</p><p>7 (ECV)IDWi-Fi</p><p>8</p><p>9App</p><p>10</p><p>(1) 使IP IP 便使</p><p>(2) 使便使使使 /</p><p>(3) 使使使使App</p><p>(4) </p><h3>使</h3><p></p><p></p><p>1/App</p><p>2/</p><p>3广广广</p><p>4使</p><p>5</p><p>6</p><p>7</p><p>8</p><p>使</p><p>1:</p><p>2:使使使</p><p>3APPMACDID使APPWi-Fi使Wi-Fi IP</p><p>4便</p><p>5</p><p>6 IMEI </p><p>7使 ECV </p><p>8使</p><p>9使</p><p>10widget便widgetAPP使使ToiletAppWidgetProvider//()</p><p>11/--</p><h3>广</h3><p>1使IDFAIMEI ()广使</p><p>2使广广广400-087-0203 ,便广</p><h3></h3><p></p><p>便访</p><p></p><h3></h3><p>广广""使 IP 便400-087-0203 </p><h3>SDK</h3><p>使SDKSDKSDK便使SDK/WLAN/SDK使SDKSDK</p><p></p><p>使使使</p><p>https://weibo.com/signup/v5/privacy?spm=a1zaa.8161610.0.0.4f8776217Wu8R1</p><p>WLAN</p><p>Wi-FiIMSI</p><p>SDK</p><p>使SDK</p><p></p><p>https://open.weixin.qq.com/</p><p>QQSDK</p><p>使SDK</p><p></p><p>https://open.weibo.com/wiki/Android_SDK%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3</p><p>Bugly SDK</p><p>使Crash</p><p></p><p>https://static.bugly.qq.com/bugly-sdk-privacy-statement.pdf</p><p>SDK</p><p>使</p><p>https://www.umeng.com/policy</p><p>访访</p><p>Android ID/IDFA/OpenUDID/GUID/OAID</p><p>+SDK</p><p>使APP</p><p>https://www.umeng.com/policy</p><p>访访</p><p>IMEI/MAC/Android ID/IDFA/OpenUDID/GUID/ICCID/IP/SIM IMSI /</p><p></p><p>/使</p><p>https://dev.mi.com/console/appservice/push.html</p><p>https://dev.mi.com/console/doc/detail?pId=1822</p><p>WLAN</p><p>Wi-Fi</p><p>vivo</p><p>/使vivo</p><p>https://dev.vivo.com.cn/home</p><p>https://www.vivo.com.cn/about-vivo/privacy-policy</p><p></p><p></p><p></p><p>/使</p><p>https://open.flyme.cn</p><p>https://www.meizu.com/legal.html</p><p>WLAN</p><p>Wi-Fi</p><p>OPPO</p><p>IMEIICCIDIMSIAndroid IDGAIDIP</p><p>使</p><p>使OPPO使</p><p>广</p><p>SDK</p><p>https://open.oppomobile.com/wiki/doc#id=10194</p><p>https://open.oppomobile.com/wiki/doc#id=10288</p><p>SDK</p><p>使</p><p></p><p>https://developer.qiniu.com/pili/8027/sdk-privacy-policy</p><p>访访</p><p>IMEIICCIDIMSIAndroid IDGAIDIP</p><p>SDK</p><p>使</p><p></p><p>https://lbs.amap.com/pages/privacy/</p><p>IP GNSSWiFiWiFiWiFiIMEIIDFAIDFVAndroid IDMEIDMACOAIDIMSI</p><p>SDK</p><p>使</p><p></p><p>https://lbs.amap.com/pages/privacy/</p><p>IP GNSSWiFiWiFiWiFiIMEIIDFAIDFVAndroid IDMEIDMACOAIDIMSI</p><p>SDK</p><p>使IM</p><p></p><p>https://terms.aliyun.com/legal-agreement/terms/suit_bu1_ali_cloud/suit_bu1_ali_cloud202202240828_17281.html</p><p>访访</p><p>IMEIICCIDIMSIAndroid IDGAIDIP</p><p>SDK</p><p>使</p><p>wifiIPSIMSIM StateSIMICCID</p><p>使使使</p><p></p><p>SDK</p><p>https://terms.aliyun.com/legal-agreement/terms/suit_bu1_ali_cloud/suit_bu1_ali_cloud202112211045_86198.html</p><p></p><p>:</p><p>:</p><p>:wifiIPSIMSIM StateSIMICCID</p><p>:https://wap.cmpassport.com/resources/html/contract.html</p><p></p><p>:</p><p>: :</p><p>:https://opencloud.wostore.cn/authz/resource/html/disclaimer.html?spm=a2c4g.11186623.0.0.41f1633eHxMLkQ&amp;fromsdk=true</p><p></p><p>:</p><p>:</p><p>:</p><p>:https://e.189.cn/sdk/agreement/detail.do?spm=a2c4g.11186623.0.0.41f1633eHxMLkQ&amp;appKey=E_189&amp;hidetop=true&amp;returnUrl=</p><p>SDKSDK</p><p></p><p>/</p><p>CPU使IP</p><p>: https://www.shengwang.cn/SDK-privacy-policy/#</p><h3></h3><p></p><h3></h3><p>广使</p><p>使</p><h2></h2><h3></h3><p>1.访APP使使 (SSL) </p><p>2.访访访使</p><p>3.</p><h3></h3><p>1.</p><p>2.访使</p><p>3.使14使使使便</p><h3></h3><p>使使</p><h3>访</h3><p>访Wi-Fi service@petkit.com </p><h2></h2><p>1.访</p><p>2.</p><p>3.访</p><p>使访</p><p>4.使/使/</p><p>5.app --- 使</p><p>6.使Amazon AlexaGoogle Assistant</p><p></p><h2></h2><p>APP使使/使</p><h3></h3><p>App使使使</p><h3></h3><p>"" IP cookie 使</p><h3></h3><p>1</p><p>2//APP</p><p>3</p><p>4退退使退</p><p>5退</p><p>6退</p><p>7使</p><h3></h3><p>1</p><p>2//24</p><p>3//AppleID/</p><p>4APP</p><p>5 -24使 - - --AppleID--</p><p>6退</p><p>7APP使</p><h3></h3><p>1</p><p>2</p><p>3</p><p>4</p><p>5广</p><p>6</p><h3></h3><p>使</p><p>线APP- &gt;线</p><p>APP- &gt;</p><p>APP- &gt;</p><p>400-087-0203 </p><p></p><p></p>', views: 1234, date: '2026-05-06' }
// 服务条款(402)和Cookie说明(403)为占位内容,已隐藏,待正式内容后恢复
];
// 文章数据
let articles = [...defaultArticles];
// 当前状态
let currentCategory = 'all';
let collapsedSections = {};
// 初始化
document.addEventListener('DOMContentLoaded', function() {
const savedArticles = localStorage.getItem('chookoo_help_articles');
if (savedArticles) {
try {
const parsed = JSON.parse(savedArticles);
if (Array.isArray(parsed) && parsed.length > 0) {
const customArticles = parsed.filter(a => (a.pageType || 'help') === 'legal');
articles.push(...customArticles);
}
} catch (e) {
console.error('加载文章数据失败:', e);
}
}
const urlParams = new URLSearchParams(window.location.search);
const category = urlParams.get('category');
const articleId = urlParams.get('article');
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);
});
}
renderArticles();
initSearch();
initCategoryTabs();
initBackButton();
});
function renderArticles() {
const container = document.getElementById('articlesContainer');
let html = '';
const categoryOrder = ['privacy'];
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"/></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;">法律条款</a>
<span>/</span>
<span>${article.categoryName}</span>
</div>
<div class="article-detail">
<h1 class="article-title">${article.title}</h1>
<div class="article-meta">
<span class="article-date">${article.date}</span>
<span class="article-views">${article.views} 次阅读</span>
</div>
<div class="article-body">${article.content}</div>
</div>
`;
document.getElementById('articlesContainer').style.display = 'none';
document.getElementById('articlesListView').style.display = 'none';
document.getElementById('articleDetail').style.display = 'block';
document.getElementById('articleDetail').classList.add('active');
history.pushState({ articleId: id }, '', `?article=${id}`);
}
function backToList() {
document.getElementById('articlesContainer').style.display = 'block';
document.getElementById('articlesListView').style.display = 'block';
document.getElementById('articleDetail').style.display = 'none';
document.getElementById('articleDetail').classList.remove('active');
history.pushState({}, '', window.location.pathname);
}
function initBackButton() {
document.getElementById('backToList').addEventListener('click', backToList);
}
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();
});
});
}
function initSearch() {
const searchInput = document.getElementById('searchInput');
const results = document.getElementById('searchResults');
searchInput.addEventListener('input', function() {
const query = this.value.toLowerCase().trim();
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 (!searchInput.contains(e.target) && !results.contains(e.target)) {
results.classList.remove('active');
}
});
}
</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 涓诲姩寮忓疇鐗╁仴搴风鐞嗗紑鍒涜€咃紝璁╁仴搴峰彲瑙併€侀渶姹傚彲瑙c€佸疇鐖辨棤闂淬€?,
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>