5075 lines
216 KiB
HTML
5075 lines
216 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 {
|
||
overflow-y: scroll;
|
||
overflow-x: auto;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
|
||
"Helvetica Neue", Arial, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
overflow-x: auto;
|
||
scroll-behavior: smooth;
|
||
}
|
||
#pageContent {
|
||
min-width: 1280px;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
text-decoration: none;
|
||
}
|
||
.container {
|
||
width: 1120px;
|
||
max-width: 1120px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
/* 导航头 - 透明覆盖在轮播图上 */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1000;
|
||
background: transparent;
|
||
border-bottom: none;
|
||
transition: background 0.4s ease, border-bottom 0.4s ease;
|
||
}
|
||
.navbar.scrolled {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
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;
|
||
width: 1280px;
|
||
max-width: 1280px;
|
||
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;
|
||
transition: filter 0.4s ease;
|
||
}
|
||
.navbar:not(.scrolled) .navbar-logo img {
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
.navbar-link {
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
text-decoration: none;
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.navbar.scrolled .navbar-link {
|
||
color: var(--muted);
|
||
}
|
||
.navbar-link:hover {
|
||
color: #fff;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
text-decoration: none;
|
||
}
|
||
.navbar.scrolled .navbar-link:hover {
|
||
color: var(--text);
|
||
background: rgba(0, 0, 0, 0.04);
|
||
}
|
||
.navbar-link.active {
|
||
color: #fff;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
}
|
||
.navbar.scrolled .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: rgba(255, 255, 255, 0.85);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.navbar.scrolled .navbar-btn {
|
||
color: var(--muted);
|
||
}
|
||
.navbar-btn:hover {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
color: #fff;
|
||
}
|
||
.navbar.scrolled .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: var(--primary);
|
||
background: #fff;
|
||
border: none;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
}
|
||
.navbar.scrolled .navbar-cta {
|
||
color: #fff;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
||
}
|
||
.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: rgba(255, 255, 255, 0.85);
|
||
cursor: pointer;
|
||
padding: 8px;
|
||
outline: none;
|
||
}
|
||
.lang-select-hero option {
|
||
color: #333;
|
||
background: #fff;
|
||
}
|
||
.navbar.scrolled .lang-select-hero {
|
||
color: var(--muted);
|
||
}
|
||
/* 页面底部 - 扩展版 */
|
||
.footer-section {
|
||
background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
|
||
color: #94a3b8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 40px 0 24px;
|
||
}
|
||
.footer-container {
|
||
width: 1280px;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
.footer-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 40px;
|
||
padding-top: 0;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||
margin-bottom: 24px;
|
||
}
|
||
.footer-brand-area {
|
||
max-width: 360px;
|
||
}
|
||
.footer-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
.footer-logo img {
|
||
height: 48px;
|
||
width: auto;
|
||
}
|
||
.footer-tagline {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
margin-bottom: 8px;
|
||
}
|
||
.footer-desc {
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #64748b;
|
||
margin-bottom: 16px;
|
||
}
|
||
.footer-social {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
.footer-social a {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: #94a3b8;
|
||
transition: all 0.25s ease;
|
||
}
|
||
.footer-social a:hover {
|
||
background: var(--primary);
|
||
color: #fff;
|
||
transform: translateY(-2px);
|
||
}
|
||
.footer-social svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.footer-subscribe {
|
||
max-width: 360px;
|
||
}
|
||
.footer-subscribe h4 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
margin: 0 0 12px;
|
||
}
|
||
.footer-subscribe p {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
margin-bottom: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
.subscribe-form {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
.subscribe-form input {
|
||
flex: 1;
|
||
padding: 14px 18px;
|
||
border-radius: 12px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: #fff;
|
||
font-size: 14px;
|
||
outline: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.subscribe-form input::placeholder {
|
||
color: #64748b;
|
||
}
|
||
.subscribe-form input:focus {
|
||
border-color: var(--primary);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
}
|
||
.subscribe-form button {
|
||
padding: 14px 28px;
|
||
border-radius: 12px;
|
||
border: none;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.25s ease;
|
||
white-space: nowrap;
|
||
}
|
||
.subscribe-form button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 24px rgba(47, 107, 255, 0.3);
|
||
}
|
||
.subscribe-msg {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px;
|
||
margin-top: 12px;
|
||
border-radius: 10px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
transition: all 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
.subscribe-msg.show {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
pointer-events: auto;
|
||
}
|
||
.subscribe-msg.error {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
color: #fca5a5;
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
}
|
||
.subscribe-msg.success {
|
||
background: rgba(34, 197, 94, 0.15);
|
||
color: #86efac;
|
||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||
}
|
||
.subscribe-msg svg {
|
||
flex-shrink: 0;
|
||
}
|
||
.footer-links-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 32px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.footer-column h4 {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
margin: 0 0 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.footer-links {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.footer-links li {
|
||
margin-bottom: 8px;
|
||
}
|
||
.footer-links a {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.footer-links a:hover {
|
||
color: #fff;
|
||
padding-left: 4px;
|
||
}
|
||
.footer-bottom {
|
||
padding-top: 20px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
.footer-bottom-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.footer-qrcode-section {
|
||
display: flex;
|
||
gap: 32px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
padding: 24px 0;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||
margin-top: 0;
|
||
}
|
||
.qrcode-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.qrcode-placeholder {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.qrcode-placeholder:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
.qrcode-placeholder img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.qrcode-fallback {
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: #94a3b8;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
}
|
||
.qrcode-label {
|
||
font-size: 13px;
|
||
color: #94a3b8;
|
||
white-space: nowrap;
|
||
}
|
||
.footer-copyright {
|
||
font-size: 13px;
|
||
color: #475569;
|
||
}
|
||
.footer-legal {
|
||
display: flex;
|
||
gap: 28px;
|
||
justify-content: center;
|
||
}
|
||
.footer-legal a {
|
||
font-size: 13px;
|
||
color: #475569;
|
||
text-decoration: none;
|
||
transition: color 0.2s ease;
|
||
}
|
||
.footer-legal a:hover {
|
||
color: #fff;
|
||
}
|
||
/* 联系我们弹窗 */
|
||
.contact-modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
backdrop-filter: blur(4px);
|
||
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 {
|
||
position: relative;
|
||
background: #ffffff;
|
||
border-radius: 24px;
|
||
padding: 40px 48px;
|
||
max-width: 380px;
|
||
width: 90%;
|
||
transform: scale(0.95) translateY(20px);
|
||
transition: transform 0.3s ease;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||
text-align: center;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.contact-modal-overlay.active .contact-modal {
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
.contact-modal-close {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #9ca3af;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.contact-modal-close:hover {
|
||
background: #f3f4f6;
|
||
color: #6b7280;
|
||
}
|
||
.contact-modal-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
margin: 0 auto 20px;
|
||
background: #f0f7ff;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.contact-modal-icon svg {
|
||
width: 28px;
|
||
height: 28px;
|
||
color: #3b82f6;
|
||
}
|
||
.contact-modal h3 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 6px;
|
||
}
|
||
.contact-modal p {
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
margin: 0 0 28px;
|
||
}
|
||
.contact-qr-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.contact-qr-box {
|
||
width: 180px;
|
||
height: 180px;
|
||
background: #fafafa;
|
||
border-radius: 16px;
|
||
padding: 12px;
|
||
border: 1px solid #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.contact-qr-box img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
border-radius: 8px;
|
||
}
|
||
.contact-qr-label {
|
||
font-size: 13px;
|
||
color: #9ca3af;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.contact-qr-label svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: #9ca3af;
|
||
}
|
||
/* 社交媒体弹窗 */
|
||
.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);
|
||
}
|
||
.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, #ff5722 0%, #e51c23 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: 120px;
|
||
height: 120px;
|
||
margin: 0 auto 12px;
|
||
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
|
||
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: #9ca3af;
|
||
}
|
||
.beian-row {
|
||
font-size: 12px;
|
||
color: #475569;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.beian-row .sep {
|
||
color: #334155;
|
||
}
|
||
.beian-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
vertical-align: middle;
|
||
margin-right: 4px;
|
||
}
|
||
.lang-switch {
|
||
position: fixed;
|
||
top: 24px;
|
||
right: 24px;
|
||
z-index: 1000;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
border: 1px solid var(--line);
|
||
font-size: 13px;
|
||
color: #374151;
|
||
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
|
||
}
|
||
.lang-switch select {
|
||
border: none;
|
||
background: transparent;
|
||
font-size: 13px;
|
||
color: inherit;
|
||
outline: none;
|
||
cursor: pointer;
|
||
}
|
||
html[dir="rtl"] body {
|
||
direction: rtl;
|
||
}
|
||
html[dir="rtl"] .lang-switch {
|
||
left: 24px;
|
||
right: auto;
|
||
}
|
||
html[dir="rtl"] .hero-inner {
|
||
direction: rtl;
|
||
}
|
||
html[dir="rtl"] .hero-tags {
|
||
justify-content: flex-start;
|
||
}
|
||
html[dir="rtl"] .beian-row {
|
||
direction: rtl;
|
||
}
|
||
.hero {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
}
|
||
.hero::before { display: none; }
|
||
.hero-inner {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
@keyframes gradientFlow {
|
||
0%, 100% { background-position: 0% center; }
|
||
50% { background-position: 200% center; }
|
||
}
|
||
@keyframes shimmer {
|
||
0% { left: -100%; }
|
||
50%, 100% { left: 100%; }
|
||
}
|
||
/* Full-Bleed Hero Carousel - 小米风格 */
|
||
.carousel-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.carousel-track {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.carousel-slide {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
opacity: 0;
|
||
z-index: 1;
|
||
transition: opacity 1s ease-in-out;
|
||
}
|
||
.carousel-slide.active {
|
||
opacity: 1;
|
||
z-index: 3;
|
||
}
|
||
.carousel-slide.exit {
|
||
opacity: 0;
|
||
z-index: 2;
|
||
transition: opacity 1s ease-out;
|
||
}
|
||
/* Slide content - full bleed */
|
||
.slide-content {
|
||
position: relative;
|
||
width: 100%; height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
/* Product slide - 纯色背景 */
|
||
.slide-content.product-bg {
|
||
background: #1a1a2e;
|
||
}
|
||
.slide-content.product-bg .slide-bg-img {
|
||
display: none;
|
||
}
|
||
.slide-content.product-bg::after {
|
||
display: none;
|
||
}
|
||
.slide-content.product-bg .slide-overlay {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-align: center;
|
||
color: #fff;
|
||
padding: 0 40px;
|
||
}
|
||
.slide-overlay .slide-title {
|
||
font-size: 52px;
|
||
font-weight: 800;
|
||
margin: 0 0 16px;
|
||
text-shadow: 0 2px 20px rgba(0,0,0,0.3);
|
||
line-height: 1.15;
|
||
}
|
||
.slide-overlay .slide-desc {
|
||
font-size: 20px;
|
||
opacity: 0.9;
|
||
margin: 0 0 28px;
|
||
line-height: 1.6;
|
||
text-shadow: 0 1px 10px rgba(0,0,0,0.25);
|
||
}
|
||
.slide-overlay .slide-tags {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.slide-overlay .slide-tags span {
|
||
padding: 8px 20px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.18);
|
||
backdrop-filter: blur(8px);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
border: 1px solid rgba(255,255,255,0.25);
|
||
}
|
||
/* Activity Slide */
|
||
.slide-content.activity-bg {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||
}
|
||
.activity-content {
|
||
text-align: center;
|
||
color: #fff;
|
||
padding: 20px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.activity-badge {
|
||
display: inline-block;
|
||
padding: 8px 20px;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 20px;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.activity-badge.hot {
|
||
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
|
||
animation: pulse 2s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.05); }
|
||
}
|
||
.activity-title {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
margin: 0 0 16px;
|
||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.activity-desc {
|
||
font-size: 24px;
|
||
opacity: 0.95;
|
||
margin: 0 0 24px;
|
||
line-height: 1.5;
|
||
}
|
||
.activity-date, .activity-code {
|
||
display: inline-block;
|
||
padding: 12px 28px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 25px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
/* Notice Slide */
|
||
.slide-content.notice-bg {
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||
}
|
||
.notice-content {
|
||
text-align: center;
|
||
color: #fff;
|
||
padding: 20px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.notice-icon {
|
||
font-size: 56px;
|
||
display: block;
|
||
margin-bottom: 16px;
|
||
animation: bounce 2s ease-in-out infinite;
|
||
}
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
.notice-title {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
margin: 0 0 16px;
|
||
background: linear-gradient(135deg, #fff, #a8edea);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.notice-desc {
|
||
font-size: 20px;
|
||
opacity: 0.85;
|
||
margin: 0;
|
||
line-height: 1.8;
|
||
}
|
||
/* Dots */
|
||
.carousel-dots {
|
||
position: absolute;
|
||
bottom: 36px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 10px;
|
||
z-index: 100;
|
||
}
|
||
.carousel-dot {
|
||
width: 32px; height: 4px;
|
||
border-radius: 2px;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.carousel-dot:hover {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
}
|
||
.carousel-dot.active {
|
||
width: 52px;
|
||
background: #fff;
|
||
border-radius: 2px;
|
||
}
|
||
/* Arrows */
|
||
.carousel-arrow {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 56px; height: 56px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
z-index: 100;
|
||
backdrop-filter: blur(10px);
|
||
color: #fff;
|
||
}
|
||
.carousel-arrow.prev { left: 40px; }
|
||
.carousel-arrow.next { right: 40px; }
|
||
.carousel-arrow:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-color: rgba(255, 255, 255, 0.5);
|
||
transform: translateY(-50%) scale(1.06);
|
||
}
|
||
.carousel-arrow:active {
|
||
transform: translateY(-50%) scale(0.96);
|
||
}
|
||
.carousel-arrow svg {
|
||
width: 26px; height: 26px;
|
||
}
|
||
/* Hide old elements */
|
||
.progress-bar { display: none; }
|
||
.hero-image { display: none; }
|
||
.hero-pet-badge { display: none; }
|
||
main {
|
||
padding: 0;
|
||
}
|
||
.snap-section {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.snap-section .container {
|
||
width: 100%;
|
||
padding: 80px 24px 56px;
|
||
}
|
||
.section {
|
||
margin: 0;
|
||
}
|
||
.section-head {
|
||
margin-bottom: 24px;
|
||
}
|
||
.centered .section-head {
|
||
text-align: center;
|
||
}
|
||
.centered .section-head .pill {
|
||
margin: 0 auto;
|
||
}
|
||
.centered .section-head h2 {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.centered .section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 18px;
|
||
border-radius: 999px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
h2 {
|
||
font-size: 32px;
|
||
margin: 16px 0 10px;
|
||
}
|
||
p {
|
||
font-size: 17px;
|
||
line-height: 1.8;
|
||
margin: 0 0 18px;
|
||
color: var(--muted);
|
||
}
|
||
/* 公司介绍板块 - 高级布局 */
|
||
.company-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 48px;
|
||
}
|
||
/* 关于宠科 - 新增公司介绍区域 */
|
||
.about-chookoo-section {
|
||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||
}
|
||
.about-chookoo-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 56px;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
.about-brand {
|
||
text-align: center;
|
||
max-width: 720px;
|
||
}
|
||
.brand-logo-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.logo-mark-large {
|
||
width: 80px;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, rgba(47, 107, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
|
||
border-radius: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.brand-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.brand-name {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, #2F6BFF 0%, #8B5CF6 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.brand-slogan {
|
||
font-size: 15px;
|
||
color: var(--muted);
|
||
font-weight: 500;
|
||
}
|
||
.brand-intro {
|
||
font-size: 16px;
|
||
line-height: 2;
|
||
color: #4b5563;
|
||
margin: 0;
|
||
}
|
||
/* 亮点卡片 */
|
||
.about-highlights {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 32px;
|
||
width: 100%;
|
||
}
|
||
.highlight-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 40px 32px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.highlight-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
|
||
border-color: transparent;
|
||
}
|
||
.highlight-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.highlight-icon.rd {
|
||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||
color: #2563eb;
|
||
}
|
||
.highlight-icon.cert {
|
||
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
||
color: #059669;
|
||
}
|
||
.highlight-icon.lab {
|
||
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
|
||
color: #7c3aed;
|
||
}
|
||
.highlight-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.highlight-number {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
}
|
||
.highlight-label {
|
||
font-size: 14px;
|
||
color: var(--primary);
|
||
font-weight: 500;
|
||
}
|
||
.highlight-desc {
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
line-height: 1.7;
|
||
margin: 0;
|
||
}
|
||
/* 底部信息 */
|
||
.about-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 32px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid rgba(226, 232, 240, 0.8);
|
||
width: 100%;
|
||
max-width: 600px;
|
||
}
|
||
.footer-location {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
.footer-location svg {
|
||
color: var(--primary);
|
||
}
|
||
.footer-year {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
padding: 4px 12px;
|
||
background: rgba(241, 245, 249, 0.8);
|
||
border-radius: 12px;
|
||
}
|
||
/* 公司介绍 - 新版高级设计 */
|
||
.company-section-new {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 48px;
|
||
padding: 60px 24px;
|
||
}
|
||
.company-hero {
|
||
text-align: center;
|
||
max-width: 600px;
|
||
}
|
||
.company-badge {
|
||
display: inline-block;
|
||
padding: 6px 16px;
|
||
background: linear-gradient(135deg, rgba(47, 107, 255, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||
border: 1px solid rgba(47, 107, 255, 0.2);
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--primary);
|
||
margin-bottom: 20px;
|
||
}
|
||
.company-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
line-height: 1.3;
|
||
margin: 0 0 16px;
|
||
}
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 50%, #ec4899 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.company-desc {
|
||
font-size: 16px;
|
||
color: var(--muted);
|
||
line-height: 1.7;
|
||
margin: 0;
|
||
}
|
||
/* 数据统计卡片 */
|
||
.company-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
max-width: 1000px;
|
||
width: 100%;
|
||
}
|
||
.stat-card {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 32px 20px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
overflow: hidden;
|
||
}
|
||
.stat-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
|
||
border-color: transparent;
|
||
}
|
||
.stat-card:hover .stat-bar {
|
||
transform: scaleX(1);
|
||
}
|
||
.stat-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.stat-icon.patent {
|
||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||
color: #d97706;
|
||
}
|
||
.stat-icon.ai {
|
||
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
|
||
color: #7c3aed;
|
||
}
|
||
.stat-icon.data {
|
||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||
color: #2563eb;
|
||
}
|
||
.stat-icon.global {
|
||
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
||
color: #059669;
|
||
}
|
||
.stat-number {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
margin-bottom: 4px;
|
||
}
|
||
.stat-label {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
font-weight: 500;
|
||
}
|
||
.stat-bar {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--primary) 0%, #8b5cf6 50%, #ec4899 100%);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform 0.4s ease;
|
||
}
|
||
/* 底部位置信息 */
|
||
.company-footer {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.company-location {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 20px;
|
||
background: rgba(248, 250, 252, 0.8);
|
||
border-radius: 24px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
.company-location svg {
|
||
color: var(--primary);
|
||
}
|
||
/* 愿景使命价值观 - 全新设计 */
|
||
.vmv-new-section {
|
||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%);
|
||
}
|
||
.vmv-new-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 48px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
.vmv-header {
|
||
text-align: center;
|
||
max-width: 500px;
|
||
}
|
||
.vmv-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 18px;
|
||
border-radius: 999px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
.vmv-title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
line-height: 1.4;
|
||
margin: 0;
|
||
}
|
||
.vmv-title .highlight {
|
||
background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
/* 卡片网格 */
|
||
.vmv-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
width: 100%;
|
||
}
|
||
.vmv-new-card {
|
||
position: relative;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
.vmv-new-card:hover {
|
||
transform: translateY(-8px);
|
||
}
|
||
.card-glow {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
.vmv-new-card.vision .card-glow {
|
||
background: radial-gradient(circle at 50% 0%, rgba(47, 107, 255, 0.15) 0%, transparent 70%);
|
||
}
|
||
.vmv-new-card.mission .card-glow {
|
||
background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
|
||
}
|
||
.vmv-new-card.values .card-glow {
|
||
background: radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
|
||
}
|
||
.vmv-new-card:hover .card-glow {
|
||
opacity: 1;
|
||
}
|
||
.card-content {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 40px 28px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
border-radius: 24px;
|
||
flex: 1;
|
||
min-height: 280px;
|
||
}
|
||
.card-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20px;
|
||
margin-bottom: 20px;
|
||
transition: transform 0.4s ease;
|
||
}
|
||
.vmv-new-card:hover .card-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
.vmv-new-card.vision .card-icon {
|
||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||
color: #2563eb;
|
||
}
|
||
.vmv-new-card.mission .card-icon {
|
||
background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
|
||
color: #7c3aed;
|
||
}
|
||
.vmv-new-card.values .card-icon {
|
||
background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
|
||
color: #db2777;
|
||
}
|
||
.card-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: var(--muted);
|
||
margin-bottom: 8px;
|
||
}
|
||
.card-title {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
margin: 0 0 12px;
|
||
}
|
||
.card-desc {
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
color: #4b5563;
|
||
margin: 0;
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.values-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 8px;
|
||
width: 100%;
|
||
flex: 1;
|
||
align-content: center;
|
||
}
|
||
.value-item {
|
||
padding: 8px 12px;
|
||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(244, 114, 182, 0.08) 100%);
|
||
border-radius: 10px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #db2777;
|
||
}
|
||
.card-decoration {
|
||
margin-top: 20px;
|
||
}
|
||
.deco-line {
|
||
display: block;
|
||
width: 40px;
|
||
height: 3px;
|
||
border-radius: 2px;
|
||
}
|
||
.vmv-new-card.vision .deco-line {
|
||
background: linear-gradient(90deg, #2563eb, #3b82f6);
|
||
}
|
||
.vmv-new-card.mission .deco-line {
|
||
background: linear-gradient(90deg, #7c3aed, #8b5cf6);
|
||
}
|
||
.vmv-new-card.values .deco-line {
|
||
background: linear-gradient(90deg, #db2777, #ec4899);
|
||
}
|
||
/* 底部装饰 */
|
||
.vmv-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 50px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
}
|
||
.vmv-pet-decoration {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.decoration-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.vmv-footer .floating-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0.6;
|
||
animation: vmvBounce 2s ease-in-out infinite;
|
||
}
|
||
.vmv-footer .floating-icon.icon-1 {
|
||
color: var(--primary);
|
||
animation-delay: 0s;
|
||
}
|
||
.vmv-footer .floating-icon.icon-2 {
|
||
color: #ec4899;
|
||
animation-delay: 0.3s;
|
||
}
|
||
.vmv-footer .floating-icon.icon-3 {
|
||
color: #f59e0b;
|
||
animation-delay: 0.6s;
|
||
}
|
||
.vmv-footer .floating-icon.icon-4 {
|
||
color: #10b981;
|
||
animation-delay: 0.9s;
|
||
}
|
||
@keyframes vmvBounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-8px); }
|
||
}
|
||
.vmv-slogan {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #4b5563;
|
||
letter-spacing: 2px;
|
||
margin: 0;
|
||
}
|
||
/* 愿景·使命·价值观板块 - 高级卡片 */
|
||
.vmv-section {
|
||
background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, rgba(240, 244, 255, 0.5) 100%);
|
||
}
|
||
.vmv-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 32px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
.vmv-card {
|
||
position: relative;
|
||
padding: 40px 32px;
|
||
border-radius: 24px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
|
||
text-align: center;
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
overflow: hidden;
|
||
}
|
||
.vmv-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--primary) 0%, #8b5cf6 50%, var(--primary) 100%);
|
||
background-size: 200% 100%;
|
||
animation: gradientFlow 3s ease infinite;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.vmv-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
|
||
}
|
||
.vmv-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
.vmv-icon {
|
||
width: 72px;
|
||
height: 72px;
|
||
margin: 0 auto 24px;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, var(--primary-weak) 0%, rgba(139, 92, 246, 0.1) 100%);
|
||
color: var(--primary);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.vmv-icon svg {
|
||
stroke: var(--primary);
|
||
transition: stroke 0.3s ease;
|
||
}
|
||
.vmv-card:hover .vmv-icon {
|
||
transform: scale(1.1) rotate(-5deg);
|
||
background: var(--primary);
|
||
}
|
||
.vmv-card:hover .vmv-icon svg {
|
||
stroke: #fff;
|
||
}
|
||
.vmv-card h3 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 16px;
|
||
}
|
||
.vmv-card > p {
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
}
|
||
.vmv-card .value-list {
|
||
list-style: none;
|
||
text-align: left;
|
||
margin-top: 20px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--line);
|
||
padding-left: 0;
|
||
}
|
||
.vmv-card .value-list li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 0;
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
}
|
||
.vmv-card .value-list li::before {
|
||
content: '';
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--primary);
|
||
flex-shrink: 0;
|
||
}
|
||
/* 核心产品板块 - 高级交互设计 */
|
||
.product-section {
|
||
background: linear-gradient(180deg, var(--bg) 0%, #f8fafc 100%);
|
||
position: relative;
|
||
}
|
||
.product-grid {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 120px;
|
||
max-width: 1300px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
/* 左侧卡片组 */
|
||
.product-group-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
z-index: 10;
|
||
}
|
||
/* 右侧卡片组 */
|
||
.product-group-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
z-index: 10;
|
||
}
|
||
/* 中央展示区 */
|
||
.product-display-area {
|
||
width: 400px;
|
||
height: 520px;
|
||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||
border-radius: 24px;
|
||
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05),
|
||
0 20px 50px -10px rgba(15, 23, 42, 0.15),
|
||
0 0 80px -20px rgba(47, 107, 255, 0.1);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(15px);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.product-display-area.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: scale(1);
|
||
}
|
||
.product-card {
|
||
position: relative;
|
||
width: 175px;
|
||
height: 185px;
|
||
padding: 0;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
background: var(--card);
|
||
border: 1px solid var(--line);
|
||
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
.product-card.active {
|
||
border-color: var(--primary);
|
||
transform: translateX(10px);
|
||
box-shadow: 0 15px 40px rgba(15, 23, 42, 0.15);
|
||
}
|
||
.product-group-right .product-card.active {
|
||
transform: translateX(-10px);
|
||
}
|
||
.product-card.dimmed {
|
||
opacity: 0.4;
|
||
transform: scale(0.95);
|
||
}
|
||
.product-card .product-image-wrapper {
|
||
height: 90px;
|
||
}
|
||
.product-card .product-content {
|
||
padding: 14px;
|
||
}
|
||
.product-card .product-content h3 {
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.product-card .product-content p {
|
||
font-size: 11px;
|
||
}
|
||
/* 更多产品卡片 */
|
||
.product-card-more {
|
||
text-decoration: none;
|
||
background: linear-gradient(135deg, var(--primary-weak) 0%, #e0f2fe 100%);
|
||
border: 2px dashed rgba(47, 107, 255, 0.3);
|
||
}
|
||
.product-card-more:hover {
|
||
border-color: var(--primary);
|
||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||
}
|
||
.product-card-more .more-products-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--primary);
|
||
opacity: 0.6;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.product-card-more:hover .more-products-icon {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
.product-card-more .product-content h3 {
|
||
color: var(--primary);
|
||
}
|
||
.display-image-wrapper {
|
||
position: relative;
|
||
height: 220px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
}
|
||
.display-image {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
width: auto;
|
||
height: auto;
|
||
object-fit: contain;
|
||
transform: scale(1);
|
||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.product-display-area.show .display-image {
|
||
transform: scale(1.05);
|
||
}
|
||
.display-content {
|
||
padding: 20px 24px;
|
||
text-align: center;
|
||
}
|
||
.display-content h3 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
margin: 0 0 6px;
|
||
opacity: 0;
|
||
transform: translateY(15px);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||
}
|
||
.product-display-area.show .display-content h3 {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
color: var(--primary);
|
||
}
|
||
.display-subtitle {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin: 0 0 16px;
|
||
opacity: 0;
|
||
transform: translateY(15px);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
|
||
}
|
||
.product-display-area.show .display-subtitle {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.display-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
text-align: left;
|
||
}
|
||
.display-features li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
color: #4b5563;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
opacity: 0;
|
||
transform: translateX(-15px);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.display-features li:nth-child(1) { transition-delay: 0.2s; }
|
||
.display-features li:nth-child(2) { transition-delay: 0.25s; }
|
||
.display-features li:nth-child(3) { transition-delay: 0.3s; }
|
||
.display-features li:nth-child(4) { transition-delay: 0.35s; }
|
||
.product-display-area.show .display-features li {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
.display-features li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.display-features li::before {
|
||
content: '✓';
|
||
width: 18px;
|
||
height: 18px;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: white;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
/* 展示区主体布局 */
|
||
.display-body {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
}
|
||
.display-features {
|
||
flex: 1;
|
||
}
|
||
/* 右侧装饰区 - 高级动效版 */
|
||
.display-side {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding-left: 20px;
|
||
margin-left: 16px;
|
||
border-left: 1px solid rgba(47, 107, 255, 0.1);
|
||
}
|
||
.side-decoration {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
.floating-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
backdrop-filter: blur(4px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
.product-display-area.show .floating-icon.icon-1 {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards,
|
||
float 3s ease-in-out 1s infinite;
|
||
}
|
||
.product-display-area.show .floating-icon.icon-2 {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards,
|
||
float 3s ease-in-out 1.5s infinite;
|
||
}
|
||
.product-display-area.show .floating-icon.icon-3 {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards,
|
||
float 3s ease-in-out 2s infinite;
|
||
}
|
||
@keyframes slideIn {
|
||
0% { opacity: 0; transform: translateX(20px) scale(0.8); }
|
||
100% { opacity: 1; transform: translateX(0) scale(1); }
|
||
}
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-6px); }
|
||
}
|
||
.floating-icon:hover {
|
||
transform: scale(1.15) translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(47, 107, 255, 0.15);
|
||
}
|
||
.floating-icon.icon-1 { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); }
|
||
.floating-icon.icon-1 svg { color: #7c3aed; }
|
||
.floating-icon.icon-2 { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); }
|
||
.floating-icon.icon-2 svg { color: #db2777; }
|
||
.floating-icon.icon-3 { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
|
||
.floating-icon.icon-3 svg { color: #d97706; }
|
||
/* AI徽章 */
|
||
.tech-badge {
|
||
position: relative;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 4px;
|
||
}
|
||
.badge-ring {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 1.5px solid transparent;
|
||
border-top-color: #7c3aed;
|
||
border-right-color: #ec4899;
|
||
border-radius: 50%;
|
||
animation: spin 4s linear infinite;
|
||
}
|
||
.badge-ring::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 2px;
|
||
border: 1px solid transparent;
|
||
border-bottom-color: #06b6d4;
|
||
border-radius: 50%;
|
||
animation: spin 3s linear infinite reverse;
|
||
}
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.badge-text {
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
/* 底部栏 */
|
||
.display-footer-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid var(--line);
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
transition: all 0.4s ease 0.5s;
|
||
}
|
||
.product-display-area.show .display-footer-line {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.footer-pets {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.footer-pets .pet-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--primary);
|
||
opacity: 0.7;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.footer-pets .pet-icon:hover {
|
||
opacity: 1;
|
||
transform: scale(1.1);
|
||
}
|
||
.footer-pets .pet-icon.cat svg { color: #6366f1; }
|
||
.footer-pets .pet-icon.dog svg { color: #ec4899; }
|
||
.footer-pets .pet-icon.bird svg { color: #10b981; }
|
||
.footer-dots {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.footer-dots .dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
||
opacity: 0.5;
|
||
}
|
||
.footer-dots .dot:nth-child(2) {
|
||
opacity: 0.8;
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
.footer-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.footer-link:hover {
|
||
gap: 6px;
|
||
}
|
||
.footer-link:hover svg {
|
||
transform: translateX(2px);
|
||
}
|
||
/* 展示区装饰 */
|
||
.product-display-area::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: conic-gradient(from 0deg, transparent 0deg, rgba(6, 182, 212, 0.08) 60deg, transparent 120deg);
|
||
animation: rotateGradient 8s linear infinite;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
pointer-events: none;
|
||
}
|
||
.product-display-area.show::before {
|
||
opacity: 1;
|
||
}
|
||
/* 轮播指示器 - 产品区 */
|
||
.carousel-indicators {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
.carousel-indicators .carousel-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: rgba(15, 23, 42, 0.2);
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
padding: 0;
|
||
}
|
||
.carousel-indicators .carousel-dot:hover {
|
||
background: rgba(15, 23, 42, 0.4);
|
||
transform: scale(1.2);
|
||
}
|
||
.carousel-indicators .carousel-dot.active {
|
||
background: var(--primary);
|
||
width: 24px;
|
||
border-radius: 4px;
|
||
transform: none;
|
||
}
|
||
@keyframes rotateGradient {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.product-card .product-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.6s ease;
|
||
}
|
||
.product-card:hover .product-image {
|
||
transform: scale(1.05);
|
||
}
|
||
.product-content {
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
.product-content h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 8px;
|
||
transition: color 0.3s ease;
|
||
}
|
||
.product-content p {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
/* 产品详情浮层（原卡片用） */
|
||
.product-detail {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.99) 100%);
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
padding: 24px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.4s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
border-radius: 20px;
|
||
}
|
||
.product-detail h4 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 10px;
|
||
text-align: center;
|
||
}
|
||
.product-detail > p {
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
color: var(--muted);
|
||
margin: 0 0 12px;
|
||
text-align: center;
|
||
}
|
||
.product-features {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.product-features li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
color: #4b5563;
|
||
padding: 5px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.product-features li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.product-features li::before {
|
||
content: '✓';
|
||
color: var(--primary);
|
||
font-weight: bold;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.product-content h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 8px;
|
||
transition: color 0.3s ease;
|
||
}
|
||
.product-card:hover .product-content h3 {
|
||
color: var(--primary);
|
||
}
|
||
.product-content p {
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
.product-tag {
|
||
display: inline-block;
|
||
margin-top: 12px;
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
background: var(--primary-weak);
|
||
color: var(--primary);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
/* 宠物故事板块 - 修复链接样式 */
|
||
.pet-story-card {
|
||
text-decoration: none;
|
||
}
|
||
.pet-story-card:hover {
|
||
text-decoration: none;
|
||
}
|
||
.pet-story-card h3 {
|
||
text-decoration: none;
|
||
}
|
||
/* 宠物故事板块 */
|
||
.pet-stories-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
.pet-story-card {
|
||
display: block;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
background: var(--card);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.pet-story-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
|
||
}
|
||
.pet-story-image {
|
||
width: 100%;
|
||
height: 180px;
|
||
object-fit: cover;
|
||
transition: transform 0.6s ease;
|
||
}
|
||
.pet-story-card:hover .pet-story-image {
|
||
transform: scale(1.05);
|
||
}
|
||
.pet-story-content {
|
||
padding: 20px;
|
||
}
|
||
.pet-story-content h3 {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 8px;
|
||
transition: color 0.3s ease;
|
||
}
|
||
.pet-story-card:hover .pet-story-content h3 {
|
||
color: var(--primary);
|
||
}
|
||
.pet-story-excerpt {
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
margin: 0 0 12px;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
}
|
||
.pet-story-meta {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pet-story-tag {
|
||
font-size: 12px;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
background: var(--primary-weak);
|
||
color: var(--primary);
|
||
}
|
||
.pet-story-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.pet-story-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid var(--primary-weak);
|
||
}
|
||
.pet-story-author-info {
|
||
flex: 1;
|
||
}
|
||
.pet-story-author-name {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #374151;
|
||
margin: 0 0 2px;
|
||
}
|
||
.pet-story-pet {
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
}
|
||
.view-more-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 32px;
|
||
padding: 12px 24px;
|
||
border-radius: 999px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.view-more-link:hover {
|
||
background: #1d4bbf;
|
||
transform: translateX(4px);
|
||
}
|
||
/* 宠物故事板块 */
|
||
.pet-stories-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
gap: 28px;
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
.pet-story-card {
|
||
position: relative;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
background: var(--card);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
text-decoration: none !important;
|
||
}
|
||
.pet-story-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
|
||
text-decoration: none !important;
|
||
}
|
||
.pet-story-card:focus {
|
||
text-decoration: none !important;
|
||
outline: none;
|
||
}
|
||
.pet-story-card * {
|
||
text-decoration: none;
|
||
}
|
||
.pet-story-title {
|
||
text-decoration: none;
|
||
border: none;
|
||
}
|
||
.pet-story-image {
|
||
width: 100%;
|
||
height: 220px;
|
||
object-fit: cover;
|
||
transition: transform 0.6s ease;
|
||
}
|
||
.pet-story-card:hover .pet-story-image {
|
||
transform: scale(1.05);
|
||
}
|
||
.pet-story-content {
|
||
padding: 24px;
|
||
}
|
||
.pet-story-tag {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, var(--primary-weak) 0%, #e0e8ff 100%);
|
||
color: var(--primary);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
}
|
||
.pet-story-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 10px 0;
|
||
line-height: 1.4;
|
||
}
|
||
.pet-story-excerpt {
|
||
font-size: 14px;
|
||
color: var(--muted);
|
||
line-height: 1.7;
|
||
margin: 0 0 16px 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
.pet-story-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 16px;
|
||
border-top: 1px solid rgba(226, 232, 240, 0.8);
|
||
}
|
||
.pet-story-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.pet-story-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid var(--primary-weak);
|
||
}
|
||
.pet-story-author-name {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #374151;
|
||
}
|
||
.pet-story-date {
|
||
font-size: 12px;
|
||
color: #9ca3af;
|
||
}
|
||
.pet-story-read-more {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--primary);
|
||
transition: gap 0.3s ease;
|
||
}
|
||
.pet-story-card:hover .pet-story-read-more {
|
||
gap: 10px;
|
||
}
|
||
.section-footer {
|
||
text-align: center;
|
||
margin-top: 36px;
|
||
}
|
||
.btn-primary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 14px 32px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, var(--primary) 0%, #1a56ff 100%);
|
||
color: #fff;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
border: none;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
box-shadow: 0 8px 24px rgba(47, 107, 255, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 32px rgba(47, 107, 255, 0.4);
|
||
text-decoration: none;
|
||
}
|
||
/* 全局动态效果 */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
@keyframes shimmer {
|
||
0% { background-position: -200% 0; }
|
||
100% { background-position: 200% 0; }
|
||
}
|
||
.animate-on-scroll {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
.animate-on-scroll.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
.pill {
|
||
animation: pulse 3s ease-in-out infinite;
|
||
}
|
||
.info-card, .product-card {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.info-card:hover, .product-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
|
||
}
|
||
.eyebrow {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.eyebrow:hover {
|
||
transform: scale(1.02);
|
||
}
|
||
h1, h2 {
|
||
transition: color 0.3s ease;
|
||
}
|
||
.tag {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.tag:hover {
|
||
background: var(--primary);
|
||
color: #fff;
|
||
border-color: var(--primary);
|
||
}
|
||
/* 高级全局动画效果 */
|
||
@keyframes gradientFlow {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 1% 50%; }
|
||
}
|
||
@keyframes floatSlow {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||
25% { transform: translateY(-15px) rotate(2deg); }
|
||
50% { transform: translateY(0) rotate(-2deg); }
|
||
75% { transform: translateY(-10px) rotate(1deg); }
|
||
}
|
||
@keyframes scaleIn {
|
||
from { transform: scale(0.95); opacity: 0; }
|
||
to { transform: scale(1); opacity: 1; }
|
||
}
|
||
/* 滚动显示动画 */
|
||
.scroll-reveal {
|
||
opacity: 0;
|
||
transform: translateY(40px);
|
||
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.scroll-reveal.revealed {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
/* 卡片交错动画 */
|
||
.stagger-item {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
.stagger-item.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
/* 光晕效果 */
|
||
.glow-effect {
|
||
position: relative;
|
||
}
|
||
.glow-effect::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 150%;
|
||
height: 150%;
|
||
background: radial-gradient(circle, rgba(47, 107, 255, 0.1) 0%, transparent 70%);
|
||
transform: translate(-50%, -50%);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
.glow-effect:hover::before {
|
||
opacity: 1;
|
||
}
|
||
/* 文字渐变动画 */
|
||
.text-gradient {
|
||
background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 50%, var(--primary) 100%);
|
||
background-size: 200% 200%;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
animation: gradientFlow 4s ease infinite;
|
||
}
|
||
/* 按钮脉冲效果 */
|
||
.pulse-btn {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.pulse-btn::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 0;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
transition: width 0.6s ease, height 0.6s ease;
|
||
}
|
||
.pulse-btn:hover::after {
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
/* 视差效果 */
|
||
.parallax-bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
.parallax-element {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
opacity: 0.1;
|
||
animation: floatSlow 8s ease-in-out infinite;
|
||
}
|
||
.parallax-element:nth-child(1) {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: var(--primary-weak);
|
||
top: 10%;
|
||
left: 5%;
|
||
animation-delay: 0s;
|
||
}
|
||
.parallax-element:nth-child(2) {
|
||
width: 200px;
|
||
height: 200px;
|
||
background: rgba(139, 92, 246, 0.1);
|
||
bottom: 20%;
|
||
right: 10%;
|
||
animation-delay: 2s;
|
||
}
|
||
.parallax-element:nth-child(3) {
|
||
width: 150px;
|
||
height: 150px;
|
||
background: rgba(47, 107, 255, 0.1);
|
||
top: 50%;
|
||
right: 20%;
|
||
animation-delay: 4s;
|
||
}
|
||
/* 品牌故事板块优化 */
|
||
.story-card {
|
||
background: linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
|
||
}
|
||
.story-wrapper {
|
||
display: grid;
|
||
grid-template-columns: 1fr 300px;
|
||
gap: 48px;
|
||
align-items: center;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
.story-wrapper .story-card {
|
||
padding: 40px;
|
||
border-radius: 24px;
|
||
}
|
||
.story-wrapper .story-card p {
|
||
font-size: 15px;
|
||
line-height: 2;
|
||
color: #4b5563;
|
||
margin: 0 0 24px;
|
||
text-align: justify;
|
||
}
|
||
.story-wrapper .story-card p:last-of-type {
|
||
margin-bottom: 0;
|
||
}
|
||
.story-wrapper .story-card p[data-i18n="story_p4"] {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
margin-top: 32px;
|
||
text-align: left;
|
||
position: relative;
|
||
padding-left: 20px;
|
||
}
|
||
.story-wrapper .story-card p[data-i18n="story_p4"]::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 4px;
|
||
height: 24px;
|
||
background: linear-gradient(180deg, var(--primary) 0%, #8b5cf6 100%);
|
||
border-radius: 2px;
|
||
}
|
||
.story-image {
|
||
position: relative;
|
||
height: 360px;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
|
||
}
|
||
.story-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.6s ease;
|
||
}
|
||
.story-image:hover img {
|
||
transform: scale(1.05);
|
||
}
|
||
.story-image::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.15) 100%);
|
||
pointer-events: none;
|
||
}
|
||
.testimonials-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 24px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
.testimonial-card {
|
||
padding: 28px;
|
||
border-radius: 20px;
|
||
background: var(--card);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
text-align: left;
|
||
}
|
||
.testimonial-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.1);
|
||
}
|
||
.testimonial-quote {
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
color: #374151;
|
||
margin: 0 0 20px 0;
|
||
font-style: italic;
|
||
}
|
||
.testimonial-quote::before {
|
||
content: '"';
|
||
font-size: 28px;
|
||
color: var(--primary);
|
||
line-height: 0;
|
||
vertical-align: -6px;
|
||
margin-right: 4px;
|
||
}
|
||
.testimonial-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
.testimonial-avatar {
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 3px solid var(--primary-weak);
|
||
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.15);
|
||
}
|
||
.testimonial-info {
|
||
flex: 1;
|
||
}
|
||
.testimonial-name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
margin: 0 0 4px 0;
|
||
}
|
||
.testimonial-pet {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
}
|
||
footer {
|
||
border-top: 1px solid var(--line);
|
||
padding: 18px 24px;
|
||
background: #f9fafb;
|
||
color: #4b5563;
|
||
font-size: 14px;
|
||
}
|
||
footer p {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
}
|
||
.beian-row {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.sep {
|
||
margin: 0 6px;
|
||
color: #9ca3af;
|
||
}
|
||
.beian-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
vertical-align: -3px;
|
||
margin-right: 6px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 导航头 - 在 transform 之外，fixed 始终生效 -->
|
||
<nav class="navbar" id="mainNavbar">
|
||
<div class="navbar-inner">
|
||
<a href="#" class="navbar-logo">
|
||
<img src="images/logo.png" alt="Chookoo" />
|
||
</a>
|
||
<div class="navbar-menu">
|
||
<a href="index.html" class="navbar-link active" data-i18n="nav_home">首页</a>
|
||
<a href="pages/products.html" class="navbar-link" data-i18n="nav_products">产品</a>
|
||
<a href="pages/stories.html" class="navbar-link" data-i18n="nav_stories">故事</a>
|
||
<a href="pages/app.html" class="navbar-link" data-i18n="nav_app">App</a>
|
||
<a href="pages/company.html?article=201" class="navbar-link" data-i18n="nav_about">关于我们</a>
|
||
</div>
|
||
<div class="navbar-actions">
|
||
<a href="pages/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"/><path d="m21 21-4.35-4.35"/></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 cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
|
||
</button>
|
||
<select id="langSelect" aria-label="Language" class="lang-select-hero">
|
||
<option value="zh">中文</option>
|
||
<option value="en">EN</option>
|
||
<option value="ja">日本語</option>
|
||
</select>
|
||
<button class="navbar-cta" id="contactBtn" data-i18n="nav_contact">联系我们</button>
|
||
<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"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 页面内容容器 - scale 作用于此 -->
|
||
<div id="pageContent">
|
||
<header class="hero" id="heroCarousel">
|
||
<div class="hero-inner">
|
||
<div class="carousel-container">
|
||
<div class="carousel-track" id="carouselTrack">
|
||
<!-- Slide 1 - 智能猫厕所 Pro -->
|
||
<div class="carousel-slide active" data-type="product">
|
||
<div class="slide-content product-bg" style="background:#1e3a5f;">
|
||
<div class="slide-overlay">
|
||
<div class="slide-tags"><span data-i18n="carousel_s1_badge">新品上线</span></div>
|
||
<h2 class="slide-title" data-i18n="carousel_s1_title">CHOOKOO智宠之家系列上线</h2>
|
||
<p class="slide-desc" data-i18n="carousel_s1_desc">全方位健康风险提前知，守护每只毛孩子</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Slide 2 - 智能狗厕所 -->
|
||
<div class="carousel-slide" data-type="product">
|
||
<div class="slide-content product-bg" style="background:#2d4a3e;">
|
||
<div class="slide-overlay">
|
||
<div class="slide-tags"><span data-i18n="carousel_s2_badge">新品上市</span></div>
|
||
<h2 class="slide-title" data-i18n="carousel_s2_title">智能狗厕所</h2>
|
||
<p class="slide-desc" data-i18n="carousel_s2_desc">专属犬类设计，活水冲洗除异味，智能感应自动清洁。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Slide 3 - 活动 -->
|
||
<div class="carousel-slide" data-type="activity">
|
||
<div class="slide-content activity-bg">
|
||
<div class="activity-content">
|
||
<span class="activity-badge" data-i18n="carousel_activity_badge_1">限时活动</span>
|
||
<h3 class="activity-title" data-i18n="carousel_activity_title_1">618年中大促</h3>
|
||
<p class="activity-desc" data-i18n="carousel_activity_desc_1">全场产品低至5折起</p>
|
||
<span class="activity-date" data-i18n="carousel_activity_date_1">6月1日 - 6月18日</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Slide 4 - 智能喂食器 -->
|
||
<div class="carousel-slide" data-type="product">
|
||
<div class="slide-content product-bg" style="background:#3a2d4a;">
|
||
<div class="slide-overlay">
|
||
<div class="slide-tags"><span data-i18n="carousel_s4_badge">明星单品</span></div>
|
||
<h2 class="slide-title" data-i18n="carousel_s4_title">智能喂食器</h2>
|
||
<p class="slide-desc" data-i18n="carousel_s4_desc">定时定量精准出粮，防潮锁鲜，远程 APP 投喂关爱不断。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Slide 5 - 公告 -->
|
||
<div class="carousel-slide" data-type="notice">
|
||
<div class="slide-content notice-bg">
|
||
<div class="notice-content">
|
||
<span class="notice-icon">📢</span>
|
||
<h3 class="notice-title" data-i18n="carousel_notice_title">系统升级通知</h3>
|
||
<p class="notice-desc" data-i18n="carousel_notice_desc">App 2.0版本全新上线<br/>新增健康报告、远程控制功能</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Slide 6 - 智能饮水机 -->
|
||
<div class="carousel-slide" data-type="product">
|
||
<div class="slide-content product-bg" style="background:#1a3c3c;">
|
||
<div class="slide-overlay">
|
||
<div class="slide-tags"><span data-i18n="carousel_s6_badge">口碑之选</span></div>
|
||
<h2 class="slide-title" data-i18n="carousel_s6_title">智能饮水机</h2>
|
||
<p class="slide-desc" data-i18n="carousel_s6_desc">多级过滤活水循环，智能提醒换水，让宠物爱上喝水。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Slide 7 - 活动 -->
|
||
<div class="carousel-slide" data-type="activity">
|
||
<div class="slide-content activity-bg">
|
||
<div class="activity-content">
|
||
<span class="activity-badge hot">🔥 HOT</span>
|
||
<h3 class="activity-title" data-i18n="carousel_activity_title_2">新用户专享</h3>
|
||
<p class="activity-desc" data-i18n="carousel_activity_desc_2">首单立减100元</p>
|
||
<span class="activity-code" data-i18n="carousel_activity_code">优惠码: NEW100</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Slide 8 - AI摄像头 -->
|
||
<div class="carousel-slide" data-type="product">
|
||
<div class="slide-content product-bg" style="background:#3c2a1a;">
|
||
<div class="slide-overlay">
|
||
<div class="slide-tags"><span data-i18n="carousel_s8_badge">AI 新品</span></div>
|
||
<h2 class="slide-title" data-i18n="carousel_s8_title">AI 宠物摄像头</h2>
|
||
<p class="slide-desc" data-i18n="carousel_s8_desc">1080P 高清夜视，AI 行为识别，双向语音随时互动。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Navigation Arrows -->
|
||
<button class="carousel-arrow prev" id="carouselPrev">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M15 18l-6-6 6-6"/>
|
||
</svg>
|
||
</button>
|
||
<button class="carousel-arrow next" id="carouselNext">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M9 18l6-6-6-6"/>
|
||
</svg>
|
||
</button>
|
||
<!-- Dots -->
|
||
<div class="carousel-dots" id="carouselDots"></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- 关于宠科 - 新增公司介绍区域 -->
|
||
<section class="snap-section centered about-chookoo-section">
|
||
<div class="container section">
|
||
<div class="about-chookoo-wrapper">
|
||
<div class="about-brand">
|
||
<div class="brand-logo-box">
|
||
<span class="pill" data-i18n="section_about_label">公司简介</span>
|
||
<img src="images/logo.png" alt="Chookoo" style="height: 70px; width: auto;">
|
||
<span class="brand-slogan" data-i18n="about_brand_slogan">宠科智能科技</span>
|
||
</div>
|
||
<p class="brand-intro" data-i18n="about_brand_intro">
|
||
宠科（Chookoo）成立于中国苏州，是一家专注于宠物智能健康管理的科技企业。我们秉承"让每一个生命都能被真正理解与守护"的理念，致力于通过技术创新重新定义宠物健康管理方式。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="about-highlights">
|
||
<div class="highlight-card">
|
||
<div class="highlight-icon rd">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||
<path d="M2 17l10 5 10-5"/>
|
||
<path d="M2 12l10 5 10-5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="highlight-content">
|
||
<span class="highlight-number">60%+</span>
|
||
<span class="highlight-label" data-i18n="about_highlight_rd_label">研发人员占比</span>
|
||
</div>
|
||
<p class="highlight-desc" data-i18n="about_highlight_rd_desc">核心团队来自知名科技企业与科研院所</p>
|
||
</div>
|
||
|
||
<div class="highlight-card">
|
||
<div class="highlight-icon cert">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M12 15l-2 5l1-.5l1 .5l1-.5l1 .5l-2-5z"/>
|
||
<circle cx="12" cy="9" r="6"/>
|
||
<path d="M12 6v6l3-2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="highlight-content">
|
||
<span class="highlight-number">ISO9001</span>
|
||
<span class="highlight-label" data-i18n="about_highlight_cert_label">质量认证</span>
|
||
</div>
|
||
<p class="highlight-desc" data-i18n="about_highlight_cert_desc">通过国际质量管理体系认证</p>
|
||
</div>
|
||
|
||
<div class="highlight-card">
|
||
<div class="highlight-icon lab">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M9 3v7.5c0 .828-.336 1.624-.938 2.207L4 17h16l-4.062-4.293A3.118 3.118 0 0 1 15 10.5V3"/>
|
||
<path d="M9 3h6"/>
|
||
<path d="M11 3v4"/>
|
||
<path d="M13 3v4"/>
|
||
</svg>
|
||
</div>
|
||
<div class="highlight-content">
|
||
<span class="highlight-number" data-i18n="about_highlight_lab_number">自研</span>
|
||
<span class="highlight-label" data-i18n="about_highlight_lab_label">AI实验室</span>
|
||
</div>
|
||
<p class="highlight-desc" data-i18n="about_highlight_lab_desc">独立AI算法实验室持续迭代优化</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-footer">
|
||
<div class="footer-location">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||
<circle cx="12" cy="10" r="3"/>
|
||
</svg>
|
||
<span data-i18n="about_location">中国苏州 · 苏州工业园区</span>
|
||
</div>
|
||
<div class="footer-year">
|
||
<span>Founded 2023</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="snap-section centered">
|
||
<div class="container section company-section-new">
|
||
<div class="company-hero">
|
||
<div class="company-badge" data-i18n="company_badge">AIoT 宠物健康管理</div>
|
||
<h2 class="company-title" data-i18n="company_title">以科技重新定义<br/><span class="gradient-text">宠物健康管理</span></h2>
|
||
<p class="company-desc" data-i18n="company_desc">深度融合人工智能、物联网与生物传感技术，构建预防式健康生态</p>
|
||
</div>
|
||
|
||
<div class="company-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-icon patent">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="stat-number" data-count="50">50+</div>
|
||
<div class="stat-label" data-i18n="company_stat_patent_label">核心专利</div>
|
||
<div class="stat-bar"></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon ai">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M12 2a4 4 0 0 1 4 4v2a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4z"/>
|
||
<path d="M16 14h.01M8 14h.01M12 14h.01"/>
|
||
<path d="M12 18c2.5 0 4.5-1.5 4.5-3.5S14.5 11 12 11s-4.5 1.5-4.5 3.5S9.5 18 12 18z"/>
|
||
<circle cx="12" cy="6" r="1"/>
|
||
</svg>
|
||
</div>
|
||
<div class="stat-number" data-count="10">10亿+</div>
|
||
<div class="stat-label" data-i18n="company_stat_ai_label">AI健康数据点</div>
|
||
<div class="stat-bar"></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon data">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M3 3v18h18"/>
|
||
<path d="M18 17V9"/>
|
||
<path d="M13 17V5"/>
|
||
<path d="M8 17v-3"/>
|
||
</svg>
|
||
</div>
|
||
<div class="stat-number" data-count="100">100万+</div>
|
||
<div class="stat-label" data-i18n="company_stat_records_label">宠物健康档案</div>
|
||
<div class="stat-bar"></div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon global">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<path d="M2 12h20"/>
|
||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="stat-number" data-count="30">30+</div>
|
||
<div class="stat-label" data-i18n="company_stat_global_label">国家和地区</div>
|
||
<div class="stat-bar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="company-footer">
|
||
<div class="company-location">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||
<circle cx="12" cy="10" r="3"/>
|
||
</svg>
|
||
<span data-i18n="company_location">中国苏州 · 智慧健康管理领域</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="snap-section centered product-section">
|
||
<div class="container section">
|
||
<div class="section-head">
|
||
<span class="pill" data-i18n="section_products_label">核心产品</span>
|
||
<h2 data-i18n="section_products_title">多场景智能硬件与健康管理服务</h2>
|
||
</div>
|
||
<div class="product-grid" id="productGrid">
|
||
<!-- 左侧卡片组 (3张) -->
|
||
<div class="product-group-left">
|
||
<div class="product-card" data-product="1">
|
||
<div class="product-image-wrapper">
|
||
<img class="product-image" src="images/cat.png" alt="猫厕所" onerror="this.src='images/cat.png'" />
|
||
</div>
|
||
<div class="product-content">
|
||
<h3 data-i18n="product_card_cat_title">智能猫厕所</h3>
|
||
<p data-i18n="product_card_cat_desc">智能监测·自动清洁</p>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" data-product="2">
|
||
<div class="product-image-wrapper">
|
||
<img class="product-image" src="images/dog.jpeg" alt="狗厕所" onerror="this.src='images/dog.jpeg'" />
|
||
</div>
|
||
<div class="product-content">
|
||
<h3 data-i18n="product_card_dog_title">智能狗厕所</h3>
|
||
<p data-i18n="product_card_dog_desc">科学训练·智能清洁</p>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" data-product="3">
|
||
<div class="product-image-wrapper">
|
||
<img class="product-image" src="images/feeder.png" alt="喂食器" onerror="this.src='images/cat.png'" />
|
||
</div>
|
||
<div class="product-content">
|
||
<h3 data-i18n="product_card_feeder_title">智能喂食器</h3>
|
||
<p data-i18n="product_card_feeder_desc">定时定量·科学喂养</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 中央展示区 -->
|
||
<div class="product-display-area" id="productDisplayArea">
|
||
<div class="display-image-wrapper">
|
||
<img class="display-image" id="displayImage" src="" alt="产品展示" />
|
||
</div>
|
||
<div class="display-content">
|
||
<h3 id="displayTitle" data-i18n="display_title_default">产品名称</h3>
|
||
<p class="display-subtitle" id="displaySubtitle" data-i18n="display_subtitle_default">产品描述</p>
|
||
<div class="display-body">
|
||
<ul class="display-features" id="displayFeatures">
|
||
</ul>
|
||
<div class="display-side">
|
||
<div class="side-decoration">
|
||
<div class="floating-icon icon-1">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="5.5" cy="8.5" r="2.5"/>
|
||
<circle cx="18.5" cy="8.5" r="2.5"/>
|
||
<circle cx="8.5" cy="4.5" r="2"/>
|
||
<circle cx="15.5" cy="4.5" r="2"/>
|
||
<path d="M12 22c-4 0-7-2-7-5 0-1.5 1-3 3-4 1.5-.7 3-1 4-1s2.5.3 4 1c2 1 3 2.5 3 4 0 3-3 5-7 5z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="floating-icon icon-2">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="floating-icon icon-3">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="tech-badge">
|
||
<div class="badge-ring"></div>
|
||
<span class="badge-text">AI</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="display-footer-line">
|
||
<div class="footer-pets" id="displayPets">
|
||
<span class="pet-icon">🐱</span>
|
||
</div>
|
||
<div class="footer-dots">
|
||
<span class="dot"></span>
|
||
<span class="dot"></span>
|
||
<span class="dot"></span>
|
||
</div>
|
||
<a href="pages/products.html" class="footer-link">
|
||
<span data-i18n="display_learn_more">了解更多</span>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧卡片组 (3张) -->
|
||
<div class="product-group-right">
|
||
<div class="product-card" data-product="4">
|
||
<div class="product-image-wrapper">
|
||
<img class="product-image" src="images/water.jpeg" alt="饮水机" onerror="this.src='images/cat.png'" />
|
||
</div>
|
||
<div class="product-content">
|
||
<h3 data-i18n="product_card_water_title">智能饮水机</h3>
|
||
<p data-i18n="product_card_water_desc">循环净化·饮水提醒</p>
|
||
</div>
|
||
</div>
|
||
<div class="product-card" data-product="5">
|
||
<div class="product-image-wrapper">
|
||
<img class="product-image" src="images/camera.jpeg" alt="AI摄像头" onerror="this.src='images/cat.png'" />
|
||
</div>
|
||
<div class="product-content">
|
||
<h3 data-i18n="product_card_camera_title">AI宠物摄像头</h3>
|
||
<p data-i18n="product_card_camera_desc">远程守护·行为识别</p>
|
||
</div>
|
||
</div>
|
||
<a href="pages/products.html" class="product-card product-card-more">
|
||
<div class="product-image-wrapper more-products-icon">
|
||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<path d="M12 8v8M8 12h8"/>
|
||
</svg>
|
||
</div>
|
||
<div class="product-content">
|
||
<h3 data-i18n="product_card_more_title">更多产品</h3>
|
||
<p data-i18n="product_card_more_desc">探索全系列</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="snap-section centered">
|
||
<div class="container section">
|
||
<div class="section-head">
|
||
<span class="pill" data-i18n="section_pet_stories_label">宠物故事</span>
|
||
<h2 data-i18n="section_pet_stories_title">每一个毛孩子背后的温馨故事</h2>
|
||
</div>
|
||
<div class="pet-stories-grid" id="petStoriesGrid">
|
||
<!-- 由 JavaScript 随机渲染 -->
|
||
</div>
|
||
<a href="pages/stories.html" class="view-more-link" data-i18n="view_more_stories">查看更多故事 →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 愿景使命价值观 - 全新设计 -->
|
||
<section class="snap-section centered vmv-new-section">
|
||
<div class="container section">
|
||
<div class="vmv-new-wrapper">
|
||
<div class="vmv-header">
|
||
<span class="vmv-badge" data-i18n="section_beliefs_label">核心理念</span>
|
||
<h2 class="vmv-title" data-i18n="vmv_title">让每一个生命<br/>都能被<span class="highlight">真正理解</span>与守护</h2>
|
||
</div>
|
||
|
||
<div class="vmv-cards">
|
||
<div class="vmv-new-card vision">
|
||
<div class="card-glow"></div>
|
||
<div class="card-content">
|
||
<div class="card-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<circle cx="12" cy="12" r="3"/>
|
||
<path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-label">Vision</span>
|
||
<h3 class="card-title" data-i18n="vmv_vision_title">愿景</h3>
|
||
<p class="card-desc" data-i18n="vmv_vision_desc">成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式</p>
|
||
<div class="card-decoration">
|
||
<span class="deco-line"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vmv-new-card values">
|
||
<div class="card-glow"></div>
|
||
<div class="card-content">
|
||
<div class="card-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-label">Values</span>
|
||
<h3 class="card-title" data-i18n="vmv_values_title">价值观</h3>
|
||
<div class="values-grid">
|
||
<span class="value-item" data-i18n="vmv_value_1">科技向善</span>
|
||
<span class="value-item" data-i18n="vmv_value_2">关爱为本</span>
|
||
<span class="value-item" data-i18n="vmv_value_3">极致创新</span>
|
||
<span class="value-item" data-i18n="vmv_value_4">长久相伴</span>
|
||
</div>
|
||
<div class="card-decoration">
|
||
<span class="deco-line"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vmv-new-card mission">
|
||
<div class="card-glow"></div>
|
||
<div class="card-content">
|
||
<div class="card-icon">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||
<path d="M2 17l10 5 10-5"/>
|
||
<path d="M2 12l10 5 10-5"/>
|
||
</svg>
|
||
</div>
|
||
<span class="card-label">Mission</span>
|
||
<h3 class="card-title" data-i18n="vmv_mission_title">使命</h3>
|
||
<p class="card-desc" data-i18n="vmv_mission_desc">让健康可见，让需求可解，让宠爱无间</p>
|
||
<div class="card-decoration">
|
||
<span class="deco-line"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vmv-footer">
|
||
<div class="vmv-pet-decoration">
|
||
<div class="decoration-row">
|
||
<div class="floating-icon icon-1">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<ellipse cx="12" cy="14" rx="8" ry="7"/>
|
||
<circle cx="6" cy="6" r="3"/>
|
||
<circle cx="18" cy="6" r="3"/>
|
||
<circle cx="3" cy="12" r="2.5"/>
|
||
<circle cx="21" cy="12" r="2.5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="floating-icon icon-2">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||
</svg>
|
||
</div>
|
||
<p class="vmv-slogan" data-i18n="vmv_slogan">每一份陪伴，都值得被温柔以待</p>
|
||
<div class="floating-icon icon-3">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="floating-icon icon-4">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
||
<ellipse cx="12" cy="14" rx="8" ry="7"/>
|
||
<circle cx="6" cy="6" r="3"/>
|
||
<circle cx="18" cy="6" r="3"/>
|
||
<circle cx="3" cy="12" r="2.5"/>
|
||
<circle cx="21" cy="12" r="2.5"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="snap-section footer-section" id="support">
|
||
<div class="footer-container">
|
||
<!-- 顶部品牌与订阅区 -->
|
||
<div class="footer-top">
|
||
<div class="footer-brand-area">
|
||
<div class="footer-logo">
|
||
<img src="images/白字logo.png" alt="Chookoo" />
|
||
</div>
|
||
<p class="footer-tagline" data-i18n="footer_tagline">让每一份宠爱，都有科学回响</p>
|
||
<p class="footer-desc" data-i18n="footer_desc">AIoT 主动式宠物健康管理开创者，让健康可见、需求可解、宠爱无间。</p>
|
||
</div>
|
||
<div class="footer-subscribe">
|
||
<h4 data-i18n="footer_subscribe_title">订阅我们</h4>
|
||
<p data-i18n="footer_subscribe_desc">获取最新产品资讯、健康养护技巧与专属优惠</p>
|
||
<form class="subscribe-form" id="subscribeForm" novalidate>
|
||
<input type="email" placeholder="请输入邮箱" data-i18n-placeholder="footer_email_placeholder" />
|
||
<button type="submit" data-i18n="footer_subscribe_btn">订阅</button>
|
||
</form>
|
||
<div class="subscribe-msg" id="subscribeMsg"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间链接区域 -->
|
||
<div class="footer-links-grid">
|
||
<div class="footer-column">
|
||
<h4 data-i18n="footer_products">产品</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="pages/products.html" data-i18n="footer_product_cat">智能猫厕所</a></li>
|
||
<li><a href="pages/products.html" data-i18n="footer_product_feeder">智能喂食器</a></li>
|
||
<li><a href="pages/products.html" data-i18n="footer_product_fountain">智能饮水机</a></li>
|
||
<li><a href="pages/products.html" data-i18n="footer_product_camera">AI 摄像头</a></li>
|
||
<li><a href="pages/products.html" data-i18n="footer_product_all">全部产品</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4 data-i18n="footer_support">支持</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="pages/help.html" data-i18n="footer_help">帮助中心</a></li>
|
||
<li><a href="pages/help.html" data-i18n="footer_faq">常见问题</a></li>
|
||
<li><a href="pages/help.html?article=14" data-i18n="footer_warranty">保修政策</a></li>
|
||
<li><a href="pages/help.html?category=other" data-i18n="footer_returns">退换货</a></li>
|
||
<li><a href="pages/help.html?category=install" data-i18n="footer_manual">产品手册</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4 data-i18n="footer_partner_title">合作伙伴</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="pages/partner.html?page=dealer" data-i18n="footer_partner_dealer">经销商入驻</a></li>
|
||
<li><a href="pages/partner.html?page=affiliate" data-i18n="footer_partner_affiliate">联盟推广</a></li>
|
||
<li><a href="pages/partner.html?page=business" data-i18n="footer_partner_business">企业采购</a></li>
|
||
<li><a href="pages/partner.html?page=tech" data-i18n="footer_partner_tech">技术合作</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4 data-i18n="footer_contact_title">联系我们</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="mailto:hello@chookoo.com">hello@chookoo.com</a></li>
|
||
<li><a href="tel:400-888-8888">400-888-8888</a></li>
|
||
<li><a href="#" data-i18n="footer_service_time">周一至周日 9:00-21:00</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二维码区域 -->
|
||
<div class="footer-qrcode-section">
|
||
<div class="qrcode-item">
|
||
<div class="qrcode-placeholder">
|
||
<img src="images/qr-wechat.png" alt="微信二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||
<div class="qrcode-fallback">二维码</div>
|
||
</div>
|
||
<span class="qrcode-label" data-i18n="footer_qr_wechat">微信公众号</span>
|
||
</div>
|
||
<div class="qrcode-item">
|
||
<div class="qrcode-placeholder">
|
||
<img src="images/qr-weibo.png" alt="微博二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||
<div class="qrcode-fallback">二维码</div>
|
||
</div>
|
||
<span class="qrcode-label" data-i18n="footer_qr_weibo">微博</span>
|
||
</div>
|
||
<div class="qrcode-item">
|
||
<div class="qrcode-placeholder">
|
||
<img src="images/qr-xiaohongshu.png" alt="小红书二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||
<div class="qrcode-fallback">二维码</div>
|
||
</div>
|
||
<span class="qrcode-label" data-i18n="footer_qr_xiaohongshu">小红书</span>
|
||
</div>
|
||
<div class="qrcode-item">
|
||
<div class="qrcode-placeholder">
|
||
<img src="images/qr-tiktok.png" alt="抖音二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||
<div class="qrcode-fallback">二维码</div>
|
||
</div>
|
||
<span class="qrcode-label" data-i18n="footer_qr_tiktok">抖音</span>
|
||
</div>
|
||
<div class="qrcode-item">
|
||
<div class="qrcode-placeholder">
|
||
<img src="images/qr-shop.png" alt="商城二维码" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" />
|
||
<div class="qrcode-fallback">二维码</div>
|
||
</div>
|
||
<span class="qrcode-label" data-i18n="footer_qr_shop">线上商城</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部版权区 -->
|
||
<div class="footer-bottom">
|
||
<div class="footer-bottom-main">
|
||
<div class="footer-legal">
|
||
<a href="pages/legal.html?page=privacy" data-i18n="footer_privacy">隐私政策</a>
|
||
<a href="pages/legal.html?page=terms" data-i18n="footer_terms">服务条款</a>
|
||
<a href="pages/legal.html?page=cookies" data-i18n="footer_cookies">Cookie 设置</a>
|
||
</div>
|
||
<p class="footer-copyright">© 2025 Chookoo. <span data-i18n="footer_rights">All rights reserved.</span></p>
|
||
</div>
|
||
<p class="beian-row">
|
||
<span data-i18n="footer_company_full">宠科智能科技（苏州）有限公司</span>
|
||
<span class="sep">|</span>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer"><span data-i18n="footer_icp_value">苏ICP备2025227635号</span></a>
|
||
<span class="sep">|</span>
|
||
<img class="beian-icon" src="https://www.beian.gov.cn/img/new/gongan.png" alt="公安备案" />
|
||
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32050902103112" target="_blank" rel="noopener noreferrer"><span data-i18n="footer_psb_value">苏公网安备32050902103112号</span></a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<script>
|
||
// 视口缩放 - 基于1920px设计稿
|
||
(() => {
|
||
const designWidth = 1920;
|
||
const minWidth = 1280;
|
||
const maxWidth = 2560;
|
||
const content = document.getElementById('pageContent');
|
||
const navbar = document.getElementById('mainNavbar');
|
||
const hero = document.getElementById('heroCarousel');
|
||
|
||
function scale() {
|
||
const vw = window.innerWidth;
|
||
const vh = window.innerHeight;
|
||
let s = 1;
|
||
|
||
if (vw < minWidth) {
|
||
s = vw / minWidth;
|
||
} else if (vw > maxWidth) {
|
||
s = vw / maxWidth;
|
||
} else {
|
||
s = vw / designWidth;
|
||
}
|
||
|
||
// pageContent 缩放（hero 在里面一起缩）
|
||
content.style.transform = `scale(${s})`;
|
||
content.style.transformOrigin = 'top left';
|
||
content.style.width = `${designWidth}px`;
|
||
|
||
// navbar 单独缩放（fixed 不受 content transform 影响）
|
||
if (navbar) {
|
||
navbar.style.transform = `scale(${s})`;
|
||
navbar.style.transformOrigin = 'top left';
|
||
navbar.style.width = `${designWidth}px`;
|
||
}
|
||
|
||
// hero 高度补偿 scale，缩放后刚好 = 视口高度
|
||
if (hero) {
|
||
hero.style.height = `${Math.ceil(vh / s)}px`;
|
||
}
|
||
}
|
||
|
||
scale();
|
||
window.addEventListener('resize', scale);
|
||
})();
|
||
</script>
|
||
<script>
|
||
// Navbar scroll effect - 透明→白色
|
||
(function() {
|
||
var navbar = document.getElementById('mainNavbar');
|
||
if (!navbar) return;
|
||
function checkScroll() {
|
||
if (window.scrollY > 100) {
|
||
navbar.classList.add('scrolled');
|
||
} else {
|
||
navbar.classList.remove('scrolled');
|
||
}
|
||
}
|
||
window.addEventListener('scroll', checkScroll, { passive: true });
|
||
checkScroll();
|
||
})();
|
||
</script>
|
||
<script>
|
||
// Hero Carousel - 3D Flip Transition
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var track = document.getElementById('carouselTrack');
|
||
var slides = track.querySelectorAll('.carousel-slide');
|
||
var dotsContainer = document.getElementById('carouselDots');
|
||
var prevBtn = document.getElementById('carouselPrev');
|
||
var nextBtn = document.getElementById('carouselNext');
|
||
|
||
var currentIndex = 0;
|
||
var autoPlayInterval = null;
|
||
var slideCount = slides.length;
|
||
var autoPlayDelay = 5000;
|
||
|
||
// Create dots
|
||
for (var i = 0; i < slideCount; i++) {
|
||
(function(index) {
|
||
var dot = document.createElement('button');
|
||
dot.className = 'carousel-dot' + (index === 0 ? ' active' : '');
|
||
dot.setAttribute('data-index', index);
|
||
dot.onclick = function() {
|
||
goToSlide(index);
|
||
restartAutoPlay();
|
||
};
|
||
dotsContainer.appendChild(dot);
|
||
})(i);
|
||
}
|
||
|
||
var dots = dotsContainer.querySelectorAll('.carousel-dot');
|
||
|
||
function goToSlide(index) {
|
||
var prevIndex = currentIndex;
|
||
var nextIndex = (index + slideCount) % slideCount;
|
||
|
||
// Don't do anything if clicking the same slide
|
||
if (prevIndex === nextIndex) return;
|
||
|
||
// Remove active from current and add exit
|
||
slides[prevIndex].classList.remove('active');
|
||
slides[prevIndex].classList.add('exit');
|
||
dots[prevIndex].classList.remove('active');
|
||
|
||
// After transition completes, clean up exit class
|
||
setTimeout(function() {
|
||
slides[prevIndex].classList.remove('exit');
|
||
}, 800);
|
||
|
||
// Update index and show new slide
|
||
currentIndex = nextIndex;
|
||
slides[currentIndex].classList.add('active');
|
||
dots[currentIndex].classList.add('active');
|
||
}
|
||
|
||
function nextSlide() {
|
||
goToSlide(currentIndex + 1);
|
||
}
|
||
|
||
function prevSlide() {
|
||
goToSlide(currentIndex - 1);
|
||
}
|
||
|
||
function startAutoPlay() {
|
||
autoPlayInterval = setInterval(nextSlide, autoPlayDelay);
|
||
}
|
||
|
||
function stopAutoPlay() {
|
||
if (autoPlayInterval) {
|
||
clearInterval(autoPlayInterval);
|
||
autoPlayInterval = null;
|
||
}
|
||
}
|
||
|
||
function restartAutoPlay() {
|
||
stopAutoPlay();
|
||
startAutoPlay();
|
||
}
|
||
|
||
// Arrow button events - direct onclick
|
||
prevBtn.onclick = function(e) {
|
||
e.preventDefault();
|
||
prevSlide();
|
||
restartAutoPlay();
|
||
return false;
|
||
};
|
||
|
||
nextBtn.onclick = function(e) {
|
||
e.preventDefault();
|
||
nextSlide();
|
||
restartAutoPlay();
|
||
return false;
|
||
};
|
||
|
||
// Pause on hover
|
||
track.onmouseenter = stopAutoPlay;
|
||
track.onmouseleave = startAutoPlay;
|
||
|
||
// Start
|
||
startAutoPlay();
|
||
});
|
||
</script>
|
||
<script>
|
||
(() => {
|
||
const translations = {
|
||
zh: {
|
||
lang_label: "语言",
|
||
hero_eyebrow: "AIoT 主动式宠物健康管理开创者",
|
||
hero_title_suffix: "宠科智能科技",
|
||
hero_lead: "聚焦宠物家庭智能健康管理，打造 AIoT 宠物健康生态，让健康可见、需求可解、宠爱无间。",
|
||
hero_tag_1: "宠物健康管理",
|
||
hero_tag_2: "AIoT 智能硬件",
|
||
hero_tag_3: "主动式健康洞察",
|
||
hero_glass_line1: "让每一份宠爱",
|
||
hero_glass_line2: "都有<span class='highlight-word'>科学</span>回响",
|
||
carousel_s1_badge: "新品上线", carousel_s1_title: "CHOOKOO智宠之家系列上线", carousel_s1_desc: "全方位健康风险提前知，守护每只毛孩子", carousel_s1_tag1: "自动清理", carousel_s1_tag2: "健康监测", carousel_s1_tag3: "静音运行",
|
||
carousel_s2_badge: "新品上市", carousel_s2_title: "智能狗厕所", carousel_s2_desc: "专属犬类设计，活水冲洗除异味，智能感应自动清洁。", carousel_s2_tag1: "犬类专用", carousel_s2_tag2: "活水冲洗", carousel_s2_tag3: "除菌除味",
|
||
carousel_s4_badge: "明星单品", carousel_s4_title: "智能喂食器", carousel_s4_desc: "定时定量精准出粮，防潮锁鲜，远程 APP 投喂关爱不断。", carousel_s4_tag1: "定时定量", carousel_s4_tag2: "防潮锁鲜", carousel_s4_tag3: "远程投喂",
|
||
carousel_s6_badge: "口碑之选", carousel_s6_title: "智能饮水机", carousel_s6_desc: "多级过滤活水循环，智能提醒换水，让宠物爱上喝水。", carousel_s6_tag1: "活水循环", carousel_s6_tag2: "多级过滤", carousel_s6_tag3: "智能提醒",
|
||
carousel_s8_badge: "AI 新品", carousel_s8_title: "AI 宠物摄像头", carousel_s8_desc: "1080P 高清夜视，AI 行为识别，双向语音随时互动。", carousel_s8_tag1: "AI 识别", carousel_s8_tag2: "高清夜视", carousel_s8_tag3: "双向语音",
|
||
section_company_label: "公司介绍",
|
||
section_company_title: "AIoT 主动式宠物健康管理开创者",
|
||
section_company_p1: "宠科（Chookoo）成立于中国苏州，立足智慧健康管理领域，是一家专注于构建预防式健康生态的科技企业。",
|
||
section_company_p2: "我们传承长三角高端制造与前沿创新能力，深度融合人工智能、物联网与生物传感技术，依托苏州深厚的精密制造底蕴与跨学科研发能力，聚焦宠物与长者的主动健康管理需求。通过智能设备无感收集生命体征与行为数据，AI 实时分析将日常细微变化转化为精准的健康洞察，致力于让每一个生命都能被真正理解与守护，共同构建更安心、更具预见性的健康生活。",
|
||
section_vmv_label: "愿景 · 使命 · 价值观",
|
||
section_vmv_title: "成为全球宠物家庭最信赖的智能健康伙伴",
|
||
badge_vision: "Vision",
|
||
badge_mission: "Mission",
|
||
badge_values: "Values",
|
||
vision_title: "愿景",
|
||
vision_desc: "成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式。",
|
||
mission_title: "使命",
|
||
mission_desc: "让健康可见，让需求可解，让宠爱无间。",
|
||
values_title: "价值观",
|
||
values_1: "科技向善",
|
||
values_2: "关爱为本",
|
||
values_3: "极致创新",
|
||
values_4: "长久相伴",
|
||
section_about_label: "公司简介",
|
||
section_beliefs_label: "核心理念",
|
||
section_products_label: "核心产品",
|
||
section_products_title: "多场景智能硬件与健康管理服务",
|
||
product_cat_title: "猫厕所",
|
||
product_cat_desc: "智能监测、自动清洁，守护猫咪如厕健康。",
|
||
product_dog_title: "狗厕所",
|
||
product_dog_desc: "科学如厕训练与清洁管理，省心易用。",
|
||
product_feeder_title: "喂食器",
|
||
product_feeder_desc: "定时定量、数据可视，构建健康饮食习惯。",
|
||
product_water_title: "饮水机",
|
||
product_water_desc: "循环净化、饮水提醒，提升饮水健康。",
|
||
product_camera_title: "宠物 AI 摄像头",
|
||
product_camera_desc: "远程守护、行为识别，实时了解宠物状态。",
|
||
section_testimonials_label: "用户心声",
|
||
section_testimonials_title: "来自真实用户的声音",
|
||
section_pet_stories_label: "宠物故事",
|
||
section_pet_stories_title: "每一个毛孩子背后的温馨故事",
|
||
pet_story_title_1: "小橘的逆袭日记",
|
||
pet_story_excerpt_1: "第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康...",
|
||
pet_story_title_2: "旺财的健身日记",
|
||
pet_story_excerpt_2: "旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯...",
|
||
pet_story_title_3: "布丁的日常",
|
||
pet_story_excerpt_3: "自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分...",
|
||
view_more_stories: "查看更多故事 →",
|
||
testimonial_1: "自从用了Chookoo的智能猫厕所，我终于可以实时了解猫咪的健康状况，每次数据报告都让我很安心。",
|
||
testimonial_name_1: "小橘妈妈",
|
||
testimonial_pet_1: "橘猫 · 上海",
|
||
testimonial_2: "喂食器的定时定量功能太棒了，即使出差也能确保狗狗按时吃饭，APP提醒功能非常贴心。",
|
||
testimonial_name_2: "旺财爸爸",
|
||
testimonial_pet_2: "金毛 · 北京",
|
||
testimonial_3: "AI摄像头的行为识别功能让我惊喜，能自动识别猫咪的不同状态，随时查看它在家的情况。",
|
||
testimonial_name_3: "布丁姐姐",
|
||
testimonial_pet_3: "英短 · 深圳",
|
||
section_story_label: "品牌故事",
|
||
section_story_title: "共筑一个更懂爱的未来",
|
||
story_p1: "宠科的故事，是一个关于进化的故事。我们因宠爱宠物而出发，理解了「宠爱」更广阔的内涵——它是对家庭中所有生命的细致体察与科学呵护。",
|
||
story_p2: "我们的愿景，是成为全球家庭智能陪伴领域的技术标准制定者与生态引领者。这不仅意味着产品的持续迭代，更意味着我们将与用户建立长期、真诚的伙伴关系：通过用户反馈持续优化算法，通过社群聆听最真实的需求，通过「宠科实验室」邀请用户共同参与未来产品的概念设计。",
|
||
story_p3: "我们承诺，将始终以「让每一份宠爱，都有科学回响」为产品开发的北极星，让科技的光芒，照亮家庭中每一个需要被看见、被理解、被呵护的角落。",
|
||
story_p4: "未来已来，它以爱为名。",
|
||
nav_products: "产品",
|
||
nav_about: "关于我们",
|
||
nav_stories: "故事",
|
||
nav_support: "支持",
|
||
nav_contact: "联系我们",
|
||
footer_tagline: "让每一份宠爱，都有科学回响",
|
||
footer_desc: "AIoT 主动式宠物健康管理开创者，让健康可见、需求可解、宠爱无间。",
|
||
footer_subscribe_title: "订阅我们",
|
||
footer_subscribe_desc: "获取最新产品资讯、健康养护技巧与专属优惠",
|
||
footer_email_placeholder: "请输入邮箱",
|
||
footer_subscribe_btn: "订阅",
|
||
footer_products: "产品",
|
||
footer_product_cat: "智能猫厕所",
|
||
footer_product_feeder: "智能喂食器",
|
||
footer_product_fountain: "智能饮水机",
|
||
footer_product_camera: "AI 摄像头",
|
||
footer_product_all: "全部产品",
|
||
footer_company_title: "公司",
|
||
footer_about: "关于我们",
|
||
footer_careers: "加入我们",
|
||
footer_news: "新闻动态",
|
||
footer_brand_story: "品牌故事",
|
||
footer_support: "支持",
|
||
footer_help: "帮助中心",
|
||
footer_faq: "常见问题",
|
||
footer_warranty: "保修政策",
|
||
footer_returns: "退换货",
|
||
footer_manual: "产品手册",
|
||
footer_partner_title: "合作伙伴",
|
||
footer_partner_dealer: "经销商入驻",
|
||
footer_partner_affiliate: "联盟推广",
|
||
footer_partner_business: "企业采购",
|
||
footer_partner_tech: "技术合作",
|
||
footer_service_time: "周一至周日 9:00-21:00",
|
||
footer_cookies: "Cookie 设置",
|
||
footer_company_full: "宠科智能科技（苏州）有限公司",
|
||
footer_contact_title: "联系我们",
|
||
footer_address_short: "苏州 · 吴江",
|
||
footer_rights: "保留所有权利",
|
||
footer_privacy: "隐私政策",
|
||
footer_terms: "服务条款",
|
||
footer_company: "宠科智能科技（苏州）有限公司",
|
||
footer_address_label: "地址：",
|
||
footer_address: "苏州市吴江区江陵街道<br>长安路2358号吴江科技创业园<br>2号楼5层",
|
||
footer_icp_label: "ICP备案/许可证号：",
|
||
footer_icp_value: "苏ICP备2025227635号",
|
||
footer_psb_value: "苏公网安备32050902103112号",
|
||
// Carousel
|
||
carousel_activity_badge_1: "限时活动",
|
||
carousel_activity_title_1: "618年中大促",
|
||
carousel_activity_desc_1: "全场产品低至5折起",
|
||
carousel_activity_date_1: "6月1日 - 6月18日",
|
||
carousel_notice_title: "系统升级通知",
|
||
carousel_notice_desc: "App 2.0版本全新上线<br/>新增健康报告、远程控制功能",
|
||
carousel_activity_title_2: "新用户专享",
|
||
carousel_activity_desc_2: "首单立减100元",
|
||
carousel_activity_code: "优惠码: NEW100",
|
||
// About
|
||
about_brand_slogan: "宠科智能科技",
|
||
about_brand_intro: "宠科（Chookoo）成立于中国苏州，是一家专注于宠物智能健康管理的科技企业。我们秉承「让每一个生命都能被真正理解与守护」的理念，致力于通过技术创新重新定义宠物健康管理方式。",
|
||
about_highlight_rd_label: "研发人员占比",
|
||
about_highlight_rd_desc: "核心团队来自知名科技企业与科研院所",
|
||
about_highlight_cert_label: "质量认证",
|
||
about_highlight_cert_desc: "通过国际质量管理体系认证",
|
||
about_highlight_lab_number: "自研",
|
||
about_highlight_lab_label: "AI实验室",
|
||
about_highlight_lab_desc: "独立AI算法实验室持续迭代优化",
|
||
about_location: "中国苏州 · 苏州工业园区",
|
||
// Company
|
||
company_badge: "AIoT 宠物健康管理",
|
||
company_title: "以科技重新定义<br/><span class='gradient-text'>宠物健康管理</span>",
|
||
company_desc: "深度融合人工智能、物联网与生物传感技术，构建预防式健康生态",
|
||
company_stat_patent_label: "核心专利",
|
||
company_stat_ai_label: "AI健康数据点",
|
||
company_stat_records_label: "宠物健康档案",
|
||
company_stat_global_label: "国家和地区",
|
||
company_location: "中国苏州 · 智慧健康管理领域",
|
||
// Product cards
|
||
product_card_cat_title: "智能猫厕所",
|
||
product_card_cat_desc: "AkiWell主动健康，风险提前知",
|
||
product_card_dog_title: "智能狗厕所",
|
||
product_card_dog_desc: "科学训练·智能清洁",
|
||
product_card_feeder_title: "智能喂食器",
|
||
product_card_feeder_desc: "定时定量·科学喂养",
|
||
product_card_water_title: "智能饮水机",
|
||
product_card_water_desc: "循环净化·饮水提醒",
|
||
product_card_camera_title: "AI宠物摄像头",
|
||
product_card_camera_desc: "远程守护·行为识别",
|
||
product_card_more_title: "更多产品",
|
||
product_card_more_desc: "探索全系列",
|
||
// Pet story meta
|
||
pet_story_1_tag_1: "健康恢复",
|
||
pet_story_1_tag_2: "暖心故事",
|
||
pet_story_1_author: "小橘妈妈",
|
||
pet_story_1_pet: "橘猫 · 3岁",
|
||
pet_story_2_tag_1: "健康饮食",
|
||
pet_story_2_tag_2: "体重管理",
|
||
pet_story_2_author: "旺财爸爸",
|
||
pet_story_2_pet: "金毛 · 2岁",
|
||
pet_story_3_tag_1: "AI识别",
|
||
pet_story_3_tag_2: "行为分析",
|
||
pet_story_3_author: "布丁姐姐",
|
||
pet_story_3_pet: "英短 · 2岁",
|
||
// VMV
|
||
vmv_title: "让每一个生命<br/>都能被真正理解与守护",
|
||
vmv_vision_title: "愿景",
|
||
vmv_vision_desc: "成为全球宠物家庭最信赖的智能健康伙伴，定义主动健康管理新范式",
|
||
vmv_values_title: "价值观",
|
||
vmv_value_1: "科技向善",
|
||
vmv_value_2: "关爱为本",
|
||
vmv_value_3: "极致创新",
|
||
vmv_value_4: "长久相伴",
|
||
vmv_mission_title: "使命",
|
||
vmv_mission_desc: "让健康可见，让需求可解，让宠爱无间",
|
||
vmv_slogan: "每一份陪伴，都值得被温柔以待",
|
||
// Footer QR
|
||
footer_qr_wechat: "微信公众号",
|
||
footer_qr_weibo: "微博",
|
||
footer_qr_xiaohongshu: "小红书",
|
||
footer_qr_tiktok: "抖音",
|
||
footer_qr_shop: "线上商城",
|
||
// Modals
|
||
modal_social_title: "关注我们",
|
||
modal_social_desc: "扫描二维码，获取更多精彩内容",
|
||
modal_social_qr_wechat: "微信公众号",
|
||
modal_social_qr_wechat_desc: "获取最新资讯",
|
||
modal_social_qr_weibo: "官方微博",
|
||
modal_social_qr_weibo_desc: "互动交流",
|
||
modal_social_qr_xiaohongshu: "小红书",
|
||
modal_social_qr_xiaohongshu_desc: "种草分享",
|
||
modal_social_qr_tiktok: "抖音",
|
||
modal_social_qr_tiktok_desc: "精彩视频",
|
||
modal_contact_title: "联系我们",
|
||
modal_contact_desc: "扫描下方二维码，添加专属客服",
|
||
modal_contact_scan: "微信扫码咨询",
|
||
modal_shop_title: "官方旗舰店",
|
||
modal_shop_desc: "扫描二维码，进入官方店铺选购",
|
||
modal_shop_scan: "扫码进店",
|
||
// Product display
|
||
display_title_default: "产品名称",
|
||
display_subtitle_default: "产品描述",
|
||
display_learn_more: "了解更多"
|
||
},
|
||
en: {
|
||
lang_label: "Language",
|
||
hero_eyebrow: "AIoT Pioneer in Proactive Pet Health Management",
|
||
hero_title_suffix: "Petcare Technology",
|
||
hero_lead: "Focused on smart pet-family health management, building an AIoT health ecosystem so health is visible, needs are understood, and care is seamless.",
|
||
hero_tag_1: "Pet Health Management",
|
||
hero_tag_2: "AIoT Smart Devices",
|
||
hero_tag_3: "Proactive Health Insights",
|
||
hero_glass_line1: "Let every act of care",
|
||
hero_glass_line2: "be supported by <span class='highlight-word'>science</span>",
|
||
carousel_s1_badge: "New Launch", carousel_s1_title: "CHOOKOO Smart Pet Home Collection Launches.", carousel_s1_desc: "All-round potential health risk early detection, safeguard every furry companion.", carousel_s1_tag1: "Auto Clean", carousel_s1_tag2: "Health Monitor", carousel_s1_tag3: "Silent Mode",
|
||
carousel_s2_badge: "New Arrival", carousel_s2_title: "Smart Dog Toilet", carousel_s2_desc: "Designed for dogs, running water wash & deodorize, smart sensor auto-clean.", carousel_s2_tag1: "Dog-Specific", carousel_s2_tag2: "Water Wash", carousel_s2_tag3: "Odor Control",
|
||
carousel_s4_badge: "Top Pick", carousel_s4_title: "Smart Feeder", carousel_s4_desc: "Precise timed portions, moisture-proof freshness lock, remote APP feeding anywhere.", carousel_s4_tag1: "Precise Portions", carousel_s4_tag2: "Fresh Lock", carousel_s4_tag3: "Remote Feed",
|
||
carousel_s6_badge: "Customer Favorite", carousel_s6_title: "Smart Fountain", carousel_s6_desc: "Multi-stage filtration with circulating water, smart refill reminders so pets love to drink.", carousel_s6_tag1: "Circulation", carousel_s6_tag2: "Multi-Filter", carousel_s6_tag3: "Smart Remind",
|
||
carousel_s8_badge: "AI New", carousel_s8_title: "AI Pet Camera", carousel_s8_desc: "1080P HD night vision, AI behavior recognition, two-way voice interaction anytime.", carousel_s8_tag1: "AI Recognition", carousel_s8_tag2: "HD Night Vision", carousel_s8_tag3: "Two-way Voice",
|
||
section_company_label: "Company",
|
||
section_company_title: "AIoT Pioneer in Proactive Pet Health Management",
|
||
section_company_p1: "Chookoo was founded in Suzhou, China, and focuses on smart health management as a technology company dedicated to building a preventive health ecosystem.",
|
||
section_company_p2: "We inherit the Yangtze River Delta’s high-end manufacturing and frontier innovation, integrating AI, IoT, and biosensing. With Suzhou’s precision manufacturing base and cross-disciplinary R&D, we focus on proactive health management for pets and seniors. Smart devices collect vital and behavioral data unobtrusively, and AI turns subtle daily changes into precise health insights—so every life is understood and protected, building a safer and more predictive healthy living experience.",
|
||
section_vmv_label: "Vision · Mission · Values",
|
||
section_vmv_title: "Become the most trusted smart health partner for pet families worldwide",
|
||
badge_vision: "Vision",
|
||
badge_mission: "Mission",
|
||
badge_values: "Values",
|
||
vision_title: "Vision",
|
||
vision_desc: "Become the most trusted smart health partner for pet families worldwide and define a new paradigm of proactive health management.",
|
||
mission_title: "Mission",
|
||
mission_desc: "Make health visible, needs understood, and care seamless.",
|
||
values_title: "Values",
|
||
values_1: "Technology for good",
|
||
values_2: "Care-first",
|
||
values_3: "Relentless innovation",
|
||
values_4: "Long-term companionship",
|
||
section_about_label: "About Us",
|
||
section_beliefs_label: "Our Beliefs",
|
||
section_products_label: "Products",
|
||
section_products_title: "Smart devices and health services for multiple scenarios",
|
||
product_cat_title: "Smart Cat Litter Box",
|
||
product_cat_desc: "Smart monitoring and auto-cleaning to protect feline toilet health.",
|
||
product_dog_title: "Smart Dog Toilet",
|
||
product_dog_desc: "Scientific potty training and easy cleaning management.",
|
||
product_feeder_title: "Smart Feeder",
|
||
product_feeder_desc: "Scheduled portions with data visibility for healthy habits.",
|
||
product_water_title: "Smart Water Fountain",
|
||
product_water_desc: "Circulation and filtration with hydration reminders.",
|
||
product_camera_title: "AI Pet Camera",
|
||
product_camera_desc: "Remote care and behavior recognition for real-time insight.",
|
||
section_testimonials_label: "Testimonials",
|
||
section_testimonials_title: "Voices from Real Users",
|
||
testimonial_1: "With Chookoo's smart litter box, I can finally monitor my cat's health in real-time. Every data report gives me peace of mind.",
|
||
testimonial_name_1: "Orange's Mom",
|
||
testimonial_pet_1: "Orange Tabby · Shanghai",
|
||
testimonial_2: "The scheduled feeding feature is amazing! Even on business trips, my dog eats on time. The app reminders are so thoughtful.",
|
||
testimonial_name_2: "Wangcai's Dad",
|
||
testimonial_pet_2: "Golden Retriever · Beijing",
|
||
testimonial_3: "The AI camera's behavior recognition surprised me. It automatically identifies my cat's different states so I can check on her anytime.",
|
||
testimonial_name_3: "Pudding's Sister",
|
||
testimonial_pet_3: "British Shorthair · Shenzhen",
|
||
section_pet_stories_label: "Pet Stories",
|
||
section_pet_stories_title: "Heartwarming Stories Behind Every Fur Baby",
|
||
pet_story_title_1: "Little Orange's Recovery Diary",
|
||
pet_story_excerpt_1: "After discovering Chookoo's smart litter box, Little Orange finally regained health...",
|
||
pet_story_title_2: "Wangcai's Fitness Diary",
|
||
pet_story_excerpt_2: "Wangcai used to be a picky eater, Chookoo's smart feeder helped establish good feeding habits...",
|
||
pet_story_title_3: "Pudding's Daily Life",
|
||
pet_story_excerpt_3: "Since using the AI camera, it can automatically recognize Pudding's states. What a surprise...",
|
||
view_more_stories: "View More Stories →",
|
||
section_story_label: "Brand Story",
|
||
section_story_title: "Building a future that understands love",
|
||
story_p1: "Chookoo’s story is one of evolution. We started from caring for pets and came to understand a broader meaning of love—careful observation and scientific protection for every life in the family.",
|
||
story_p2: "Our vision is to be a standard setter and ecosystem leader in smart family companionship. That means not only continuous product iteration, but also long-term, sincere partnerships with users: improving algorithms through feedback, listening to real needs through communities, and inviting users to co-design future products through the “Chookoo Lab.”",
|
||
story_p3: "We promise to keep “every act of care deserves a scientific echo” as our North Star, so the light of technology reaches every corner that needs to be seen, understood, and protected.",
|
||
story_p4: "The future is here, and it is called love.",
|
||
nav_products: "Products",
|
||
nav_about: "About",
|
||
nav_stories: "Stories",
|
||
nav_support: "Support",
|
||
nav_contact: "Contact",
|
||
footer_tagline: "Every act of care deserves a scientific echo",
|
||
footer_desc: "AIoT proactive pet health management pioneer. Making health visible, needs solvable, and love seamless.",
|
||
footer_subscribe_title: "Subscribe",
|
||
footer_subscribe_desc: "Get the latest product news, health tips and exclusive offers",
|
||
footer_email_placeholder: "Enter your email",
|
||
footer_subscribe_btn: "Subscribe",
|
||
footer_products: "Products",
|
||
footer_product_cat: "Smart Cat Litter Box",
|
||
footer_product_feeder: "Smart Feeder",
|
||
footer_product_fountain: "Smart Water Fountain",
|
||
footer_product_camera: "AI Camera",
|
||
footer_product_all: "All Products",
|
||
footer_company_title: "Company",
|
||
footer_about: "About Us",
|
||
footer_careers: "Careers",
|
||
footer_news: "News",
|
||
footer_brand_story: "Brand Story",
|
||
footer_support: "Support",
|
||
footer_help: "Help Center",
|
||
footer_faq: "FAQ",
|
||
footer_warranty: "Warranty",
|
||
footer_returns: "Returns",
|
||
footer_manual: "Product Manuals",
|
||
footer_partner_title: "Partners",
|
||
footer_partner_dealer: "Dealer Program",
|
||
footer_partner_affiliate: "Affiliate Program",
|
||
footer_partner_business: "Business Purchase",
|
||
footer_partner_tech: "Tech Partnership",
|
||
footer_contact_title: "Contact Us",
|
||
footer_service_time: "Mon-Sun 9:00-21:00",
|
||
footer_address_short: "Suzhou, China",
|
||
footer_address: "Wujiang District, Suzhou, Jiangsu",
|
||
footer_rights: "All rights reserved.",
|
||
footer_privacy: "Privacy Policy",
|
||
footer_terms: "Terms of Service",
|
||
footer_cookies: "Cookie Settings",
|
||
footer_company_full: "Chookoo Intelligent Technology (Suzhou) Co., Ltd.",
|
||
footer_address_label: "Address: ",
|
||
footer_address_full: "No. 2358 Chang'an Rd, Jiangling St., Wujiang Dist., Suzhou, China (Building 2, 5F, Wujiang Sci-Tech Incubator)",
|
||
footer_icp_label: "ICP Filing No.: ",
|
||
footer_icp_value: "Su ICP 2025227635",
|
||
footer_psb_value: "Su Public Security 32050902103112",
|
||
// Carousel
|
||
carousel_activity_badge_1: "Limited Offer",
|
||
carousel_activity_title_1: "618 Mid-Year Sale",
|
||
carousel_activity_desc_1: "Up to 50% off all products",
|
||
carousel_activity_date_1: "June 1 - June 18",
|
||
carousel_notice_title: "System Update",
|
||
carousel_notice_desc: "App 2.0 Now Available<br/>New health reports & remote control features",
|
||
carousel_activity_title_2: "New User Exclusive",
|
||
carousel_activity_desc_2: "100 yuan off your first order",
|
||
carousel_activity_code: "Promo Code: NEW100",
|
||
// About
|
||
about_brand_slogan: "Chookoo Smart Tech",
|
||
about_brand_intro: "Founded in Suzhou, China, Chookoo is a technology company focused on smart pet health management. We are dedicated to redefining pet health management through technological innovation, guided by the philosophy that every life deserves to be truly understood and protected.",
|
||
about_highlight_rd_label: "R&D Staff Ratio",
|
||
about_highlight_rd_desc: "Core team from leading tech companies and research institutes",
|
||
about_highlight_cert_label: "Quality Certification",
|
||
about_highlight_cert_desc: "ISO 9001 certified quality management system",
|
||
about_highlight_lab_number: "In-house",
|
||
about_highlight_lab_label: "AI Lab",
|
||
about_highlight_lab_desc: "Independent AI algorithm lab with continuous optimization",
|
||
about_location: "Suzhou, China · Suzhou Industrial Park",
|
||
// Company
|
||
company_badge: "AIoT Pet Health Management",
|
||
company_title: "Redefining<br/><span class='gradient-text'>Pet Health Management</span> with Technology",
|
||
company_desc: "Integrating AI, IoT, and biosensing technology to build a preventive health ecosystem",
|
||
company_stat_patent_label: "Core Patents",
|
||
company_stat_ai_label: "AI Health Data Points",
|
||
company_stat_records_label: "Pet Health Records",
|
||
company_stat_global_label: "Countries & Regions",
|
||
company_location: "Suzhou, China · Smart Health Management",
|
||
// Product cards
|
||
product_card_cat_title: "Smart Cat Litter Box",
|
||
product_card_cat_desc: "Smart Monitoring · Auto Cleaning",
|
||
product_card_dog_title: "Smart Dog Toilet",
|
||
product_card_dog_desc: "Smart Training · Auto Cleaning",
|
||
product_card_feeder_title: "Smart Feeder",
|
||
product_card_feeder_desc: "Scheduled Feeding · Scientific Nutrition",
|
||
product_card_water_title: "Smart Fountain",
|
||
product_card_water_desc: "Circulating Filter · Drink Reminders",
|
||
product_card_camera_title: "AI Pet Camera",
|
||
product_card_camera_desc: "Remote Monitor · Behavior Recognition",
|
||
product_card_more_title: "More Products",
|
||
product_card_more_desc: "Explore the Full Range",
|
||
// Pet story meta
|
||
pet_story_1_tag_1: "Health Recovery",
|
||
pet_story_1_tag_2: "Heartwarming",
|
||
pet_story_1_author: "Xiaoju's Mom",
|
||
pet_story_1_pet: "Orange Cat · 3 yrs",
|
||
pet_story_2_tag_1: "Healthy Diet",
|
||
pet_story_2_tag_2: "Weight Management",
|
||
pet_story_2_author: "Wangcai's Dad",
|
||
pet_story_2_pet: "Golden Retriever · 2 yrs",
|
||
pet_story_3_tag_1: "AI Recognition",
|
||
pet_story_3_tag_2: "Behavior Analysis",
|
||
pet_story_3_author: "Buding's Sister",
|
||
pet_story_3_pet: "British Shorthair · 2 yrs",
|
||
// VMV
|
||
vmv_title: "Every Life Deserves to be<br/>Truly Understood and Protected",
|
||
vmv_vision_title: "Vision",
|
||
vmv_vision_desc: "Become the most trusted smart health partner for pet families worldwide, defining a new paradigm in proactive health management",
|
||
vmv_values_title: "Values",
|
||
vmv_value_1: "Tech for Good",
|
||
vmv_value_2: "Care First",
|
||
vmv_value_3: "Relentless Innovation",
|
||
vmv_value_4: "Lasting Companionship",
|
||
vmv_mission_title: "Mission",
|
||
vmv_mission_desc: "Make health visible, needs understood, and care seamless",
|
||
vmv_slogan: "Every moment of companionship deserves gentle care",
|
||
// Footer QR
|
||
footer_qr_wechat: "WeChat Official Account",
|
||
footer_qr_weibo: "Weibo",
|
||
footer_qr_xiaohongshu: "Xiaohongshu",
|
||
footer_qr_tiktok: "Douyin",
|
||
footer_qr_shop: "Online Store",
|
||
// Modals
|
||
modal_social_title: "Follow Us",
|
||
modal_social_desc: "Scan QR code for more content",
|
||
modal_social_qr_wechat: "WeChat Official Account",
|
||
modal_social_qr_wechat_desc: "Latest updates",
|
||
modal_social_qr_weibo: "Official Weibo",
|
||
modal_social_qr_weibo_desc: "Interact with us",
|
||
modal_social_qr_xiaohongshu: "Xiaohongshu",
|
||
modal_social_qr_xiaohongshu_desc: "Tips & shares",
|
||
modal_social_qr_tiktok: "Douyin",
|
||
modal_social_qr_tiktok_desc: "Fun videos",
|
||
modal_contact_title: "Contact Us",
|
||
modal_contact_desc: "Scan QR code to add our customer service",
|
||
modal_contact_scan: "Scan with WeChat",
|
||
modal_shop_title: "Official Store",
|
||
modal_shop_desc: "Scan QR code to visit our online store",
|
||
modal_shop_scan: "Scan to Shop",
|
||
// Product display
|
||
display_title_default: "Product Name",
|
||
display_subtitle_default: "Product Description",
|
||
display_learn_more: "Learn More"
|
||
},
|
||
ja: {
|
||
lang_label: "言語",
|
||
hero_eyebrow: "AIoT 主動型ペット健康管理のパイオニア",
|
||
hero_title_suffix: "ペット健康テクノロジー",
|
||
hero_lead: "ペット家庭のスマート健康管理に注力し、AIoT 健康エコシステムを構築。健康を可視化し、ニーズを理解し、愛を途切れさせません。",
|
||
hero_tag_1: "ペット健康管理",
|
||
hero_tag_2: "AIoT スマートデバイス",
|
||
hero_tag_3: "能動的ヘルスインサイト",
|
||
hero_glass_line1: "すべての愛に",
|
||
hero_glass_line2: "<span class='highlight-word'>科学</span>のこたえを",
|
||
carousel_s1_badge: "新発売", carousel_s1_title: "CHOOKOOスマートペットホームコレクション発売", carousel_s1_desc: "全方位の健康リスクを早期発見、すべてのペットを守ります。", carousel_s1_tag1: "自動お掃除", carousel_s1_tag2: "健康モニター", carousel_s1_tag3: "静音設計",
|
||
carousel_s2_badge: "新発売", carousel_s2_title: "スマート犬トイレ", carousel_s2_desc: "犬専用設計、流水洗浄で消臭、スマートセンサー自動清掃。", carousel_s2_tag1: "犬専用", carousel_s2_tag2: "流水洗浄", carousel_s2_tag3: "消臭除菌",
|
||
carousel_s4_badge: "人気No.1", carousel_s4_title: "スマート給餌器", carousel_s4_desc: "タイマーで正確な量を給餌、防湿鮮度ロック、アプリで遠隔給餌。", carousel_s4_tag1: "定量給餌", carousel_s4_tag2: "鮮度ロック", carousel_s4_tag3: "遠隔給餌",
|
||
carousel_s6_badge: "口コミ人気", carousel_s6_title: "スマート飲水機", carousel_s6_desc: "多段ろ過循環水、スマート交換リマインダーでペットが喜んで飲む。", carousel_s6_tag1: "循環水", carousel_s6_tag2: "多段ろ過", carousel_s6_tag3: "交換リマインド",
|
||
carousel_s8_badge: "AI新商品", carousel_s8_title: "AIペットカメラ", carousel_s8_desc: "1080P高画質暗視、AI 行動認識、双方向音声でいつでもコミュニケーション。", carousel_s8_tag1: "AI認識", carousel_s8_tag2: "暗視カメラ", carousel_s8_tag3: "双方向音声",
|
||
section_company_label: "会社紹介",
|
||
section_company_title: "AIoT 主動型ペット健康管理のパイオニア",
|
||
section_company_p1: "Chookoo は中国・蘇州で設立され、スマート健康管理分野に立脚し、予防型健康エコシステムの構築に特化したテクノロジー企業です。",
|
||
section_company_p2: "長三角の高端製造と先端イノベーションを継承し、AI・IoT・バイオセンシングを融合。蘇州の精密製造基盤と学際的 R&D を活かし、ペットと高齢者の主動的健康管理に注力します。無感でデータを収集し、AI が日常の微細変化を健康インサイトへ変換し、安心で予見可能な生活を実現します。",
|
||
section_vmv_label: "ビジョン・ミッション・バリュー",
|
||
section_vmv_title: "世界のペット家庭に最も信頼されるスマート健康パートナーへ",
|
||
badge_vision: "Vision",
|
||
badge_mission: "Mission",
|
||
badge_values: "Values",
|
||
vision_title: "ビジョン",
|
||
vision_desc: "世界のペット家庭に最も信頼されるスマート健康パートナーとなり、主動的健康管理の新しいパラダイムを定義する。",
|
||
mission_title: "ミッション",
|
||
mission_desc: "健康を可視化し、ニーズを理解し、愛をつなぐ。",
|
||
values_title: "価値観",
|
||
values_1: "テクノロジーで善を",
|
||
values_2: "ケア第一",
|
||
values_3: "極致のイノベーション",
|
||
values_4: "長期的な伴走",
|
||
section_about_label: "会社紹介",
|
||
section_beliefs_label: "理念",
|
||
section_products_label: "主要製品",
|
||
section_products_title: "多様なシーンのスマートデバイスと健康管理サービス",
|
||
product_cat_title: "スマート猫トイレ",
|
||
product_cat_desc: "監視と自動清掃で猫の排泄健康を守ります。",
|
||
product_dog_title: "スマート犬トイレ",
|
||
product_dog_desc: "トイレトレーニングと清掃管理を簡単に。",
|
||
product_feeder_title: "スマート給餌器",
|
||
product_feeder_desc: "定時定量と可視化データで健康習慣を構築。",
|
||
product_water_title: "スマート給水器",
|
||
product_water_desc: "循環浄化と飲水リマインドで健康維持。",
|
||
product_camera_title: "AI ペットカメラ",
|
||
product_camera_desc: "遠隔見守りと行動認識で状態を把握。",
|
||
section_testimonials_label: "ユーザーの声",
|
||
section_testimonials_title: "リアルユーザーからの声",
|
||
testimonial_1: "Chookooのスマート猫トイレのおかげで、猫の健康状態をリアルタイムで把握できるようになりました。データレポートを見るたび安心します。",
|
||
testimonial_name_1: "茶トラママ",
|
||
testimonial_pet_1: "茶トラ猫 · 上海",
|
||
testimonial_2: "給餌器のタイマー機能が最高です！出張中でも犬が時間通りに食事できる。アプリのリマインドも便利です。",
|
||
testimonial_name_2: "ワンチャイパパ",
|
||
testimonial_pet_2: "ゴールデンレトリバー · 北京",
|
||
testimonial_3: "AIカメラの行動認識機能には驚きました。猫の様々な状態を自動識別して、いつでも様子を確認できます。",
|
||
testimonial_name_3: "プリンちゃんのお姉さん",
|
||
testimonial_pet_3: "ブリティッシュショートヘア · 深圳",
|
||
section_story_label: "ブランドストーリー",
|
||
section_story_title: "もっと愛を理解する未来へ",
|
||
story_p1: "Chookoo の物語は進化の物語。私たちはペットへの愛から出発し、家族のすべての命への細やかな観察と科学的ケアという愛の広がりを理解しました。",
|
||
story_p2: "私たちのビジョンは、スマートファミリー伴走領域の標準策定者・エコシステムリーダーになること。継続的な製品進化だけでなく、ユーザーとの長期的で誠実なパートナーシップを重視します。",
|
||
story_p3: "「すべての愛に科学のこたえを」を北極星として、テクノロジーの光で見えにくい場所を照らします。",
|
||
story_p4: "未来はすでに、愛という名で。",
|
||
footer_company: "宠科智能科技（苏州）有限公司",
|
||
footer_address_label: "住所：",
|
||
footer_address: "苏州市吴江区江陵街道长安路2358号吴江科技创业园2号楼5层",
|
||
footer_icp_label: "ICP 登録：",
|
||
footer_icp_value: "苏ICP备2025227635号",
|
||
footer_psb_value: "苏公网安备32050902103112号"
|
||
},
|
||
fr: {
|
||
lang_label: "Langue",
|
||
hero_eyebrow: "Pionnier de la gestion proactive de la santé des animaux en AIoT",
|
||
hero_title_suffix: "Technologies Santé Animale",
|
||
hero_lead: "Nous nous concentrons sur la gestion intelligente de la santé des familles avec animaux, en construisant un écosystème AIoT pour rendre la santé visible, les besoins compréhensibles et l’affection continue.",
|
||
hero_tag_1: "Santé animale",
|
||
hero_tag_2: "Appareils AIoT",
|
||
hero_tag_3: "Insights proactifs",
|
||
hero_glass_line1: "Chaque acte d’amour",
|
||
hero_glass_line2: "mérite un écho <span class='highlight-word'>scientifique</span>",
|
||
carousel_s1_badge: "Nouveau", carousel_s1_title: "Collection CHOOKOO Smart Pet Home lancée", carousel_s1_desc: "Détection précoce des risques de santé, protégez chaque compagnon.", carousel_s1_tag1: "Auto-nettoyage", carousel_s1_tag2: "Santé", carousel_s1_tag3: "Silencieux",
|
||
carousel_s2_badge: "Nouveau", carousel_s2_title: "Toilette Smart Chien", carousel_s2_desc: "Conception canine, lavage à eau courante, nettoyage auto intelligent.", carousel_s2_tag1: "Pour chiens", carousel_s2_tag2: "Eau courante", carousel_s2_tag3: "Anti-odeur",
|
||
carousel_s4_badge: "Top vente", carousel_s4_title: "Distributeur Smart", carousel_s4_desc: "Portions précises, fraîcheur conservée, nourrissage à distance via APP.", carousel_s4_tag1: "Portions exactes", carousel_s4_tag2: "Fraîcheur", carousel_s4_tag3: "À distance",
|
||
carousel_s6_badge: "Préféré", carousel_s6_title: "Fontaine Smart", carousel_s6_desc: "Filtration multi-étapes, eau circulante, rappels intelligents.", carousel_s6_tag1: "Circulation", carousel_s6_tag2: "Multi-filtre", carousel_s6_tag3: "Rappel",
|
||
carousel_s8_badge: "IA Nouveau", carousel_s8_title: "Caméra IA Pet", carousel_s8_desc: "1080P vision nocturne, reconnaissance IA, audio bidirectionnel.", carousel_s8_tag1: "Reconnaissance IA", carousel_s8_tag2: "Vision nocturne", carousel_s8_tag3: "Audio双向",
|
||
section_company_label: "Entreprise",
|
||
section_company_title: "Pionnier AIoT de la santé animale proactive",
|
||
section_company_p1: "Fondée à Suzhou (Chine), Chookoo est une entreprise technologique dédiée à la construction d’un écosystème de santé préventive.",
|
||
section_company_p2: "Nous combinons l’innovation de pointe et la fabrication haut de gamme du delta du Yangtsé, en intégrant IA, IoT et biosenseurs. Grâce à la base industrielle de Suzhou et à la R&D interdisciplinaire, nous transformons les micro-changements du quotidien en insights de santé précis pour protéger chaque vie.",
|
||
section_vmv_label: "Vision · Mission · Valeurs",
|
||
section_vmv_title: "Devenir le partenaire santé intelligent le plus fiable des familles avec animaux",
|
||
badge_vision: "Vision",
|
||
badge_mission: "Mission",
|
||
badge_values: "Valeurs",
|
||
vision_title: "Vision",
|
||
vision_desc: "Devenir le partenaire santé intelligent le plus fiable des familles avec animaux et définir un nouveau paradigme de santé proactive.",
|
||
mission_title: "Mission",
|
||
mission_desc: "Rendre la santé visible, les besoins compréhensibles et l’affection continue.",
|
||
values_title: "Valeurs",
|
||
values_1: "Technologie au service du bien",
|
||
values_2: "Le soin avant tout",
|
||
values_3: "Innovation extrême",
|
||
values_4: "Compagnonnage durable",
|
||
section_about_label: "À propos",
|
||
section_beliefs_label: "Nos Valeurs",
|
||
section_products_label: "Produits",
|
||
section_products_title: "Appareils intelligents et services de santé multi-scénarios",
|
||
product_cat_title: "Litière intelligente pour chat",
|
||
product_cat_desc: "Surveillance intelligente et nettoyage automatique.",
|
||
product_dog_title: "Toilettes intelligentes pour chien",
|
||
product_dog_desc: "Apprentissage et nettoyage facilités.",
|
||
product_feeder_title: "Distributeur intelligent",
|
||
product_feeder_desc: "Portions programmées et données visibles.",
|
||
product_water_title: "Fontaine intelligente",
|
||
product_water_desc: "Filtration et rappels d’hydratation.",
|
||
product_camera_title: "Caméra IA pour animaux",
|
||
product_camera_desc: "Surveillance à distance et reconnaissance comportementale.",
|
||
section_testimonials_label: "Témoignages",
|
||
section_testimonials_title: "Voix d'utilisateurs réels",
|
||
testimonial_1: "Grâce à la litière intelligente Chookoo, je peux enfin surveiller la santé de mon chat en temps réel. Chaque rapport me rassure.",
|
||
testimonial_name_1: "Maman d'Orange",
|
||
testimonial_pet_1: "Chat tigré orange · Shanghai",
|
||
testimonial_2: "La fonction de distribution programmée est géniale ! Même en déplacement, mon chien mange à l'heure. L'application est très pratique.",
|
||
testimonial_name_2: "Papa de Wangcai",
|
||
testimonial_pet_2: "Golden Retriever · Pékin",
|
||
testimonial_3: "La reconnaissance comportementale de la caméra IA m'a surpris. Elle identifie automatiquement les différents états de mon chat.",
|
||
testimonial_name_3: "Sœur de Pudding",
|
||
testimonial_pet_3: "British Shorthair · Shenzhen",
|
||
section_story_label: "Histoire de la marque",
|
||
section_story_title: "Construire un futur qui comprend l’amour",
|
||
story_p1: "L’histoire de Chookoo est une histoire d’évolution. Nous avons élargi le sens de l’amour en prenant soin de chaque vie au sein de la famille.",
|
||
story_p2: "Notre vision est d’être un leader d’écosystème et un créateur de standards dans l’accompagnement intelligent des familles, grâce à l’écoute des utilisateurs et à la co‑conception.",
|
||
story_p3: "« Chaque amour mérite une réponse scientifique » est notre étoile polaire pour éclairer les coins à protéger.",
|
||
story_p4: "Le futur est déjà là, il s’appelle amour.",
|
||
footer_company: "Chookoo Intelligent Technology (Suzhou) Co., Ltd.",
|
||
footer_address_label: "Adresse : ",
|
||
footer_address: "苏州市吴江区江陵街道长安路2358号吴江科技创业园2号楼5层",
|
||
footer_icp_label: "ICP : ",
|
||
footer_icp_value: "苏ICP备2025227635号",
|
||
footer_psb_value: "苏公网安备32050902103112号"
|
||
},
|
||
de: {
|
||
lang_label: "Sprache",
|
||
hero_eyebrow: "AIoT-Pionier für proaktives Haustier-Gesundheitsmanagement",
|
||
hero_title_suffix: "Pet Health Technology",
|
||
hero_lead: "Wir fokussieren intelligente Gesundheitsverwaltung für Haustierfamilien und bauen ein AIoT-Ökosystem, damit Gesundheit sichtbar, Bedürfnisse verstanden und Fürsorge nahtlos wird.",
|
||
hero_tag_1: "Haustiergesundheit",
|
||
hero_tag_2: "AIoT Geräte",
|
||
hero_tag_3: "Proaktive Erkenntnisse",
|
||
hero_glass_line1: "Jede Fürsorge verdient",
|
||
hero_glass_line2: "ein <span class='highlight-word'>wissenschaftliches</span> Echo",
|
||
carousel_s1_badge: "Neu", carousel_s1_title: "CHOOKOO Smart Pet Home Kollektion gestartet", carousel_s1_desc: "Ganzheitliche Früherkennung von Gesundheitsrisiken, Schutz für jeden Fellfreund.", carousel_s1_tag1: "Auto-Reinigung", carousel_s1_tag2: "Gesundheit", carousel_s1_tag3: "Leise",
|
||
carousel_s2_badge: "Neu", carousel_s2_title: "Smart Hundetoilette", carousel_s2_desc: "Hundespezifisches Design, fließendes Wasser, intelligente Reinigung.", carousel_s2_tag1: "Für Hunde", carousel_s2_tag2: "Wasserspülung", carousel_s2_tag3: "Geruchskontrolle",
|
||
carousel_s4_badge: "Beliebt", carousel_s4_title: "Smart Futterautomat", carousel_s4_desc: "Präzise Portionierung, Frischhaltung, APP-Steuerung aus der Ferne.", carousel_s4_tag1: "Präzise Portionen", carousel_s4_tag2: "Frischhaltung", carousel_s4_tag3: "Fernfütterung",
|
||
carousel_s6_badge: "Kundenliebling", carousel_s6_title: "Smart Trinkbrunnen", carousel_s6_desc: "Mehrstufige Filterung, zirkulierendes Wasser, intelligente Erinnerung.", carousel_s6_tag1: "Zirkulation", carousel_s6_tag2: "Multifilter", carousel_s6_tag3: "Erinnerung",
|
||
carousel_s8_badge: "KI Neu", carousel_s8_title: "KI Pet Kamera", carousel_s8_desc: "1080P Nachtsicht, KI-Verhalten, Zwei-Wege-Audio.", carousel_s8_tag1: "KI-Erkennung", carousel_s8_tag2: "Nachtsicht", carousel_s8_tag3: "2-Wege-Audio",
|
||
section_company_label: "Unternehmen",
|
||
section_company_title: "AIoT-Pionier für proaktives Haustier-Gesundheitsmanagement",
|
||
section_company_p1: "Chookoo wurde in Suzhou (China) gegründet und ist ein Technologieunternehmen, das ein präventives Gesundheitsökosystem aufbaut.",
|
||
section_company_p2: "Wir verbinden High-End-Fertigung und Innovation im Jangtse-Delta mit KI, IoT und Biosensorik. Durch präzise Datenerfassung und KI-Analyse werden kleine Veränderungen zu klaren Gesundheits-Insights, um jedes Leben besser zu schützen.",
|
||
section_vmv_label: "Vision · Mission · Werte",
|
||
section_vmv_title: "Der vertrauenswürdigste Smart-Health-Partner für Haustierfamilien weltweit",
|
||
badge_vision: "Vision",
|
||
badge_mission: "Mission",
|
||
badge_values: "Werte",
|
||
vision_title: "Vision",
|
||
vision_desc: "Der vertrauenswürdigste Smart-Health-Partner für Haustierfamilien weltweit werden und ein neues Paradigma proaktiver Gesundheitsfürsorge definieren.",
|
||
mission_title: "Mission",
|
||
mission_desc: "Gesundheit sichtbar machen, Bedürfnisse verstehen, Fürsorge verbinden.",
|
||
values_title: "Werte",
|
||
values_1: "Technologie für das Gute",
|
||
values_2: "Fürsorge zuerst",
|
||
values_3: "Radikale Innovation",
|
||
values_4: "Langfristige Begleitung",
|
||
section_about_label: "Über uns",
|
||
section_beliefs_label: "Unsere Werte",
|
||
section_products_label: "Produkte",
|
||
section_products_title: "Smarte Geräte und Gesundheitsservices für viele Szenarien",
|
||
product_cat_title: "Smarte Katzentoilette",
|
||
product_cat_desc: "Monitoring und automatische Reinigung für Katzenhygiene.",
|
||
product_dog_title: "Smarte Hundetoilette",
|
||
product_dog_desc: "Training und Reinigung leicht gemacht.",
|
||
product_feeder_title: "Smarter Futterautomat",
|
||
product_feeder_desc: "Geplante Portionen mit Dateneinblick.",
|
||
product_water_title: "Smarter Trinkbrunnen",
|
||
product_water_desc: "Zirkulation, Filterung und Trink-Erinnerung.",
|
||
product_camera_title: "KI-Haustierkamera",
|
||
product_camera_desc: "Fernbetreuung und Verhaltenserkennung.",
|
||
section_testimonials_label: "Stimmen",
|
||
section_testimonials_title: "Echte Nutzer berichten",
|
||
testimonial_1: "Dank der smarten Katzentoilette von Chookoo kann ich die Gesundheit meiner Katze endlich in Echtzeit überwachen. Jeder Bericht beruhigt mich.",
|
||
testimonial_name_1: "Oranges Mama",
|
||
testimonial_pet_1: "Orange Tabbykatze · Shanghai",
|
||
testimonial_2: "Die geplante Fütterungsfunktion ist toll! Auch auf Geschäftsreisen frisst mein Hund pünktlich. Die App-Erinnerungen sind sehr praktisch.",
|
||
testimonial_name_2: "Wangcais Papa",
|
||
testimonial_pet_2: "Golden Retriever · Peking",
|
||
testimonial_3: "Die Verhaltenserkennung der KI-Kamera hat mich überrascht. Sie erkennt automatisch die verschiedenen Zustände meiner Katze.",
|
||
testimonial_name_3: "Puddings Schwester",
|
||
testimonial_pet_3: "British Shorthair · Shenzhen",
|
||
section_story_label: "Markengeschichte",
|
||
section_story_title: "Eine Zukunft, die Liebe versteht",
|
||
story_p1: "Chookoos Geschichte ist eine Geschichte der Evolution. Wir erweiterten die Bedeutung von Liebe zu wissenschaftlicher Fürsorge für jede Lebensform in der Familie.",
|
||
story_p2: "Wir wollen Standardsetzer und Ökosystemführer im smarten Familien‑Begleiten sein und gemeinsam mit Nutzern Zukunftsprodukte gestalten.",
|
||
story_p3: "„Jede Liebe verdient ein wissenschaftliches Echo“ bleibt unser Nordstern, um unsichtbare Ecken zu erhellen.",
|
||
story_p4: "Die Zukunft ist da – sie heißt Liebe.",
|
||
footer_company: "Chookoo Intelligent Technology (Suzhou) Co., Ltd.",
|
||
footer_address_label: "Adresse: ",
|
||
footer_address: "苏州市吴江区江陵街道长安路2358号吴江科技创业园2号楼5层",
|
||
footer_icp_label: "ICP-Nr.: ",
|
||
footer_icp_value: "苏ICP备2025227635号",
|
||
footer_psb_value: "苏公网安备32050902103112号"
|
||
},
|
||
ru: {
|
||
lang_label: "Язык",
|
||
hero_eyebrow: "Пионер AIoT в проактивном управлении здоровьем питомцев",
|
||
hero_title_suffix: "Pet Health Technology",
|
||
hero_lead: "Мы создаем AIoT‑экосистему для умного управления здоровьем питомцев, чтобы здоровье было видно, потребности понятны, а забота — непрерывной.",
|
||
hero_tag_1: "Здоровье питомцев",
|
||
hero_tag_2: "AIoT устройства",
|
||
hero_tag_3: "Проактивные инсайты",
|
||
hero_glass_line1: "Каждой заботе —",
|
||
hero_glass_line2: "<span class='highlight-word'>научный</span> отклик",
|
||
carousel_s1_badge: "Новинка", carousel_s1_title: "Запуск коллекции CHOOKOO Smart Pet Home", carousel_s1_desc: "Всестороннее раннее выявление рисков для здоровья, защита каждого питомца.", carousel_s1_tag1: "Автоуборка", carousel_s1_tag2: "Здоровье", carousel_s1_tag3: "Тихий",
|
||
carousel_s2_badge: "Новинка", carousel_s2_title: "Умный туалет для собак", carousel_s2_desc: "Для собак, проточная вода, умная автоуборка.", carousel_s2_tag1: "Для собак", carousel_s2_tag2: "Проточная вода", carousel_s2_tag3: "Без запаха",
|
||
carousel_s4_badge: "Хит", carousel_s4_title: "Умная кормушка", carousel_s4_desc: "Точное дозирование, защита от влаги, удалённая кормление через APP.", carousel_s4_tag1: "Дозирование", carousel_s4_tag2: "Свежесть", carousel_s4_tag3: "Дистанционно",
|
||
carousel_s6_badge: "Выбор клиентов", carousel_s6_title: "Умный фонтан", carousel_s6_desc: "Многоступенчатая фильтрация, циркуляция воды, умные напоминания.", carousel_s6_tag1: "Циркуляция", carousel_s6_tag2: "Мультифильтр", carousel_s6_tag3: "Напоминания",
|
||
carousel_s8_badge: "ИИ Новинка", carousel_s8_title: "ИИ Камера для питомцев", carousel_s8_desc: "1080P ночное видение, ИИ-поведение, двусторонняя аудиосвязь.", carousel_s8_tag1: "ИИ-анализ", carousel_s8_tag2: "Ночное видение", carousel_s8_tag3: "Двусторонняя связь",
|
||
section_company_label: "О компании",
|
||
section_company_title: "Пионер AIoT в проактивном управлении здоровьем питомцев",
|
||
section_company_p1: "Chookoo основана в Сучжоу (Китай) и специализируется на создании превентивной экосистемы здоровья.",
|
||
section_company_p2: "Мы объединяем высокоточное производство и передовые инновации, интегрируя ИИ, IoT и биосенсоры. Устройства незаметно собирают данные, а ИИ превращает малые изменения в точные инсайты для более безопасной и предсказуемой жизни.",
|
||
section_vmv_label: "Видение · Миссия · Ценности",
|
||
section_vmv_title: "Самый надежный умный партнер по здоровью для семей с питомцами",
|
||
badge_vision: "Vision",
|
||
badge_mission: "Mission",
|
||
badge_values: "Values",
|
||
vision_title: "Видение",
|
||
vision_desc: "Стать самым надежным умным партнером по здоровью для семей с питомцами и задать новый стандарт проактивного управления здоровьем.",
|
||
mission_title: "Миссия",
|
||
mission_desc: "Сделать здоровье видимым, потребности понятными и заботу непрерывной.",
|
||
values_title: "Ценности",
|
||
values_1: "Технологии во благо",
|
||
values_2: "Забота прежде всего",
|
||
values_3: "Максимальные инновации",
|
||
values_4: "Долгая поддержка",
|
||
section_about_label: "О компании",
|
||
section_beliefs_label: "Наши ценности",
|
||
section_products_label: "Продукты",
|
||
section_products_title: "Умные устройства и сервисы для разных сценариев",
|
||
product_cat_title: "Умный кошачий туалет",
|
||
product_cat_desc: "Мониторинг и автоочистка для здоровья питомца.",
|
||
product_dog_title: "Умный туалет для собак",
|
||
product_dog_desc: "Обучение и простое обслуживание.",
|
||
product_feeder_title: "Умная кормушка",
|
||
product_feeder_desc: "Порции по расписанию и прозрачные данные.",
|
||
product_water_title: "Умный фонтан",
|
||
product_water_desc: "Циркуляция, фильтрация и напоминания.",
|
||
product_camera_title: "AI‑камера для питомцев",
|
||
product_camera_desc: "Удаленный уход и распознавание поведения.",
|
||
section_testimonials_label: "Отзывы",
|
||
section_testimonials_title: "Голоса реальных пользователей",
|
||
testimonial_1: "Благодаря умному лотку Chookoo я наконец могу следить за здоровьем кота в реальном времени. Каждый отчет успокаивает меня.",
|
||
testimonial_name_1: "Мама Рыжика",
|
||
testimonial_pet_1: "Рыжий кот · Шанхай",
|
||
testimonial_2: "Функция планирования кормления отличная! Даже в командировках мой пес ест вовремя. Напоминания в приложении очень удобны.",
|
||
testimonial_name_2: "Папа Ванцая",
|
||
testimonial_pet_2: "Золотистый ретривер · Пекин",
|
||
testimonial_3: "Распознавание поведения AI-камеры меня удивило. Она автоматически определяет разные состояния моей кошки.",
|
||
testimonial_name_3: "Сестра Пудинга",
|
||
testimonial_pet_3: "Британская короткошерстная · Шэньчжэнь",
|
||
section_story_label: "История бренда",
|
||
section_story_title: "Будущее, которое понимает любовь",
|
||
story_p1: "История Chookoo — это история эволюции любви и заботы о каждой жизни в семье.",
|
||
story_p2: "Мы хотим задавать стандарты умного семейного сопровождения и создавать экосистему вместе с пользователями.",
|
||
story_p3: "«Каждой любви — научный отклик» — наш северный ориентир.",
|
||
story_p4: "Будущее уже здесь — и оно называется любовью.",
|
||
footer_company: "Chookoo Intelligent Technology (Suzhou) Co., Ltd.",
|
||
footer_address_label: "Адрес: ",
|
||
footer_address: "苏州市吴江区江陵街道长安路2358号吴江科技创业园2号楼5层",
|
||
footer_icp_label: "ICP №: ",
|
||
footer_icp_value: "苏ICP备2025227635号",
|
||
footer_psb_value: "苏公网安备32050902103112号"
|
||
},
|
||
ar: {
|
||
lang_label: "اللغة",
|
||
hero_eyebrow: "رائد إدارة صحة الحيوانات الأليفة الاستباقية عبر AIoT",
|
||
hero_title_suffix: "تكنولوجيا صحة الحيوانات الأليفة",
|
||
hero_lead: "نركّز على إدارة الصحة الذكية لأسر الحيوانات الأليفة، ونبني منظومة AIoT تجعل الصحة مرئية، والاحتياجات مفهومة، والرعاية بلا انقطاع.",
|
||
hero_tag_1: "إدارة صحة الحيوانات",
|
||
hero_tag_2: "أجهزة AIoT الذكية",
|
||
hero_tag_3: "رؤى صحية استباقية",
|
||
hero_glass_line1: "لكل عناية",
|
||
hero_glass_line2: "صدى <span class='highlight-word'>علمي</span>",
|
||
carousel_s1_badge: "إطلاق جديد", carousel_s1_title: "إطلاق مجموعة CHOOKOO للمنزل الذكي للحيوانات الأليفة", carousel_s1_desc: "كشف مبكر شامل عن مخاطر صحية، حماية كل حيوان أليف.", carousel_s1_tag1: "تنظيف تلقائي", carousel_s1_tag2: "مراقبة صحية", carousel_s1_tag3: "صامت",
|
||
carousel_s2_badge: "جديد", carousel_s2_title: "مرحاض الكلاب الذكي", carousel_s2_desc: "تصميم مخصص للكلاب، غسيل بالماء الجاري، تنظيف ذكي.", carousel_s2_tag1: "للكلاب", carousel_s2_tag2: "ماء جاري", carousel_s2_tag3: "إزالة الروائح",
|
||
carousel_s4_badge: "الأكثر طلباً", carousel_s4_title: "الموزع الذكي", carousel_s4_desc: "كميات دقيقة، حماية من الرطوبة، إطعام عن بعد.", carousel_s4_tag1: "كميات دقيقة", carousel_s4_tag2: "طازج", carousel_s4_tag3: "عن بعد",
|
||
carousel_s6_badge: "مفضل", carousel_s6_title: "النافورة الذكية", carousel_s6_desc: "ترشيح متعدد المراحل، ماء متدفق، تذكيرات ذكية.", carousel_s6_tag1: "تدفق", carousel_s6_tag2: "ترشيح", carousel_s6_tag3: "تذكير",
|
||
carousel_s8_badge: "ذكاء اصطناعي", carousel_s8_title: "كاميرا AI للحيوانات", carousel_s8_desc: "رؤية ليلية 1080P، التعرف بالذكاء الاصطناعي، صوت ثنائي.", carousel_s8_tag1: "التعرف AI", carousel_s8_tag2: "رؤية ليلية", carousel_s8_tag3: "صوت ثنائي",
|
||
section_company_label: "عن الشركة",
|
||
section_company_title: "رائد إدارة صحة الحيوانات الأليفة الاستباقية عبر AIoT",
|
||
section_company_p1: "تأسست Chookoo في سوتشو بالصين، وتركّز على إدارة الصحة الذكية، وهي شركة تقنية مكرسة لبناء منظومة صحة وقائية.",
|
||
section_company_p2: "نمزج قدرات التصنيع المتقدم والابتكار في دلتا اليانغتسي مع الذكاء الاصطناعي وإنترنت الأشياء والاستشعار الحيوي. نعتمد على قاعدة التصنيع الدقيقة في سوتشو وقدرات البحث متعددة التخصصات لتحويل التغيرات اليومية الدقيقة إلى رؤى صحية دقيقة، بما يضمن فهماً وحماية أفضل لكل حياة.",
|
||
section_vmv_label: "الرؤية · الرسالة · القيم",
|
||
section_vmv_title: "أن نصبح الشريك الأكثر ثقة لصحة أسر الحيوانات الأليفة عالمياً",
|
||
badge_vision: "الرؤية",
|
||
badge_mission: "الرسالة",
|
||
badge_values: "القيم",
|
||
vision_title: "الرؤية",
|
||
vision_desc: "أن نصبح الشريك الأكثر ثقة لصحة أسر الحيوانات الأليفة عالمياً وأن نعرّف نموذجاً جديداً لإدارة الصحة الاستباقية.",
|
||
mission_title: "الرسالة",
|
||
mission_desc: "جعل الصحة مرئية، والاحتياجات مفهومة، والرعاية متصلة.",
|
||
values_title: "القيم",
|
||
values_1: "التكنولوجيا للخير",
|
||
values_2: "الرعاية أولاً",
|
||
values_3: "ابتكار بلا حدود",
|
||
values_4: "رفقة طويلة الأمد",
|
||
section_about_label: "عن الشركة",
|
||
section_beliefs_label: "قيمنا",
|
||
section_products_label: "المنتجات",
|
||
section_products_title: "أجهزة ذكية وخدمات صحية لسيناريوهات متعددة",
|
||
product_cat_title: "مرحاض ذكي للقطط",
|
||
product_cat_desc: "مراقبة ذكية وتنظيف تلقائي لصحة القطط.",
|
||
product_dog_title: "مرحاض ذكي للكلاب",
|
||
product_dog_desc: "تدريب أسهل وإدارة تنظيف مريحة.",
|
||
product_feeder_title: "مغذي ذكي",
|
||
product_feeder_desc: "حصص مجدولة وبيانات مرئية لعادات صحية.",
|
||
product_water_title: "نافورة ماء ذكية",
|
||
product_water_desc: "تدوير وتنقية مع تذكير بالترطيب.",
|
||
product_camera_title: "كاميرا AI للحيوانات الأليفة",
|
||
product_camera_desc: "رعاية عن بُعد وتعرّف على السلوك في الوقت الحقيقي.",
|
||
section_testimonials_label: "آراء المستخدمين",
|
||
section_testimonials_title: "أصوات من مستخدمين حقيقيين",
|
||
testimonial_1: "بفضل المرحاض الذكي من Chookoo، أستطيع أخيراً مراقبة صحة قطتي في الوقت الحقيقي. كل تقرير يطمئنني.",
|
||
testimonial_name_1: "أم برتقالي",
|
||
testimonial_pet_1: "قطة برتقالية · شنغهاي",
|
||
testimonial_2: "ميزة التغذية المجدولة رائعة! حتى في رحلات العمل، كلبي يأكل في الوقت المحدد. تذكيرات التطبيق مفيدة جداً.",
|
||
testimonial_name_2: "أب وانغ كاي",
|
||
testimonial_pet_2: "ريتريفر ذهبي · بكين",
|
||
testimonial_3: "ميزة التعرف على السلوك في كاميرا AI أذهلتني. تتعرف تلقائياً على حالات قطتي المختلفة.",
|
||
testimonial_name_3: "أخت بودينغ",
|
||
testimonial_pet_3: "قطة بريطانية قصيرة الشعر · شنتشن",
|
||
section_story_label: "قصة العلامة",
|
||
section_story_title: "نبني مستقبلاً يفهم الحب",
|
||
story_p1: "قصة Chookoo هي قصة تطور. بدأنا من حب الحيوانات الأليفة وفهمنا معنى أوسع للحب: ملاحظة دقيقة ورعاية علمية لكل حياة داخل الأسرة.",
|
||
story_p2: "رؤيتنا أن نكون واضعي المعايير وقادة النظام البيئي في مجال الرفقة الذكية للأسر، عبر شراكات طويلة الأمد مع المستخدمين وتطوير مستمر بالاستماع لملاحظاتهم.",
|
||
story_p3: "نعد بأن تظل عبارة «لكل عناية صدى علمي» بوصلتنا، لتصل أنوار التكنولوجيا إلى كل زاوية بحاجة إلى الفهم والحماية.",
|
||
story_p4: "المستقبل هنا، واسمه الحب.",
|
||
footer_company: "Chookoo Intelligent Technology (Suzhou) Co., Ltd.",
|
||
footer_address_label: "العنوان: ",
|
||
footer_address: "苏州市吴江区江陵街道长安路2358号吴江科技创业园2号楼5层",
|
||
footer_icp_label: "رقم ICP: ",
|
||
footer_icp_value: "苏ICP备2025227635号",
|
||
footer_psb_value: "苏公网安备32050902103112号"
|
||
}
|
||
};
|
||
|
||
const elements = Array.from(document.querySelectorAll("[data-i18n]"));
|
||
const langSelect = document.getElementById("langSelect");
|
||
|
||
const normalizeLang = (lang) => {
|
||
if (!lang) return "en";
|
||
const lower = lang.toLowerCase();
|
||
if (lower.startsWith("zh")) return "zh";
|
||
if (lower.startsWith("ja")) return "ja";
|
||
if (lower.startsWith("fr")) return "fr";
|
||
if (lower.startsWith("de")) return "de";
|
||
if (lower.startsWith("ru")) return "ru";
|
||
if (lower.startsWith("ar")) return "ar";
|
||
return "en";
|
||
};
|
||
|
||
// 首页故事数据（随机展示3个）
|
||
const homepageStories = [
|
||
{
|
||
id: 'story-1', image: 'images/cat.png', avatar: 'images/cat.png',
|
||
zh: { title: '小橘的逆袭日记', excerpt: '第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康...', tag1: '健康恢复', tag2: '暖心故事', author: '小橘妈妈', pet: '橘猫 · 3岁' },
|
||
en: { title: "Little Orange's Recovery Diary", excerpt: "After discovering Chookoo's smart litter box, Little Orange finally regained health...", tag1: 'Health Recovery', tag2: 'Heartwarming', author: "Xiaoju's Mom", pet: 'Orange Cat · 3 yrs' }
|
||
},
|
||
{
|
||
id: 'story-2', image: 'images/dog.jpeg', avatar: 'images/dog.jpeg',
|
||
zh: { title: '旺财的健身日记', excerpt: '旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯...', tag1: '健康饮食', tag2: '体重管理', author: '旺财爸爸', pet: '金毛 · 2岁' },
|
||
en: { title: "Wangcai's Fitness Diary", excerpt: "Wangcai used to be a picky eater, Chookoo's smart feeder helped establish good feeding habits...", tag1: 'Healthy Diet', tag2: 'Weight Management', author: "Wangcai's Dad", pet: 'Golden Retriever · 2 yrs' }
|
||
},
|
||
{
|
||
id: 'story-3', image: 'images/cat.png', avatar: 'images/cat.png',
|
||
zh: { title: '布丁的日常', excerpt: '自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分...', tag1: 'AI识别', tag2: '行为分析', author: '布丁姐姐', pet: '英短 · 2岁' },
|
||
en: { title: "Pudding's Daily Life", excerpt: "Since using the AI camera, it can automatically recognize Pudding's states. What a surprise...", tag1: 'AI Recognition', tag2: 'Behavior Analysis', author: "Buding's Sister", pet: 'British Shorthair · 2 yrs' }
|
||
},
|
||
{
|
||
id: 'story-4', image: 'images/dog.jpeg', avatar: 'images/dog.jpeg',
|
||
zh: { title: '豆豆的饮水日记', excerpt: '豆豆以前不爱喝水，用了智能饮水机后，循环净化的水让它爱喝了...', tag1: '饮水健康', tag2: '循环净化', author: '豆豆妈妈', pet: '柯基 · 3岁' },
|
||
en: { title: "Doudou's Drinking Diary", excerpt: "Doudou didn't like drinking water before. The smart fountain's circulating water changed that...", tag1: 'Hydration', tag2: 'Circulation', author: "Doudou's Mom", pet: 'Corgi · 3 yrs' }
|
||
},
|
||
{
|
||
id: 'story-5', image: 'images/cat.png', avatar: 'images/cat.png',
|
||
zh: { title: '咪咪的健康守护', excerpt: 'Chookoo的智能设备帮我实时监测咪咪的健康状况，每次数据报告都让我很安心...', tag1: '健康监测', tag2: '预防管理', author: '咪咪妈妈', pet: '美短 · 4岁' },
|
||
en: { title: "Mimi's Health Guardian", excerpt: "Chookoo's smart devices help me monitor Mimi's health in real time. Every report gives me peace of mind...", tag1: 'Health Monitoring', tag2: 'Preventive Care', author: "Mimi's Mom", pet: 'American Shorthair · 4 yrs' }
|
||
},
|
||
{
|
||
id: 'story-6', image: 'images/dog.jpeg', avatar: 'images/dog.jpeg',
|
||
zh: { title: '大黄的如厕训练', excerpt: '大黄以前随地大小便，用了Chookoo的智能狗厕所，科学训练让它很快养成了好习惯...', tag1: '如厕训练', tag2: '清洁管理', author: '大黄爸爸', pet: '田园犬 · 2岁' },
|
||
en: { title: "Dahuang's Toilet Training", excerpt: "Dahuang used to go anywhere. Chookoo's smart dog toilet helped him quickly learn good habits...", tag1: 'Toilet Training', tag2: 'Clean Management', author: "Dahuang's Dad", pet: 'Chinese Rural Dog · 2 yrs' }
|
||
}
|
||
];
|
||
|
||
// 首次加载时随机选3个故事的索引，存住不变（语言切换只更新文字不重新随机）
|
||
let randomStoryIndices = null;
|
||
function pickRandomStories() {
|
||
const indices = [0,1,2,3,4,5];
|
||
// Fisher-Yates shuffle
|
||
for (let i = indices.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[indices[i], indices[j]] = [indices[j], indices[i]];
|
||
}
|
||
return indices.slice(0, 3);
|
||
}
|
||
|
||
function renderRandomStories(lang) {
|
||
const grid = document.getElementById('petStoriesGrid');
|
||
if (!grid) return;
|
||
if (!randomStoryIndices) randomStoryIndices = pickRandomStories();
|
||
const l = (lang === 'zh') ? 'zh' : 'en';
|
||
let html = '';
|
||
randomStoryIndices.forEach(idx => {
|
||
const s = homepageStories[idx];
|
||
const d = s[l] || s.zh;
|
||
html += '<a href="pages/story-detail.html?id=' + s.id + '" class="pet-story-card">' +
|
||
'<img class="pet-story-image" src="' + s.image + '" alt="' + d.title + '" />' +
|
||
'<div class="pet-story-content">' +
|
||
'<h3>' + d.title + '</h3>' +
|
||
'<p class="pet-story-excerpt">' + d.excerpt + '</p>' +
|
||
'<div class="pet-story-meta">' +
|
||
'<span class="pet-story-tag">' + d.tag1 + '</span>' +
|
||
'<span class="pet-story-tag">' + d.tag2 + '</span>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'<div class="pet-story-author">' +
|
||
'<img class="pet-story-avatar" src="' + s.avatar + '" alt="" />' +
|
||
'<div class="pet-story-author-info">' +
|
||
'<p class="pet-story-author-name">' + d.author + '</p>' +
|
||
'<p class="pet-story-pet">' + d.pet + '</p>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</a>';
|
||
});
|
||
grid.innerHTML = html;
|
||
}
|
||
|
||
const applyLang = (lang) => {
|
||
const dict = translations[lang] || translations.en;
|
||
elements.forEach((el) => {
|
||
const key = el.dataset.i18n;
|
||
if (dict[key]) {
|
||
el.innerHTML = dict[key];
|
||
}
|
||
});
|
||
if (langSelect) langSelect.value = lang;
|
||
document.documentElement.lang = lang === "zh" ? "zh-CN" : lang;
|
||
document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
|
||
// Refresh product display area with current language
|
||
try {
|
||
if (typeof showProduct === 'function') {
|
||
showProduct(currentProductId);
|
||
}
|
||
} catch(e) {}
|
||
// Refresh random stories with current language
|
||
try { renderRandomStories(lang); } catch(e) {}
|
||
};
|
||
|
||
const detected = normalizeLang(navigator.language || navigator.userLanguage || "en");
|
||
applyLang(detected);
|
||
|
||
if (langSelect) {
|
||
langSelect.addEventListener("change", (event) => {
|
||
applyLang(event.target.value);
|
||
});
|
||
}
|
||
|
||
const sections = Array.from(document.querySelectorAll(".snap-section"));
|
||
|
||
// 滚动显示动画
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: "0px 0px -50px 0px"
|
||
};
|
||
|
||
const scrollObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('revealed');
|
||
entry.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// 观察所有需要动画的元素
|
||
document.querySelectorAll('.scroll-reveal, .stagger-item').forEach(el => {
|
||
scrollObserver.observe(el);
|
||
});
|
||
|
||
// 为卡片添加交错动画延迟
|
||
document.querySelectorAll('.info-card, .product-card, .testimonial-card, .pet-story-card').forEach((card, index) => {
|
||
card.style.transitionDelay = `${index * 0.1}s`;
|
||
card.classList.add('stagger-item');
|
||
scrollObserver.observe(card);
|
||
});
|
||
|
||
// 视差效果
|
||
let ticking = false;
|
||
window.addEventListener('scroll', () => {
|
||
if (!ticking) {
|
||
window.requestAnimationFrame(() => {
|
||
const scrolled = window.scrollY;
|
||
document.querySelectorAll('.parallax-element').forEach((el, index) => {
|
||
const speed = 0.1 + (index * 0.05);
|
||
el.style.transform = `translateY(${scrolled * speed}px)`;
|
||
});
|
||
ticking = false;
|
||
});
|
||
ticking = true;
|
||
}
|
||
});
|
||
|
||
// 产品卡片交互：固定展示区方案 + 自动轮播
|
||
const productCards = document.querySelectorAll('.product-card[data-product]');
|
||
const displayArea = document.getElementById('productDisplayArea');
|
||
const displayImage = document.getElementById('displayImage');
|
||
const displayTitle = document.getElementById('displayTitle');
|
||
const displaySubtitle = document.getElementById('displaySubtitle');
|
||
const displayFeatures = document.getElementById('displayFeatures');
|
||
const productGrid = document.getElementById('productGrid');
|
||
|
||
// 产品数据 - 支持多语言
|
||
const productData = {
|
||
1: {
|
||
zh: { title: '智能猫厕所', subtitle: 'AkiWell主动健康，风险提前知', features: ['心跳呼吸双维侦测系统', '非接触式体温监测阵列', 'AI健康识别摄像头', '猫咪专属称重法'] },
|
||
en: { title: 'Smart Cat Litter Box', subtitle: 'Protecting cat health with AI waste analysis', features: ['Real-time monitoring of frequency & duration', 'AI waste condition analysis', 'Auto cleaning keeps it fresh', 'Health trend data reports'] },
|
||
image: 'images/cat.png', pets: ['cat']
|
||
},
|
||
2: {
|
||
zh: { title: '智能狗厕所', subtitle: '科学如厕训练，培养良好习惯', features: ['科学如厕训练引导', '智能感应自动清洁', 'APP远程监控', '培养良好如厕习惯'] },
|
||
en: { title: 'Smart Dog Toilet', subtitle: 'Scientific training for good habits', features: ['Scientific potty training guidance', 'Smart sensor auto cleaning', 'APP remote monitoring', 'Develop good toilet habits'] },
|
||
image: 'images/dog.jpeg', pets: ['dog']
|
||
},
|
||
3: {
|
||
zh: { title: '智能喂食器', subtitle: '精准投喂，养成健康饮食习惯', features: ['多格设计支持不同食材', '定时定量精准投喂', '进食数据实时同步APP', '养成健康饮食习惯'] },
|
||
en: { title: 'Smart Feeder', subtitle: 'Precise feeding for healthy eating habits', features: ['Multi-compartment for different foods', 'Scheduled precise portion control', 'Feeding data synced to APP', 'Build healthy eating habits'] },
|
||
image: 'images/feeder.png', pets: ['cat', 'dog']
|
||
},
|
||
4: {
|
||
zh: { title: '智能饮水机', subtitle: '活水吸引，提升饮水健康', features: ['四重过滤循环净化', '活水吸引增加饮水兴趣', 'APP记录饮水量', '智能饮水提醒'] },
|
||
en: { title: 'Smart Fountain', subtitle: 'Flowing water for better hydration', features: ['4-stage filtration & circulation', 'Flowing water encourages drinking', 'APP tracks water intake', 'Smart hydration reminders'] },
|
||
image: 'images/water.jpeg', pets: ['cat', 'dog']
|
||
},
|
||
5: {
|
||
zh: { title: 'AI宠物摄像头', subtitle: '随时查看，远程守护宠物', features: ['1080P高清夜视', 'AI行为识别捕捉精彩瞬间', '双向语音互动', '随时查看宠物状态'] },
|
||
en: { title: 'AI Pet Camera', subtitle: 'Check on your pet anytime, anywhere', features: ['1080P HD night vision', 'AI behavior recognition captures moments', 'Two-way voice interaction', 'Monitor your pet remotely'] },
|
||
image: 'images/camera.jpeg', pets: ['cat', 'dog', 'bird']
|
||
}
|
||
};
|
||
|
||
// 宠物图标SVG映射
|
||
const petIcons = {
|
||
cat: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="5.5" cy="8.5" r="2.5"/><circle cx="18.5" cy="8.5" r="2.5"/><circle cx="8.5" cy="4.5" r="2"/><circle cx="15.5" cy="4.5" r="2"/><path d="M12 22c-4 0-7-2-7-5 0-1.5 1-3 3-4 1.5-.7 3-1 4-1s2.5.3 4 1c2 1 3 2.5 3 4 0 3-3 5-7 5z"/></svg>',
|
||
dog: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .08.703 1.725 1.722 3.656 1 1.261-.472 1.96-1.45 2.344-2.5M14 5.172C14 3.782 15.577 2.679 17.5 3c2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.344-2.5"/><path d="M8 14v.5M16 14v.5M11.25 16.25h1.5L12 17l-.75-.75z"/><path d="M4.42 11.247A13.152 13.152 0 008 14.904a6.474 6.474 0 004 0 13.15 13.15 0 003.58-3.657c.378-.473.946-.788 1.569-.788C18.426 10.459 20 11.68 20 13.5c0 3.5-3.5 6.5-8 6.5s-8-3-8-6.5c0-1.82 1.574-3.041 2.851-3.041.623 0 1.191.315 1.569.788z"/></svg>',
|
||
bird: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 7h.01M3.4 18H12a8 8 0 008-8V7a4 4 0 00-7.28-2.3L2 20"/><path d="m20 7 2 .5-2 .5M10 18v3M14 18v3"/></svg>'
|
||
};
|
||
|
||
// 轮播指示器
|
||
const indicatorContainer = document.createElement('div');
|
||
indicatorContainer.className = 'carousel-indicators';
|
||
indicatorContainer.innerHTML = [1,2,3,4,5].map(i =>
|
||
`<button class="carousel-dot" data-product="${i}" aria-label="产品${i}"></button>`
|
||
).join('');
|
||
if (displayArea) {
|
||
displayArea.appendChild(indicatorContainer);
|
||
}
|
||
|
||
const carouselDots = document.querySelectorAll('.carousel-dot');
|
||
|
||
let currentProductId = 1;
|
||
let autoPlayTimer = null;
|
||
let isUserInteracting = false;
|
||
const AUTO_PLAY_INTERVAL = 3500; // 3.5秒切换
|
||
|
||
function showProduct(productId, isAutoPlay = false) {
|
||
const data = productData[productId];
|
||
if (!data || !displayArea) return;
|
||
|
||
currentProductId = parseInt(productId);
|
||
|
||
// Get current language
|
||
const currentLang = document.documentElement.lang === 'zh-CN' ? 'zh' : 'en';
|
||
const langData = data[currentLang] || data.zh;
|
||
|
||
// 更新内容
|
||
displayImage.src = data.image;
|
||
displayTitle.textContent = langData.title;
|
||
displaySubtitle.textContent = langData.subtitle;
|
||
displayFeatures.innerHTML = langData.features.map(f => `<li>${f}</li>`).join('');
|
||
|
||
// 更新宠物图标
|
||
const displayPets = document.getElementById('displayPets');
|
||
if (displayPets && data.pets) {
|
||
displayPets.innerHTML = data.pets.map(p => `<span class="pet-icon ${p}">${petIcons[p] || ''}</span>`).join('');
|
||
}
|
||
|
||
// 显示展示区
|
||
displayArea.classList.add('show');
|
||
|
||
// 更新卡片状态
|
||
productCards.forEach(c => {
|
||
const cardId = parseInt(c.dataset.product);
|
||
if (cardId === currentProductId) {
|
||
c.classList.add('active');
|
||
c.classList.remove('dimmed');
|
||
} else {
|
||
c.classList.add('dimmed');
|
||
c.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// 更新指示器
|
||
carouselDots.forEach(dot => {
|
||
const dotId = parseInt(dot.dataset.product);
|
||
if (dotId === currentProductId) {
|
||
dot.classList.add('active');
|
||
} else {
|
||
dot.classList.remove('active');
|
||
}
|
||
});
|
||
}
|
||
|
||
function startAutoPlay() {
|
||
if (autoPlayTimer) clearInterval(autoPlayTimer);
|
||
autoPlayTimer = setInterval(() => {
|
||
if (!isUserInteracting) {
|
||
currentProductId = currentProductId >= 5 ? 1 : currentProductId + 1;
|
||
showProduct(currentProductId, true);
|
||
}
|
||
}, AUTO_PLAY_INTERVAL);
|
||
}
|
||
|
||
function stopAutoPlay() {
|
||
if (autoPlayTimer) {
|
||
clearInterval(autoPlayTimer);
|
||
autoPlayTimer = null;
|
||
}
|
||
}
|
||
|
||
function hideProduct() {
|
||
if (displayArea) displayArea.classList.remove('show');
|
||
productCards.forEach(c => c.classList.remove('active', 'dimmed'));
|
||
carouselDots.forEach(dot => dot.classList.remove('active'));
|
||
}
|
||
|
||
// 鼠标进入产品区域时暂停自动播放
|
||
productCards.forEach(card => {
|
||
card.addEventListener('mouseenter', function() {
|
||
isUserInteracting = true;
|
||
const productId = this.dataset.product;
|
||
showProduct(productId);
|
||
});
|
||
|
||
card.addEventListener('mouseleave', function() {
|
||
isUserInteracting = false;
|
||
// 恢复自动播放，从当前产品继续
|
||
startAutoPlay();
|
||
});
|
||
});
|
||
|
||
// 展示区鼠标事件
|
||
if (displayArea) {
|
||
displayArea.addEventListener('mouseenter', function() {
|
||
isUserInteracting = true;
|
||
});
|
||
|
||
displayArea.addEventListener('mouseleave', function() {
|
||
isUserInteracting = false;
|
||
startAutoPlay();
|
||
});
|
||
}
|
||
|
||
// 指示器点击事件
|
||
carouselDots.forEach(dot => {
|
||
dot.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
const productId = this.dataset.product;
|
||
showProduct(productId);
|
||
});
|
||
|
||
dot.addEventListener('mouseenter', function() {
|
||
isUserInteracting = true;
|
||
});
|
||
|
||
dot.addEventListener('mouseleave', function() {
|
||
isUserInteracting = false;
|
||
startAutoPlay();
|
||
});
|
||
});
|
||
|
||
// 启动自动轮播
|
||
startAutoPlay();
|
||
// 初始显示第一个产品
|
||
showProduct(1);
|
||
})();
|
||
|
||
</script>
|
||
|
||
<script>
|
||
// 订阅表单处理
|
||
document.getElementById('subscribeForm').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
var input = this.querySelector('input');
|
||
var msg = document.getElementById('subscribeMsg');
|
||
var email = input.value.trim();
|
||
|
||
var errorIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
|
||
var successIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>';
|
||
|
||
msg.className = 'subscribe-msg';
|
||
|
||
if (!email) {
|
||
msg.innerHTML = errorIcon + '<span>请输入邮箱</span>';
|
||
msg.className = 'subscribe-msg error show';
|
||
return;
|
||
}
|
||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||
msg.innerHTML = errorIcon + '<span>请输入有效的邮箱地址</span>';
|
||
msg.className = 'subscribe-msg error show';
|
||
return;
|
||
}
|
||
|
||
msg.innerHTML = successIcon + '<span>订阅成功！感谢您的关注</span>';
|
||
msg.className = 'subscribe-msg success show';
|
||
input.value = '';
|
||
|
||
setTimeout(function() {
|
||
msg.classList.remove('show');
|
||
}, 3000);
|
||
});
|
||
|
||
// 社交媒体弹窗控制（延迟查找，弹窗 DOM 在 #pageContent 外）
|
||
function getSocialModal() { return document.getElementById('socialModal'); }
|
||
|
||
// 点击社交媒体图标打开弹窗
|
||
document.querySelectorAll('.footer-social a').forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
var m = getSocialModal();
|
||
if (m) { m.classList.add('active'); document.body.style.overflow = 'hidden'; }
|
||
});
|
||
});
|
||
|
||
// 联系我们弹窗控制
|
||
var contactBtn = document.getElementById('contactBtn');
|
||
function getContactModal() { return document.getElementById('contactModal'); }
|
||
|
||
if (contactBtn) {
|
||
contactBtn.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
var m = getContactModal();
|
||
if (m) { m.classList.add('active'); document.body.style.overflow = 'hidden'; }
|
||
});
|
||
}
|
||
|
||
// 旗舰店弹窗打开
|
||
var shopBtnEl = document.getElementById('shopBtn');
|
||
if (shopBtnEl) {
|
||
shopBtnEl.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
var m = document.getElementById('shopModal');
|
||
if (m) { m.classList.add('active'); document.body.style.overflow = 'hidden'; }
|
||
});
|
||
}
|
||
|
||
// 所有三类弹窗的关闭/遮罩/ESC — 延迟绑定
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
['socialModal', 'contactModal', 'shopModal'].forEach(function(id) {
|
||
var m = document.getElementById(id);
|
||
if (!m) return;
|
||
var closeBtn = m.querySelector('.contact-modal-close, .social-modal-close');
|
||
if (closeBtn) {
|
||
closeBtn.addEventListener('click', function() {
|
||
m.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
});
|
||
}
|
||
m.addEventListener('click', function(e) {
|
||
if (e.target === m) {
|
||
m.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
});
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
['socialModal', 'contactModal', 'shopModal'].forEach(function(id) {
|
||
var m = document.getElementById(id);
|
||
if (m && m.classList.contains('active')) {
|
||
m.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
</script>
|
||
</div><!-- #pageContent -->
|
||
|
||
<!-- 社交媒体二维码弹窗 -->
|
||
<div class="social-modal-overlay" id="socialModal">
|
||
<div class="social-modal" style="position: relative;">
|
||
<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 data-i18n="modal_social_title">关注我们</h3>
|
||
<p data-i18n="modal_social_desc">扫描二维码，获取更多精彩内容</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-.004-.27-.022-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
|
||
</div>
|
||
<div class="qr-image">
|
||
<img src="images/qr-wechat.png" alt="微信二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||
</div>
|
||
<div class="qr-name" data-i18n="modal_social_qr_wechat">微信公众号</div>
|
||
<div class="qr-desc" data-i18n="modal_social_qr_wechat_desc">获取最新资讯</div>
|
||
</div>
|
||
<div class="social-qr-item weibo">
|
||
<div class="qr-icon">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.739 5.443zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.194.573zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.579-.18-.405-.649.381-1.017.422-1.896-.001-2.523-.789-1.174-2.952-1.107-5.387-.03 0 0-.772.334-.575-.272.383-1.217.324-2.236-.27-2.82-1.35-1.327-4.927.047-8.001 3.073C1.077 10.876 0 13.058 0 14.899c0 3.524 4.521 5.668 8.944 5.668 5.797 0 9.653-3.367 9.653-6.041 0-1.618-1.363-2.535-2.538-2.877zm2.839-4.603c-.632-.748-1.564-1.12-2.494-1.084l-.101.004c-.215.012-.392.181-.398.398-.006.219.161.398.378.408l.091.002c.618-.024 1.244.228 1.68.738.437.51.591 1.162.464 1.771l-.021.091c-.047.211.078.422.287.478.212.056.428-.067.49-.276l.025-.1c.178-.853-.016-1.772-.601-2.53zm1.932-2.186c-1.162-1.375-2.876-2.059-4.586-1.991l-.124.005c-.269.015-.484.239-.472.508.012.27.235.482.504.474l.113-.003c1.373-.055 2.748.494 3.682 1.6.934 1.107 1.264 2.536.972 3.86l-.028.118c-.06.26.094.521.352.588.261.068.529-.082.603-.34l.033-.135c.362-1.65-.05-3.437-1.049-4.684z"/></svg>
|
||
</div>
|
||
<div class="qr-image">
|
||
<img src="images/qr-weibo.png" alt="微博二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||
</div>
|
||
<div class="qr-name" data-i18n="modal_social_qr_weibo">官方微博</div>
|
||
<div class="qr-desc" data-i18n="modal_social_qr_weibo_desc">互动交流</div>
|
||
</div>
|
||
<div class="social-qr-item xiaohongshu">
|
||
<div class="qr-icon">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
|
||
</div>
|
||
<div class="qr-image">
|
||
<img src="images/qr-xiaohongshu.png" alt="小红书二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||
</div>
|
||
<div class="qr-name" data-i18n="modal_social_qr_xiaohongshu">小红书</div>
|
||
<div class="qr-desc" data-i18n="modal_social_qr_xiaohongshu_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/qr-tiktok.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||
</div>
|
||
<div class="qr-name" data-i18n="modal_social_qr_tiktok">抖音</div>
|
||
<div class="qr-desc" data-i18n="modal_social_qr_tiktok_desc">精彩视频</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系我们弹窗 -->
|
||
<div class="contact-modal-overlay" id="contactModal">
|
||
<div class="contact-modal">
|
||
<button class="contact-modal-close" id="contactModalClose">
|
||
<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">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||
</svg>
|
||
</div>
|
||
<h3 data-i18n="modal_contact_title">联系我们</h3>
|
||
<p data-i18n="modal_contact_desc">扫描下方二维码，添加专属客服</p>
|
||
<div class="contact-qr-wrapper">
|
||
<div class="contact-qr-box">
|
||
<img src="images/qr-contact.png" alt="客服二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换客服二维码<br>qr-contact.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 data-i18n="modal_contact_scan">微信扫码咨询</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 官方旗舰店弹窗 -->
|
||
<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 data-i18n="modal_shop_title">官方旗舰店</h3>
|
||
<p data-i18n="modal_shop_desc">扫描二维码，进入官方店铺选购</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 data-i18n="modal_shop_scan">扫码进店</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|