This commit is contained in:
2026-06-03 10:27:17 +08:00
parent 6a26e2209e
commit c66fa890dd
114 changed files with 2032 additions and 1054 deletions
+214 -115
View File
@@ -26,7 +26,7 @@
background: var(--bg);
color: var(--text);
line-height: 1.6;
width: 100vw;
width: 100%;
overflow-x: hidden;
}
#pageContent {
@@ -293,70 +293,94 @@
color: #fff;
}
.app-hero-phone {
flex: 0 0 320px;
flex: 0 0 380px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.phone-mockup {
width: 280px;
height: 560px;
background: linear-gradient(145deg, #1e293b, #0f172a);
width: 300px;
height: 600px;
background: linear-gradient(145deg, #2a2d3a, #1a1c2e);
border-radius: 44px;
padding: 12px;
padding: 10px;
box-shadow:
0 50px 100px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 60px 120px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
position: relative;
z-index: 1;
}
.phone-mockup::before {
content: '';
position: absolute;
top: 16px;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 28px;
background: #0f172a;
border-radius: 20px;
width: 90px;
height: 24px;
background: #1a1c2e;
border-radius: 16px;
z-index: 5;
}
.phone-screen {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 36px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.phone-screen-content {
text-align: center;
padding: 20px;
.phone-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
.phone-screen-content .app-icon {
width: 72px;
height: 72px;
background: linear-gradient(135deg, var(--primary), #06b6d4);
border-radius: 18px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
.phone-slide.active {
opacity: 1;
}
.phone-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.phone-label {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
color: #fff;
box-shadow: 0 10px 30px rgba(47, 107, 255, 0.3);
font-size: 12px;
font-weight: 500;
padding: 6px 16px;
border-radius: 20px;
white-space: nowrap;
z-index: 10;
pointer-events: none;
}
.phone-screen-content h3 {
font-size: 20px;
color: #1f2937;
margin: 0 0 8px;
font-weight: 600;
.phone-dots {
display: flex;
gap: 8px;
justify-content: center;
}
.phone-screen-content p {
font-size: 13px;
color: #6b7280;
margin: 0;
.phone-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.phone-dot.active {
background: #fff;
width: 24px;
border-radius: 4px;
}
@media (max-width: 968px) {
.app-hero-content {
@@ -385,8 +409,7 @@
/* Feature Section */
.feature-section {
padding: 100px 24px;
background: var(--bg);
display: none;
}
.feature-header {
text-align: center;
@@ -491,6 +514,7 @@
/* Function Section */
.function-section {
display: none;
padding: 100px 24px;
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
@@ -593,8 +617,7 @@
/* Stats Section */
.stats-section {
padding: 80px 24px;
background: var(--bg);
display: none;
}
.stats-grid {
display: grid;
@@ -631,6 +654,7 @@
/* CTA Section */
.cta-section {
display: none;
padding: 100px 24px;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
text-align: center;
@@ -821,14 +845,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字logo.png" alt="Chookoo" />
</a>
<div class="navbar-menu">
<a href="../index.html" class="navbar-link">首页</a>
<a href="products.html" class="navbar-link">产品</a>
<a href="stories.html" class="navbar-link">故事</a>
<a href="app.html" class="navbar-link active">App</a>
<a href="company.html?article=201" class="navbar-link">关于我们</a>
<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 active"><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">
@@ -840,9 +864,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -861,30 +884,23 @@
<div class="app-hero-text">
<div class="app-hero-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
全球独家 · 毫米波雷达 + 红外测温
<span data-i18n="hero_badge">全球独家 · 毫米波雷达 + 红外测温</span>
</div>
<h1>Chookoo <span>App</span></h1>
<p class="app-hero-desc">AI宠物健康平台,全球独家搭载<strong>毫米波雷达</strong><strong>红外测温</strong>技术。不仅能自动铲屎,更能<strong>24小时无感监测</strong>猫咪心率、呼吸与体温,通过多设备生态联动主动管理宠物健康,是真正能<strong>"救命"</strong>的AI宠物医生</p>
<p class="app-hero-desc" data-i18n="hero_desc">离多远都不再担心。AI远程监控,异常随时提醒。通过AkiWell™ AI引擎,今日状态、健康周报、主动预警、云端陪伴、智能管家、隐私守护,一切尽在掌握</p>
<div class="app-download-buttons">
<a href="#" class="download-btn">
<a href="https://apps.apple.com/app/chookoo/id6758685831" target="_blank" rel="noopener noreferrer" class="download-btn">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
<div class="download-btn-text">
<span>下载于</span>
<strong>App Store</strong>
</div>
</a>
<a href="#" class="download-btn">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/></svg>
<div class="download-btn-text">
<span>下载于</span>
<strong>Google Play</strong>
</div>
</a>
<a href="#" class="download-btn download-btn-android">
<a href="https://app.chookoo.net" target="_blank" rel="noopener noreferrer" class="download-btn download-btn-android">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 11.4c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-1.5 1.5-1.5-1.5c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1c-.2.2-.2.5 0 .6l1.5 1.5-1.5 1.5c-.2.2-.2.5 0 .6.1.1.2.1.3.1s.2 0 .3-.1l1.5-1.5 1.5 1.5c.1.1.2.1.3.1s.2 0 .3-.1c.2-.2.2-.5 0-.6l-1.5-1.5 1.5-1.5c.2-.1.2-.4 0-.6zM6.5 9c.8 0 1.5-.7 1.5-1.5S7.3 6 6.5 6 5 6.7 5 7.5 5.7 9 6.5 9zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM17.5 9c.8 0 1.5-.7 1.5-1.5S18.3 6 17.5 6 16 6.7 16 7.5s.7 1.5 1.5 1.5zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-11c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5z"/><path d="M14.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM9.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM12 3.5L10.5 1h3L12 3.5z"/></svg>
<div class="download-btn-text">
<span>安卓直装</span>
<strong>APK 下载</strong>
<span>安卓下载</span>
<strong>app.chookoo.net</strong>
</div>
</a>
</div>
@@ -892,15 +908,30 @@
<div class="app-hero-phone">
<div class="phone-mockup">
<div class="phone-screen">
<div class="phone-screen-content">
<div class="app-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<h3>Chookoo</h3>
<p>智能宠物健康管理</p>
<div class="phone-slide active">
<img src="../images/app效果图1.png" alt="我的爱宠" />
<div class="phone-label">我的爱宠</div>
</div>
<div class="phone-slide">
<img src="../images/app效果图2.png" alt="我的设备" />
<div class="phone-label">我的设备</div>
</div>
<div class="phone-slide">
<img src="../images/app效果图3.png" alt="实时看护" />
<div class="phone-label">实时看护</div>
</div>
<div class="phone-slide">
<img src="../images/app效果图4.png" alt="健康周报" />
<div class="phone-label">健康周报</div>
</div>
</div>
</div>
<div class="phone-dots">
<button class="phone-dot active" data-slide="0"></button>
<button class="phone-dot" data-slide="1"></button>
<button class="phone-dot" data-slide="2"></button>
<button class="phone-dot" data-slide="3"></button>
</div>
</div>
</div>
</section>
@@ -919,8 +950,8 @@
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<div class="feature-content">
<h3>毫米波雷达监测</h3>
<p>24小时无感监测宠物心率与呼吸频率,无需佩戴任何设备,实现真正无接触健康追踪</p>
<h3>心跳呼吸双维侦测系统</h3>
<p>非接触式感知心率节律变化,并生成成长曲线。高频、持续关注爱宠的心率变化,提前预警健康风险</p>
</div>
</div>
<div class="feature-card">
@@ -928,8 +959,8 @@
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>
</div>
<div class="feature-content">
<h3>红外体温检测</h3>
<p>精准红外测温技术,实时监测宠物体温变化,发烧预警第一时间推送</p>
<h3>非接触式体温监测阵列</h3>
<p>红外传感,无接触不间断扫描,实现真正的"动态体温"监测。智能体温监测趋势变化,提供更多健康线索</p>
</div>
</div>
<div class="feature-card">
@@ -937,8 +968,8 @@
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<div class="feature-content">
<h3>AI健康预警</h3>
<p>基于AI算法分析健康趋势,异常情况即时提醒,在问题发生前主动干预</p>
<h3>AI健康识别摄像头</h3>
<p>仅在猫靠近时进行无感扫描,毫秒级成像分析,不打扰、不触碰。人脸识别行为分析功能,为每只猫咪专属看护健康行为画像</p>
</div>
</div>
<div class="feature-card">
@@ -946,8 +977,8 @@
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<div class="feature-content">
<h3>多设备生态联动</h3>
<p>智能喂食器、猫砂盆、饮水机等设备数据互通,构建完整健康管理生态</p>
<h3>猫咪专属称重算法</h3>
<p>专门针对猫咪定制的体重监测,称重传感器精度1%,精准追踪体重变化趋势</p>
</div>
</div>
</div>
@@ -959,21 +990,21 @@
<div class="container">
<div class="function-item">
<div class="function-text">
<span class="tag">全球独家</span>
<h3>毫米波雷达 · 心率呼吸监测</h3>
<p>搭载医疗级毫米波雷达技术,24小时无感监测宠物心率与呼吸频率。无需任何穿戴设备,宠物在猫砂盆内即可完成健康检测,数据实时同步至App</p>
<span class="tag">健康监测</span>
<h3>心跳呼吸双维侦测系统</h3>
<p>非接触式感知心率节律变化,并生成成长曲线。高频、持续关注爱宠的心率变化,提前预警健康风险</p>
<div class="function-features">
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
接触监测
接触式感知
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
心率异常预警
心率节律成长曲线
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
呼吸频率追踪
健康风险预警
</span>
</div>
</div>
@@ -984,17 +1015,17 @@
<div class="function-item">
<div class="function-text">
<span class="tag">红外测温</span>
<h3>体温实时监测 · 发烧即时预警</h3>
<p>精准红外测温传感器,每次如厕自动测量体温。体温异常立即推送通知,让家长第一时间发现潜在健康问题,真正做到"救命"于未然</p>
<span class="tag">体温监测</span>
<h3>非接触式体温监测阵列</h3>
<p>红外传感,无接触不间断扫描,实现真正的"动态体温"监测。智能体温监测趋势变化,提供更多健康线索</p>
<div class="function-features">
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
精准±0.1°C
红外无接触扫描
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
发烧即时提醒
动态体温监测
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
@@ -1009,21 +1040,21 @@
<div class="function-item">
<div class="function-text">
<span class="tag">AI分析</span>
<h3>多设备联动 · 主动健康管理</h3>
<p>喂食器、猫砂盆、饮水机数据互通,AI综合分析饮食、排泄、活动等多维度数据。识别健康风险趋势,提供个性化建议,主动守护宠物健康</p>
<span class="tag">AI识别</span>
<h3>AI健康识别摄像头</h3>
<p>仅在猫靠近时进行无感扫描,毫秒级成像分析,不打扰、不触碰。人脸识别行为分析功能,为每只猫咪专属看护健康行为画像</p>
<div class="function-features">
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
多维度数据分析
无感扫描成像
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
健康风险预警
人脸识别分析
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
个性化建议
专属健康画像
</span>
</div>
</div>
@@ -1034,21 +1065,21 @@
<div class="function-item">
<div class="function-text">
<span class="tag">智能清洁</span>
<h3>自动铲屎 · 如厕行为追踪</h3>
<p>智能猫砂盆自动清理,App实时记录如厕次数、时长、排泄量等数据。通过历史趋势分析,及早发现泌尿系统疾病征兆</p>
<span class="tag">安全保障</span>
<h3>五重防夹猫技术</h3>
<p>接近传感器、红外传感器、称重传感器、AI健康摄像头、紧急停止开关五重安全保障。感知防夹、红外实时监测、识别活体、识别猫咪信号、机械开关物理防卡,全方位守护爱宠安全</p>
<div class="function-features">
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
自动清理
感知防夹
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
如厕行为分析
红外光幕监测
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
泌尿健康预警
机械物理防卡
</span>
</div>
</div>
@@ -1089,25 +1120,18 @@
<h2>立即下载 Chookoo App</h2>
<p>开启AI宠物健康管理之旅,让毫米波雷达和AI守护每一个毛孩子的生命健康</p>
<div class="cta-buttons">
<a href="#" class="download-btn">
<a href="https://apps.apple.com/app/chookoo/id6758685831" target="_blank" rel="noopener noreferrer" class="download-btn">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
<div class="download-btn-text">
<span>下载于</span>
<strong>App Store</strong>
</div>
</a>
<a href="#" class="download-btn">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/></svg>
<div class="download-btn-text">
<span>下载于</span>
<strong>Google Play</strong>
</div>
</a>
<a href="#" class="download-btn download-btn-android">
<a href="https://app.chookoo.net" target="_blank" rel="noopener noreferrer" class="download-btn download-btn-android">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 11.4c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-1.5 1.5-1.5-1.5c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1c-.2.2-.2.5 0 .6l1.5 1.5-1.5 1.5c-.2.2-.2.5 0 .6.1.1.2.1.3.1s.2 0 .3-.1l1.5-1.5 1.5 1.5c.1.1.2.1.3.1s.2 0 .3-.1c.2-.2.2-.5 0-.6l-1.5-1.5 1.5-1.5c.2-.1.2-.4 0-.6zM6.5 9c.8 0 1.5-.7 1.5-1.5S7.3 6 6.5 6 5 6.7 5 7.5 5.7 9 6.5 9zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM17.5 9c.8 0 1.5-.7 1.5-1.5S18.3 6 17.5 6 16 6.7 16 7.5s.7 1.5 1.5 1.5zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-11c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5z"/><path d="M14.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM9.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM12 3.5L10.5 1h3L12 3.5z"/></svg>
<div class="download-btn-text">
<span>安卓直装</span>
<strong>APK 下载</strong>
<span>安卓下载</span>
<strong>app.chookoo.net</strong>
</div>
</a>
</div>
@@ -1127,7 +1151,7 @@
<a href="company.html?article=201">关于我们</a>
</div>
<div class="footer-copyright">
&copy; 2025 Chookoo 宠科智能科技. All Rights Reserved.
&copy; 2025 Chookoo 宠科智能科技. All Rights Reserved.
</div>
</div>
</footer>
@@ -1186,6 +1210,41 @@
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>
// App效果图片轮播
(function() {
const slides = document.querySelectorAll('.phone-slide');
const dots = document.querySelectorAll('.phone-dot');
if (!slides.length) return;
let current = 0;
let timer = null;
function goTo(index) {
slides[current].classList.remove('active');
dots[current].classList.remove('active');
current = index % slides.length;
slides[current].classList.add('active');
dots[current].classList.add('active');
}
function startAuto() {
timer = setInterval(() => goTo(current + 1), 3000);
}
dots.forEach(dot => {
dot.addEventListener('click', function() {
clearInterval(timer);
goTo(parseInt(this.dataset.slide));
startAuto();
});
});
startAuto();
})();
</script>
@@ -1262,5 +1321,45 @@
}
});
</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>
+92 -42
View File
@@ -22,7 +22,7 @@
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
width: 100vw;
width: 100%;
overflow-x: hidden;
line-height: 1.6;
}
@@ -508,14 +508,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字logo.png" alt="Chookoo" />
</a>
<div class="navbar-menu">
<a href="../index.html" class="navbar-link">首页</a>
<a href="products.html" class="navbar-link">产品</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 active">关于我们</a>
<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 active"><span data-i18n="nav_about">关于我们</span></a>
</div>
<div class="navbar-actions">
<a href="help.html" class="navbar-btn" aria-label="Search">
@@ -527,9 +527,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -549,22 +548,19 @@
<div class="articles-list-view" id="articlesListView">
<!-- 搜索区域 -->
<section class="search-section">
<h1 class="search-title">公司介绍</h1>
<p class="search-subtitle">搜索您想了解的问题,或浏览下方分类</p>
<h1 class="search-title" data-i18n="page_title">公司介绍</h1>
<p class="search-subtitle" data-i18n="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="搜索问题..." />
<input type="text" class="search-input" id="searchInput" placeholder="搜索问题..." data-i18n-placeholder="search_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 class="category-tab" data-category="about">关于我们</div>
<div class="category-tab" data-category="careers">加入我们</div>
<div class="category-tab" data-category="news">新闻动态</div>
<div class="category-tab" data-category="brand">品牌故事</div>
<div class="category-tab active" data-category="all"><span data-i18n="cat_all">全部</span></div>
<div class="category-tab" data-category="about"><span data-i18n="cat_about">关于我们</span></div>
</div>
<!-- 文章分类列表 -->
@@ -575,7 +571,7 @@
<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>
返回列表
<span data-i18n="back_to_list">返回列表</span>
</button>
<div id="articleContent"></div>
</div>
@@ -584,8 +580,8 @@
<!-- 页脚 -->
<footer class="footer">
<img src="../images/logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
<img src="../images/白字logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
</footer>
<script>
@@ -642,28 +638,24 @@
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 = 'company';
// 分类配置
// 分类配置(加入我们、新闻动态、品牌故事待正式内容后恢复)
const categories = {
all: { name: '全部', icon: '📋' },
about: { name: '关于我们', icon: '🏠' },
careers: { name: '加入我们', icon: '💼' },
news: { name: '新闻动态', icon: '📰' },
brand: { name: '品牌故事', icon: '📖' }
all: { name: '全部', nameEn: 'All', icon: '📋' },
about: { name: '关于我们', nameEn: 'About Us', icon: '🏠' }
};
// 默认文章数据(公司介绍)
const defaultArticles = [
{ id: 201, pageType: 'company', category: 'about', categoryName: '关于我们', title: '关于Chookoo宠科', content: '<h2>关于Chookoo宠科</h2><p>宠小科智能科技 (CHOOKOO) 成立于中国苏州,是一家专注于构建预防式主动健康生态的科技企业。我们深度融合人工智能、物联网与多模态生物传感技术,依托苏州长三角地区世界级的精密制造与跨学科研发能力,聚焦宠物与长者两大生命关爱场景,致力于让健康管理从"被动应对"走向"主动预见"。</p><p>通过智能设备 (如 AkiWell™智能健康猫厕所) 无感采集生命体征与行为数据,结合自研 AkiWell™主动健康预警算法,将日常细微变化转化为精准的健康洞察与温情提醒。我们的技术已实现对宠物泌尿系统疾病的提前48-72小时预警,并与高校共建联合实验室,持续提升医学级数据的严谨性。</p><p>宠小科以"宠爱生命,科技赋能"为使命,构建硬件入口+AI分析+数据服务+生态互联的闭环平台,让每一份关爱都有据可依,让每一个生命都能被真正理解与守护。我们期待与您携手,共同迈向更安心、更具预见性的健康生活。</p>', views: 1234, date: '2025-01-15' },
{ id: 202, pageType: 'company', category: 'about', categoryName: '关于我们', title: '我们的使命', content: '<h2>我们的使命</h2><p><strong>愿景:</strong>成为全球宠物家庭最信赖的智能健康伙伴,定义主动健康管理新范式</p><p><strong>使命:</strong>让健康可见,让需求可解,让宠爱无间</p><p><strong>价值观:</strong>始于生命关怀,成于科技向善,归于商业远见</p>', views: 876, date: '2025-01-14' },
{ id: 203, pageType: 'company', category: 'careers', categoryName: '加入我们', title: '热招职位', content: '<h2>热招职位</h2><ul><li>产品经理</li><li>嵌入式工程师</li><li>UI设计师</li><li>运营专员</li></ul><p>简历请投递至:hr@chookoo.com</p>', views: 567, date: '2025-01-13' },
{ id: 204, pageType: 'company', category: 'news', categoryName: '新闻动态', title: 'Chookoo获得A轮融资', content: '<h2>融资新闻</h2><p>Chookoo宠科智能科技宣布完成数千万元A轮融资,将用于产品研发和市场拓展。</p>', views: 2345, date: '2025-01-12' },
{ id: 205, pageType: 'company', category: 'brand', categoryName: '品牌故事', title: '品牌起源', content: '<h2>品牌故事</h2><p>Chookoo创立于2020年,源于创始人对自己宠物的一份热爱。我们相信,科技可以让养宠变得更简单。</p>', views: 789, date: '2025-01-11' }
{ id: 201, pageType: 'company', category: 'about', categoryName: '关于我们', title: '关于Chookoo宠科', en: { title: 'About Chookoo Petcare', categoryName: 'About Us', content: '<h2>About Chookoo Petcare</h2><p>Chookoo Petcare (CHOOKOO) was founded in Suzhou, China, as a technology enterprise focused on building a proactive health ecosystem. We deeply integrate artificial intelligence, IoT, and multimodal biosensing technologies, leveraging the world-class precision manufacturing and interdisciplinary R&D capabilities of the Yangtze River Delta region. We focus on pet and elder care scenarios, dedicated to transforming health management from "passive response" to "proactive prevention."</p><p>Through smart devices (such as the AkiWell Smart Health Cat Toilet), we seamlessly collect vital signs and behavioral data. Combined with our proprietary AkiWell proactive health alert algorithm, we transform subtle daily changes into precise health insights and caring reminders. Our technology achieves 48-72 hour early warnings for pet urinary system conditions, and we co-build joint laboratories with universities to continuously enhance the rigor of medical-grade data.</p><p>Chookoo\'s mission is "cherishing life through technology empowerment," building a closed-loop platform of hardware entry + AI analysis + data services + ecosystem interconnection, so that every act of care is evidence-based, and every life is truly understood and protected.</p>' }, content: '<h2>关于Chookoo宠</h2><p>宠小科智能科技 (CHOOKOO) 成立于中国苏州,是一家专注于构建预防式主动健康生态的科技企业。我们深度融合人工智能、物联网与多模态生物传感技术,依托苏州长三角地区世界级的精密制造与跨学科研发能力,聚焦宠物与长者两大生命关爱场景,致力于让健康管理从"被动应对"走向"主动预见"。</p><p>通过智能设备 (如 AkiWell™智能健康猫厕所) 无感采集生命体征与行为数据,结合自研 AkiWell™主动健康预警算法,将日常细微变化转化为精准的健康洞察与温情提醒。我们的技术已实现对宠物泌尿系统疾病的提前48-72小时预警,并与高校共建联合实验室,持续提升医学级数据的严谨性。</p><p>宠小科以"宠爱生命,科技赋能"为使命,构建硬件入口+AI分析+数据服务+生态互联的闭环平台,让每一份关爱都有据可依,让每一个生命都能被真正理解与守护。我们期待与您携手,共同迈向更安心、更具预见性的健康生活。</p>', views: 1234, date: '2025-01-15' },
{ id: 202, pageType: 'company', category: 'about', categoryName: '关于我们', title: '我们的使命', en: { title: 'Our Mission', categoryName: 'About Us', content: '<h2>Our Mission</h2><p><strong>Vision:</strong> To become the world\'s most trusted smart health partner for pet families, defining a new paradigm of proactive health management.</p><p><strong>Mission:</strong> Make health visible, make needs solvable, and make care seamless.</p><p><strong>Values:</strong> Tech for good, care-first approach, extreme innovation, and lasting companionship.</p>' }, content: '<h2>我们的使命</h2><p><strong>愿景:</strong>成为全球宠物家庭最信赖的智能健康伙伴,定义主动健康管理新范式</p><p><strong>使命:</strong>让健康可见,让需求可解,让宠爱无间</p><p><strong>价值观:</strong>始于生命关怀,成于科技向善,归于商业远见</p>', views: 876, date: '2025-01-14' }
];
// 文章数据
@@ -673,6 +665,11 @@
let currentCategory = 'all';
let collapsedSections = {};
// Get current language
function getLang() {
return document.getElementById('langSelect')?.value || ((navigator.language||'').toLowerCase().startsWith('zh') ? 'zh' : 'en');
}
// 初始化
document.addEventListener('DOMContentLoaded', function() {
// 清除旧缓存,确保使用代码中的最新文章数据
@@ -708,10 +705,11 @@
// 渲染文章列表
function renderArticles() {
const lang = getLang();
const container = document.getElementById('articlesContainer');
let html = '';
const categoryOrder = ['about', 'careers', 'news', 'brand'];
const categoryOrder = ['about'];
categoryOrder.forEach(cat => {
if (currentCategory !== 'all' && currentCategory !== cat) return;
@@ -721,23 +719,27 @@
const isCollapsed = collapsedSections[cat];
const catInfo = categories[cat];
const catName = lang === 'en' && catInfo.nameEn ? catInfo.nameEn : catInfo.name;
const articlesLabel = lang === 'en' ? ' articles' : ' 篇文章';
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>
<h2 class="section-title">${catName}</h2>
<span class="section-count">${catArticles.length}${articlesLabel}</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 => `
${catArticles.map(article => {
const aTitle = (lang === 'en' && article.en) ? article.en.title : article.title;
return `
<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>
<span class="article-title">${aTitle}</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('')}
`}).join('')}
</div>
</section>
`;
@@ -754,23 +756,31 @@
// 显示文章详情
function showArticle(id) {
const lang = getLang();
const article = articles.find(a => a.id === id);
if (!article) return;
const aTitle = (lang === 'en' && article.en) ? article.en.title : article.title;
const aCatName = (lang === 'en' && article.en) ? (article.en.categoryName || article.categoryName) : article.categoryName;
const aContent = (lang === 'en' && article.en && article.en.content) ? article.en.content : article.content;
const pageTitle = lang === 'en' ? 'Company Introduction' : '公司介绍';
const viewsLabel = lang === 'en' ? ' views' : ' 次阅读';
const relatedLabel = lang === 'en' ? 'Related Articles' : '相关文章';
const content = document.getElementById('articleContent');
content.innerHTML = `
<div class="article-breadcrumb">
<a href="#" onclick="backToList(); return false;">公司介绍</a>
<a href="#" onclick="backToList(); return false;">${pageTitle}</a>
<span>/</span>
<span>${article.categoryName}</span>
<span>${aCatName}</span>
</div>
<div class="article-detail-inner">
<h1 class="article-title">${article.title}</h1>
<h1 class="article-title">${aTitle}</h1>
<div class="article-meta">
<span class="article-date">${article.date}</span>
<span class="article-views">${article.views} 次阅读</span>
<span class="article-views">${article.views}${viewsLabel}</span>
</div>
<div class="article-body">${article.content}</div>
<div class="article-body">${aContent}</div>
${renderRelatedArticles(id, article.category)}
</div>
`;
@@ -904,5 +914,45 @@
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>
+286 -66
View File
@@ -22,7 +22,7 @@
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
width: 100vw;
width: 100%;
overflow-x: hidden;
line-height: 1.6;
}
@@ -289,6 +289,7 @@
.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;
@@ -510,14 +511,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字logo.png" alt="Chookoo" />
</a>
<div class="navbar-menu">
<a href="../index.html" class="navbar-link">首页</a>
<a href="products.html" class="navbar-link">产品</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>
<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">
@@ -529,9 +530,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -568,6 +568,7 @@
<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>
@@ -588,8 +589,8 @@
<!-- 页脚 -->
<footer class="footer">
<img src="../images/logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
<img src="../images/白字logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
</footer>
<script>
@@ -646,6 +647,9 @@
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>
@@ -656,29 +660,43 @@
id: 101,
category: 'install',
categoryName: '安装指导',
title: '智能猫厕所安装指南',
title: '智能猫砂盆安装指南C10 Pro / C10',
content: `
<p>本指南将帮助您正确安装智能猫厕所,请按以下步骤操作:</p>
<h3>开箱检查</h3>
<ul>
<li>主机 × 1</li>
<li>集便仓 × 1</li>
<li>电源适配器 × 1</li>
<li>集便袋(初始装)× 5</li>
<li>说明书 × 1</li>
</ul>
<h3>安装步骤</h3>
<p>本指南适用于 C10 Pro 和 C10 两款智能猫砂盆,请按以下步骤操作:</p>
<h3>配件清单</h3>
<p>开箱后请确认以下配件齐全:主机、电源适配器、净味盒、大颗粒砂网、小颗粒砂网、垃圾袋、控砂垫、踏板。</p>
<h3>主机安装</h3>
<ol>
<li><strong>选择位置</strong>:将设备放置在平稳干燥的地面,远离水源和热源,建议距离墙面10cm以上</li>
<li><strong>安装集便仓</strong>打开上盖,将集便仓对准卡槽推入到底,听到"咔哒"声表示安装到位</li>
<li><strong>套入集便袋</strong>将集便袋套在集便仓口部,确保边缘平整无褶皱</li>
<li><strong>添加猫砂</strong>向内桶倒入猫砂,建议用量3-5L,高度不要超过MAX刻度线</li>
<li><strong>连接电源</strong>将电源适配器连接到设备,插头插入插座</li>
<li><strong>开机测试</strong>长按电源键3秒开机,设备会自动进行一次自检</li>
<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 class="article-tip-title">⚠️ 注意</div>
<p>首次使用前请撕掉设备上的保护膜,确保传感器表面清洁无遮挡。请将产品置于水平表面上。</p>
</div>
`,
views: 2345,
@@ -756,30 +774,49 @@
categoryName: '安装指导',
title: '设备WiFi配网教程',
content: `
<p>所有Chookoo智能设备都支持WiFi连接,配网步骤如下:</p>
<p>首次使用需绑定APP,绑定成功后设备方可正常使用。请先从 App Store 或安卓应用市场下载 Chookoo App。</p>
<h3>配网前准备</h3>
<ul>
<li>确保设备已通电并开机</li>
<li>手机连接2.4GHz WiFi网络(不支持5GHz</li>
<li>确认WiFi密码正确</li>
<li>下载并安装Chookoo APP,注册账号</li>
<li>确保设备已上电</li>
<li>家庭网络为 2.4GHz 或 2.4G/5GHz 混合频段</li>
<li>手机打开 WiFi 开关、地理位置开关、蓝牙开关</li>
<li>APP 运行时授予相关权限(附近设备、蓝牙、网络等)</li>
<li>靠近路由器,保证信号稳定</li>
</ul>
<h3>配网步骤</h3>
<h3>方式一:蓝牙配网(推荐)</h3>
<ol>
<li><strong>进入配网模式</strong>:长按设备配网键5秒,直到指示灯快闪</li>
<li><strong>打开APP</strong>:在APP首页点击右上角"+"号</li>
<li><strong>选择设备</strong>:在列表中选择要添加的设备类型</li>
<li><strong>输入WiFi密码</strong>:输入当前手机连接的WiFi密码</li>
<li><strong>等待配网</strong>:将手机靠近设备,等待30-60秒</li>
<li><strong>配网成功</strong>:指示灯常亮,APP提示添加成功</li>
<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是2.4GHz频段</li>
<li>检查WiFi密码是否正确</li>
<li>确保设备与路由器距离不要太远</li>
<li>重启设备后重试</li>
<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'
@@ -1187,30 +1224,29 @@
id: 14,
category: 'other',
categoryName: '其他问题',
title: '产品保修政策是什么?',
title: '产品保修政策',
content: `
<p>Chookoo产品享有以下保修服务:</p>
<p>Chookoo 智能猫砂盆(C10 Pro / C10享有以下保修服务:</p>
<h3>保修期限</h3>
<ul>
<li><strong>主机</strong>1年保修</li>
<li><strong></strong>滤芯、集便袋等):不在保修范围内</li>
<li><strong></strong>电源适配器等):不在保修范围内</li>
</ul>
<h3>保修范围</h3>
<p>在正常使用情况下,因产品本身质量问题导致的性能故障,可享受免费维修或更换。</p>
<h3>以下情况不在保修范围内</h3>
<ul>
<li>非人为损坏的性能故障</li>
<li>正常使用情况下的零部件损坏</li>
<li>制造工艺缺陷</li>
</ul>
<h3>不在保修范围内</h3>
<ul>
<li>人为损坏、进水、摔落</li>
<li>私自拆机维修</li>
<li>使用非官方配件导致的损坏</li>
<li>超过保修期限</li>
<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>购买延保服务可享受2年保修,详情请咨询客服。</p>
<div class="article-tip-title">💡 温馨提示</div>
<p>请妥善保管购买凭证和产品合格证,以便享受售后服务。如有疑问请联系客服。</p>
</div>
`,
views: 987,
@@ -1226,11 +1262,11 @@
<h3>在线客服</h3>
<p>在APP中点击"我的" > "帮助与反馈" > "在线客服",工作时间9:00-21:00。</p>
<h3>客服热线</h3>
<p>400-888-8888(工作时间:周一至周日 9:00-21:00)</p>
<p>021-60707996(工作时间:周一至周日 9:00-21:00)</p>
<h3>邮箱</h3>
<p>support@chookoo.com</p>
<p>support@chookoo.net</p>
<h3>微信公众号</h3>
<p>关注"Chookoo宠科"公众号,在菜单中选择"售后服务"。</p>
<p>关注"Chookoo宠科"公众号,在菜单中选择"售后服务"。</p>
<div class="article-tip">
<div class="article-tip-title">💡 建议</div>
<p>联系客服时请准备好订单号或设备SN码,以便我们更快为您服务。</p>
@@ -1265,6 +1301,149 @@
`,
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'
}
];
@@ -1279,6 +1458,7 @@
fountain: { name: '智能饮水机', icon: '💧' },
feeder: { name: '智能喂食器', icon: '🍽️' },
app: { name: 'APP使用', icon: '📱' },
faq: { name: '常见问题', icon: '🔧' },
other: { name: '其他问题', icon: '❓' }
};
@@ -1337,7 +1517,7 @@
const container = document.getElementById('articlesContainer');
let html = '';
const categoryOrder = ['install', 'litter', 'fountain', 'feeder', 'app', 'other'];
const categoryOrder = ['install', 'litter', 'fountain', 'feeder', 'app', 'faq', 'other'];
categoryOrder.forEach(cat => {
if (currentCategory !== 'all' && currentCategory !== cat) return;
@@ -1386,7 +1566,7 @@
const content = document.getElementById('articleContent');
content.innerHTML = `
<div class="article-breadcrumb">
<a href="#" onclick="backToList(); return false;">帮助中心</a>
<a href="#" onclick="backToList(); return false;"><span data-i18n="footer_help">帮助中心</span></a>
<span>/</span>
<span>${article.categoryName}</span>
</div>
@@ -1524,5 +1704,45 @@
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>
+57 -22
View File
File diff suppressed because one or more lines are too long
+60 -20
View File
@@ -22,7 +22,7 @@
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
width: 100vw;
width: 100%;
overflow-x: hidden;
line-height: 1.6;
}
@@ -508,14 +508,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字logo.png" alt="Chookoo" />
</a>
<div class="navbar-menu">
<a href="../index.html" class="navbar-link">首页</a>
<a href="products.html" class="navbar-link">产品</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>
<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">
@@ -527,9 +527,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -559,7 +558,7 @@
</section>
<!-- 分类标签 -->
<div class="category-tabs" id="categoryTabs">
<div class="category-tabs" id="categoryTabs" style="display:none;">
<div class="category-tab active" data-category="all">全部</div>
<div class="category-tab" data-category="dealer">经销商入驻</div>
<div class="category-tab" data-category="affiliate">联盟推广</div>
@@ -569,6 +568,11 @@
<!-- 文章分类列表 -->
<div id="articlesContainer"></div>
<div id="comingSoon" style="text-align:center;padding:80px 24px;">
<div style="font-size:48px;margin-bottom:16px;">🤝</div>
<h3 style="font-size:20px;color:#1f2937;margin-bottom:8px;">合作内容筹备中</h3>
<p style="font-size:14px;color:#6b7280;">如有合作意向,请联系我们:support@chookoo.net</p>
</div>
</div>
<!-- 文章详情视图 -->
@@ -584,8 +588,8 @@
<!-- 页脚 -->
<footer class="footer">
<img src="../images/logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
<img src="../images/白字logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 宠科智能科技(苏州)有限公司 保留所有权利</p>
</footer>
<script>
@@ -642,6 +646,8 @@
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>
@@ -657,14 +663,8 @@
tech: { name: '技术合作', icon: '🔬' }
};
// 默认文章数据(合作伙伴)
const defaultArticles = [
{ id: 301, pageType: 'partner', category: 'dealer', categoryName: '经销商入驻', title: '经销商入驻条件', content: '<h2>入驻条件</h2><ul><li>具有合法经营资质</li><li>有宠物行业经验优先</li><li>具备一定的资金实力</li><li>认同品牌理念</li></ul>', views: 654, date: '2025-01-15' },
{ id: 302, pageType: 'partner', category: 'dealer', categoryName: '经销商入驻', title: '经销商政策', content: '<h2>合作政策</h2><ul><li>区域独家保护</li><li>市场费用支持</li><li>培训支持</li><li>售后支持</li></ul>', views: 543, date: '2025-01-14' },
{ id: 303, pageType: 'partner', category: 'affiliate', categoryName: '联盟推广', title: '推广联盟计划', content: '<h2>推广联盟</h2><p>加入Chookoo推广联盟,通过分享获得收益。</p><ul><li>佣金比例:10%-15%</li><li>结算周期:月结</li><li>支持素材丰富</li></ul>', views: 432, date: '2025-01-13' },
{ id: 304, pageType: 'partner', category: 'business', categoryName: '企业采购', title: '企业采购服务', content: '<h2>企业采购</h2><p>为企业客户提供定制化采购服务:</p><ul><li>批量优惠</li><li>定制包装</li><li>专属客服</li><li>发票支持</li></ul>', views: 321, date: '2025-01-12' },
{ id: 305, pageType: 'partner', category: 'tech', categoryName: '技术合作', title: '技术合作', content: '<h2>技术合作</h2><p>我们欢迎各类技术合作:</p><ul><li>智能家居平台对接</li><li>Pet IoT生态合作</li><li>技术授权</li></ul>', views: 234, date: '2025-01-11' }
];
// 占位文章已隐藏,待正式内容后恢复
const defaultArticles = [];
// 文章数据
let articles = [...defaultArticles];
@@ -865,5 +865,45 @@
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>
+53 -12
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>产品详情 - Chookoo 宠科智能科技</title>
<title>产品详情 - Chookoo 宠科智能科技</title>
<style>
:root {
color-scheme: light;
@@ -23,7 +23,7 @@
background: var(--bg);
color: var(--text);
line-height: 1.6;
width: 100vw;
width: 100%;
overflow-x: hidden;
}
#pageContent {
@@ -477,14 +477,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字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>
<a href="../index.html" class="navbar-link"><span data-i18n="nav_home">首页</span></a>
<a href="products.html" class="navbar-link active"><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">
@@ -496,9 +496,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -518,8 +517,8 @@
<!-- 页脚 -->
<footer class="footer">
<img src="../images/logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 Chookoo 宠科智能科技(苏州)有限公司 保留所有权利</p>
<img src="../images/白字logo.png" alt="Chookoo" class="footer-logo" />
<p class="footer-text">© 2025 Chookoo 宠科智能科技(苏州)有限公司 保留所有权利</p>
</footer>
</div><!-- /pageContent -->
@@ -579,6 +578,8 @@
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>
@@ -1190,5 +1191,45 @@
}
});
</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>
+172 -71
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>全部产品 - Chookoo 宠科智能科技</title>
<title>全部产品 - Chookoo 宠科智能科技</title>
<style>
:root {
color-scheme: light;
@@ -20,16 +20,15 @@
html, body {
height: auto;
}
html { overflow-y: scroll; overflow-x: hidden; }
html { overflow-x: hidden; }
body {
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
"Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--text);
overflow-y: auto;
scroll-behavior: smooth;
width: 100vw;
width: 100%;
overflow-x: hidden;
}
#pageContent {
@@ -404,8 +403,6 @@
.footer-bottom-main .footer-social {
display: flex;
gap: 12px;
margin-left: -950px;
margin-top: -280px;
}
.footer-bottom-main .footer-social a {
display: flex;
@@ -567,7 +564,7 @@
color: #fff;
}
.social-qr-item.weibo .qr-icon {
background: linear-gradient(135deg, #ff5722 0%, #e51c23 100%);
background: linear-gradient(135deg, #fa6400 0%, #ff8a00 100%);
color: #fff;
}
.social-qr-item.xiaohongshu .qr-icon {
@@ -729,14 +726,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字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>
<a href="../index.html" class="navbar-link"><span data-i18n="nav_home">首页</span></a>
<a href="products.html" class="navbar-link active"><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">
@@ -748,9 +745,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -767,28 +763,28 @@
<main class="main-content">
<!-- 页面标题 -->
<div class="page-header">
<h1>全部产品</h1>
<p>探索 Chookoo 智能宠物生态,为您的毛孩子提供全方位健康管理</p>
<h1 data-i18n="page_title">全部产品</h1>
<p data-i18n="page_subtitle">探索 Chookoo 智能宠物生态,为您的毛孩子提供全方位健康管理</p>
</div>
<!-- 分类导航 -->
<div class="category-nav">
<button class="category-btn active" data-category="all">全部</button>
<button class="category-btn" data-category="cat">猫用产品</button>
<button class="category-btn" data-category="dog">狗用产品</button>
<button class="category-btn" data-category="toilet">智能厕所</button>
<button class="category-btn" data-category="feeding">喂养系列</button>
<button class="category-btn" data-category="monitor">监控系列</button>
<button class="category-btn active" data-category="all"><span data-i18n="cat_all">全部</span></button>
<button class="category-btn" data-category="cat"><span data-i18n="cat_cat">猫用产品</span></button>
<button class="category-btn" data-category="dog"><span data-i18n="cat_dog">狗用产品</span></button>
<button class="category-btn" data-category="toilet"><span data-i18n="cat_toilet">智能厕所</span></button>
<button class="category-btn" data-category="feeding"><span data-i18n="cat_feeding">喂养系列</span></button>
<button class="category-btn" data-category="monitor"><span data-i18n="cat_monitor">监控系列</span></button>
</div>
<!-- 智能厕所系列 -->
<section class="product-section" data-section="toilet">
<div class="section-header">
<h2>智能厕所系列</h2>
<a href="#">查看全部 →</a>
<h2 data-i18n="sec_toilet">智能厕所系列</h2>
<a href="#"><span data-i18n="view_all">查看全部 →</span></a>
</div>
<div class="product-grid">
<div class="product-card" data-category="cat toilet">
<div class="product-card" data-category="cat toilet" data-product-id="cat-toilet-pro">
<div class="product-card-image">
<img src="../images/cat.png" alt="智能猫厕所" />
</div>
@@ -806,7 +802,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat toilet">
<div class="product-card" data-category="cat toilet" data-product-id="cat-toilet-lite">
<div class="product-card-image">
<img src="../images/cat.png" alt="智能猫厕所 Lite" />
</div>
@@ -823,7 +819,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="dog toilet">
<div class="product-card" data-category="dog toilet" data-product-id="dog-toilet">
<div class="product-card-image">
<img src="../images/dog.jpeg" alt="智能狗厕所" />
</div>
@@ -844,11 +840,11 @@
<!-- 喂养系列 -->
<section class="product-section" data-section="feeding">
<div class="section-header">
<h2>喂养系列</h2>
<a href="#">查看全部 →</a>
<h2 data-i18n="sec_feeding">喂养系列</h2>
<a href="#"><span data-i18n="view_all">查看全部 →</span></a>
</div>
<div class="product-grid">
<div class="product-card" data-category="cat dog feeding">
<div class="product-card" data-category="cat dog feeding" data-product-id="smart-feeder">
<div class="product-card-image">
<img src="../images/feeder.png" alt="智能喂食器" />
</div>
@@ -864,7 +860,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat dog feeding">
<div class="product-card" data-category="cat dog feeding" data-product-id="smart-fountain">
<div class="product-card-image">
<img src="../images/water.jpeg" alt="智能饮水机" />
</div>
@@ -879,7 +875,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat feeding">
<div class="product-card" data-category="cat feeding" data-product-id="cat-food-bucket">
<div class="product-card-image">
<img src="../images/cat.png" alt="猫粮储存桶" />
</div>
@@ -893,7 +889,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="dog feeding">
<div class="product-card" data-category="dog feeding" data-product-id="dog-food-bucket">
<div class="product-card-image">
<img src="../images/dog.jpeg" alt="狗粮储存桶" />
</div>
@@ -914,11 +910,11 @@
<!-- 监控系列 -->
<section class="product-section" data-section="monitor">
<div class="section-header">
<h2>监控系列</h2>
<a href="#">查看全部 →</a>
<h2 data-i18n="sec_monitor">监控系列</h2>
<a href="#"><span data-i18n="view_all">查看全部 →</span></a>
</div>
<div class="product-grid">
<div class="product-card" data-category="cat dog monitor">
<div class="product-card" data-category="cat dog monitor" data-product-id="ai-camera">
<div class="product-card-image">
<img src="../images/camera.jpeg" alt="AI宠物摄像头" />
</div>
@@ -934,7 +930,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat dog monitor">
<div class="product-card" data-category="cat dog monitor" data-product-id="health-tracker">
<div class="product-card-image">
<img src="../images/cat.png" alt="宠物健康追踪器" />
</div>
@@ -949,7 +945,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat dog monitor">
<div class="product-card" data-category="cat dog monitor" data-product-id="environment-monitor">
<div class="product-card-image">
<img src="../images/dog.jpeg" alt="环境监测仪" />
</div>
@@ -970,11 +966,11 @@
<!-- 配件系列 -->
<section class="product-section" data-section="accessories">
<div class="section-header">
<h2>配件系列</h2>
<a href="#">查看全部 →</a>
<h2 data-i18n="sec_accessories">配件系列</h2>
<a href="#"><span data-i18n="view_all">查看全部 →</span></a>
</div>
<div class="product-grid">
<div class="product-card" data-category="cat dog">
<div class="product-card" data-category="cat dog" data-product-id="filter-set">
<div class="product-card-image">
<img src="../images/cat.png" alt="替换滤网套装" />
</div>
@@ -989,7 +985,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat dog">
<div class="product-card" data-category="cat dog" data-product-id="cleaning-kit">
<div class="product-card-image">
<img src="../images/dog.jpeg" alt="清洁耗材包" />
</div>
@@ -1004,7 +1000,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat dog">
<div class="product-card" data-category="cat dog" data-product-id="power-adapter">
<div class="product-card-image">
<img src="../images/cat.png" alt="备用电源适配器" />
</div>
@@ -1019,7 +1015,7 @@
</div>
</div>
</div>
<div class="product-card" data-category="cat dog">
<div class="product-card" data-category="cat dog" data-product-id="extended-warranty">
<div class="product-card-image">
<img src="../images/dog.jpeg" alt="延长保修服务" />
</div>
@@ -1046,17 +1042,18 @@
<div class="footer-logo">
<img src="../images/白字logo.png" alt="Chookoo" />
</div>
<p class="footer-desc">AIoT 主动式宠物健康管理开创者,让健康可见、需求可解、宠爱无间。</p>
<p class="footer-desc"><span data-i18n="footer_desc">AIoT 主动式宠物健康管理开创者,让健康可见、需求可解、宠爱无间。</span></p>
</div>
<div class="footer-column">
<h4>产品</h4>
<h4><span data-i18n="footer_products">产品</span></h4>
<ul class="footer-links">
<li><a href="#">智能猫厕所</a></li>
<li><a href="#">智能喂食器</a></li>
<li><a href="#">智能饮水机</a></li>
<li><a href="#">AI 摄像头</a></li>
<li><a href="products.html"><span data-i18n="footer_cat">智能猫厕所</span></a></li>
<li><a href="products.html"><span data-i18n="footer_feeder">智能喂食器</span></a></li>
<li><a href="products.html"><span data-i18n="footer_fountain">智能饮水机</span></a></li>
<li><a href="products.html"><span data-i18n="footer_camera">AI 摄像头</span></a></li>
</ul>
</div>
<!-- 公司栏目待正式内容后恢复
<div class="footer-column">
<h4>公司</h4>
<ul class="footer-links">
@@ -1066,20 +1063,21 @@
<li><a href="#">联系方式</a></li>
</ul>
</div>
-->
<div class="footer-column">
<h4>支持</h4>
<h4><span data-i18n="footer_support">支持</span></h4>
<ul class="footer-links">
<li><a href="#">帮助中心</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">保修政策</a></li>
<li><a href="#">退换货</a></li>
<li><a href="help.html"><span data-i18n="footer_help">帮助中心</span></a></li>
<li><a href="help.html"><span data-i18n="footer_faq">常见问题</span></a></li>
<li><a href="help.html?article=14"><span data-i18n="footer_warranty">保修政策</span></a></li>
<li><a href="help.html?category=other"><span data-i18n="footer_returns">退换货</span></a></li>
</ul>
</div>
<div class="footer-column">
<h4>联系我们</h4>
<h4><span data-i18n="footer_contact">联系我们</span></h4>
<ul class="footer-links">
<li><a href="mailto:hello@chookoo.com">hello@chookoo.com</a></li>
<li><a href="tel:400-888-8888">400-888-8888</a></li>
<li><a href="mailto:support@chookoo.net">support@chookoo.net</a></li>
<li><a href="tel:021-60707996">021-60707996</a></li>
<li><span>苏州 · 吴江</span></li>
</ul>
</div>
@@ -1088,11 +1086,11 @@
<div class="footer-bottom-main">
<p class="footer-copyright">© 2025 Chookoo. All rights reserved.</p>
<div class="footer-social">
<a href="#" aria-label="WeChat">
<a href="javascript:void(0)" aria-label="WeChat">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
</a>
<a href="#" aria-label="Weibo">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.579-.18-.405-.649.381-.998.42-1.859.003-2.474-.785-1.159-2.924-1.095-5.399-.034 0 0-.773.335-.576-.272.383-1.217.324-2.236-.271-2.823-1.35-1.329-4.935.05-8.006 3.073C1.203 10.674 0 13.078 0 15.09c0 3.854 4.946 6.194 9.783 6.194 6.334 0 10.555-3.681 10.555-6.6 0-1.765-1.489-2.763-2.68-3.025h.001zm1.895-5.962c-.766-.847-1.896-1.217-3.036-1.109l.049-.003c.263-.03.49.168.512.436a.475.475 0 0 1-.428.516c-.842.09-1.651.509-2.219 1.261a.468.468 0 0 1-.656.09.473.473 0 0 1-.088-.662c.722-.958 1.773-1.505 2.871-1.623 1.427-.147 2.835.369 3.795 1.432.957 1.06 1.331 2.483 1.086 3.864a.47.47 0 0 1-.545.39.472.472 0 0 1-.386-.548c.195-1.1-.104-2.237-.865-3.08l-.09-.064zm.963-3.178c-1.262-1.396-3.123-1.999-4.998-1.662a.471.471 0 0 0 .165.927c1.513-.272 3.013.213 4.03 1.339 1.017 1.125 1.39 2.626 1.04 4.093a.473.473 0 0 0 .346.57.467.467 0 0 0 .568-.345c.425-1.78-.033-3.617-1.151-4.922z"/></svg>
<a href="javascript:void(0)" aria-label="Video Channel">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</a>
<a href="#" aria-label="Xiaohongshu">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
@@ -1102,9 +1100,11 @@
</a>
</div>
<div class="footer-legal">
<a href="#">隐私政策</a>
<a href="#">服务条款</a>
<a href="legal.html?page=privacy"><span data-i18n="footer_privacy">隐私政策</span></a>
<!-- 服务条款和Cookie设置待正式内容后恢复
<a href="#"><span data-i18n="footer_terms">服务条款</span></a>
<a href="#">Cookie 设置</a>
-->
</div>
</div>
</div>
@@ -1132,27 +1132,27 @@
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-wechat.png" alt="微信二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/公众号二维码.jpg" alt="微信二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">微信公众号</div>
<div class="qr-desc">获取最新资讯</div>
</div>
<div class="social-qr-item weibo">
<div class="qr-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.578-.18-.405-.649.381-1.017.422-1.896-.006-2.523-.802-1.171-2.996-1.107-5.528-.031 0 0-.791.346-.589-.283.389-1.229.332-2.26-.275-2.857-1.379-1.36-5.049.051-8.199 3.154C.946 11.718 0 14.132 0 16.194c0 3.949 5.06 6.347 10.014 6.347 6.496 0 10.819-3.774 10.819-6.772 0-1.811-1.527-2.838-2.774-3.32zm2.059-3.799c-.637-.785-1.584-1.216-2.662-1.216l-.273.006.074-.27c.098-.358.148-.699.148-1.018 0-.802-.314-1.521-.887-2.024-.573-.503-1.341-.78-2.163-.78-.823 0-1.59.277-2.163.78-.387.34-.655.749-.807 1.197l-.088.26-.222-.132c-.398-.237-.856-.363-1.325-.363-.484 0-.955.133-1.362.385l-.222.138.074-.268c.12-.434.174-.843.174-1.229 0-1.158-.456-2.247-1.286-3.068C6.107.435 5.007 0 3.84 0 2.672 0 1.572.435.743 1.224-.087 2.014-.543 3.102-.543 4.26c0 1.159.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256.484 0 .955-.088 1.407-.262l.222-.088-.074.268c-.12.434-.174.843-.174 1.229 0 1.158.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256s2.267-.436 3.097-1.256c.387-.382.68-.813.879-1.278l.088-.207.222.132c.398.237.856.363 1.325.363.484 0 .955-.133 1.362-.385l.222-.138-.074.268c-.12.434-.174.843-.174 1.229 0 1.158.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256s2.267-.436 3.097-1.256c.83-.82 1.286-1.91 1.286-3.068 0-1.158-.456-2.247-1.286-3.068z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-weibo.png" alt="微博二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/视频号二维码1.png" alt="视频号二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">官方微博</div>
<div class="qr-desc">互动交流</div>
<div class="qr-name">视频号</div>
<div class="qr-desc">精彩视频内容</div>
</div>
<div class="social-qr-item xiaohongshu">
<div class="qr-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-xiaohongshu.png" alt="小红书二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/小红书二维码.png" alt="小红书二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">小红书</div>
<div class="qr-desc">种草分享</div>
@@ -1162,7 +1162,7 @@
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-tiktok.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/抖音二维码.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">抖音</div>
<div class="qr-desc">精彩视频</div>
@@ -1225,6 +1225,67 @@
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>
// ============================================================
// 产品可见性控制
// 用法:修改 VISIBLE_PRODUCTS 数组即可控制显示哪些产品
// - 填产品 ID(字符串数组):只显示列出的产品
// - 设为 null:显示全部产品(恢复默认)
// - 设为 [](空数组):隐藏所有产品
// ============================================================
const VISIBLE_PRODUCTS = [
'cat-toilet-pro', // 智能猫厕所 Pro
// --- 以下产品已隐藏,取消注释即可恢复显示 ---
// 'cat-toilet-lite', // 智能猫厕所 Lite
// 'dog-toilet', // 智能狗厕所
// 'smart-feeder', // 智能喂食器
// 'smart-fountain', // 智能饮水机
// 'cat-food-bucket', // 智能猫粮桶
// 'dog-food-bucket', // 智能狗粮桶
// 'ai-camera', // AI宠物摄像头
// 'health-tracker', // 宠物健康追踪器
// 'environment-monitor', // 环境监测仪
// 'filter-set', // 替换滤网套装
// 'cleaning-kit', // 清洁耗材包
// 'power-adapter', // 备用电源适配器
// 'extended-warranty', // 延长保修服务
];
(function applyProductVisibility() {
if (VISIBLE_PRODUCTS === null) return; // null = 显示全部
const allCards = document.querySelectorAll('.product-card[data-product-id]');
const visibleSet = new Set(VISIBLE_PRODUCTS);
// 隐藏/显示卡片
allCards.forEach(card => {
const id = card.dataset.productId;
if (!visibleSet.has(id)) {
card.style.display = 'none';
}
});
// 隐藏没有可见卡片的 section
document.querySelectorAll('.product-section').forEach(section => {
const visibleCards = section.querySelectorAll('.product-card:not([style*="display: none"])');
if (visibleCards.length === 0) {
section.style.display = 'none';
}
});
// 隐藏没有可见产品的分类按钮
document.querySelectorAll('.category-btn').forEach(btn => {
if (btn.dataset.category === 'all') return;
const cat = btn.dataset.category;
const hasVisible = document.querySelector(
'.product-card[data-category*="' + cat + '"]:not([style*="display: none"])'
);
if (!hasVisible) btn.style.display = 'none';
});
})();
</script>
<script>
@@ -1362,5 +1423,45 @@
}
});
</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>
+133 -92
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>宠物故事 - Chookoo宠科智能</title>
<title>宠物故事 - Chookoo宠科智能</title>
<style>
:root {
color-scheme: light;
@@ -26,7 +26,7 @@
overflow-x: hidden;
}
body {
width: 100vw;
width: 100%;
overflow-x: hidden;
}
#pageContent {
@@ -369,10 +369,9 @@
}
/* 页脚 */
footer {
padding: 40px 24px;
text-align: center;
border-top: 1px solid var(--line);
background: #f9fafb;
background: #0f172a;
color: #94a3b8;
}
.footer p {
color: var(--muted);
@@ -457,7 +456,6 @@
.footer-social {
display: flex;
gap: 12px;
margin-left: -580px;
}
.footer-social a {
display: flex;
@@ -625,7 +623,7 @@
color: #fff;
}
.social-qr-item.weibo .qr-icon {
background: linear-gradient(135deg, #ff5722 0%, #e51c23 100%);
background: linear-gradient(135deg, #fa6400 0%, #ff8a00 100%);
color: #fff;
}
.social-qr-item.xiaohongshu .qr-icon {
@@ -796,14 +794,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字logo.png" alt="Chookoo" />
</a>
<div class="navbar-menu">
<a href="../index.html" class="navbar-link">首页</a>
<a href="products.html" class="navbar-link">产品</a>
<a href="stories.html" class="navbar-link active">故事</a>
<a href="app.html" class="navbar-link">App</a>
<a href="company.html?article=201" class="navbar-link">关于我们</a>
<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 active"><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">
@@ -815,9 +813,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -844,23 +841,23 @@
<!-- 故事1 -->
<a href="story-detail.html?id=story-1" class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-1.jpg" alt="小橘" onerror="this.src='../images/cat.png'" />
<span class="story-category">健康恢复</span>
<img class="story-image" src="../images/patents/cat/9f372b85494375441c4c4d9e5b1fb526.jpg" alt="五只小奶猫" />
<span class="story-category">多猫家庭</span>
</div>
<div class="story-content">
<h2>小橘的逆袭日记</h2>
<p>第一次发现Chookoo智能猫厕所后,小橘终于康复了健康。原本经常尿频尿急的它现在每天都会主动监测,及时发现问题,让我这个做家长的更加安心...</p>
<h2>五只小奶猫的温暖新家</h2>
<p>五只不同花色的小奶猫挤在纸箱里的宠物床上,从怯生生到活泼好动,Chookoo智能猫厕所帮我们轻松应对多猫家庭的清洁难题...</p>
<div class="story-meta">
<img class="story-avatar" src="story-cat-1.jpg" alt="小橘" onerror="this.src='../images/cat.png'" />
<img class="story-avatar" src="../images/patents/cat/9f372b85494375441c4c4d9e5b1fb526.jpg" alt="猫窝主理人" />
<div class="story-author">
<p class="story-author-name">小橘妈妈</p>
<p class="story-date">猫 · 上海 · 2024.03</p>
<p class="story-author-name">猫窝主理人</p>
<p class="story-date">田园猫 · 苏州 · 2024.03</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">健康监测</span>
<span class="story-tag">智能猫厕所</span>
<span class="story-tag">数据报告</span>
<span class="story-tag">多猫家庭</span>
<span class="story-tag">智能清洁</span>
<span class="story-tag">温馨故事</span>
</div>
</div>
</a>
@@ -868,21 +865,21 @@
<!-- 故事2 -->
<a href="story-detail.html?id=story-2" class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-2.jpg" alt="旺财" onerror="this.src='../images/dog.jpeg'" />
<span class="story-category">体重管理</span>
<img class="story-image" src="../images/patents/cat/49cb2973ffe172eea5eff5ef234e9de5.jpg" alt="灰灰" />
<span class="story-category">科学喂养</span>
</div>
<div class="story-content">
<h2>旺财的健身日记</h2>
<p>旺财以前很挑食,Chookoo智能喂食器帮它养成了定点投喂的好习惯,同时还会监测体重变化,真是做到科学喂养才安心...</p>
<h2>灰灰的科学喂养之路</h2>
<p>灰灰是个小馋猫,家里五只猫抢着吃总是它最胖。Chookoo智能喂食器定时定量出粮,终于帮它控制住了体重...</p>
<div class="story-meta">
<img class="story-avatar" src="story-dog-1.jpg" alt="旺财" onerror="this.src='../images/dog.jpeg'" />
<img class="story-avatar" src="../images/patents/cat/49cb2973ffe172eea5eff5ef234e9de5.jpg" alt="灰灰妈妈" />
<div class="story-author">
<p class="story-author-name">旺财爸爸</p>
<p class="story-date">金毛 · 北京 · 2024.02</p>
<p class="story-author-name">灰灰妈妈</p>
<p class="story-date">英短 · 上海 · 2024.02</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">智能喂食</span>
<span class="story-tag">科学喂养</span>
<span class="story-tag">体重管理</span>
<span class="story-tag">定时定量</span>
</div>
@@ -892,22 +889,22 @@
<!-- 故事3 -->
<a href="story-detail.html?id=story-3" class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-3.jpg" alt="布丁" onerror="this.src='../images/cat.png'" />
<img class="story-image" src="../images/patents/cat/4d19ed38f720b7121666c1acbeb4a25b.png" alt="布丁" />
<span class="story-category">AI识别</span>
</div>
<div class="story-content">
<h2>布丁的日常</h2>
<p>自从用了AI摄像头,可以自动识别布丁的状态,让我惊喜万分。可以随时查看它在家的情况,还会自动识别猫咪的不同状态...</p>
<h2>布丁的优雅日常</h2>
<p>布丁是一只英短蓝白,最喜欢端坐在沙发上"监工"。自从用了AI摄像头,它的一举一动都被智能识别记录,连打哈欠都不放过...</p>
<div class="story-meta">
<img class="story-avatar" src="story-cat-2.jpg" alt="布丁" onerror="this.src='../images/cat.png'" />
<img class="story-avatar" src="../images/patents/cat/4d19ed38f720b7121666c1acbeb4a25b.png" alt="布丁" />
<div class="story-author">
<p class="story-author-name">布丁姐姐</p>
<p class="story-date">英短 · 深圳 · 2024.01</p>
<p class="story-date">英短蓝白 · 深圳 · 2024.01</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">AI摄像头</span>
<span class="story-tag">行为识别</span>
<span class="story-tag">AI识别</span>
<span class="story-tag">行为分析</span>
<span class="story-tag">远程守护</span>
</div>
</div>
@@ -916,23 +913,23 @@
<!-- 故事4 -->
<a href="story-detail.html?id=story-4" class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-4.jpg" alt="豆豆" onerror="this.src='../images/dog.jpeg'" />
<span class="story-category">饮水健康</span>
<img class="story-image" src="../images/patents/cat/3082b09ccd65d31f2876b13cbfd50ce1.jpg" alt="小柴" />
<span class="story-category">新手养宠</span>
</div>
<div class="story-content">
<h2>豆豆的饮水日记</h2>
<p>豆豆以前不爱喝水,用了智能饮水机后,循环净化的水让它爱喝了。APP还会提醒我今日饮水量,确保健康...</p>
<h2>小柴的回家之路</h2>
<p>接小柴回家的路上,它乖乖趴在我腿上,温柔的眼神让人心疼。Chookoo智能饮水机到家就准备好了,让它第一口就爱上喝水...</p>
<div class="story-meta">
<img class="story-avatar" src="story-dog-2.jpg" alt="豆豆" onerror="this.src='../images/dog.jpeg'" />
<img class="story-avatar" src="../images/patents/cat/3082b09ccd65d31f2876b13cbfd50ce1.jpg" alt="小柴" />
<div class="story-author">
<p class="story-author-name">豆豆妈妈</p>
<p class="story-date">柯基 · 杭州 · 2024.01</p>
<p class="story-author-name">小柴爸爸</p>
<p class="story-date">柴犬混血 · 杭州 · 2024.01</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">智能饮水机</span>
<span class="story-tag">饮水提醒</span>
<span class="story-tag">循环净化</span>
<span class="story-tag">新手养宠</span>
<span class="story-tag">温馨陪伴</span>
<span class="story-tag">智能饮水</span>
</div>
</div>
</a>
@@ -940,23 +937,23 @@
<!-- 故事5 -->
<a href="story-detail.html?id=story-5" class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-5.jpg" alt="咪咪" onerror="this.src='../images/cat.png'" />
<span class="story-category">健康监测</span>
<img class="story-image" src="../images/patents/cat/4a95801f0fdfd1a62c3a0ed79cf3dc0b.jpg" alt="团子" />
<span class="story-category">新手养猫</span>
</div>
<div class="story-content">
<h2>咪咪的健康守护</h2>
<p>Chookoo智能设备帮我实时监测咪咪的健康状况,每次数据报告都让我很安心,真正做到了预防式健康管理...</p>
<h2>团子的第一天回家</h2>
<p>接团子回家的那天,它小小的身体被托在手心里,琥珀色的眼睛好奇地打量着新家。Chookoo智能设备帮我全程守护它的健康成长...</p>
<div class="story-meta">
<img class="story-avatar" src="story-cat-3.jpg" alt="咪咪" onerror="this.src='../images/cat.png'" />
<img class="story-avatar" src="../images/patents/cat/4a95801f0fdfd1a62c3a0ed79cf3dc0b.jpg" alt="团子" />
<div class="story-author">
<p class="story-author-name">咪咪妈妈</p>
<p class="story-date">美短 · 广州 · 2023.12</p>
<p class="story-author-name">团子妈妈</p>
<p class="story-date">白猫 · 广州 · 2023.12</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">新手养猫</span>
<span class="story-tag">健康监测</span>
<span class="story-tag">预防管理</span>
<span class="story-tag">数据报告</span>
<span class="story-tag">成长记录</span>
</div>
</div>
</a>
@@ -964,23 +961,23 @@
<!-- 故事6 -->
<a href="story-detail.html?id=story-6" class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-6.jpg" alt="大黄" onerror="this.src='../images/dog.jpeg'" />
<span class="story-category">训练养成</span>
<img class="story-image" src="../images/patents/cat/21ab09a5a0f446f051beefc6110191d4.jpg" alt="小棕" />
<span class="story-category">新家适应</span>
</div>
<div class="story-content">
<h2>大黄的如厕训练</h2>
<p>大黄以前随地大小便,用了Chookoo智能狗厕所,科学训练让它很快养成了好习惯,省心又干净...</p>
<h2>小棕的第一间小窝</h2>
<p>刚到家的小棕站在笼子里,好奇地打量着新环境。Chookoo智能狗厕所帮它快速建立如厕习惯,从不安到安心只用了一周...</p>
<div class="story-meta">
<img class="story-avatar" src="story-dog-3.jpg" alt="大黄" onerror="this.src='../images/dog.jpeg'" />
<img class="story-avatar" src="../images/patents/cat/21ab09a5a0f446f051beefc6110191d4.jpg" alt="小棕" />
<div class="story-author">
<p class="story-author-name">大黄爸爸</p>
<p class="story-date">田园犬 · 成都 · 2023.11</p>
<p class="story-author-name">小棕妈妈</p>
<p class="story-date">中华田园犬 · 成都 · 2023.11</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">智能狗厕所</span>
<span class="story-tag">如厕训练</span>
<span class="story-tag">清洁管理</span>
<span class="story-tag">新家适应</span>
<span class="story-tag">智能狗厕所</span>
</div>
</div>
</a>
@@ -999,9 +996,9 @@
</svg>
</div>
<h3>微信公众号</h3>
<p>Chookoo宠科智能</p>
<p>Chookoo宠科智能</p>
<div class="qr-code">
<img src="../images/qr-wechat.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
<img src="../images/公众号二维码.jpg" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
@@ -1014,9 +1011,9 @@
</svg>
</div>
<h3>视频号</h3>
<p>Chookoo宠科智能</p>
<p>Chookoo宠科智能</p>
<div class="qr-code">
<img src="../images/qr-video.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
<img src="../images/视频号二维码1.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
@@ -1028,9 +1025,9 @@
</svg>
</div>
<h3>抖音</h3>
<p>@Chookoo宠科智能</p>
<p>@Chookoo宠科智能</p>
<div class="qr-code">
<img src="../images/qr-douyin.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
<img src="../images/抖音二维码.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
@@ -1043,9 +1040,9 @@
</svg>
</div>
<h3>小红书</h3>
<p>Chookoo宠科智能</p>
<p>Chookoo宠科智能</p>
<div class="qr-code">
<img src="../images/qr-xiaohongshu.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
<img src="../images/小红书二维码.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
</div>
@@ -1059,29 +1056,31 @@
<div class="footer-bottom-main">
<p class="footer-copyright">© 2025 Chookoo. All rights reserved.</p>
<div class="footer-social">
<a href="#" aria-label="WeChat">
<a href="javascript:void(0)" aria-label="WeChat">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
</a>
<a href="#" aria-label="Weibo">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.579-.18-.405-.649.381-.998.42-1.859.003-2.474-.785-1.159-2.924-1.095-5.399-.034 0 0-.773.335-.576-.272.383-1.217.324-2.236-.271-2.823-1.35-1.329-4.935.05-8.006 3.073C1.203 10.674 0 13.078 0 15.09c0 3.854 4.946 6.194 9.783 6.194 6.334 0 10.555-3.681 10.555-6.6 0-1.765-1.489-2.763-2.68-3.025h.001zm1.895-5.962c-.766-.847-1.896-1.217-3.036-1.109l.049-.003c.263-.03.49.168.512.436a.475.475 0 0 1-.428.516c-.842.09-1.651.509-2.219 1.261a.468.468 0 0 1-.656.09.473.473 0 0 1-.088-.662c.722-.958 1.773-1.505 2.871-1.623 1.427-.147 2.835.369 3.795 1.432.957 1.06 1.331 2.483 1.086 3.864a.47.47 0 0 1-.545.39.472.472 0 0 1-.386-.548c.195-1.1-.104-2.237-.865-3.08l-.09-.064zm.963-3.178c-1.262-1.396-3.123-1.999-4.998-1.662a.471.471 0 0 0 .165.927c1.513-.272 3.013.213 4.03 1.339 1.017 1.125 1.39 2.626 1.04 4.093a.473.473 0 0 0 .346.57.467.467 0 0 0 .568-.345c.425-1.78-.033-3.617-1.151-4.922z"/></svg>
<a href="javascript:void(0)" aria-label="Weibo">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</a>
<a href="#" aria-label="Xiaohongshu">
<a href="javascript:void(0)" aria-label="Xiaohongshu">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
</a>
<a href="#" aria-label="TikTok">
<a href="javascript:void(0)" aria-label="TikTok">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</a>
</div>
<div class="footer-legal">
<a href="#">隐私政策</a>
<a href="#">服务条款</a>
<a href="legal.html?page=privacy"><span data-i18n="footer_privacy">隐私政策</span></a>
<!-- 服务条款和Cookie设置待正式内容后恢复
<a href="#"><span data-i18n="footer_terms">服务条款</span></a>
<a href="#">Cookie 设置</a>
-->
</div>
</div>
<p class="beian-row">
<span>宠科智能科技(苏州)有限公司</span>
<span>科智能科技(苏州)有限公司</span>
<span class="sep">|</span>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">苏ICP备2025227635号</a>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">苏ICP备2025227635号-2A</a>
<span class="sep">|</span>
<img class="beian-icon" src="https://www.beian.gov.cn/img/new/gongan.png" alt="公安备案" />
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32050902103112" target="_blank" rel="noopener noreferrer">苏公网安备32050902103112号</a>
@@ -1111,27 +1110,27 @@
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-wechat.png" alt="微信二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/公众号二维码.jpg" alt="微信二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">微信公众号</div>
<div class="qr-desc">获取最新资讯</div>
</div>
<div class="social-qr-item weibo">
<div class="qr-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.578-.18-.405-.649.381-1.017.422-1.896-.006-2.523-.802-1.171-2.996-1.107-5.528-.031 0 0-.791.346-.589-.283.389-1.229.332-2.26-.275-2.857-1.379-1.36-5.049.051-8.199 3.154C.946 11.718 0 14.132 0 16.194c0 3.949 5.06 6.347 10.014 6.347 6.496 0 10.819-3.774 10.819-6.772 0-1.811-1.527-2.838-2.774-3.32zm2.059-3.799c-.637-.785-1.584-1.216-2.662-1.216l-.273.006.074-.27c.098-.358.148-.699.148-1.018 0-.802-.314-1.521-.887-2.024-.573-.503-1.341-.78-2.163-.78-.823 0-1.59.277-2.163.78-.387.34-.655.749-.807 1.197l-.088.26-.222-.132c-.398-.237-.856-.363-1.325-.363-.484 0-.955.133-1.362.385l-.222.138.074-.268c.12-.434.174-.843.174-1.229 0-1.158-.456-2.247-1.286-3.068C6.107.435 5.007 0 3.84 0 2.672 0 1.572.435.743 1.224-.087 2.014-.543 3.102-.543 4.26c0 1.159.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256.484 0 .955-.088 1.407-.262l.222-.088-.074.268c-.12.434-.174.843-.174 1.229 0 1.158.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256s2.267-.436 3.097-1.256c.387-.382.68-.813.879-1.278l.088-.207.222.132c.398.237.856.363 1.325.363.484 0 .955-.133 1.362-.385l.222-.138-.074.268c-.12.434-.174.843-.174 1.229 0 1.158.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256s2.267-.436 3.097-1.256c.83-.82 1.286-1.91 1.286-3.068 0-1.158-.456-2.247-1.286-3.068z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-weibo.png" alt="微博二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/视频号二维码1.png" alt="视频号二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">官方微博</div>
<div class="qr-desc">互动交流</div>
<div class="qr-name">视频号</div>
<div class="qr-desc">精彩视频内容</div>
</div>
<div class="social-qr-item xiaohongshu">
<div class="qr-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-xiaohongshu.png" alt="小红书二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/小红书二维码.png" alt="小红书二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">小红书</div>
<div class="qr-desc">种草分享</div>
@@ -1141,7 +1140,7 @@
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
</div>
<div class="qr-image">
<img src="../images/qr-tiktok.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
<img src="../images/抖音二维码.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
</div>
<div class="qr-name">抖音</div>
<div class="qr-desc">精彩视频</div>
@@ -1204,6 +1203,8 @@
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>
@@ -1308,5 +1309,45 @@
}
});
</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>
+95 -54
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>故事详情 - Chookoo 宠科智能科技</title>
<title>故事详情 - Chookoo 宠科智能科技</title>
<style>
:root {
color-scheme: light;
@@ -23,7 +23,7 @@
background: var(--bg);
color: var(--text);
line-height: 1.6;
width: 100vw;
width: 100%;
overflow-x: hidden;
}
#pageContent {
@@ -462,14 +462,14 @@
<nav class="navbar" style="opacity:0">
<div class="navbar-inner">
<a href="../index.html" class="navbar-logo">
<img src="../images/logo.png" alt="Chookoo" />
<img src="../images/白字logo.png" alt="Chookoo" />
</a>
<div class="navbar-menu">
<a href="../index.html" class="navbar-link">首页</a>
<a href="products.html" class="navbar-link">产品</a>
<a href="stories.html" class="navbar-link active">故事</a>
<a href="app.html" class="navbar-link">App</a>
<a href="company.html?article=201" class="navbar-link">关于我们</a>
<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 active"><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">
@@ -481,9 +481,8 @@
<select id="langSelect" aria-label="Language" class="lang-select-hero">
<option value="zh">中文</option>
<option value="en">EN</option>
<option value="ja">日本語</option>
</select>
<a href="../index.html#contact" class="navbar-cta">联系我们</a>
<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>
@@ -503,7 +502,7 @@
<!-- 页脚 -->
<footer class="footer">
<p class="footer-text">&copy; 2025 Chookoo 宠科智能科技(苏州)有限公司 保留所有权利</p>
<p class="footer-text">&copy; 2025 Chookoo 宠科智能科技(苏州)有限公司 保留所有权利</p>
</footer>
</div><!-- /pageContent -->
@@ -553,21 +552,23 @@
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); });
})();
// 故事数据库
const stories = {
'story-1': {
id: 'story-1',
image: '../images/cat.png',
fallback: '../images/cat.png',
avatar: '../images/cat.png',
category: '健康恢复',
image: '../images/patents/cat/9f372b85494375441c4c4d9e5b1fb526.jpg',
fallback: '../images/patents/cat/9f372b85494375441c4c4d9e5b1fb526.jpg',
avatar: '../images/patents/cat/9f372b85494375441c4c4d9e5b1fb526.jpg',
category: '多猫家庭',
date: '2024.03',
location: '上海',
pet: '猫',
tags: ['健康监测', '智能猫厕所', '数据报告'],
title: '小橘的逆袭日记',
location: '苏州',
pet: '田园猫',
tags: ['多猫家庭', '智能清洁', '温馨故事'],
title: '五只小奶猫的温暖新家',
excerpt: '第一次发现Chookoo的智能猫厕所后,小橘终于康复了健康...',
paragraphs: [
'我家小橘今年三岁,是一只活泼好动的橘猫。去年冬天开始,我发现它如厕的频率明显增加了,有时候一天要去好几次猫砂盆。一开始我以为只是正常的饮食变化,并没有太在意。',
@@ -584,15 +585,15 @@
},
'story-2': {
id: 'story-2',
image: '../images/dog.jpeg',
fallback: '../images/dog.jpeg',
avatar: '../images/dog.jpeg',
category: '体重管理',
image: '../images/patents/cat/49cb2973ffe172eea5eff5ef234e9de5.jpg',
fallback: '../images/patents/cat/49cb2973ffe172eea5eff5ef234e9de5.jpg',
avatar: '../images/patents/cat/49cb2973ffe172eea5eff5ef234e9de5.jpg',
category: '科学喂养',
date: '2024.02',
location: '北京',
pet: '金毛',
tags: ['智能喂食', '体重管理', '定时定量'],
title: '旺财的健身日记',
location: '上海',
pet: '英短',
tags: ['科学喂养', '体重管理', '定时定量'],
title: '灰灰的科学喂养之路',
excerpt: '旺财以前很挑食,Chookoo的智能喂食器帮它养成了定点投喂的好习惯...',
paragraphs: [
'旺财是一只两岁的金毛犬,活泼好动是它的天性。但它有一个让我头疼的问题——挑食。有时候一天不吃东西,有时候又暴饮暴食,体重一直不太稳定。',
@@ -609,15 +610,15 @@
},
'story-3': {
id: 'story-3',
image: '../images/cat.png',
fallback: '../images/cat.png',
avatar: '../images/cat.png',
image: '../images/patents/cat/4d19ed38f720b7121666c1acbeb4a25b.png',
fallback: '../images/patents/cat/4d19ed38f720b7121666c1acbeb4a25b.png',
avatar: '../images/patents/cat/4d19ed38f720b7121666c1acbeb4a25b.png',
category: 'AI识别',
date: '2024.01',
location: '深圳',
pet: '英短',
tags: ['AI摄像头', '行为识别', '远程守护'],
title: '布丁的日常',
pet: '英短蓝白',
tags: ['AI识别', '行为分析', '远程守护'],
title: '布丁的优雅日常',
excerpt: '自从用了AI摄像头,可以自动识别布丁的状态,让我惊喜万分...',
paragraphs: [
'布丁是一只一岁的英国短毛猫,因为工作原因我白天经常不在家。每次出门的时候,我都会担心它是不是安全,有没有好好吃饭,是不是又在偷偷啃我的拖鞋。',
@@ -634,15 +635,15 @@
},
'story-4': {
id: 'story-4',
image: '../images/dog.jpeg',
fallback: '../images/dog.jpeg',
avatar: '../images/dog.jpeg',
category: '饮水健康',
image: '../images/patents/cat/3082b09ccd65d31f2876b13cbfd50ce1.jpg',
fallback: '../images/patents/cat/3082b09ccd65d31f2876b13cbfd50ce1.jpg',
avatar: '../images/patents/cat/3082b09ccd65d31f2876b13cbfd50ce1.jpg',
category: '新手养宠',
date: '2024.01',
location: '杭州',
pet: '柯基',
tags: ['智能饮水机', '饮水提醒', '循环净化'],
title: '豆豆的饮水日记',
pet: '柴犬混血',
tags: ['新手养宠', '温馨陪伴', '智能饮水'],
title: '小柴的回家之路',
excerpt: '豆豆以前不爱喝水,用了智能饮水机后,循环净化的水让它爱喝了...',
paragraphs: [
'豆豆是一只三岁的柯基犬,活泼可爱,但有一个让我非常头疼的问题——不爱喝水。每次给它倒的水,放一整天都不见少。医生说长期饮水不足会导致泌尿系统和肾脏问题,这让我非常焦虑。',
@@ -659,15 +660,15 @@
},
'story-5': {
id: 'story-5',
image: '../images/cat.png',
fallback: '../images/cat.png',
avatar: '../images/cat.png',
category: '健康监测',
image: '../images/patents/cat/4a95801f0fdfd1a62c3a0ed79cf3dc0b.jpg',
fallback: '../images/patents/cat/4a95801f0fdfd1a62c3a0ed79cf3dc0b.jpg',
avatar: '../images/patents/cat/4a95801f0fdfd1a62c3a0ed79cf3dc0b.jpg',
category: '新手养猫',
date: '2023.12',
location: '广州',
pet: '美短',
tags: ['健康监测', '预防管理', '数据报告'],
title: '咪咪的健康守护',
pet: '白猫',
tags: ['新手养猫', '健康监测', '成长记录'],
title: '团子的第一天回家',
excerpt: 'Chookoo的智能设备帮我实时监测咪咪的健康状况,每次数据报告都让我很安心...',
paragraphs: [
'咪咪是一只四岁的美国短毛猫,是我从小养到大的宝贝。随着年龄的增长,我越来越关注它的健康状况。去年体检的时候,医生说咪咪的各项指标都还不错,但建议我多关注它的日常健康数据。',
@@ -684,15 +685,15 @@
},
'story-6': {
id: 'story-6',
image: '../images/dog.jpeg',
fallback: '../images/dog.jpeg',
avatar: '../images/dog.jpeg',
category: '训练养成',
image: '../images/patents/cat/21ab09a5a0f446f051beefc6110191d4.jpg',
fallback: '../images/patents/cat/21ab09a5a0f446f051beefc6110191d4.jpg',
avatar: '../images/patents/cat/21ab09a5a0f446f051beefc6110191d4.jpg',
category: '新家适应',
date: '2023.11',
location: '成都',
pet: '田园犬',
tags: ['智能狗厕所', '如厕训练', '清洁管理'],
title: '大黄的如厕训练',
pet: '中华田园犬',
tags: ['如厕训练', '新家适应', '智能狗厕所'],
title: '小棕的第一间小窝',
excerpt: '大黄以前随地大小便,用了Chookoo的智能狗厕所,科学训练让它很快养成了好习惯...',
paragraphs: [
'大黄是我从救助站领养的一只中华田园犬,刚来的时候已经一岁多了。因为之前在外面流浪过,大黄完全没有室内如厕的概念,经常在家里随地大小便,让我非常苦恼。',
@@ -875,5 +876,45 @@
}
});
</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>