1468 lines
57 KiB
HTML
1468 lines
57 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; }
|
|
html, body {
|
|
height: auto;
|
|
}
|
|
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);
|
|
scroll-behavior: smooth;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
#pageContent {
|
|
min-width: 1280px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
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 {
|
|
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;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
/* 页面标题 */
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
.page-header h1 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
.page-header p {
|
|
font-size: 16px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* 分类导航 */
|
|
.category-nav {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
margin-bottom: 48px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.category-btn {
|
|
padding: 10px 24px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.category-btn:hover {
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
.category-btn.active {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #fff;
|
|
}
|
|
|
|
/* 产品分类区块 */
|
|
.product-section {
|
|
margin-bottom: 60px;
|
|
}
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
}
|
|
.section-header h2 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.section-header h2::before {
|
|
content: '';
|
|
width: 4px;
|
|
height: 24px;
|
|
background: linear-gradient(180deg, var(--primary) 0%, #06b6d4 100%);
|
|
border-radius: 2px;
|
|
}
|
|
.section-header a {
|
|
font-size: 14px;
|
|
color: var(--primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.section-header a:hover { text-decoration: underline; }
|
|
|
|
/* 产品网格 */
|
|
.product-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
/* 产品卡片 */
|
|
.product-card {
|
|
background: var(--card);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.product-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
|
|
border-color: transparent;
|
|
}
|
|
.product-card-image {
|
|
height: 180px;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.product-card-image img {
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
object-fit: contain;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.product-card:hover .product-card-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
.product-card-content { padding: 20px; }
|
|
.product-card-tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.product-tag {
|
|
font-size: 11px;
|
|
padding: 4px 10px;
|
|
background: var(--primary-weak);
|
|
color: var(--primary);
|
|
border-radius: 100px;
|
|
font-weight: 500;
|
|
}
|
|
.product-tag.green {
|
|
background: #dcfce7;
|
|
color: #16a34a;
|
|
}
|
|
.product-tag.orange {
|
|
background: #ffedd5;
|
|
color: #ea580c;
|
|
}
|
|
.product-card-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
}
|
|
.product-card-desc {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
line-height: 1.5;
|
|
margin-bottom: 12px;
|
|
}
|
|
.product-card-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.product-card-link {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.product-card-link:hover { gap: 8px; }
|
|
|
|
/* 页面底部 - 与首页完全一致 */
|
|
.footer {
|
|
background: #0f172a;
|
|
color: #94a3b8;
|
|
padding: 60px 0 30px;
|
|
margin-top: 80px;
|
|
}
|
|
.footer-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
|
|
gap: 48px;
|
|
margin-bottom: 48px;
|
|
}
|
|
.footer-brand { max-width: 280px; }
|
|
.footer-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
.footer-logo img {
|
|
height: 48px;
|
|
width: auto;
|
|
}
|
|
.footer-desc {
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
color: #64748b;
|
|
margin-bottom: 20px;
|
|
}
|
|
.footer-social {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.footer-social a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: #94a3b8;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.footer-social a:hover {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
}
|
|
.footer-social svg { width: 18px; height: 18px; }
|
|
.footer-column h4 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin-bottom: 16px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.footer-links { list-style: none; }
|
|
.footer-links li { margin-bottom: 10px; }
|
|
.footer-links a {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.footer-links a:hover { color: #fff; }
|
|
.footer-bottom {
|
|
padding-top: 30px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
.footer-bottom-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
.footer-bottom-main .footer-social {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.footer-bottom-main .footer-social a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: #94a3b8;
|
|
transition: all 0.25s ease;
|
|
}
|
|
.footer-bottom-main .footer-social a:hover {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
transform: translateY(-2px);
|
|
}
|
|
.footer-bottom-main .footer-social svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.footer-copyright {
|
|
font-size: 13px;
|
|
color: #475569;
|
|
}
|
|
.footer-legal {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
.footer-legal a {
|
|
font-size: 13px;
|
|
color: #475569;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.footer-legal a:hover { color: #fff; }
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 1024px) {
|
|
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
|
|
.product-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.navbar-menu { display: none; }
|
|
.mobile-menu-btn { display: flex; }
|
|
.navbar-cta { display: none; }
|
|
.product-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.footer-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 32px;
|
|
}
|
|
.category-nav { gap: 8px; }
|
|
.category-btn {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
/* 社交媒体弹窗 */
|
|
.social-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;
|
|
}
|
|
.social-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.social-modal {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border-radius: 24px;
|
|
padding: 40px;
|
|
max-width: 480px;
|
|
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;
|
|
}
|
|
.social-modal-overlay.active .social-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
.social-modal-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
.social-modal-header h3 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin: 0 0 8px;
|
|
}
|
|
.social-modal-header p {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
}
|
|
.social-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;
|
|
}
|
|
.social-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: #1f2937;
|
|
}
|
|
.social-qr-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.social-qr-item {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.social-qr-item:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.social-qr-item .qr-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 12px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.social-qr-item .qr-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.social-qr-item.wechat .qr-icon {
|
|
background: linear-gradient(135deg, #07c160 0%, #1aad19 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item.weibo .qr-icon {
|
|
background: linear-gradient(135deg, #fa6400 0%, #ff8a00 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item.xiaohongshu .qr-icon {
|
|
background: linear-gradient(135deg, #fe2c55 0%, #ff2442 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item.tiktok .qr-icon {
|
|
background: linear-gradient(135deg, #000 0%, #25f4ee 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item .qr-image {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 12px;
|
|
background: #f3f4f6;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.social-qr-item .qr-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.social-qr-item .qr-placeholder {
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
}
|
|
.social-qr-item .qr-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 4px;
|
|
}
|
|
.social-qr-item .qr-desc {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
/* 购物弹窗样式 */
|
|
.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 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">
|
|
<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="page-header">
|
|
<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"><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 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" data-product-id="cat-toilet-pro">
|
|
<div class="product-card-image">
|
|
<img src="../images/cat.png" alt="智能猫厕所" />
|
|
</div>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag purple">AI智能</span>
|
|
<span class="product-tag">自动</span>
|
|
<span class="product-tag green">健康</span>
|
|
<span class="product-tag green">热销</span>
|
|
</div>
|
|
<h3 class="product-card-title">智能猫厕所 Pro</h3>
|
|
<p class="product-card-desc">AkiWell主动健康智能猫砂盆，毛孩子的健康小管家</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=cat-toilet-pro" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag green">健康</span>
|
|
<span class="product-tag purple">智能</span>
|
|
<span class="product-tag orange">新品</span>
|
|
</div>
|
|
<h3 class="product-card-title">智能猫厕所 Lite</h3>
|
|
<p class="product-card-desc">CHOOKOO宠小科智能猫砂盆，泌尿系统健康守护小管家</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=cat-toilet-lite" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">狗用</span>
|
|
</div>
|
|
<h3 class="product-card-title">智能狗厕所</h3>
|
|
<p class="product-card-desc">科学如厕训练，智能清洁管理</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=dog-toilet" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 喂养系列 -->
|
|
<section class="product-section" data-section="feeding">
|
|
<div class="section-header">
|
|
<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" data-product-id="smart-feeder">
|
|
<div class="product-card-image">
|
|
<img src="../images/feeder.png" alt="智能喂食器" />
|
|
</div>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">通用</span>
|
|
<span class="product-tag green">热销</span>
|
|
</div>
|
|
<h3 class="product-card-title">智能喂食器</h3>
|
|
<p class="product-card-desc">定时定量精准投喂，养成健康饮食习惯</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=smart-feeder" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">通用</span>
|
|
</div>
|
|
<h3 class="product-card-title">智能饮水机</h3>
|
|
<p class="product-card-desc">四重过滤循环净化，提升饮水健康</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=smart-fountain" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
</div>
|
|
<h3 class="product-card-title">智能猫粮桶</h3>
|
|
<p class="product-card-desc">真空保鲜，智能控湿，锁住新鲜</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=cat-food-bucket" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">狗用</span>
|
|
</div>
|
|
<h3 class="product-card-title">智能狗粮桶</h3>
|
|
<p class="product-card-desc">大容量设计，适合多狗家庭</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=dog-food-bucket" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 监控系列 -->
|
|
<section class="product-section" data-section="monitor">
|
|
<div class="section-header">
|
|
<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" data-product-id="ai-camera">
|
|
<div class="product-card-image">
|
|
<img src="../images/camera.jpeg" alt="AI宠物摄像头" />
|
|
</div>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">通用</span>
|
|
<span class="product-tag orange">新品</span>
|
|
</div>
|
|
<h3 class="product-card-title">AI宠物摄像头</h3>
|
|
<p class="product-card-desc">1080P高清夜视，AI行为识别，双向语音</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=ai-camera" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">通用</span>
|
|
</div>
|
|
<h3 class="product-card-title">宠物健康追踪器</h3>
|
|
<p class="product-card-desc">轻便佩戴，实时监测活动量与睡眠</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=health-tracker" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">通用</span>
|
|
</div>
|
|
<h3 class="product-card-title">环境监测仪</h3>
|
|
<p class="product-card-desc">温湿度、空气质量实时监测</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=environment-monitor" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 配件系列 -->
|
|
<section class="product-section" data-section="accessories">
|
|
<div class="section-header">
|
|
<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" data-product-id="filter-set">
|
|
<div class="product-card-image">
|
|
<img src="../images/cat.png" alt="替换滤网套装" />
|
|
</div>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">配件</span>
|
|
</div>
|
|
<h3 class="product-card-title">替换滤网套装</h3>
|
|
<p class="product-card-desc">适用于饮水机，建议3个月更换</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=filter-set" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">配件</span>
|
|
</div>
|
|
<h3 class="product-card-title">清洁耗材包</h3>
|
|
<p class="product-card-desc">适用于智能厕所，保持卫生洁净</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=cleaning-kit" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">配件</span>
|
|
</div>
|
|
<h3 class="product-card-title">备用电源适配器</h3>
|
|
<p class="product-card-desc">通用设计，支持全系产品</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=power-adapter" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="product-card-content">
|
|
<div class="product-card-tags">
|
|
<span class="product-tag">服务</span>
|
|
</div>
|
|
<h3 class="product-card-title">延长保修服务</h3>
|
|
<p class="product-card-desc">额外1年保修，安心无忧</p>
|
|
<div class="product-card-footer">
|
|
<a href="product-detail.html?id=extended-warranty" class="product-card-link">了解详情 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 页面底部 - 与首页完全一致 -->
|
|
<footer class="footer">
|
|
<div class="footer-container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<div class="footer-logo">
|
|
<img src="../images/白字logo.png" alt="Chookoo" />
|
|
</div>
|
|
<p class="footer-desc"><span data-i18n="footer_desc">AIoT 主动式宠物健康管理开创者，让健康可见、需求可解、宠爱无间。</span></p>
|
|
</div>
|
|
<div class="footer-column">
|
|
<h4><span data-i18n="footer_products">产品</span></h4>
|
|
<ul class="footer-links">
|
|
<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">
|
|
<li><a href="#">关于我们</a></li>
|
|
<li><a href="#">加入我们</a></li>
|
|
<li><a href="#">新闻动态</a></li>
|
|
<li><a href="#">联系方式</a></li>
|
|
</ul>
|
|
</div>
|
|
-->
|
|
<div class="footer-column">
|
|
<h4><span data-i18n="footer_support">支持</span></h4>
|
|
<ul class="footer-links">
|
|
<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><span data-i18n="footer_contact">联系我们</span></h4>
|
|
<ul class="footer-links">
|
|
<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>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="footer-bottom-main">
|
|
<p class="footer-copyright">© 2025 Chookoo. All rights reserved.</p>
|
|
<div class="footer-social">
|
|
<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="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>
|
|
</a>
|
|
<a href="#" 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="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>
|
|
</div>
|
|
</footer>
|
|
|
|
</div><!-- /pageContent -->
|
|
|
|
<!-- 社交媒体二维码弹窗 -->
|
|
<div class="social-modal-overlay" id="socialModal">
|
|
<div class="social-modal">
|
|
<button class="social-modal-close" id="socialModalClose">
|
|
<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="social-modal-header">
|
|
<h3>关注我们</h3>
|
|
<p>扫描二维码，获取更多精彩内容</p>
|
|
</div>
|
|
<div class="social-qr-grid">
|
|
<div class="social-qr-item wechat">
|
|
<div class="qr-icon">
|
|
<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/公众号二维码.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="M8 5v14l11-7z"/></svg>
|
|
</div>
|
|
<div class="qr-image">
|
|
<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>
|
|
<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/小红书二维码.png" 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 tiktok">
|
|
<div class="qr-icon">
|
|
<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/抖音二维码.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
|
</div>
|
|
<div class="qr-name">抖音</div>
|
|
<div class="qr-desc">精彩视频</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
// ============================================================
|
|
// 产品可见性控制
|
|
// 用法：修改 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>
|
|
// 分类筛选功能
|
|
const categoryBtns = document.querySelectorAll('.category-btn');
|
|
const productCards = document.querySelectorAll('.product-card');
|
|
const productSections = document.querySelectorAll('.product-section');
|
|
|
|
categoryBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
categoryBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
const category = btn.dataset.category;
|
|
|
|
if (category === 'all') {
|
|
productSections.forEach(section => section.style.display = 'block');
|
|
productCards.forEach(card => card.style.display = 'block');
|
|
} else {
|
|
productSections.forEach(section => {
|
|
const sectionCategory = section.dataset.section;
|
|
if (category === sectionCategory ||
|
|
((category === 'cat' || category === 'dog') && (sectionCategory === 'toilet' || sectionCategory === 'feeding' || sectionCategory === 'monitor'))) {
|
|
section.style.display = 'block';
|
|
} else if (category === 'toilet' || category === 'feeding' || category === 'monitor') {
|
|
section.style.display = sectionCategory === category ? 'block' : 'none';
|
|
} else {
|
|
section.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
productCards.forEach(card => {
|
|
const cardCategories = card.dataset.category || '';
|
|
card.style.display = cardCategories.includes(category) ? 'block' : 'none';
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// 社交媒体弹窗控制
|
|
const socialModal = document.getElementById('socialModal');
|
|
const socialModalClose = document.getElementById('socialModalClose');
|
|
|
|
document.querySelectorAll('.footer-social a').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
socialModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
});
|
|
|
|
socialModalClose.addEventListener('click', function() {
|
|
socialModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
|
|
socialModal.addEventListener('click', function(e) {
|
|
if (e.target === socialModal) {
|
|
socialModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
</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>
|
|
// 购物弹窗控制
|
|
const shopModal = document.getElementById('shopModal');
|
|
const shopBtn = document.getElementById('shopBtn');
|
|
const 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>
|