921 lines
38 KiB
HTML
921 lines
38 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>故事详情 - Chookoo 宠小科智能科技</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #f5f7fb;
|
|
--text: #0f172a;
|
|
--muted: #5b6472;
|
|
--primary: #2f6bff;
|
|
--primary-weak: #e8f1ff;
|
|
--card: #ffffff;
|
|
--line: #e5e7eb;
|
|
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; overflow-x: hidden; }
|
|
body {
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
#pageContent {
|
|
min-width: 1280px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
/* 导航栏 */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
.navbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 32px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.navbar-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.navbar-logo img { height: 40px; width: auto; }
|
|
.navbar-link {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-link:hover { color: var(--text); background: rgba(0, 0, 0, 0.04); }
|
|
.navbar-link.active { color: var(--primary); background: var(--primary-weak); }
|
|
.navbar-actions { display: flex; align-items: center; gap: 12px; }
|
|
.navbar-btn {
|
|
display: flex; align-items: center; justify-content: center;
|
|
width: 40px; height: 40px; border-radius: 10px;
|
|
background: transparent; border: none; cursor: pointer;
|
|
color: var(--muted); transition: all 0.2s ease;
|
|
}
|
|
.navbar-btn:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); }
|
|
.navbar-btn svg { width: 20px; height: 20px; }
|
|
.navbar-cta {
|
|
padding: 10px 20px; font-size: 14px; font-weight: 600;
|
|
color: #fff; background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
border: none; border-radius: 10px; transition: all 0.2s ease;
|
|
}
|
|
.navbar-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3); }
|
|
.mobile-menu-btn { display: none; }
|
|
.lang-select-hero { background: transparent; border: none; font-size: 13px; color: var(--muted); cursor: pointer; padding: 8px; }
|
|
|
|
/* 主内容 */
|
|
.main-content {
|
|
padding-top: 100px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
/* 面包屑 */
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
margin-bottom: 32px;
|
|
}
|
|
.breadcrumb a:hover { color: var(--primary); }
|
|
.breadcrumb span { color: var(--text); font-weight: 500; }
|
|
|
|
/* 故事头部 */
|
|
.story-hero {
|
|
margin-bottom: 40px;
|
|
}
|
|
.story-hero-image {
|
|
width: 100%;
|
|
height: 400px;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
margin-bottom: 32px;
|
|
}
|
|
.story-hero-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.story-category-badge {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
border-radius: 100px;
|
|
background: var(--primary-weak);
|
|
color: var(--primary);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
.story-hero h1 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
margin-bottom: 20px;
|
|
}
|
|
.story-author-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 20px 24px;
|
|
background: var(--card);
|
|
border-radius: 16px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.story-author-avatar {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 3px solid var(--primary-weak);
|
|
}
|
|
.story-author-info { flex: 1; }
|
|
.story-author-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 2px;
|
|
}
|
|
.story-author-meta {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
.story-date-badge {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.story-date-badge svg { width: 16px; height: 16px; }
|
|
|
|
/* 故事正文 */
|
|
.story-body {
|
|
background: var(--card);
|
|
border-radius: 24px;
|
|
padding: 48px;
|
|
border: 1px solid var(--line);
|
|
margin-bottom: 48px;
|
|
}
|
|
.story-body p {
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
color: #374151;
|
|
margin-bottom: 20px;
|
|
}
|
|
.story-body p:last-child { margin-bottom: 0; }
|
|
.story-body blockquote {
|
|
margin: 24px 0;
|
|
padding: 20px 24px;
|
|
background: var(--primary-weak);
|
|
border-left: 4px solid var(--primary);
|
|
border-radius: 0 12px 12px 0;
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
color: #1e40af;
|
|
}
|
|
.story-body h2 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
margin: 32px 0 16px;
|
|
color: var(--text);
|
|
}
|
|
.story-body ul {
|
|
margin: 16px 0;
|
|
padding-left: 24px;
|
|
}
|
|
.story-body li {
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
color: #374151;
|
|
}
|
|
|
|
/* 标签 */
|
|
.story-tags-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 48px;
|
|
}
|
|
.story-tag-item {
|
|
padding: 6px 16px;
|
|
border-radius: 100px;
|
|
background: var(--primary-weak);
|
|
color: var(--primary);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 分隔线 */
|
|
.story-divider {
|
|
width: 60px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--primary), #06b6d4);
|
|
border-radius: 2px;
|
|
margin: 0 auto 48px;
|
|
}
|
|
|
|
/* 相关故事 */
|
|
.related-stories h2 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.related-stories h2::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 24px;
|
|
background: linear-gradient(180deg, var(--primary) 0%, #06b6d4 100%);
|
|
border-radius: 2px;
|
|
}
|
|
.related-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.related-card {
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
transition: all 0.3s;
|
|
}
|
|
.related-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.related-card-image {
|
|
height: 160px;
|
|
overflow: hidden;
|
|
}
|
|
.related-card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
.related-card:hover .related-card-image img {
|
|
transform: scale(1.08);
|
|
}
|
|
.related-card-content { padding: 20px; }
|
|
.related-card-content h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
transition: color 0.2s;
|
|
}
|
|
.related-card:hover .related-card-content h3 { color: var(--primary); }
|
|
.related-card-content p {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 404 */
|
|
.not-found {
|
|
text-align: center;
|
|
padding: 120px 24px;
|
|
}
|
|
.not-found h1 { font-size: 48px; margin-bottom: 16px; }
|
|
.not-found p { color: var(--muted); margin-bottom: 24px; }
|
|
.not-found a {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* 页脚 */
|
|
.footer {
|
|
background: #0f172a;
|
|
color: #94a3b8;
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
}
|
|
.footer-text { font-size: 13px; }
|
|
|
|
/* 动画 */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.story-hero { animation: fadeInUp 0.6s ease; }
|
|
.story-body { animation: fadeInUp 0.6s ease 0.15s both; }
|
|
.related-stories { animation: fadeInUp 0.6s ease 0.3s both; }
|
|
/* 购物弹窗样式 */
|
|
.contact-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.contact-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.contact-modal {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border-radius: 24px;
|
|
padding: 40px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
transform: scale(0.9) translateY(20px);
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
.contact-modal-overlay.active .contact-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
.contact-modal-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.contact-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: #1f2937;
|
|
}
|
|
.contact-modal-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 16px;
|
|
background: linear-gradient(135deg, #2f6bff 0%, #06b6d4 100%);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
.contact-modal-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.contact-modal h3 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin: 0 0 8px;
|
|
}
|
|
.contact-modal p {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0 0 24px;
|
|
}
|
|
.contact-qr-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.contact-qr-box {
|
|
width: 160px;
|
|
height: 160px;
|
|
background: #f3f4f6;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.contact-qr-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.contact-qr-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: #f3f4f6;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: #4b5563;
|
|
}
|
|
.contact-qr-label svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar" style="opacity:0">
|
|
<div class="navbar-inner">
|
|
<a href="../index.html" class="navbar-logo">
|
|
<img src="../images/白字logo.png" alt="Chookoo" />
|
|
</a>
|
|
<div class="navbar-menu">
|
|
<a href="../index.html" class="navbar-link"><span data-i18n="nav_home">首页</span></a>
|
|
<a href="products.html" class="navbar-link"><span data-i18n="nav_products">产品</span></a>
|
|
<a href="stories.html" class="navbar-link 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">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
|
|
</a>
|
|
<button class="navbar-btn" id="shopBtn" aria-label="Cart">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
|
</button>
|
|
<select id="langSelect" aria-label="Language" class="lang-select-hero">
|
|
<option value="zh">中文</option>
|
|
<option value="en">EN</option>
|
|
</select>
|
|
<a href="../index.html#contact" class="navbar-cta"><span data-i18n="nav_contact">联系我们</span></a>
|
|
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
// 同步缩放导航栏，防止闪烁（script 是渲染阻塞的，浏览器不会画出未缩放的 nav）
|
|
(function(){var n=document.querySelector('.navbar');var vw=window.innerWidth;var s=vw<1280?vw/1280:vw>2560?vw/2560:vw/1920;n.style.transform='scale('+s+')';n.style.transformOrigin='top left';n.style.width='1920px';n.style.opacity='1';})();
|
|
</script>
|
|
|
|
<div id="pageContent" style="opacity:0">
|
|
<!-- 主内容 -->
|
|
<main class="main-content" id="mainContent">
|
|
<!-- 由 JavaScript 动态渲染 -->
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<p class="footer-text">© 2025 Chookoo 宠小科智能科技（苏州）有限公司 保留所有权利</p>
|
|
</footer>
|
|
|
|
</div><!-- /pageContent -->
|
|
|
|
<script>
|
|
// 视口缩放 - 基于1920px设计稿
|
|
(() => {
|
|
const designWidth = 1920, minWidth = 1280, maxWidth = 2560;
|
|
const content = document.getElementById('pageContent');
|
|
const navbar = document.querySelector('.navbar');
|
|
|
|
function scale() {
|
|
const vw = window.innerWidth;
|
|
let s = vw < minWidth ? vw / minWidth : vw > maxWidth ? vw / maxWidth : vw / designWidth;
|
|
|
|
// 内容区缩放
|
|
content.style.transform = 'scale(' + s + ')';
|
|
content.style.transformOrigin = 'top left';
|
|
content.style.width = designWidth + 'px';
|
|
|
|
// 修复底部空白
|
|
const layoutH = content.scrollHeight;
|
|
const visualH = layoutH * s;
|
|
content.style.marginBottom = '-' + Math.ceil(layoutH - visualH) + 'px';
|
|
|
|
// 内容区显示
|
|
content.style.opacity = '1';
|
|
|
|
// navbar 单独缩放（fixed 不受 content transform 影响）
|
|
if (navbar) {
|
|
navbar.style.transform = 'scale(' + s + ')';
|
|
navbar.style.transformOrigin = 'top left';
|
|
navbar.style.width = designWidth + 'px';
|
|
navbar.style.opacity = '1';
|
|
}
|
|
}
|
|
|
|
function fixLayout() {
|
|
const rect = content.getBoundingClientRect();
|
|
const s = rect.width / content.scrollWidth;
|
|
const layoutH = content.scrollHeight;
|
|
const visualH = layoutH * s;
|
|
content.style.marginBottom = '-' + Math.ceil(layoutH - visualH) + 'px';
|
|
}
|
|
|
|
scale();
|
|
window.addEventListener('resize', scale);
|
|
window.addEventListener('load', fixLayout);
|
|
setTimeout(fixLayout, 2000);
|
|
new MutationObserver(() => requestAnimationFrame(fixLayout)).observe(content, { childList: true, subtree: true, attributes: true });
|
|
document.querySelectorAll('img').forEach(img => { if (!img.complete) img.addEventListener('load', fixLayout); });
|
|
})();
|
|
|
|
// 故事数据库
|
|
const stories = {
|
|
'story-1': {
|
|
id: 'story-1',
|
|
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: '五只小奶猫的温暖新家',
|
|
excerpt: '第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康...',
|
|
paragraphs: [
|
|
'我家小橘今年三岁，是一只活泼好动的橘猫。去年冬天开始，我发现它如厕的频率明显增加了，有时候一天要去好几次猫砂盆。一开始我以为只是正常的饮食变化，并没有太在意。',
|
|
'直到有一天，我在清理猫砂盆的时候发现了一些异常的痕迹。我立刻带小橘去了宠物医院，医生检查后告诉我，小橘可能存在泌尿系统的隐患，需要长期观察和定期检测。这让我非常担心。',
|
|
'后来在朋友的推荐下，我入手了Chookoo的智能猫厕所Pro。一开始我只是抱着试试看的心态，没想到它给了我一个巨大的惊喜。设备内置的毫米波雷达可以监测小橘的心率和呼吸，红外测温功能还能实时检测体温。',
|
|
'更让我安心的是，每次小橘如厕后，APP都会自动生成健康数据报告，包括如厕时长、频率、体重变化等关键指标。通过这些数据，我可以清楚地看到小橘的健康趋势，再也不用担心错过任何异常信号。',
|
|
'经过三个月的持续监测和医生的配合治疗，小橘的各项指标都恢复了正常。现在它每天都活力满满，我也终于可以放心地工作了。感谢Chookoo，让我成为了一个更负责任的猫家长。'
|
|
],
|
|
highlights: [
|
|
'通过智能猫厕所的持续监测，及时发现猫咪健康异常',
|
|
'APP数据报告让宠物主人随时掌握健康趋势',
|
|
'配合兽医治疗，帮助小橘恢复健康'
|
|
]
|
|
},
|
|
'story-2': {
|
|
id: 'story-2',
|
|
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: '灰灰的科学喂养之路',
|
|
excerpt: '旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯...',
|
|
paragraphs: [
|
|
'旺财是一只两岁的金毛犬，活泼好动是它的天性。但它有一个让我头疼的问题——挑食。有时候一天不吃东西，有时候又暴饮暴食，体重一直不太稳定。',
|
|
'最严重的时候，旺财的体重飙升到了38公斤，医生警告我必须控制它的饮食，否则会对关节和心脏造成很大的负担。我尝试过手动控制食量，但因为工作忙碌，经常忘记按时喂食。',
|
|
'后来我购买了Chookoo的智能喂食器，这彻底改变了我们家的喂养方式。我可以在APP上设置每天固定的喂食时间和食量，喂食器会精准地投喂每一餐。旺财很快就养成了定时吃饭的好习惯。',
|
|
'最让我惊喜的是，喂食器还会记录每次的进食量和时间，生成进食报告。通过三个月的数据追踪，配合适量的运动，旺财的体重已经稳定在了32公斤的理想范围。',
|
|
'现在的旺财每天准时在喂食器前等候，吃完饭后还会开心地摇尾巴。科学喂养真的不是一句空话，感谢Chookoo让我们的养宠生活变得更轻松。'
|
|
],
|
|
highlights: [
|
|
'智能喂食器帮助旺财养成定时定量进食的好习惯',
|
|
'APP进食数据追踪让体重管理更有科学依据',
|
|
'三个月减重6公斤，恢复健康体型'
|
|
]
|
|
},
|
|
'story-3': {
|
|
id: 'story-3',
|
|
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: '布丁的优雅日常',
|
|
excerpt: '自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分...',
|
|
paragraphs: [
|
|
'布丁是一只一岁的英国短毛猫，因为工作原因我白天经常不在家。每次出门的时候，我都会担心它是不是安全，有没有好好吃饭，是不是又在偷偷啃我的拖鞋。',
|
|
'朋友给我推荐了Chookoo的AI宠物摄像头，说它可以自动识别宠物的行为。我抱着试一试的心态入手了一台，没想到从此打开了新世界的大门。',
|
|
'摄像头的1080P高清画质非常清晰，即使在夜晚，红外夜视功能也能清楚地看到布丁的一举一动。最让我惊喜的是它的AI行为识别功能，能自动判断布丁是在睡觉、玩耍、进食还是异常行为。',
|
|
'有一天上班的时候，手机突然收到一条AI提醒：「检测到您的宠物出现频繁抓挠行为」。我赶紧打开APP查看回放，发现布丁一直在挠耳朵。下班后立刻带它去了医院，结果检查出耳螨，幸亏发现得早。',
|
|
'从那以后，我更加信赖这个AI摄像头了。它不仅仅是一个监控设备，更像是一个24小时守护布丁的智能管家。感谢Chookoo让我可以安心工作，也能时刻关注布丁的状态。'
|
|
],
|
|
highlights: [
|
|
'AI行为识别及时发现猫咪频繁抓挠的异常行为',
|
|
'高清夜视功能让夜间监控同样清晰',
|
|
'远程双向语音可以随时安抚宠物情绪'
|
|
]
|
|
},
|
|
'story-4': {
|
|
id: 'story-4',
|
|
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: '小柴的回家之路',
|
|
excerpt: '豆豆以前不爱喝水，用了智能饮水机后，循环净化的水让它爱喝了...',
|
|
paragraphs: [
|
|
'豆豆是一只三岁的柯基犬，活泼可爱，但有一个让我非常头疼的问题——不爱喝水。每次给它倒的水，放一整天都不见少。医生说长期饮水不足会导致泌尿系统和肾脏问题，这让我非常焦虑。',
|
|
'我试过各种方法：在水中加入鸡胸肉汤、更换不同材质的水碗、在多个位置放水碗……效果都不理想。直到我发现了Chookoo的智能饮水机。',
|
|
'这款饮水机采用循环活水设计，模拟自然流动的泉水，这对狗狗来说比静止的水更有吸引力。四重过滤系统——活性炭、离子树脂、超滤膜和高密度棉——确保水质始终干净新鲜。',
|
|
'豆豆第一次看到流动的水就好奇地凑过去闻了闻，然后开始舔着喝。从那以后，它喝水的频率明显增加了。APP上的饮水数据也证实了这一点，从每天不到200ml增加到了500ml以上。',
|
|
'最让我安心的是，当水位过低或滤芯需要更换时，APP会自动推送提醒，再也不用担心忘记维护了。豆豆现在每天都精神满满，皮毛也更加光亮了。'
|
|
],
|
|
highlights: [
|
|
'循环活水设计激发狗狗饮水兴趣',
|
|
'四重过滤系统确保水质安全',
|
|
'APP智能提醒帮助维护设备'
|
|
]
|
|
},
|
|
'story-5': {
|
|
id: 'story-5',
|
|
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: '团子的第一天回家',
|
|
excerpt: 'Chookoo的智能设备帮我实时监测咪咪的健康状况，每次数据报告都让我很安心...',
|
|
paragraphs: [
|
|
'咪咪是一只四岁的美国短毛猫，是我从小养到大的宝贝。随着年龄的增长，我越来越关注它的健康状况。去年体检的时候，医生说咪咪的各项指标都还不错，但建议我多关注它的日常健康数据。',
|
|
'抱着试试看的心态，我入手了Chookoo的智能猫厕所和健康追踪器。这两个设备的组合使用，让我对咪咪的健康状况有了前所未有的了解。',
|
|
'智能猫厕所每次都会记录咪咪的如厕时间、频率和体重变化。有一次，APP的数据分析提示咪咪的如厕频率出现异常上升趋势。虽然变化很轻微，但我还是决定带它去医院检查。',
|
|
'结果发现咪咪有轻微的膀胱炎症，因为发现得早，只用了两周的药就完全康复了。如果等到症状明显再去，可能就需要更长的治疗周期。这让我深刻体会到了「预防胜于治疗」的含义。',
|
|
'现在我已经养成了每天查看咪咪健康报告的习惯。Chookoo不仅给了我数据，更给了我安心。真正的健康管理，就是在日常中持续关注，把风险扼杀在摇篮里。'
|
|
],
|
|
highlights: [
|
|
'智能设备帮助早期发现猫咪膀胱炎症',
|
|
'日常健康数据持续追踪让预防成为可能',
|
|
'APP健康报告让宠物主人更安心'
|
|
]
|
|
},
|
|
'story-6': {
|
|
id: 'story-6',
|
|
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: '小棕的第一间小窝',
|
|
excerpt: '大黄以前随地大小便，用了Chookoo的智能狗厕所，科学训练让它很快养成了好习惯...',
|
|
paragraphs: [
|
|
'大黄是我从救助站领养的一只中华田园犬，刚来的时候已经一岁多了。因为之前在外面流浪过，大黄完全没有室内如厕的概念，经常在家里随地大小便，让我非常苦恼。',
|
|
'我尝试过传统的如厕训练方法——铺报纸、喷诱导剂、发现它要上厕所就赶紧抱到指定位置。但因为工作忙，不可能24小时盯着它，效果一直不理想。',
|
|
'后来在网上看到了Chookoo的智能狗厕所，介绍说有科学诱导训练功能，我决定试一试。设备通过特殊的诱导气味和声音提示，引导大黄到指定位置如厕。',
|
|
'让我没想到的是，仅仅用了两周时间，大黄就学会了在狗厕所上如厕。APP还会记录它每次成功如厕的次数，生成训练报告。看到进度一天天提升，我真的很有成就感。',
|
|
'现在大黄已经完全适应了在智能狗厕所上如厕，自动冲水清洁功能也让我省心了不少。从一只随地大小便的流浪狗到如今的乖巧毛孩子，大黄的进步让我非常欣慰。'
|
|
],
|
|
highlights: [
|
|
'科学诱导训练帮助领养犬快速学会定点如厕',
|
|
'APP训练报告追踪进度，增强训练信心',
|
|
'自动清洁功能减轻主人维护负担'
|
|
]
|
|
}
|
|
};
|
|
|
|
// 渲染故事详情
|
|
function renderStory(storyId) {
|
|
var story = stories[storyId];
|
|
var main = document.getElementById('mainContent');
|
|
|
|
if (!story) {
|
|
main.innerHTML = '<div class="not-found"><h1>故事未找到</h1><p>抱歉，您访问的故事不存在</p><a href="stories.html">返回故事列表</a></div>';
|
|
document.title = '故事未找到 - Chookoo';
|
|
return;
|
|
}
|
|
|
|
document.title = story.title + ' - Chookoo';
|
|
|
|
// 获取相关故事（同类型或其他）
|
|
var relatedIds = Object.keys(stories).filter(function(id) { return id !== storyId; });
|
|
relatedIds.sort(function() { return Math.random() - 0.5; });
|
|
var related = relatedIds.slice(0, 3);
|
|
|
|
// 构建正文HTML
|
|
var bodyHTML = '';
|
|
story.paragraphs.forEach(function(p) {
|
|
bodyHTML += '<p>' + p + '</p>';
|
|
});
|
|
|
|
// 高亮块
|
|
var highlightHTML = '';
|
|
if (story.highlights && story.highlights.length > 0) {
|
|
highlightHTML = '<blockquote>';
|
|
story.highlights.forEach(function(h) {
|
|
highlightHTML += h + '<br/>';
|
|
});
|
|
highlightHTML += '</blockquote>';
|
|
}
|
|
|
|
// 相关故事
|
|
var relatedHTML = '';
|
|
related.forEach(function(rid) {
|
|
var rs = stories[rid];
|
|
relatedHTML += '<a href="story-detail.html?id=' + rs.id + '" class="related-card">' +
|
|
'<div class="related-card-image"><img src="' + rs.image + '" alt="' + rs.title + '" onerror="this.src=\'' + rs.fallback + '\'" /></div>' +
|
|
'<div class="related-card-content"><h3>' + rs.title + '</h3><p>' + rs.excerpt + '</p></div>' +
|
|
'</a>';
|
|
});
|
|
|
|
main.innerHTML =
|
|
'<div class="breadcrumb">' +
|
|
'<a href="../index.html">首页</a><span>/</span>' +
|
|
'<a href="stories.html">故事</a><span>/</span>' +
|
|
'<span>' + story.title + '</span>' +
|
|
'</div>' +
|
|
|
|
'<div class="story-hero">' +
|
|
'<div class="story-hero-image"><img src="' + story.image + '" alt="' + story.title + '" onerror="this.src=\'' + story.fallback + '\'" /></div>' +
|
|
'<span class="story-category-badge">' + story.category + '</span>' +
|
|
'<h1>' + story.title + '</h1>' +
|
|
'<div class="story-author-bar">' +
|
|
'<img class="story-author-avatar" src="' + story.avatar + '" alt="' + story.pet + '" onerror="this.src=\'' + story.fallback + '\'" />' +
|
|
'<div class="story-author-info">' +
|
|
'<p class="story-author-name">' + story.pet + '家长</p>' +
|
|
'<p class="story-author-meta">' + story.pet + ' · ' + story.location + '</p>' +
|
|
'</div>' +
|
|
'<div class="story-date-badge">' +
|
|
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>' +
|
|
'<span>' + story.date + '</span>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
|
|
'<div class="story-body">' +
|
|
bodyHTML +
|
|
highlightHTML +
|
|
'</div>' +
|
|
|
|
'<div class="story-tags-bar">' +
|
|
story.tags.map(function(t) { return '<span class="story-tag-item">' + t + '</span>'; }).join('') +
|
|
'</div>' +
|
|
|
|
'<div class="story-divider"></div>' +
|
|
|
|
'<div class="related-stories">' +
|
|
'<h2>更多故事</h2>' +
|
|
'<div class="related-grid">' + relatedHTML + '</div>' +
|
|
'</div>';
|
|
}
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var params = new URLSearchParams(window.location.search);
|
|
var storyId = params.get('id') || 'story-1';
|
|
renderStory(storyId);
|
|
});
|
|
</script>
|
|
|
|
<!-- 购物弹窗 -->
|
|
<div class="contact-modal-overlay" id="shopModal">
|
|
<div class="contact-modal">
|
|
<button class="contact-modal-close" id="shopModalClose">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<div class="contact-modal-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
</svg>
|
|
</div>
|
|
<h3>官方旗舰店</h3>
|
|
<p>扫描二维码，进入官方店铺选购</p>
|
|
<div class="contact-qr-wrapper">
|
|
<div class="contact-qr-box"><img src="../images/qr-shop.png" alt="旗舰店二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换店铺二维码<br>qr-shop.png</span>'" /></div>
|
|
<div class="contact-qr-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="7" y1="7" x2="7" y2="7"></line>
|
|
<line x1="17" y1="7" x2="17" y2="7"></line>
|
|
<line x1="7" y1="12" x2="7" y2="12"></line>
|
|
<line x1="17" y1="12" x2="17" y2="12"></line>
|
|
<line x1="7" y1="17" x2="7" y2="17"></line>
|
|
<line x1="17" y1="17" x2="17" y2="17"></line>
|
|
</svg>
|
|
<span>扫码进店</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 购物弹窗控制
|
|
var shopModal = document.getElementById('shopModal');
|
|
var shopBtn = document.getElementById('shopBtn');
|
|
var shopModalClose = document.getElementById('shopModalClose');
|
|
|
|
if (shopBtn) {
|
|
shopBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
shopModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
}
|
|
|
|
if (shopModalClose) {
|
|
shopModalClose.addEventListener('click', function() {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
}
|
|
|
|
if (shopModal) {
|
|
shopModal.addEventListener('click', function(e) {
|
|
if (e.target === shopModal) {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && shopModal && shopModal.classList.contains('active')) {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
(() => {
|
|
const t = {
|
|
zh: {
|
|
nav_home: "棣栭〉", nav_products: "浜у搧", nav_stories: "鏁呬簨",
|
|
nav_app: "App", nav_about: "鍏充簬鎴戜滑", nav_contact: "鑱旂郴鎴戜滑",
|
|
footer_desc: "AIoT 涓诲姩寮忓疇鐗╁仴搴风鐞嗗紑鍒涜€咃紝璁╁仴搴峰彲瑙併€侀渶姹傚彲瑙ｃ€佸疇鐖辨棤闂淬€?,
|
|
footer_products: "浜у搧", footer_support: "鏀寔", footer_contact: "鑱旂郴鎴戜滑",
|
|
footer_cat: "鏅鸿兘鐚帟鎵€", footer_feeder: "鏅鸿兘鍠傞鍣?,
|
|
footer_fountain: "鏅鸿兘楗按鏈?, footer_camera: "AI 鎽勫儚澶?,
|
|
footer_help: "甯姪涓績", footer_faq: "甯歌闂",
|
|
footer_warranty: "淇濅慨鏀跨瓥", footer_returns: "閫€鎹㈣揣",
|
|
footer_privacy: "闅愮鏀跨瓥", footer_terms: "鏈嶅姟鏉℃",
|
|
footer_copyright: "漏 2025 Chookoo. All rights reserved."
|
|
},
|
|
en: {
|
|
nav_home: "Home", nav_products: "Products", nav_stories: "Stories",
|
|
nav_app: "App", nav_about: "About Us", nav_contact: "Contact Us",
|
|
footer_desc: "AIoT Pioneer in Proactive Pet Health Management 鈥?making health visible, needs understood, and care seamless.",
|
|
footer_products: "Products", footer_support: "Support", footer_contact: "Contact Us",
|
|
footer_cat: "Smart Cat Litter", footer_feeder: "Smart Feeder",
|
|
footer_fountain: "Smart Fountain", footer_camera: "AI Camera",
|
|
footer_help: "Help Center", footer_faq: "FAQ",
|
|
footer_warranty: "Warranty", footer_returns: "Returns",
|
|
footer_privacy: "Privacy Policy", footer_terms: "Terms of Service",
|
|
footer_copyright: "漏 2025 Chookoo. All rights reserved."
|
|
}
|
|
};
|
|
const els = document.querySelectorAll("[data-i18n]");
|
|
const s = document.getElementById("langSelect");
|
|
const apply = (l) => {
|
|
const d = t[l] || t.zh;
|
|
els.forEach(el => { const k = el.dataset.i18n; if (d[k]) el.textContent = d[k]; });
|
|
if (s) s.value = l;
|
|
};
|
|
const lang = (navigator.language||"").toLowerCase().startsWith("zh") ? "zh" : "en";
|
|
apply(lang);
|
|
if (s) s.addEventListener("change", e => apply(e.target.value));
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|