1366 lines
47 KiB
HTML
1366 lines
47 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 App - 智能宠物健康管理</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);
|
|
--gradient: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; overflow-x: hidden; }
|
|
body {
|
|
margin: 0;
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
#pageContent {
|
|
min-width: 1280px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
.container {
|
|
width: min(1200px, 100%);
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
/* 导航栏 */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
}
|
|
.navbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 32px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.navbar-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.navbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-logo img {
|
|
height: 40px;
|
|
width: auto;
|
|
}
|
|
.navbar-link {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-link:hover {
|
|
color: var(--text);
|
|
background: rgba(0, 0, 0, 0.04);
|
|
text-decoration: none;
|
|
}
|
|
.navbar-link.active {
|
|
color: var(--primary);
|
|
background: var(--primary-weak);
|
|
}
|
|
.navbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.navbar-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-btn:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
color: var(--text);
|
|
}
|
|
.navbar-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.navbar-cta {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
border: none;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-cta:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
|
|
}
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
}
|
|
.lang-select-hero { background: transparent; border: none; font-size: 13px; color: var(--muted); cursor: pointer; padding: 8px; }
|
|
@media (max-width: 768px) {
|
|
.navbar-menu {
|
|
display: none;
|
|
}
|
|
.mobile-menu-btn {
|
|
display: flex;
|
|
}
|
|
.navbar-cta {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Hero Section */
|
|
.app-hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
|
|
padding: 120px 24px 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.app-hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 30% 40%, rgba(47, 107, 255, 0.12) 0%, transparent 50%),
|
|
radial-gradient(ellipse 60% 50% at 70% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
.app-hero-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 80px;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.app-hero-text {
|
|
flex: 1;
|
|
}
|
|
.app-hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: rgba(47, 107, 255, 0.15);
|
|
border: 1px solid rgba(47, 107, 255, 0.3);
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
color: #60a5fa;
|
|
margin-bottom: 24px;
|
|
}
|
|
.app-hero-badge svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #60a5fa;
|
|
}
|
|
.app-hero h1 {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
line-height: 1.1;
|
|
margin: 0 0 24px;
|
|
letter-spacing: -0.02em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.app-hero h1 span {
|
|
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.app-hero-desc {
|
|
font-size: 18px;
|
|
color: #94a3b8;
|
|
line-height: 1.8;
|
|
margin-bottom: 40px;
|
|
max-width: 520px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.app-hero-desc strong {
|
|
color: #60a5fa;
|
|
font-weight: 500;
|
|
}
|
|
.app-download-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.download-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 24px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 14px;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.download-btn:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
.download-btn-android {
|
|
background: linear-gradient(135deg, #3ddc84 0%, #00a86b 100%);
|
|
border-color: transparent;
|
|
}
|
|
.download-btn-android:hover {
|
|
background: linear-gradient(135deg, #34c759 0%, #009f5d 100%);
|
|
}
|
|
.download-btn-android svg {
|
|
color: #fff;
|
|
}
|
|
.download-btn svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.download-btn-text {
|
|
text-align: left;
|
|
}
|
|
.download-btn-text span {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.download-btn-text strong {
|
|
display: block;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
.app-hero-phone {
|
|
flex: 0 0 380px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
.phone-mockup {
|
|
width: 300px;
|
|
height: 600px;
|
|
background: linear-gradient(145deg, #2a2d3a, #1a1c2e);
|
|
border-radius: 44px;
|
|
padding: 10px;
|
|
box-shadow:
|
|
0 60px 120px rgba(0, 0, 0, 0.5),
|
|
0 0 0 1px rgba(255, 255, 255, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.phone-mockup::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 14px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 90px;
|
|
height: 24px;
|
|
background: #1a1c2e;
|
|
border-radius: 16px;
|
|
z-index: 5;
|
|
}
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 36px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.phone-slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.8s ease-in-out;
|
|
}
|
|
.phone-slide.active {
|
|
opacity: 1;
|
|
}
|
|
.phone-slide img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.phone-label {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
white-space: nowrap;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
.phone-dots {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
.phone-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding: 0;
|
|
}
|
|
.phone-dot.active {
|
|
background: #fff;
|
|
width: 24px;
|
|
border-radius: 4px;
|
|
}
|
|
@media (max-width: 968px) {
|
|
.app-hero-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.app-hero-text {
|
|
order: 2;
|
|
}
|
|
.app-hero-phone {
|
|
order: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
.app-hero h1 {
|
|
font-size: 40px;
|
|
}
|
|
.app-hero-desc {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.app-download-buttons {
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
/* Feature Section */
|
|
.feature-section {
|
|
display: none;
|
|
}
|
|
.feature-header {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto 60px;
|
|
}
|
|
.feature-header .pill {
|
|
display: inline-block;
|
|
padding: 6px 16px;
|
|
background: var(--primary-weak);
|
|
color: var(--primary);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border-radius: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.feature-header h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin: 0 0 16px;
|
|
}
|
|
.feature-header p {
|
|
font-size: 16px;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 40px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
.feature-card {
|
|
display: flex;
|
|
gap: 24px;
|
|
padding: 32px;
|
|
background: var(--card);
|
|
border-radius: 20px;
|
|
border: 1px solid var(--line);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.feature-icon {
|
|
flex: 0 0 64px;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.feature-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.feature-icon.blue {
|
|
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
|
color: #2563eb;
|
|
}
|
|
.feature-icon.purple {
|
|
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
|
|
color: #7c3aed;
|
|
}
|
|
.feature-icon.pink {
|
|
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
|
|
color: #db2777;
|
|
}
|
|
.feature-icon.green {
|
|
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
|
|
color: #059669;
|
|
}
|
|
.feature-content h3 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin: 0 0 8px;
|
|
}
|
|
.feature-content p {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.feature-card {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.feature-icon {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* Function Section */
|
|
.function-section {
|
|
display: none;
|
|
padding: 100px 24px;
|
|
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
|
|
}
|
|
.function-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 80px;
|
|
max-width: 1100px;
|
|
margin: 0 auto 80px;
|
|
}
|
|
.function-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.function-item:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.function-text {
|
|
flex: 1;
|
|
}
|
|
.function-text .tag {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
background: rgba(47, 107, 255, 0.15);
|
|
color: #60a5fa;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.function-text h3 {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0 0 16px;
|
|
}
|
|
.function-text p {
|
|
font-size: 16px;
|
|
color: #94a3b8;
|
|
line-height: 1.7;
|
|
margin: 0 0 24px;
|
|
}
|
|
.function-features {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
.function-features span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: #cbd5e1;
|
|
}
|
|
.function-features svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--primary);
|
|
}
|
|
.function-image {
|
|
flex: 0 0 400px;
|
|
height: 300px;
|
|
background: linear-gradient(145deg, #1e293b, #334155);
|
|
border-radius: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.function-image::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at center, rgba(47, 107, 255, 0.2) 0%, transparent 70%);
|
|
}
|
|
.function-image svg {
|
|
width: 80px;
|
|
height: 80px;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
@media (max-width: 968px) {
|
|
.function-item,
|
|
.function-item:nth-child(even) {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
.function-image {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
height: 240px;
|
|
}
|
|
.function-features {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats-section {
|
|
display: none;
|
|
}
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 32px;
|
|
background: var(--card);
|
|
border-radius: 20px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.stat-number {
|
|
font-size: 42px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--primary), #06b6d4);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 8px;
|
|
}
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
}
|
|
@media (max-width: 768px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta-section {
|
|
display: none;
|
|
padding: 100px 24px;
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
text-align: center;
|
|
}
|
|
.cta-content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
.cta-content h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0 0 16px;
|
|
}
|
|
.cta-content p {
|
|
font-size: 16px;
|
|
color: #94a3b8;
|
|
margin: 0 0 40px;
|
|
}
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: #0f172a;
|
|
color: #94a3b8;
|
|
padding: 60px 24px 40px;
|
|
}
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 24px;
|
|
}
|
|
.footer-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.footer-logo img {
|
|
height: 48px;
|
|
width: auto;
|
|
}
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
}
|
|
.footer-links a {
|
|
font-size: 14px;
|
|
color: #94a3b8;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.footer-links a:hover {
|
|
color: #fff;
|
|
}
|
|
.footer-copyright {
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 40px;
|
|
margin-top: 40px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
font-size: 13px;
|
|
}
|
|
/* 购物弹窗样式 */
|
|
.contact-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.contact-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.contact-modal {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border-radius: 24px;
|
|
padding: 40px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
transform: scale(0.9) translateY(20px);
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
.contact-modal-overlay.active .contact-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
.contact-modal-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.contact-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: #1f2937;
|
|
}
|
|
.contact-modal-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 16px;
|
|
background: linear-gradient(135deg, #2f6bff 0%, #06b6d4 100%);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
.contact-modal-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.contact-modal h3 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin: 0 0 8px;
|
|
}
|
|
.contact-modal p {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0 0 24px;
|
|
}
|
|
.contact-qr-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.contact-qr-box {
|
|
width: 160px;
|
|
height: 160px;
|
|
background: #f3f4f6;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.contact-qr-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.contact-qr-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: #f3f4f6;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: #4b5563;
|
|
}
|
|
.contact-qr-label svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar" style="opacity:0">
|
|
<div class="navbar-inner">
|
|
<a href="../index.html" class="navbar-logo">
|
|
<img src="../images/白字logo.png" alt="Chookoo" />
|
|
</a>
|
|
<div class="navbar-menu">
|
|
<a href="../index.html" class="navbar-link"><span data-i18n="nav_home">首页</span></a>
|
|
<a href="products.html" class="navbar-link"><span data-i18n="nav_products">产品</span></a>
|
|
<a href="stories.html" class="navbar-link"><span data-i18n="nav_stories">故事</span></a>
|
|
<a href="app.html" class="navbar-link active"><span data-i18n="nav_app">App</span></a>
|
|
<a href="company.html?article=201" class="navbar-link"><span data-i18n="nav_about">关于我们</span></a>
|
|
</div>
|
|
<div class="navbar-actions">
|
|
<a href="help.html" class="navbar-btn" aria-label="Search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>
|
|
</a>
|
|
<button class="navbar-btn" id="shopBtn" aria-label="Cart">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
|
</button>
|
|
<select id="langSelect" aria-label="Language" class="lang-select-hero">
|
|
<option value="zh">中文</option>
|
|
<option value="en">EN</option>
|
|
</select>
|
|
<a href="../index.html#contact" class="navbar-cta"><span data-i18n="nav_contact">联系我们</span></a>
|
|
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<script>
|
|
// 同步缩放导航栏，防止闪烁（script 是渲染阻塞的，浏览器不会画出未缩放的 nav）
|
|
(function(){var n=document.querySelector('.navbar');var vw=window.innerWidth;var s=vw<1280?vw/1280:vw>2560?vw/2560:vw/1920;n.style.transform='scale('+s+')';n.style.transformOrigin='top left';n.style.width='1920px';n.style.opacity='1';})();
|
|
</script>
|
|
|
|
<div id="pageContent" style="opacity:0">
|
|
<!-- Hero Section -->
|
|
<section class="app-hero">
|
|
<div class="app-hero-content">
|
|
<div class="app-hero-text">
|
|
<div class="app-hero-badge">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
|
|
<span data-i18n="hero_badge">全球独家 · 毫米波雷达 + 红外测温</span>
|
|
</div>
|
|
<h1>Chookoo <span>App</span></h1>
|
|
<p class="app-hero-desc" data-i18n="hero_desc">离多远都不再担心。AI远程监控，异常随时提醒。通过AkiWell™ AI引擎，今日状态、健康周报、主动预警、云端陪伴、智能管家、隐私守护，一切尽在掌握。</p>
|
|
<div class="app-download-buttons">
|
|
<a href="https://apps.apple.com/app/chookoo/id6758685831" target="_blank" rel="noopener noreferrer" class="download-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>下载于</span>
|
|
<strong>App Store</strong>
|
|
</div>
|
|
</a>
|
|
<a href="https://app.chookoo.net" target="_blank" rel="noopener noreferrer" class="download-btn download-btn-android">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 11.4c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-1.5 1.5-1.5-1.5c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1c-.2.2-.2.5 0 .6l1.5 1.5-1.5 1.5c-.2.2-.2.5 0 .6.1.1.2.1.3.1s.2 0 .3-.1l1.5-1.5 1.5 1.5c.1.1.2.1.3.1s.2 0 .3-.1c.2-.2.2-.5 0-.6l-1.5-1.5 1.5-1.5c.2-.1.2-.4 0-.6zM6.5 9c.8 0 1.5-.7 1.5-1.5S7.3 6 6.5 6 5 6.7 5 7.5 5.7 9 6.5 9zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM17.5 9c.8 0 1.5-.7 1.5-1.5S18.3 6 17.5 6 16 6.7 16 7.5s.7 1.5 1.5 1.5zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-11c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5z"/><path d="M14.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM9.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM12 3.5L10.5 1h3L12 3.5z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>安卓下载</span>
|
|
<strong>app.chookoo.net</strong>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="app-hero-phone">
|
|
<div class="phone-mockup">
|
|
<div class="phone-screen">
|
|
<div class="phone-slide active">
|
|
<img src="../images/app效果图1.png" alt="我的爱宠" />
|
|
<div class="phone-label">我的爱宠</div>
|
|
</div>
|
|
<div class="phone-slide">
|
|
<img src="../images/app效果图2.png" alt="我的设备" />
|
|
<div class="phone-label">我的设备</div>
|
|
</div>
|
|
<div class="phone-slide">
|
|
<img src="../images/app效果图3.png" alt="实时看护" />
|
|
<div class="phone-label">实时看护</div>
|
|
</div>
|
|
<div class="phone-slide">
|
|
<img src="../images/app效果图4.png" alt="健康周报" />
|
|
<div class="phone-label">健康周报</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone-dots">
|
|
<button class="phone-dot active" data-slide="0"></button>
|
|
<button class="phone-dot" data-slide="1"></button>
|
|
<button class="phone-dot" data-slide="2"></button>
|
|
<button class="phone-dot" data-slide="3"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="feature-section">
|
|
<div class="container">
|
|
<div class="feature-header">
|
|
<span class="pill">核心技术</span>
|
|
<h2>AI宠物健康平台</h2>
|
|
<p>全球独家搭载毫米波雷达与红外测温，真正能"救命"的AI宠物医生</p>
|
|
</div>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon blue">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>心跳呼吸双维侦测系统</h3>
|
|
<p>非接触式感知心率节律变化，并生成成长曲线。高频、持续关注爱宠的心率变化，提前预警健康风险</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon purple">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>非接触式体温监测阵列</h3>
|
|
<p>红外传感，无接触不间断扫描，实现真正的"动态体温"监测。智能体温监测趋势变化，提供更多健康线索</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon pink">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>AI健康识别摄像头</h3>
|
|
<p>仅在猫靠近时进行无感扫描，毫秒级成像分析，不打扰、不触碰。人脸识别行为分析功能，为每只猫咪专属看护健康行为画像</p>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon green">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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="feature-content">
|
|
<h3>猫咪专属称重算法</h3>
|
|
<p>专门针对猫咪定制的体重监测，称重传感器精度1%，精准追踪体重变化趋势</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Function Details -->
|
|
<section class="function-section">
|
|
<div class="container">
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">健康监测</span>
|
|
<h3>心跳呼吸双维侦测系统</h3>
|
|
<p>非接触式感知心率节律变化，并生成成长曲线。高频、持续关注爱宠的心率变化，提前预警健康风险。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
非接触式感知
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
心率节律成长曲线
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
健康风险预警
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">体温监测</span>
|
|
<h3>非接触式体温监测阵列</h3>
|
|
<p>红外传感，无接触不间断扫描，实现真正的"动态体温"监测。智能体温监测趋势变化，提供更多健康线索。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
红外无接触扫描
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
动态体温监测
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
体温趋势分析
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">AI识别</span>
|
|
<h3>AI健康识别摄像头</h3>
|
|
<p>仅在猫靠近时进行无感扫描，毫秒级成像分析，不打扰、不触碰。人脸识别行为分析功能，为每只猫咪专属看护健康行为画像。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
无感扫描成像
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
人脸识别分析
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
专属健康画像
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg 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>
|
|
|
|
<div class="function-item">
|
|
<div class="function-text">
|
|
<span class="tag">安全保障</span>
|
|
<h3>五重防夹猫技术</h3>
|
|
<p>接近传感器、红外传感器、称重传感器、AI健康摄像头、紧急停止开关五重安全保障。感知防夹、红外实时监测、识别活体、识别猫咪信号、机械开关物理防卡，全方位守护爱宠安全。</p>
|
|
<div class="function-features">
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
感知防夹
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
红外光幕监测
|
|
</span>
|
|
<span>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
|
|
机械物理防卡
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="function-image">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats-section">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<div class="stat-number">100万+</div>
|
|
<div class="stat-label">活跃用户</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">10亿+</div>
|
|
<div class="stat-label">健康数据点</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">30+</div>
|
|
<div class="stat-label">覆盖国家</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">4.9</div>
|
|
<div class="stat-label">用户评分</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="cta-section">
|
|
<div class="cta-content">
|
|
<h2>立即下载 Chookoo App</h2>
|
|
<p>开启AI宠物健康管理之旅，让毫米波雷达和AI守护每一个毛孩子的生命健康</p>
|
|
<div class="cta-buttons">
|
|
<a href="https://apps.apple.com/app/chookoo/id6758685831" target="_blank" rel="noopener noreferrer" class="download-btn">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>下载于</span>
|
|
<strong>App Store</strong>
|
|
</div>
|
|
</a>
|
|
<a href="https://app.chookoo.net" target="_blank" rel="noopener noreferrer" class="download-btn download-btn-android">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 11.4c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-1.5 1.5-1.5-1.5c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1c-.2.2-.2.5 0 .6l1.5 1.5-1.5 1.5c-.2.2-.2.5 0 .6.1.1.2.1.3.1s.2 0 .3-.1l1.5-1.5 1.5 1.5c.1.1.2.1.3.1s.2 0 .3-.1c.2-.2.2-.5 0-.6l-1.5-1.5 1.5-1.5c.2-.1.2-.4 0-.6zM6.5 9c.8 0 1.5-.7 1.5-1.5S7.3 6 6.5 6 5 6.7 5 7.5 5.7 9 6.5 9zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM17.5 9c.8 0 1.5-.7 1.5-1.5S18.3 6 17.5 6 16 6.7 16 7.5s.7 1.5 1.5 1.5zm0-2.5c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-11c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5z"/><path d="M14.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM9.5 13c-.3 0-.5-.2-.5-.5v-2c0-.3.2-.5.5-.5s.5.2.5.5v2c0 .3-.2.5-.5.5zM12 3.5L10.5 1h3L12 3.5z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span>安卓下载</span>
|
|
<strong>app.chookoo.net</strong>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-logo">
|
|
<img src="../images/白字logo.png" alt="Chookoo" />
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="../index.html">首页</a>
|
|
<a href="products.html">产品</a>
|
|
<a href="stories.html">故事</a>
|
|
<a href="company.html?article=201">关于我们</a>
|
|
</div>
|
|
<div class="footer-copyright">
|
|
© 2025 Chookoo 宠小科智能科技. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div><!-- /pageContent -->
|
|
<script>
|
|
// 视口缩放 - 基于1920px设计稿
|
|
(() => {
|
|
const designWidth = 1920;
|
|
const minWidth = 1280;
|
|
const maxWidth = 2560;
|
|
const content = document.getElementById('pageContent');
|
|
const navbar = document.querySelector('.navbar');
|
|
|
|
function scale() {
|
|
const vw = window.innerWidth;
|
|
let s = 1;
|
|
|
|
if (vw < minWidth) {
|
|
s = vw / minWidth;
|
|
} else if (vw > maxWidth) {
|
|
s = vw / maxWidth;
|
|
} else {
|
|
s = vw / designWidth;
|
|
}
|
|
|
|
// 内容区缩放
|
|
content.style.transform = `scale(${s})`;
|
|
content.style.transformOrigin = 'top left';
|
|
content.style.width = `${designWidth}px`;
|
|
|
|
// 修复底部空白
|
|
const layoutH = content.scrollHeight;
|
|
const visualH = layoutH * s;
|
|
content.style.marginBottom = `-${Math.ceil(layoutH - visualH)}px`;
|
|
|
|
// 内容区显示
|
|
content.style.opacity = '1';
|
|
|
|
// navbar 单独缩放（fixed 不受 content transform 影响）
|
|
if (navbar) {
|
|
navbar.style.transform = `scale(${s})`;
|
|
navbar.style.transformOrigin = 'top left';
|
|
navbar.style.width = `${designWidth}px`;
|
|
navbar.style.opacity = '1';
|
|
}
|
|
}
|
|
|
|
function fixLayout() {
|
|
const s = content.getBoundingClientRect().width / content.scrollWidth;
|
|
const layoutH = content.scrollHeight;
|
|
const visualH = layoutH * s;
|
|
content.style.marginBottom = `-${Math.ceil(layoutH - visualH)}px`;
|
|
}
|
|
|
|
scale();
|
|
window.addEventListener('resize', scale);
|
|
window.addEventListener('load', fixLayout);
|
|
setTimeout(fixLayout, 2000);
|
|
new MutationObserver(() => requestAnimationFrame(fixLayout)).observe(content, { childList: true, subtree: true, attributes: true });
|
|
document.querySelectorAll('img').forEach(img => { if (!img.complete) img.addEventListener('load', fixLayout); });
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
// App效果图片轮播
|
|
(function() {
|
|
const slides = document.querySelectorAll('.phone-slide');
|
|
const dots = document.querySelectorAll('.phone-dot');
|
|
if (!slides.length) return;
|
|
let current = 0;
|
|
let timer = null;
|
|
|
|
function goTo(index) {
|
|
slides[current].classList.remove('active');
|
|
dots[current].classList.remove('active');
|
|
current = index % slides.length;
|
|
slides[current].classList.add('active');
|
|
dots[current].classList.add('active');
|
|
}
|
|
|
|
function startAuto() {
|
|
timer = setInterval(() => goTo(current + 1), 3000);
|
|
}
|
|
|
|
dots.forEach(dot => {
|
|
dot.addEventListener('click', function() {
|
|
clearInterval(timer);
|
|
goTo(parseInt(this.dataset.slide));
|
|
startAuto();
|
|
});
|
|
});
|
|
|
|
startAuto();
|
|
})();
|
|
</script>
|
|
|
|
<!-- 购物弹窗 -->
|
|
<div class="contact-modal-overlay" id="shopModal">
|
|
<div class="contact-modal">
|
|
<button class="contact-modal-close" id="shopModalClose">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<div class="contact-modal-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
</svg>
|
|
</div>
|
|
<h3>官方旗舰店</h3>
|
|
<p>扫描二维码，进入官方店铺选购</p>
|
|
<div class="contact-qr-wrapper">
|
|
<div class="contact-qr-box"><img src="../images/qr-shop.png" alt="旗舰店二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换店铺二维码<br>qr-shop.png</span>'" /></div>
|
|
<div class="contact-qr-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="7" y1="7" x2="7" y2="7"></line>
|
|
<line x1="17" y1="7" x2="17" y2="7"></line>
|
|
<line x1="7" y1="12" x2="7" y2="12"></line>
|
|
<line x1="17" y1="12" x2="17" y2="12"></line>
|
|
<line x1="7" y1="17" x2="7" y2="17"></line>
|
|
<line x1="17" y1="17" x2="17" y2="17"></line>
|
|
</svg>
|
|
<span>扫码进店</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 购物弹窗控制
|
|
const shopModal = document.getElementById('shopModal');
|
|
const shopBtn = document.getElementById('shopBtn');
|
|
const shopModalClose = document.getElementById('shopModalClose');
|
|
|
|
if (shopBtn) {
|
|
shopBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
shopModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
}
|
|
|
|
if (shopModalClose) {
|
|
shopModalClose.addEventListener('click', function() {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
}
|
|
|
|
if (shopModal) {
|
|
shopModal.addEventListener('click', function(e) {
|
|
if (e.target === shopModal) {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && shopModal && shopModal.classList.contains('active')) {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
(() => {
|
|
const t = {
|
|
zh: {
|
|
nav_home: "棣栭〉", nav_products: "浜у搧", nav_stories: "鏁呬簨",
|
|
nav_app: "App", nav_about: "鍏充簬鎴戜滑", nav_contact: "鑱旂郴鎴戜滑",
|
|
footer_desc: "AIoT 涓诲姩寮忓疇鐗╁仴搴风鐞嗗紑鍒涜€咃紝璁╁仴搴峰彲瑙併€侀渶姹傚彲瑙ｃ€佸疇鐖辨棤闂淬€?,
|
|
footer_products: "浜у搧", footer_support: "鏀寔", footer_contact: "鑱旂郴鎴戜滑",
|
|
footer_cat: "鏅鸿兘鐚帟鎵€", footer_feeder: "鏅鸿兘鍠傞鍣?,
|
|
footer_fountain: "鏅鸿兘楗按鏈?, footer_camera: "AI 鎽勫儚澶?,
|
|
footer_help: "甯姪涓績", footer_faq: "甯歌闂",
|
|
footer_warranty: "淇濅慨鏀跨瓥", footer_returns: "閫€鎹㈣揣",
|
|
footer_privacy: "闅愮鏀跨瓥", footer_terms: "鏈嶅姟鏉℃",
|
|
footer_copyright: "漏 2025 Chookoo. All rights reserved."
|
|
},
|
|
en: {
|
|
nav_home: "Home", nav_products: "Products", nav_stories: "Stories",
|
|
nav_app: "App", nav_about: "About Us", nav_contact: "Contact Us",
|
|
footer_desc: "AIoT Pioneer in Proactive Pet Health Management 鈥?making health visible, needs understood, and care seamless.",
|
|
footer_products: "Products", footer_support: "Support", footer_contact: "Contact Us",
|
|
footer_cat: "Smart Cat Litter", footer_feeder: "Smart Feeder",
|
|
footer_fountain: "Smart Fountain", footer_camera: "AI Camera",
|
|
footer_help: "Help Center", footer_faq: "FAQ",
|
|
footer_warranty: "Warranty", footer_returns: "Returns",
|
|
footer_privacy: "Privacy Policy", footer_terms: "Terms of Service",
|
|
footer_copyright: "漏 2025 Chookoo. All rights reserved."
|
|
}
|
|
};
|
|
const els = document.querySelectorAll("[data-i18n]");
|
|
const s = document.getElementById("langSelect");
|
|
const apply = (l) => {
|
|
const d = t[l] || t.zh;
|
|
els.forEach(el => { const k = el.dataset.i18n; if (d[k]) el.textContent = d[k]; });
|
|
if (s) s.value = l;
|
|
};
|
|
const lang = (navigator.language||"").toLowerCase().startsWith("zh") ? "zh" : "en";
|
|
apply(lang);
|
|
if (s) s.addEventListener("change", e => apply(e.target.value));
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|