958 lines
38 KiB
HTML
958 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 { overflow-y: scroll; overflow-x: hidden; }
|
|
body {
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
a { color: inherit; text-decoration: none; }
|
|
#pageContent {
|
|
min-width: 1280px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
.navbar-inner {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 32px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
.navbar-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.navbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-logo img {
|
|
height: 40px;
|
|
width: auto;
|
|
}
|
|
.navbar-link {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-link:hover {
|
|
color: var(--text);
|
|
background: rgba(0, 0, 0, 0.04);
|
|
text-decoration: none;
|
|
}
|
|
.navbar-link.active {
|
|
color: var(--primary);
|
|
background: var(--primary-weak);
|
|
}
|
|
.navbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.navbar-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-btn:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
color: var(--text);
|
|
}
|
|
.navbar-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.navbar-cta {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
border: none;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-cta:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
|
|
}
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
}
|
|
.lang-select-hero {
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main-content {
|
|
padding-top: 100px;
|
|
padding-bottom: 80px;
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
width: 1000px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
/* 搜索区域 */
|
|
.search-section {
|
|
text-align: center;
|
|
margin-bottom: 48px;
|
|
}
|
|
.search-title {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: var(--text);
|
|
}
|
|
.search-subtitle {
|
|
font-size: 16px;
|
|
color: var(--muted);
|
|
margin-bottom: 32px;
|
|
}
|
|
.search-box {
|
|
position: relative;
|
|
max-width: 560px;
|
|
margin: 0 auto;
|
|
}
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 16px 24px 16px 52px;
|
|
font-size: 16px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 16px;
|
|
background: var(--card);
|
|
outline: none;
|
|
transition: all 0.3s;
|
|
}
|
|
.search-input:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.1);
|
|
}
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--muted);
|
|
}
|
|
.search-results {
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--card);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
display: none;
|
|
z-index: 100;
|
|
}
|
|
.search-results.active { display: block; }
|
|
.search-result-item {
|
|
padding: 14px 20px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--line);
|
|
transition: background 0.2s;
|
|
}
|
|
.search-result-item:last-child { border-bottom: none; }
|
|
.search-result-item:hover { background: var(--primary-weak); }
|
|
.search-result-title {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
.search-result-category {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.search-no-result {
|
|
padding: 24px;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* 分类标签 */
|
|
.category-tabs {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40px;
|
|
}
|
|
.category-tab {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border-radius: 999px;
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.category-tab:hover {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
.category-tab.active {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #fff;
|
|
}
|
|
|
|
/* 文章分类区块 */
|
|
.articles-section {
|
|
margin-bottom: 48px;
|
|
}
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.section-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
font-size: 20px;
|
|
}
|
|
.section-icon.about { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
|
.section-icon.careers { background: linear-gradient(135deg, #fef3c7, #fde68a); }
|
|
.section-icon.news { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
|
|
.section-icon.brand { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
|
|
.section-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
}
|
|
.section-count {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
background: var(--bg);
|
|
padding: 4px 12px;
|
|
border-radius: 999px;
|
|
}
|
|
.section-toggle {
|
|
color: var(--muted);
|
|
transition: transform 0.3s;
|
|
}
|
|
.section-header.collapsed .section-toggle {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/* 文章列表 */
|
|
.article-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding-left: 56px;
|
|
}
|
|
.article-list.hidden { display: none; }
|
|
.article-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
background: var(--card);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--line);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.article-item:hover {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.1);
|
|
transform: translateX(4px);
|
|
}
|
|
.article-item svg {
|
|
color: var(--primary);
|
|
flex-shrink: 0;
|
|
}
|
|
.article-title {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
flex: 1;
|
|
}
|
|
.article-arrow {
|
|
color: var(--muted);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.article-item:hover .article-arrow {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 文章详情页 */
|
|
.article-detail {
|
|
display: none;
|
|
}
|
|
.article-detail.active {
|
|
display: block;
|
|
}
|
|
.article-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
margin-bottom: 24px;
|
|
}
|
|
.article-breadcrumb a:hover { color: var(--primary); }
|
|
.article-detail-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
line-height: 1.4;
|
|
}
|
|
.article-meta {
|
|
display: flex;
|
|
gap: 16px;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin-bottom: 32px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.article-content {
|
|
font-size: 16px;
|
|
line-height: 1.8;
|
|
color: #374151;
|
|
}
|
|
.article-content h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 32px 0 16px;
|
|
color: var(--text);
|
|
}
|
|
.article-content p {
|
|
margin-bottom: 16px;
|
|
}
|
|
.article-content ul, .article-content ol {
|
|
margin-bottom: 16px;
|
|
padding-left: 24px;
|
|
}
|
|
.article-content li {
|
|
margin-bottom: 8px;
|
|
}
|
|
.article-content img {
|
|
max-width: 100%;
|
|
border-radius: 12px;
|
|
margin: 20px 0;
|
|
}
|
|
.article-tip {
|
|
background: var(--primary-weak);
|
|
border-left: 4px solid var(--primary);
|
|
padding: 16px 20px;
|
|
border-radius: 0 12px 12px 0;
|
|
margin: 24px 0;
|
|
}
|
|
.article-tip-title {
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* 返回按钮 */
|
|
.back-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
margin-bottom: 24px;
|
|
}
|
|
.back-btn:hover {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* 相关文章 */
|
|
.related-articles {
|
|
margin-top: 48px;
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.related-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
.related-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.related-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: var(--card);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.related-item:hover {
|
|
background: var(--primary-weak);
|
|
}
|
|
.related-item svg {
|
|
color: var(--primary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 页脚 */
|
|
.footer {
|
|
background: #1a1f2e;
|
|
color: #9ca3af;
|
|
padding: 40px 24px;
|
|
text-align: center;
|
|
}
|
|
.footer-logo {
|
|
height: 32px;
|
|
margin-bottom: 16px;
|
|
filter: brightness(0) invert(1);
|
|
opacity: 0.8;
|
|
}
|
|
.footer-text {
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.search-title { font-size: 24px; }
|
|
.search-input { padding: 14px 20px 14px 48px; font-size: 15px; }
|
|
.article-list { padding-left: 0; margin-top: 16px; }
|
|
.section-header { padding: 12px 16px; background: var(--card); border-radius: 12px; }
|
|
.article-detail-title { font-size: 22px; }
|
|
}
|
|
|
|
/* 列表页隐藏/显示 */
|
|
.articles-list-view { display: block; }
|
|
.articles-list-view.hidden { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar" style="opacity:0">
|
|
<div class="navbar-inner">
|
|
<a href="../index.html" class="navbar-logo">
|
|
<img src="../images/白字logo.png" alt="Chookoo" />
|
|
</a>
|
|
<div class="navbar-menu">
|
|
<a href="../index.html" class="navbar-link"><span data-i18n="nav_home">首页</span></a>
|
|
<a href="products.html" class="navbar-link"><span data-i18n="nav_products">产品</span></a>
|
|
<a href="stories.html" class="navbar-link"><span data-i18n="nav_stories">故事</span></a>
|
|
<a href="app.html" class="navbar-link"><span data-i18n="nav_app">App</span></a>
|
|
<a href="company.html?article=201" class="navbar-link active"><span data-i18n="nav_about">关于我们</span></a>
|
|
</div>
|
|
<div class="navbar-actions">
|
|
<a href="help.html" class="navbar-btn" aria-label="Search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
|
|
</a>
|
|
<button class="navbar-btn" id="shopBtn" aria-label="Cart">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
|
</button>
|
|
<select id="langSelect" aria-label="Language" class="lang-select-hero">
|
|
<option value="zh">中文</option>
|
|
<option value="en">EN</option>
|
|
</select>
|
|
<a href="../index.html#contact" class="navbar-cta"><span data-i18n="nav_contact">联系我们</span></a>
|
|
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
// 同步缩放导航栏，防止闪烁（script 是渲染阻塞的，浏览器不会画出未缩放的 nav）
|
|
(function(){var n=document.querySelector('.navbar');var vw=window.innerWidth;var s=vw<1280?vw/1280:vw>2560?vw/2560:vw/1920;n.style.transform='scale('+s+')';n.style.transformOrigin='top left';n.style.width='1920px';n.style.opacity='1';})();
|
|
</script>
|
|
|
|
<div id="pageContent" style="opacity:0">
|
|
<!-- 主内容 -->
|
|
<main class="main-content">
|
|
<div class="container">
|
|
<!-- 文章列表视图 -->
|
|
<div class="articles-list-view" id="articlesListView">
|
|
<!-- 搜索区域 -->
|
|
<section class="search-section">
|
|
<h1 class="search-title" 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="搜索问题..." 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"><span data-i18n="cat_all">全部</span></div>
|
|
<div class="category-tab" data-category="about"><span data-i18n="cat_about">关于我们</span></div>
|
|
</div>
|
|
|
|
<!-- 文章分类列表 -->
|
|
<div id="articlesContainer"></div>
|
|
</div>
|
|
|
|
<!-- 文章详情视图 -->
|
|
<div class="article-detail" id="articleDetail">
|
|
<button class="back-btn" id="backToList">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
|
<span data-i18n="back_to_list">返回列表</span>
|
|
</button>
|
|
<div id="articleContent"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<img src="../images/白字logo.png" alt="Chookoo" class="footer-logo" />
|
|
<p class="footer-text">© 2025 宠小科智能科技（苏州）有限公司 保留所有权利</p>
|
|
</footer>
|
|
|
|
<script>
|
|
// 视口缩放 - 基于1920px设计稿
|
|
(() => {
|
|
const designWidth = 1920;
|
|
const minWidth = 1280;
|
|
const maxWidth = 2560;
|
|
const content = document.getElementById('pageContent');
|
|
const navbar = document.querySelector('.navbar');
|
|
|
|
function scale() {
|
|
const vw = window.innerWidth;
|
|
let s = 1;
|
|
|
|
if (vw < minWidth) {
|
|
s = vw / minWidth;
|
|
} else if (vw > maxWidth) {
|
|
s = vw / maxWidth;
|
|
} else {
|
|
s = vw / designWidth;
|
|
}
|
|
|
|
// 内容区缩放
|
|
content.style.transform = `scale(${s})`;
|
|
content.style.transformOrigin = 'top left';
|
|
content.style.width = `${designWidth}px`;
|
|
|
|
// 修复底部空白
|
|
const layoutH = content.scrollHeight;
|
|
const visualH = layoutH * s;
|
|
content.style.marginBottom = `-${Math.ceil(layoutH - visualH)}px`;
|
|
|
|
// 内容区显示
|
|
content.style.opacity = '1';
|
|
|
|
// navbar 单独缩放（fixed 不受 content transform 影响）
|
|
if (navbar) {
|
|
navbar.style.transform = `scale(${s})`;
|
|
navbar.style.transformOrigin = 'top left';
|
|
navbar.style.width = `${designWidth}px`;
|
|
navbar.style.opacity = '1';
|
|
}
|
|
}
|
|
|
|
function fixLayout() {
|
|
const s = content.getBoundingClientRect().width / content.scrollWidth;
|
|
const layoutH = content.scrollHeight;
|
|
const visualH = layoutH * s;
|
|
content.style.marginBottom = `-${Math.ceil(layoutH - visualH)}px`;
|
|
}
|
|
|
|
scale();
|
|
window.addEventListener('resize', scale);
|
|
window.addEventListener('load', fixLayout);
|
|
setTimeout(fixLayout, 2000);
|
|
new MutationObserver(() => requestAnimationFrame(fixLayout)).observe(content, { childList: true, subtree: true, attributes: true });
|
|
document.querySelectorAll('img').forEach(img => { if (!img.complete) img.addEventListener('load', fixLayout); });
|
|
})();
|
|
</script>
|
|
<script>
|
|
// 页面类型
|
|
const PAGE_TYPE = 'company';
|
|
|
|
// 分类配置（加入我们、新闻动态、品牌故事待正式内容后恢复）
|
|
const categories = {
|
|
all: { name: '全部', nameEn: 'All', icon: '📋' },
|
|
about: { name: '关于我们', nameEn: 'About Us', icon: '🏠' }
|
|
};
|
|
|
|
// 默认文章数据（公司介绍）
|
|
const defaultArticles = [
|
|
{ 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' }
|
|
];
|
|
|
|
// 文章数据
|
|
let articles = [...defaultArticles];
|
|
|
|
// 当前状态
|
|
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() {
|
|
// 清除旧缓存，确保使用代码中的最新文章数据
|
|
localStorage.removeItem('chookoo_help_articles');
|
|
|
|
// 解析 URL 参数
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const category = urlParams.get('category');
|
|
const articleId = urlParams.get('article');
|
|
const searchQuery = urlParams.get('search');
|
|
|
|
// 处理 URL 参数
|
|
if (articleId) {
|
|
showArticle(parseInt(articleId));
|
|
} else if (category && categories[category]) {
|
|
currentCategory = category;
|
|
// 更新分类标签高亮
|
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
|
tab.classList.toggle('active', tab.dataset.category === category);
|
|
});
|
|
}
|
|
|
|
if (searchQuery) {
|
|
document.getElementById('searchInput').value = searchQuery;
|
|
document.getElementById('searchInput').dispatchEvent(new Event('input'));
|
|
}
|
|
|
|
renderArticles();
|
|
initSearch();
|
|
initCategoryTabs();
|
|
initBackButton();
|
|
});
|
|
|
|
// 渲染文章列表
|
|
function renderArticles() {
|
|
const lang = getLang();
|
|
const container = document.getElementById('articlesContainer');
|
|
let html = '';
|
|
|
|
const categoryOrder = ['about'];
|
|
|
|
categoryOrder.forEach(cat => {
|
|
if (currentCategory !== 'all' && currentCategory !== cat) return;
|
|
|
|
const catArticles = articles.filter(a => a.category === cat && (!a.pageType || a.pageType === PAGE_TYPE));
|
|
if (catArticles.length === 0) return;
|
|
|
|
const isCollapsed = collapsedSections[cat];
|
|
const catInfo = categories[cat];
|
|
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">${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 => {
|
|
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">${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('')}
|
|
</div>
|
|
</section>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
// 切换分类折叠
|
|
function toggleSection(cat) {
|
|
collapsedSections[cat] = !collapsedSections[cat];
|
|
renderArticles();
|
|
}
|
|
|
|
// 显示文章详情
|
|
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;">${pageTitle}</a>
|
|
<span>/</span>
|
|
<span>${aCatName}</span>
|
|
</div>
|
|
<div class="article-detail-inner">
|
|
<h1 class="article-title">${aTitle}</h1>
|
|
<div class="article-meta">
|
|
<span class="article-date">${article.date}</span>
|
|
<span class="article-views">${article.views}${viewsLabel}</span>
|
|
</div>
|
|
<div class="article-body">${aContent}</div>
|
|
${renderRelatedArticles(id, article.category)}
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('articlesContainer').style.display = 'none';
|
|
document.getElementById('articlesListView').style.display = 'none';
|
|
document.getElementById('articleDetail').style.display = 'block';
|
|
document.getElementById('articleDetail').classList.add('active');
|
|
|
|
// 更新URL
|
|
history.pushState({ articleId: id }, '', `?article=${id}`);
|
|
}
|
|
|
|
// 渲染相关文章
|
|
function renderRelatedArticles(currentId, currentCategory) {
|
|
const related = articles
|
|
.filter(a => a.category === currentCategory && a.id !== currentId)
|
|
.slice(0, 3);
|
|
|
|
if (related.length === 0) return '';
|
|
|
|
return `
|
|
<div class="related-articles">
|
|
<h3 class="related-title">相关文章</h3>
|
|
<div class="related-list">
|
|
${related.map(a => `
|
|
<div class="related-item" onclick="showArticle(${a.id})">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
|
<span>${a.title}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// 返回列表
|
|
function backToList() {
|
|
document.getElementById('articlesContainer').style.display = 'block';
|
|
document.getElementById('articlesListView').style.display = 'block';
|
|
document.getElementById('articleDetail').style.display = 'none';
|
|
document.getElementById('articleDetail').classList.remove('active');
|
|
history.pushState({}, '', window.location.pathname);
|
|
}
|
|
|
|
// 初始化返回按钮
|
|
function initBackButton() {
|
|
document.getElementById('backToList').addEventListener('click', backToList);
|
|
}
|
|
|
|
// 初始化分类标签
|
|
function initCategoryTabs() {
|
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
currentCategory = this.dataset.category;
|
|
renderArticles();
|
|
});
|
|
});
|
|
}
|
|
|
|
// 初始化搜索
|
|
function initSearch() {
|
|
const searchInput = document.getElementById('searchInput');
|
|
const results = document.getElementById('searchResults');
|
|
|
|
searchInput.addEventListener('input', function() {
|
|
const query = this.value.toLowerCase().trim();
|
|
|
|
if (query.length < 2) {
|
|
results.classList.remove('active');
|
|
return;
|
|
}
|
|
|
|
const matched = articles.filter(a =>
|
|
(!a.pageType || a.pageType === PAGE_TYPE) &&
|
|
(a.title.toLowerCase().includes(query) ||
|
|
a.content.toLowerCase().includes(query))
|
|
);
|
|
|
|
if (matched.length === 0) {
|
|
results.innerHTML = '<div class="search-no-result">未找到相关文章</div>';
|
|
} else {
|
|
results.innerHTML = matched.slice(0, 8).map(a => `
|
|
<div class="search-result-item" onclick="showArticle(${a.id})">
|
|
<div class="search-result-title">${a.title}</div>
|
|
<div class="search-result-category">${a.categoryName}</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
results.classList.add('active');
|
|
});
|
|
|
|
// 点击外部关闭搜索结果
|
|
document.addEventListener('click', function(e) {
|
|
if (!searchInput.contains(e.target) && !results.contains(e.target)) {
|
|
results.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</div><!-- /pageContent -->
|
|
<!-- 购物弹窗 -->
|
|
<div class="contact-modal-overlay" id="shopModal" style="position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s ease;">
|
|
<div style="background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border-radius:24px;padding:40px;max-width:400px;width:90%;transform:scale(0.9) translateY(20px);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 25px 80px rgba(0,0,0,0.25);position:relative;text-align:center;">
|
|
<button id="shopModalClose" style="position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.05);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
<div style="width:64px;height:64px;margin:0 auto 16px;background:linear-gradient(135deg,#2f6bff 0%,#06b6d4 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:32px;height:32px;"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
|
</div>
|
|
<h3 style="font-size:22px;font-weight:700;color:#1f2937;margin:0 0 8px;">官方旗舰店</h3>
|
|
<p style="font-size:14px;color:#6b7280;margin:0 0 24px;">扫描二维码，进入官方店铺选购</p>
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;">
|
|
<div style="width:160px;height:160px;background:#f3f4f6;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;">
|
|
<img src="../images/qr-shop.png" alt="旗舰店二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换店铺二维码<br>qr-shop.png</span>'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var shopModal = document.getElementById('shopModal');
|
|
var shopBtn = document.getElementById('shopBtn');
|
|
var shopModalClose = document.getElementById('shopModalClose');
|
|
if(shopBtn){shopBtn.addEventListener('click',function(e){e.preventDefault();shopModal.style.opacity='1';shopModal.style.visibility='visible';shopModal.querySelector('div').style.transform='scale(1) translateY(0)';document.body.style.overflow='hidden';});}
|
|
if(shopModalClose){shopModalClose.addEventListener('click',function(){shopModal.style.opacity='0';shopModal.style.visibility='hidden';shopModal.querySelector('div').style.transform='scale(0.9) translateY(20px)';document.body.style.overflow='';});}
|
|
if(shopModal){shopModal.addEventListener('click',function(e){if(e.target===shopModal){shopModal.style.opacity='0';shopModal.style.visibility='hidden';shopModal.querySelector('div').style.transform='scale(0.9) translateY(20px)';document.body.style.overflow='';}});}
|
|
document.addEventListener('keydown',function(e){if(e.key==='Escape'&&shopModal&&shopModal.style.visibility==='visible'){shopModal.style.opacity='0';shopModal.style.visibility='hidden';shopModal.querySelector('div').style.transform='scale(0.9) translateY(20px)';document.body.style.overflow='';}});
|
|
})();
|
|
</script>
|
|
<script>
|
|
(() => {
|
|
const t = {
|
|
zh: {
|
|
nav_home: "棣栭〉", nav_products: "浜у搧", nav_stories: "鏁呬簨",
|
|
nav_app: "App", nav_about: "鍏充簬鎴戜滑", nav_contact: "鑱旂郴鎴戜滑",
|
|
footer_desc: "AIoT 涓诲姩寮忓疇鐗╁仴搴风鐞嗗紑鍒涜€咃紝璁╁仴搴峰彲瑙併€侀渶姹傚彲瑙ｃ€佸疇鐖辨棤闂淬€?,
|
|
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> |