5401 lines
207 KiB
HTML
5401 lines
207 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-x: hidden;
|
||
overflow-y: scroll;
|
||
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: hidden;
|
||
overflow-y: visible;
|
||
width: 100%;
|
||
scroll-behavior: smooth;
|
||
}
|
||
#pageContent {
|
||
min-width: 1280px;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
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;
|
||
right: 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;
|
||
max-width: 1400px;
|
||
width: 100%;
|
||
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: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
.footer-contact-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.footer-contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 16px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
color: #94a3b8;
|
||
font-size: 14px;
|
||
text-decoration: none;
|
||
transition: all 0.25s ease;
|
||
}
|
||
.footer-contact-item:hover {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #fff;
|
||
border-color: rgba(255, 255, 255, 0.12);
|
||
}
|
||
.footer-contact-item svg {
|
||
color: var(--primary);
|
||
flex-shrink: 0;
|
||
}
|
||
.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: contain;
|
||
}
|
||
.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, #fa6400 0%, #ff8a00 100%);
|
||
color: #fff;
|
||
}
|
||
.social-qr-item.xiaohongshu .qr-icon {
|
||
background: linear-gradient(135deg, #fe2c55 0%, #ff2442 100%);
|
||
color: #fff;
|
||
}
|
||
.social-qr-item.tiktok .qr-icon {
|
||
background: linear-gradient(135deg, #000 0%, #25f4ee 100%);
|
||
color: #fff;
|
||
}
|
||
.social-qr-item .qr-image {
|
||
width: 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;
|
||
}
|
||
.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);
|
||
}
|
||
/* 媒体报道板块 */
|
||
.media-section {
|
||
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
|
||
}
|
||
.media-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 40px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
.media-header {
|
||
text-align: center;
|
||
}
|
||
.media-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 18px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
|
||
border: 1px solid rgba(239, 68, 68, 0.15);
|
||
color: #dc2626;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
.media-title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
line-height: 1.4;
|
||
margin: 0 0 10px;
|
||
}
|
||
.media-subtitle {
|
||
font-size: 16px;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
.media-gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16px;
|
||
width: 100%;
|
||
}
|
||
.media-gallery-card {
|
||
position: relative;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
cursor: pointer;
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
aspect-ratio: 4 / 3;
|
||
}
|
||
.media-gallery-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
|
||
border-color: rgba(239, 68, 68, 0.25);
|
||
}
|
||
.media-gallery-card img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.media-gallery-card:hover img {
|
||
transform: scale(1.05);
|
||
}
|
||
.media-gallery-card .card-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 16px;
|
||
}
|
||
.media-gallery-card:hover .card-overlay {
|
||
opacity: 1;
|
||
}
|
||
.card-overlay-text {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
/* Lightbox */
|
||
.media-lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 3000;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
backdrop-filter: blur(12px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.media-lightbox.active {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
.media-lightbox-content {
|
||
position: relative;
|
||
max-width: 90vw;
|
||
max-height: 88vh;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
|
||
transform: scale(0.92);
|
||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
.media-lightbox.active .media-lightbox-content {
|
||
transform: scale(1);
|
||
}
|
||
.media-lightbox-content img {
|
||
display: block;
|
||
max-width: 90vw;
|
||
max-height: 88vh;
|
||
object-fit: contain;
|
||
}
|
||
.media-lightbox-close {
|
||
position: absolute;
|
||
top: 16px;
|
||
right: 16px;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
border: none;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
transition: all 0.2s ease;
|
||
z-index: 10;
|
||
}
|
||
.media-lightbox-close:hover {
|
||
background: rgba(0, 0, 0, 0.75);
|
||
transform: scale(1.1);
|
||
}
|
||
.media-lightbox-close svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
.media-lightbox-nav {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
transition: all 0.25s ease;
|
||
z-index: 10;
|
||
}
|
||
.media-lightbox-nav:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-50%) scale(1.08);
|
||
}
|
||
.media-lightbox-nav.prev { left: 20px; }
|
||
.media-lightbox-nav.next { right: 20px; }
|
||
.media-lightbox-nav svg { width: 20px; height: 20px; }
|
||
.media-lightbox-counter {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 8px 20px;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
z-index: 10;
|
||
}
|
||
.media-highlight {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
padding: 16px 32px;
|
||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(249, 115, 22, 0.05) 100%);
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(239, 68, 68, 0.1);
|
||
max-width: 900px;
|
||
text-align: center;
|
||
}
|
||
.media-highlight-text {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #6b7280;
|
||
line-height: 1.8;
|
||
}
|
||
.media-highlight-text strong {
|
||
color: #dc2626;
|
||
font-weight: 600;
|
||
}
|
||
.media-highlight-text em {
|
||
font-style: normal;
|
||
color: #374151;
|
||
font-weight: 500;
|
||
}
|
||
.media-highlight-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
flex-shrink: 0;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #dc2626, #f59e0b);
|
||
}
|
||
/* 专利轮播 - coverflow 风格 */
|
||
.patent-carousel-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
gap: 12px;
|
||
}
|
||
.patent-carousel {
|
||
position: relative;
|
||
padding: 20px 0 0;
|
||
margin-bottom: 20px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.patent-viewport {
|
||
position: relative;
|
||
height: 280px;
|
||
}
|
||
.patent-cert {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 180px;
|
||
height: 240px;
|
||
margin-left: -90px;
|
||
margin-top: -120px;
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),
|
||
opacity 0.45s ease,
|
||
filter 0.45s ease;
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
z-index: 0;
|
||
filter: brightness(0.3) saturate(0.2);
|
||
pointer-events: none;
|
||
will-change: transform, opacity;
|
||
}
|
||
.patent-cert.no-transition {
|
||
transition: none !important;
|
||
}
|
||
.patent-cert.active {
|
||
z-index: 5;
|
||
cursor: default;
|
||
pointer-events: auto;
|
||
}
|
||
.patent-cert.active::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -2px;
|
||
border-radius: 14px;
|
||
background: linear-gradient(135deg, rgba(47,107,255,0.6), rgba(6,182,212,0.4), rgba(139,92,246,0.5));
|
||
z-index: -1;
|
||
animation: patentGlow 3s ease-in-out infinite;
|
||
}
|
||
.patent-cert.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
|
||
animation: patentShimmer 2.5s ease-in-out infinite;
|
||
pointer-events: none;
|
||
z-index: 3;
|
||
}
|
||
.patent-cert img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
}
|
||
@keyframes patentGlow {
|
||
0%, 100% { opacity: 0.6; box-shadow: 0 0 20px rgba(47,107,255,0.3); }
|
||
50% { opacity: 1; box-shadow: 0 0 40px rgba(47,107,255,0.5), 0 0 80px rgba(6,182,212,0.2); }
|
||
}
|
||
@keyframes patentShimmer {
|
||
0% { transform: translateX(-100%); opacity: 0; }
|
||
30% { opacity: 1; }
|
||
70% { opacity: 1; }
|
||
100% { transform: translateX(100%); opacity: 0; }
|
||
}
|
||
.patent-nav {
|
||
flex-shrink: 0;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.15);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255,255,255,0.25);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
transition: all 0.3s;
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
.patent-nav:hover {
|
||
background: rgba(47,107,255,0.35);
|
||
border-color: rgba(47,107,255,0.5);
|
||
color: #fff;
|
||
box-shadow: 0 0 20px rgba(47,107,255,0.3);
|
||
}
|
||
.patent-nav svg { width: 18px; height: 18px; }
|
||
@media (max-width: 600px) {
|
||
.patent-cert {
|
||
width: 120px;
|
||
height: 160px;
|
||
margin-left: -60px;
|
||
margin-top: -80px;
|
||
}
|
||
.patent-viewport {
|
||
height: 200px;
|
||
}
|
||
.patent-nav {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.patent-carousel {
|
||
padding: 16px 30px 0;
|
||
}
|
||
}
|
||
/* 愿景使命价值观 - 全新设计 */
|
||
.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-icon-bg {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 90px;
|
||
position: relative;
|
||
}
|
||
.product-icon-bg::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
opacity: 0.07;
|
||
}
|
||
.product-icon-bg svg {
|
||
width: 34px;
|
||
height: 34px;
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
.product-card:hover .product-icon-bg svg {
|
||
transform: scale(1.15) translateY(-2px);
|
||
}
|
||
.product-card.active .product-icon-bg svg {
|
||
transform: scale(1.08);
|
||
}
|
||
.product-icon-bg.i-blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #3b82f6; }
|
||
.product-icon-bg.i-amber { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #d97706; }
|
||
.product-icon-bg.i-green { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #059669; }
|
||
.product-icon-bg.i-cyan { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); color: #0284c7; }
|
||
.product-icon-bg.i-purple { background: linear-gradient(135deg, #faf5ff, #f3e8ff); color: #7c3aed; }
|
||
.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>
|
||
|
||
</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 0 - 全家福 -->
|
||
<div class="carousel-slide active" data-type="product">
|
||
<div class="slide-content" style="background:#1a1a2e;">
|
||
<img src="images/无水印版全家福.png" alt="Chookoo 全家福" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" />
|
||
<div class="slide-overlay" style="position:relative;z-index:2;text-align:center;color:#fff;padding:0 40px;">
|
||
<div class="slide-tags"><span>Chookoo 智宠之家</span></div>
|
||
<h2 class="slide-title">宠小科智能科技</h2>
|
||
<p class="slide-desc" style="color:#fff;">AIoT 主动式宠物健康管理，守护每一个毛孩子</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ===== 暂时隐藏的轮播图，取消注释即可恢复 =====
|
||
Slide 1 - 智能猫厕所 Pro
|
||
<div class="carousel-slide" 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="patent-carousel-wrap">
|
||
<button class="patent-nav prev" id="patentPrev">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
|
||
</button>
|
||
<div class="patent-carousel" id="patentCarousel">
|
||
<div class="patent-viewport" id="patentViewport"></div>
|
||
</div>
|
||
<button class="patent-nav next" id="patentNext">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</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="10">10年+</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="40">40%</div>
|
||
<div class="stat-label" data-i18n="company_stat_ai_label">研发投入比</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="30">30项</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="20">20项</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 product-icon-bg i-blue">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 21V9a8 8 0 0 1 16 0v12"/><path d="M9 21V12a3 3 0 0 1 6 0v9"/></svg>
|
||
</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 product-icon-bg i-amber">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="17" rx="3"/><ellipse cx="12" cy="14.5" rx="2.5" ry="2" fill="currentColor" opacity="0.15"/><circle cx="9" cy="10.5" r="1.2" fill="currentColor" opacity="0.15"/><circle cx="15" cy="10.5" r="1.2" fill="currentColor" opacity="0.15"/></svg>
|
||
</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 product-icon-bg i-green">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10h18v2a9 9 0 0 1-18 0v-2z"/><path d="M12 10V6"/><circle cx="8.5" cy="7" r="1" fill="currentColor" opacity="0.2"/><circle cx="15.5" cy="7" r="1" fill="currentColor" opacity="0.2"/></svg>
|
||
</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 product-icon-bg i-cyan">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C12 2 5 10 5 14.5a7 7 0 0 0 14 0C19 10 12 2 12 2z"/></svg>
|
||
</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 product-icon-bg i-purple">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||
</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 media-section">
|
||
<div class="container section">
|
||
<div class="media-wrapper">
|
||
<div class="media-header">
|
||
<div class="media-badge">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
||
<span data-i18n="media_badge">媒体报道</span>
|
||
</div>
|
||
<h2 class="media-title" data-i18n="media_title">权威媒体 关注报道</h2>
|
||
<p class="media-subtitle" data-i18n="media_subtitle">我们的创新成果获得多家权威媒体的深度报道与认可</p>
|
||
</div>
|
||
<div class="media-gallery" id="mediaGallery">
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(0)">
|
||
<img src="images/patents/BaoDao/8aed9546ae688014f6ca7f226f50ceb8.jpg" alt="青年报·青春上海 报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_1">青年报 · 青春上海</span></div>
|
||
</div>
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(1)">
|
||
<img src="images/patents/BaoDao/51b2c2cf2395e6e6f8ebf2e4dd947102.jpg" alt="新闻综合频道 报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_2">新闻综合频道</span></div>
|
||
</div>
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(2)">
|
||
<img src="images/patents/BaoDao/327e3b806f2aa56e1ed1128ebdbb34f5.jpg" alt="东方卫视《东方新闻》报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_3">东方卫视 · 东方新闻</span></div>
|
||
</div>
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(3)">
|
||
<img src="images/patents/BaoDao/876d1191e2599a035e9523181aa560a2.jpg" alt="凤凰网财经 报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_4">凤凰网财经</span></div>
|
||
</div>
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(4)">
|
||
<img src="images/patents/BaoDao/979cb7823494ff4606b2facd1e76d779.jpg" alt="媒体报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_5">媒体报道</span></div>
|
||
</div>
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(5)">
|
||
<img src="images/patents/BaoDao/804b7291af2d35f61da80e000da064b7.png" alt="媒体报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_6">媒体报道</span></div>
|
||
</div>
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(6)">
|
||
<img src="images/patents/BaoDao/434276afc67fddc78b80e99b7b667770.png" alt="媒体报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_7">媒体报道</span></div>
|
||
</div>
|
||
<div class="media-gallery-card" onclick="openMediaLightbox(7)">
|
||
<img src="images/patents/BaoDao/d636fba4ade00050087bb6c46a0440b4.jpg" alt="媒体报道" loading="lazy"/>
|
||
<div class="card-overlay"><span class="card-overlay-text" data-i18n="media_name_8">媒体报道</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="media-highlight">
|
||
<span class="media-highlight-dot"></span>
|
||
<span class="media-highlight-text" data-i18n="media_highlight_text">荣获<em>央视</em>、<em>东方卫视</em>、<em>江苏省电视台</em>、<em>东方财经</em>、<em>青年报</em>等<strong>多家权威媒体</strong>专题报道，持续引领宠物智能健康行业</span>
|
||
<span class="media-highlight-dot"></span>
|
||
</div>
|
||
</div>
|
||
</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">下载 App</h4>
|
||
<p data-i18n="footer_subscribe_desc">随时随地掌控毛孩子健康状态</p>
|
||
<div class="footer-contact-list">
|
||
<a href="https://apps.apple.com/app/chookoo/id6758685831" target="_blank" class="footer-contact-item">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
||
<span>iOS · App Store</span>
|
||
</a>
|
||
<a href="https://app.chookoo.net" target="_blank" class="footer-contact-item">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 18h.01M8 21h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2z"/></svg>
|
||
<span>Android · app.chookoo.net</span>
|
||
</a>
|
||
</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:support@chookoo.net">support@chookoo.net</a></li>
|
||
<li><a href="tel:02160707996">021-60707996</a></li>
|
||
<li><a href="tel:13817945011">138-1794-5011</a></li>
|
||
<li><a href="tel:13062641308">130-6264-1308</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二维码区域 -->
|
||
<div class="footer-qrcode-section">
|
||
<div class="qrcode-item">
|
||
<div class="qrcode-placeholder">
|
||
<img src="images/公众号二维码.jpg" 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/视频号二维码1.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/小红书二维码.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/抖音二维码.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>
|
||
<!-- 服务条款和Cookie设置待正式内容后恢复
|
||
<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号-2A</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`;
|
||
|
||
// 用负 margin 收回 scale 后多出的底部布局空间
|
||
// transform:scale 不改变 DOM 布局尺寸，视觉缩小但布局仍占原大小
|
||
// marginBottom = -(原高度 - 缩放后高度) 让滚动范围刚好匹配视觉内容
|
||
const layoutH = content.scrollHeight;
|
||
const visualH = layoutH * s;
|
||
content.style.marginBottom = `-${Math.round(layoutH - visualH)}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`;
|
||
}
|
||
}
|
||
|
||
function fixLayout() {
|
||
const s = content.getBoundingClientRect().width / content.scrollWidth;
|
||
const layoutH = content.scrollHeight;
|
||
const visualH = layoutH * s;
|
||
content.style.marginBottom = `-${Math.round(layoutH - visualH)}px`;
|
||
}
|
||
|
||
scale();
|
||
window.addEventListener('resize', scale);
|
||
window.addEventListener('load', fixLayout);
|
||
setTimeout(fixLayout, 2000);
|
||
new MutationObserver(() => requestAnimationFrame(fixLayout)).observe(content, { childList: true, subtree: true, attributes: true });
|
||
document.querySelectorAll('img').forEach(img => { if (!img.complete) img.addEventListener('load', fixLayout); });
|
||
})();
|
||
</script>
|
||
<script>
|
||
// 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_home: "首页",
|
||
nav_products: "产品",
|
||
nav_stories: "故事",
|
||
nav_app: "App",
|
||
nav_about: "关于我们",
|
||
nav_support: "支持",
|
||
nav_contact: "联系我们",
|
||
footer_tagline: "让每一份宠爱，都有科学回响",
|
||
footer_desc: "AIoT 主动式宠物健康管理开创者，让健康可见、需求可解、宠爱无间。",
|
||
footer_subscribe_title: "下载 App",
|
||
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号-2A",
|
||
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: "研发投入比",
|
||
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: "了解更多",
|
||
// Media section
|
||
media_badge: "媒体报道",
|
||
media_title: "权威媒体 关注报道",
|
||
media_subtitle: "我们的创新成果获得多家权威媒体的深度报道与认可",
|
||
media_name_1: "青年报 · 青春上海", media_name_2: "新闻综合频道", media_name_3: "东方卫视 · 东方新闻", media_name_4: "凤凰网财经",
|
||
media_name_5: "媒体报道", media_name_6: "媒体报道", media_name_7: "媒体报道", media_name_8: "媒体报道",
|
||
media_highlight_text: "荣获<em>央视</em>、<em>东方卫视</em>、<em>江苏省电视台</em>、<em>东方财经</em>、<em>青年报</em>等<strong>多家权威媒体</strong>专题报道，持续引领宠物智能健康行业"
|
||
},
|
||
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_home: "Home",
|
||
nav_products: "Products",
|
||
nav_stories: "Stories",
|
||
nav_app: "App",
|
||
nav_about: "About",
|
||
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: "Download App",
|
||
footer_subscribe_desc: "Monitor your pet's health anytime, anywhere",
|
||
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: "Industry Experience",
|
||
company_stat_ai_label: "R&D Investment",
|
||
company_stat_records_label: "Domestic & Int'l Patents",
|
||
company_stat_global_label: "Certifications",
|
||
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: "Video",
|
||
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: "Video Channel",
|
||
modal_social_qr_weibo_desc: "Watch our videos",
|
||
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",
|
||
// Media section
|
||
media_badge: "Media Coverage",
|
||
media_title: "Authoritative Media Coverage",
|
||
media_subtitle: "Our innovations have been deeply reported and recognized by multiple authoritative media outlets",
|
||
media_name_1: "Youth Daily", media_name_2: "News Comprehensive Channel", media_name_3: "Dragon TV · Oriental News", media_name_4: "iFeng Finance",
|
||
media_name_5: "Media Report", media_name_6: "Media Report", media_name_7: "Media Report", media_name_8: "Media Report",
|
||
media_highlight_text: "Featured by <strong>multiple authoritative media</strong> including <em>CCTV</em>, <em>Dragon TV</em>, <em>Jiangsu TV</em>, <em>Oriental Finance</em>, <em>Youth Daily</em> and more, continuously leading the smart pet health industry"
|
||
}
|
||
};
|
||
|
||
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";
|
||
return "en";
|
||
};
|
||
|
||
// 首页故事数据（随机展示3个）
|
||
const homepageStories = [
|
||
{
|
||
id: 'story-1', image: 'images/patents/cat/9f372b85494375441c4c4d9e5b1fb526.jpg', avatar: 'images/patents/cat/9f372b85494375441c4c4d9e5b1fb526.jpg',
|
||
zh: { title: '五只小奶猫的温暖新家', excerpt: '五只不同花色的小奶猫挤在纸箱里的宠物床上，从怯生生到活泼好动，Chookoo智能猫厕所帮我们轻松应对多猫家庭的清洁难题...', tag1: '多猫家庭', tag2: '智能清洁', author: '猫窝主理人', pet: '田园猫 · 2个月' },
|
||
en: { title: "Five Kittens' Warm New Home", excerpt: "Five kittens of different colors cuddled in a pet bed inside a box. From shy to playful, Chookoo smart litter box made multi-cat cleaning easy...", tag1: 'Multi-cat Home', tag2: 'Smart Cleaning', author: 'Cat Nest Owner', pet: 'Mixed Breed · 2 months' }
|
||
},
|
||
{
|
||
id: 'story-2', image: 'images/patents/cat/49cb2973ffe172eea5eff5ef234e9de5.jpg', avatar: 'images/patents/cat/49cb2973ffe172eea5eff5ef234e9de5.jpg',
|
||
zh: { title: '灰灰的科学喂养之路', excerpt: '灰灰是个小馋猫，家里五只猫抢着吃总是它最胖。Chookoo智能喂食器定时定量出粮，终于帮它控制住了体重...', tag1: '科学喂养', tag2: '体重管理', author: '灰灰妈妈', pet: '英短 · 2岁' },
|
||
en: { title: "Huihui's Scientific Feeding Journey", excerpt: "Huihui is a food lover, always the chubbiest among five cats. Chookoo smart feeder's scheduled portions finally controlled the weight...", tag1: 'Scientific Feeding', tag2: 'Weight Management', author: "Huihui's Mom", pet: 'British Shorthair · 2 yrs' }
|
||
},
|
||
{
|
||
id: 'story-3', image: 'images/patents/cat/4d19ed38f720b7121666c1acbeb4a25b.png', avatar: 'images/patents/cat/4d19ed38f720b7121666c1acbeb4a25b.png',
|
||
zh: { title: '布丁的优雅日常', excerpt: '布丁是一只英短蓝白，最喜欢端坐在沙发上"监工"。自从用了AI摄像头，它的一举一动都被智能识别记录，连打哈欠都不放过...', tag1: 'AI识别', tag2: '行为分析', author: '布丁姐姐', pet: '英短蓝白 · 2岁' },
|
||
en: { title: "Pudding's Elegant Daily Life", excerpt: "Pudding is a British Shorthair blue-white who loves sitting elegantly on the sofa. The AI camera captures every move, even yawns...", tag1: 'AI Recognition', tag2: 'Behavior Analysis', author: "Pudding's Sister", pet: 'British Shorthair · 2 yrs' }
|
||
},
|
||
{
|
||
id: 'story-4', image: 'images/patents/cat/3082b09ccd65d31f2876b13cbfd50ce1.jpg', avatar: 'images/patents/cat/3082b09ccd65d31f2876b13cbfd50ce1.jpg',
|
||
zh: { title: '小柴的回家之路', excerpt: '接小柴回家的路上，它乖乖趴在我腿上，温柔的眼神让人心疼。Chookoo智能饮水机到家就准备好了，让它第一口就爱上喝水...', tag1: '新手养宠', tag2: '温馨陪伴', author: '小柴爸爸', pet: '柴犬混血 · 2个月' },
|
||
en: { title: "Little Shiba's Journey Home", excerpt: "On the ride home, it rested quietly on my lap with gentle eyes. Chookoo smart fountain was ready, making it love drinking water from day one...", tag1: 'New Pet Parent', tag2: 'Warm Companion', author: "Shiba's Dad", pet: 'Shiba Mix · 2 months' }
|
||
},
|
||
{
|
||
id: 'story-5', image: 'images/patents/cat/4a95801f0fdfd1a62c3a0ed79cf3dc0b.jpg', avatar: 'images/patents/cat/4a95801f0fdfd1a62c3a0ed79cf3dc0b.jpg',
|
||
zh: { title: '团子的第一天回家', excerpt: '接团子回家的那天，它小小的身体被托在手心里，琥珀色的眼睛好奇地打量着新家。Chookoo智能设备帮我全程守护它的健康成长...', tag1: '新手养猫', tag2: '健康监测', author: '团子妈妈', pet: '白猫 · 2个月' },
|
||
en: { title: "Tuanzi's First Day Home", excerpt: "The day we brought Tuanzi home, its tiny body cradled in hands, amber eyes curiously exploring. Chookoo smart devices guard its healthy growth...", tag1: 'New Cat Parent', tag2: 'Health Monitoring', author: "Tuanzi's Mom", pet: 'White Cat · 2 months' }
|
||
},
|
||
{
|
||
id: 'story-6', image: 'images/patents/cat/21ab09a5a0f446f051beefc6110191d4.jpg', avatar: 'images/patents/cat/21ab09a5a0f446f051beefc6110191d4.jpg',
|
||
zh: { title: '小棕的第一间小窝', excerpt: '刚到家的小棕站在笼子里，好奇地打量着新环境。Chookoo智能狗厕所帮它快速建立如厕习惯，从不安到安心只用了一周...', tag1: '如厕训练', tag2: '新家适应', author: '小棕妈妈', pet: '中华田园犬 · 3个月' },
|
||
en: { title: "Little Brown's First Home", excerpt: "Newly arrived, it stood in the crate curiously looking around. Chookoo smart dog toilet helped build potty habits in just one week...", tag1: 'Potty Training', tag2: 'New Home', author: "Brown's Mom", pet: 'Chinese Rural Dog · 3 months' }
|
||
}
|
||
];
|
||
|
||
// 首次加载时随机选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;
|
||
// 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/喂食器.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/喂水器.png', 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/健康监护仪.png', 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);
|
||
})();
|
||
|
||
// 专利轮播 - coverflow 无限循环
|
||
(function() {
|
||
var imgs = [
|
||
'images/patents/patent-01-design-catbox.png',
|
||
'images/patents/patent-02-design-ball-bin.png',
|
||
'images/patents/patent-03-design-bin-base.png',
|
||
'images/patents/patent-04-design-catbox-part1.png',
|
||
'images/patents/patent-05-design-catbox-part2.png',
|
||
'images/patents/patent-06-invention-pet-toilet.png',
|
||
'images/patents/patent-07-utility-pet-toilet.png',
|
||
'images/patents/patent-08-design-waste-bin.png',
|
||
'images/patents/patent-09-design-catbox-part3.png'
|
||
];
|
||
|
||
var SPACING = window.innerWidth < 600 ? 150 : 210;
|
||
var total = imgs.length;
|
||
var center = 0;
|
||
var autoTimer = null;
|
||
var carousel = document.getElementById('patentCarousel');
|
||
var viewport = document.getElementById('patentViewport');
|
||
var prevBtn = document.getElementById('patentPrev');
|
||
var nextBtn = document.getElementById('patentNext');
|
||
if (!carousel || !viewport || !prevBtn || !nextBtn) return;
|
||
|
||
// 构建 9 张卡片
|
||
imgs.forEach(function(src, i) {
|
||
var card = document.createElement('div');
|
||
card.className = 'patent-cert no-transition';
|
||
card.dataset.index = i;
|
||
card.innerHTML = '<img src="' + src + '" alt="专利证书" loading="lazy">';
|
||
viewport.appendChild(card);
|
||
});
|
||
|
||
var cards = viewport.querySelectorAll('.patent-cert');
|
||
|
||
// 计算环形偏移量（取最短路径）
|
||
function getOffset(cardIdx) {
|
||
var offset = cardIdx - center;
|
||
if (offset > total / 2) offset -= total;
|
||
if (offset < -total / 2) offset += total;
|
||
return offset;
|
||
}
|
||
|
||
// 根据中心位置更新所有卡片的样式
|
||
function updateCards() {
|
||
cards.forEach(function(card, i) {
|
||
var offset = getOffset(i);
|
||
var abs = Math.abs(offset);
|
||
|
||
// 切换 active 类（用于发光动画）
|
||
card.classList.toggle('active', offset === 0);
|
||
|
||
if (abs > 2) {
|
||
// 超出可视范围的卡片隐藏
|
||
card.style.transform = 'translateX(' + (Math.sign(offset) * SPACING * 3) + 'px) scale(0.5)';
|
||
card.style.opacity = '0';
|
||
card.style.filter = 'brightness(0.3) saturate(0.2)';
|
||
card.style.zIndex = '0';
|
||
card.style.pointerEvents = 'none';
|
||
} else if (offset === 0) {
|
||
// 中心卡片：放大、高亮、无旋转
|
||
card.style.transform = 'translateX(0px) scale(1.1) perspective(800px) rotateY(0deg)';
|
||
card.style.opacity = '1';
|
||
card.style.filter = 'brightness(1) saturate(1)';
|
||
card.style.zIndex = '5';
|
||
card.style.pointerEvents = 'auto';
|
||
} else if (abs === 1) {
|
||
// 紧邻中心
|
||
card.style.transform = 'translateX(' + (offset * SPACING) + 'px) scale(0.92) perspective(800px) rotateY(' + (-offset * 5) + 'deg)';
|
||
card.style.opacity = '0.85';
|
||
card.style.filter = 'brightness(0.85) saturate(0.85)';
|
||
card.style.zIndex = '3';
|
||
card.style.pointerEvents = 'auto';
|
||
} else {
|
||
// 远端第2层卡片：也能清晰看到
|
||
card.style.transform = 'translateX(' + (offset * SPACING) + 'px) scale(0.78) perspective(800px) rotateY(' + (-offset * 8) + 'deg)';
|
||
card.style.opacity = '0.7';
|
||
card.style.filter = 'brightness(0.75) saturate(0.7)';
|
||
card.style.zIndex = '1';
|
||
card.style.pointerEvents = 'auto';
|
||
}
|
||
});
|
||
}
|
||
|
||
function goTo(idx) {
|
||
center = ((idx % total) + total) % total;
|
||
updateCards();
|
||
resetAutoPlay();
|
||
}
|
||
|
||
function slide(dir) {
|
||
center = ((center + dir) % total + total) % total;
|
||
updateCards();
|
||
resetAutoPlay();
|
||
}
|
||
|
||
// 按钮事件
|
||
prevBtn.addEventListener('click', function() { slide(-1); });
|
||
nextBtn.addEventListener('click', function() { slide(1); });
|
||
|
||
// 自动轮播（3.5秒间隔）
|
||
function startAutoPlay() {
|
||
stopAutoPlay();
|
||
autoTimer = setInterval(function() { slide(1); }, 3500);
|
||
}
|
||
function stopAutoPlay() {
|
||
if (autoTimer) { clearInterval(autoTimer); autoTimer = null; }
|
||
}
|
||
function resetAutoPlay() {
|
||
stopAutoPlay();
|
||
startAutoPlay();
|
||
}
|
||
|
||
carousel.addEventListener('mouseenter', stopAutoPlay);
|
||
carousel.addEventListener('mouseleave', startAutoPlay);
|
||
|
||
// 触摸滑动支持
|
||
var touchStartX = 0;
|
||
var touchStartY = 0;
|
||
var isTouching = false;
|
||
|
||
viewport.addEventListener('touchstart', function(e) {
|
||
touchStartX = e.touches[0].clientX;
|
||
touchStartY = e.touches[0].clientY;
|
||
isTouching = true;
|
||
stopAutoPlay();
|
||
}, { passive: true });
|
||
|
||
viewport.addEventListener('touchmove', function(e) {
|
||
// 阻止页面横向滚动
|
||
if (isTouching && Math.abs(e.touches[0].clientX - touchStartX) > Math.abs(e.touches[0].clientY - touchStartY)) {
|
||
e.preventDefault();
|
||
}
|
||
}, { passive: false });
|
||
|
||
viewport.addEventListener('touchend', function(e) {
|
||
if (!isTouching) return;
|
||
isTouching = false;
|
||
var dx = e.changedTouches[0].clientX - touchStartX;
|
||
var dy = e.changedTouches[0].clientY - touchStartY;
|
||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
|
||
slide(dx < 0 ? 1 : -1);
|
||
}
|
||
startAutoPlay();
|
||
}, { passive: true });
|
||
|
||
// 点击侧边卡片直接跳转
|
||
viewport.addEventListener('click', function(e) {
|
||
var card = e.target.closest('.patent-cert');
|
||
if (!card || card.classList.contains('active')) return;
|
||
var idx = parseInt(card.dataset.index, 10);
|
||
if (!isNaN(idx)) goTo(idx);
|
||
});
|
||
|
||
// 初始渲染：先禁用过渡，布局完成后启用
|
||
updateCards();
|
||
void viewport.offsetHeight;
|
||
cards.forEach(function(card) { card.classList.remove('no-transition'); });
|
||
|
||
// 启动自动播放
|
||
startAutoPlay();
|
||
})();
|
||
|
||
</script>
|
||
|
||
<script>
|
||
|
||
// 社交媒体弹窗控制（延迟查找，弹窗 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/公众号二维码.jpg" 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="M8 5v14l11-7z"/></svg>
|
||
</div>
|
||
<div class="qr-image">
|
||
<img src="images/视频号二维码1.png" alt="视频号二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
||
</div>
|
||
<div class="qr-name" 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/小红书二维码.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/抖音二维码.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/客服.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>
|
||
|
||
<!-- 媒体报道 Lightbox -->
|
||
<div class="media-lightbox" id="mediaLightbox" onclick="closeMediaLightboxOutside(event)">
|
||
<button class="media-lightbox-close" onclick="closeMediaLightbox()">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||
</button>
|
||
<button class="media-lightbox-nav prev" onclick="navigateMediaLightbox(-1, event)">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
||
</button>
|
||
<button class="media-lightbox-nav next" onclick="navigateMediaLightbox(1, event)">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
||
</button>
|
||
<div class="media-lightbox-content">
|
||
<img id="mediaLightboxImg" src="" alt="媒体报道"/>
|
||
</div>
|
||
<div class="media-lightbox-counter" id="mediaLightboxCounter"></div>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
var mediaImages = [];
|
||
var currentMediaIndex = 0;
|
||
var cards = document.querySelectorAll('#mediaGallery .media-gallery-card img');
|
||
cards.forEach(function(img) { mediaImages.push(img.src); });
|
||
|
||
window.openMediaLightbox = function(index) {
|
||
currentMediaIndex = index;
|
||
var lightbox = document.getElementById('mediaLightbox');
|
||
var lightboxImg = document.getElementById('mediaLightboxImg');
|
||
var counter = document.getElementById('mediaLightboxCounter');
|
||
lightboxImg.src = mediaImages[index];
|
||
counter.textContent = (index + 1) + ' / ' + mediaImages.length;
|
||
lightbox.classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
};
|
||
|
||
window.closeMediaLightbox = function() {
|
||
var lightbox = document.getElementById('mediaLightbox');
|
||
lightbox.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
};
|
||
|
||
window.closeMediaLightboxOutside = function(e) {
|
||
if (e.target === document.getElementById('mediaLightbox')) {
|
||
closeMediaLightbox();
|
||
}
|
||
};
|
||
|
||
window.navigateMediaLightbox = function(dir, e) {
|
||
e.stopPropagation();
|
||
currentMediaIndex = (currentMediaIndex + dir + mediaImages.length) % mediaImages.length;
|
||
var lightboxImg = document.getElementById('mediaLightboxImg');
|
||
var counter = document.getElementById('mediaLightboxCounter');
|
||
lightboxImg.src = mediaImages[currentMediaIndex];
|
||
counter.textContent = (currentMediaIndex + 1) + ' / ' + mediaImages.length;
|
||
};
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
var lightbox = document.getElementById('mediaLightbox');
|
||
if (!lightbox.classList.contains('active')) return;
|
||
if (e.key === 'Escape') closeMediaLightbox();
|
||
if (e.key === 'ArrowLeft') navigateMediaLightbox(-1, e);
|
||
if (e.key === 'ArrowRight') navigateMediaLightbox(1, e);
|
||
});
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|