diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..e955c0e --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,7 @@ +{ + "permissions": { + "allow": [ + "Bash(git config:*)" + ] + } +} diff --git a/index.html b/index.html index 6265338..9f5c94f 100644 --- a/index.html +++ b/index.html @@ -142,38 +142,77 @@ } .hero-media { position: relative; - min-height: 260px; + min-height: 320px; } .hero-image { - width: 220px; - border-radius: 22px; - box-shadow: var(--shadow); - border: 1px solid rgba(255, 255, 255, 0.6); - background: #fff; + width: 210px; + height: 280px; + border-radius: 24px; + box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12), 0 8px 24px rgba(15, 23, 42, 0.08); + border: 1px solid rgba(255, 255, 255, 0.8); + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); + object-fit: contain; + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; + } + .hero-image:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 32px 100px rgba(15, 23, 42, 0.16), 0 12px 32px rgba(15, 23, 42, 0.1); } .hero-image.cat { position: absolute; left: 0; top: 0; + z-index: 2; } .hero-image.dog { position: absolute; right: 0; bottom: 0; + z-index: 2; + } + .hero-pet-badge { + position: absolute; + width: 72px; + height: 72px; + border-radius: 50%; + background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%); + box-shadow: 0 8px 32px rgba(47, 107, 255, 0.15); + border: 3px solid #ffffff; + object-fit: cover; + z-index: 3; + animation: float 3s ease-in-out infinite; + } + .hero-pet-badge.cat-badge { + left: 180px; + top: -10px; + animation-delay: 0s; + } + .hero-pet-badge.dog-badge { + right: 180px; + bottom: -10px; + animation-delay: 1.5s; + } + @keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } } .glass-card { position: absolute; - left: 40%; - top: 22%; - transform: translateX(-40%); - padding: 16px 18px; - border-radius: 16px; - background: rgba(255, 255, 255, 0.75); - border: 1px solid rgba(255, 255, 255, 0.6); - backdrop-filter: blur(8px); + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + padding: 18px 24px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.85); + border: 1px solid rgba(255, 255, 255, 0.9); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); font-size: 14px; - color: #334155; - box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); + font-weight: 500; + color: #1e293b; + box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); + z-index: 4; + letter-spacing: 0.3px; } main { padding: 0; @@ -234,108 +273,1095 @@ margin: 0 0 16px; color: var(--muted); } - .two-col { - display: grid; - gap: 24px; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + /* 公司介绍板块 - 高级布局 */ + .company-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 48px; } - .centered .two-col { - max-width: 900px; + .company-intro { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + max-width: 1000px; margin: 0 auto; - justify-items: center; - text-align: center; + align-items: center; } - .centered .two-col p { - max-width: 420px; + .company-text { + text-align: left; + padding: 32px; } - .info-grid, - .product-grid { - display: grid; - gap: 18px; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - } - .info-grid { - min-width: 720px; - } - .product-grid { - min-width: 720px; - } - .centered .info-grid, - .centered .product-grid { - justify-items: center; - } - .centered .info-card, - .centered .product-card, - .centered .story-card { - width: 100%; - } - .info-card, - .product-card, - .story-card { - padding: 20px 22px; - border-radius: 16px; - background: var(--card); - border: 1px solid rgba(226, 232, 240, 0.8); - box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05); - } - .info-card h3, - .product-card h3 { - margin: 10px 0 8px; - font-size: 18px; + .company-text h3 { + font-size: 22px; + font-weight: 600; color: #1f2937; + margin: 0 0 16px; } - .info-card p, - .product-card p { - margin: 0; - font-size: 14px; - } - .value-list { - list-style: none; - padding: 0; - margin: 8px 0 0; - display: grid; - gap: 6px; + .company-text p { + font-size: 15px; + line-height: 1.9; color: var(--muted); - font-size: 14px; + margin: 0; } - .value-list li::before { - content: "•"; - color: var(--primary); - margin-right: 6px; - } - .badge { + .company-highlight { display: inline-flex; align-items: center; - gap: 6px; - padding: 4px 10px; + gap: 10px; + padding: 12px 20px; + background: linear-gradient(135deg, var(--primary-weak) 0%, rgba(139, 92, 246, 0.1) 100%); + border-radius: 16px; + margin-top: 24px; + } + .company-highlight span { + font-size: 14px; + font-weight: 500; + color: var(--primary); + } + .company-image { + position: relative; + border-radius: 24px; + overflow: hidden; + height: 280px; + box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1); + } + .company-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.6s ease; + } + .company-image:hover img { + transform: scale(1.05); + } + .company-image::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, transparent 60%, rgba(47, 107, 255, 0.1) 100%); + pointer-events: none; + } + /* 愿景·使命·价值观板块 - 高级卡片 */ + .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: 40px; + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; + min-height: 580px; + } + /* 左侧卡片组 */ + .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: 260px; + height: 480px; + background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); + border-radius: 24px; + box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), + 0 25px 60px -15px rgba(15, 23, 42, 0.2), + 0 0 80px -20px rgba(15, 23, 42, 0.15); + opacity: 0; + visibility: hidden; + transform: scale(0.85); + transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + z-index: 5; + overflow: hidden; + flex-shrink: 0; + } + .product-display-area.show { + opacity: 1; + visibility: visible; + transform: scale(1); + } + .product-card { + position: relative; + width: 200px; + height: 200px; + padding: 0; + border-radius: 20px; + overflow: hidden; + background: var(--card); + border: 1px solid var(--line); + box-shadow: 0 8px 30px 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: 100px; + } + .product-card .product-content { + padding: 16px; + } + .product-card .product-content h3 { + font-size: 15px; + margin-bottom: 4px; + } + .product-card .product-content p { + font-size: 11px; + } + .display-image-wrapper { + position: relative; + height: 240px; + 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; + } + /* 展示区装饰 */ + .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-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-dot:hover { + background: rgba(15, 23, 42, 0.4); + transform: scale(1.2); + } + .carousel-dot.active { + background: var(--primary); + width: 24px; + border-radius: 4px; + transform: none; + } + @keyframes rotateGradient { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + .product-card .product-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.6s ease; + } + .product-card:hover .product-image { + transform: scale(1.05); + } + .product-content { + padding: 20px; + text-align: center; + } + .product-content h3 { + font-size: 16px; + font-weight: 600; + color: #1f2937; + margin: 0 0 8px; + transition: color 0.3s ease; + } + .product-content p { + font-size: 12px; + color: var(--muted); + margin: 0; + line-height: 1.5; + } + /* 产品详情浮层(原卡片用) */ + .product-detail { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.99) 100%); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + padding: 24px; + opacity: 0; + visibility: hidden; + transition: all 0.4s ease; + display: flex; + flex-direction: column; + justify-content: center; + z-index: 10; + border-radius: 20px; + } + .product-detail h4 { + font-size: 18px; + font-weight: 600; + color: #1f2937; + margin: 0 0 10px; + text-align: center; + } + .product-detail > p { + font-size: 13px; + line-height: 1.6; + color: var(--muted); + margin: 0 0 12px; + text-align: center; + } + .product-features { + list-style: none; + padding: 0; + margin: 0; + } + .product-features li { + display: flex; + align-items: center; + gap: 8px; + font-size: 11px; + color: #4b5563; + padding: 5px 0; + border-bottom: 1px solid var(--line); + } + .product-features li:last-child { + border-bottom: none; + } + .product-features li::before { + content: '✓'; + color: var(--primary); + font-weight: bold; + font-size: 12px; + } + } + .product-content h3 { + font-size: 18px; + font-weight: 600; + color: #1f2937; + margin: 0 0 8px; + transition: color 0.3s ease; + } + .product-card:hover .product-content h3 { + color: var(--primary); + } + .product-content p { + font-size: 14px; + color: var(--muted); + margin: 0; + line-height: 1.6; + } + .product-tag { + display: inline-block; + margin-top: 12px; + padding: 4px 12px; border-radius: 999px; background: var(--primary-weak); color: var(--primary); font-size: 12px; - font-weight: 600; + font-weight: 500; } - .product-icon { - width: 44px; - height: 44px; - border-radius: 14px; + /* 宠物故事板块 - 修复链接样式 */ + .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; - justify-content: center; - font-size: 16px; - font-weight: 700; - color: var(--primary); - background: var(--primary-weak); + 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; } - .product-image { - width: 44px; - height: 44px; - border-radius: 14px; - object-fit: cover; + .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; } + } + .hero { + background-size: 200% 200%; + animation: gradientFlow 15s ease infinite; + } + /* 滚动显示动画 */ + .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; @@ -366,8 +1392,72 @@ @media (max-width: 720px) { h1 { font-size: 34px; } h2 { font-size: 24px; } - .hero-image { width: 180px; } + .hero-image { width: 180px; height: 180px; } + .hero-media { min-height: 220px; } + .hero-pet-badge { width: 52px; height: 52px; } + .hero-pet-badge.cat-badge { left: 130px; } + .hero-pet-badge.dog-badge { right: 130px; } .glass-card { display: none; } + /* 公司介绍响应式 */ + .company-intro { grid-template-columns: 1fr; gap: 24px; } + .company-text { padding: 0; text-align: center; } + .company-image { height: 200px; } + /* 愿景使命价值观响应式 */ + .vmv-grid { grid-template-columns: 1fr; gap: 20px; padding: 0 16px; } + .vmv-card { padding: 28px 24px; } + .vmv-icon { width: 60px; height: 60px; margin-bottom: 20px; } + .vmv-card h3 { font-size: 20px; } + /* 产品板块响应式 */ + .product-grid { + flex-direction: column; + gap: 24px; + } + .product-group-left, + .product-group-right { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + .product-display-area { + width: 100%; + max-width: 240px; + height: 400px; + order: -1; + } + .display-image-wrapper { + height: 200px; + } + .display-image { + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + } + .product-card { + width: 160px; + height: 180px; + } + .product-card .product-image-wrapper { + height: 80px; + } + .product-card .product-content { + padding: 12px; + } + .product-card .product-content h3 { + font-size: 13px; + } + .product-card .product-content p { + font-size: 10px; + } + /* 故事板块响应式 */ + .story-wrapper { grid-template-columns: 1fr; } + .story-wrapper .story-card { padding: 24px; } + .story-image { display: none; } + /* 宠物故事响应式 */ + .pet-stories-grid { grid-template-columns: 1fr; } + /* 用户心声响应式 */ + .testimonials-grid { grid-template-columns: 1fr; } + .testimonial-card { padding: 20px; } } @@ -399,7 +1489,9 @@
+ 猫咪 智能猫设备 + 狗狗 智能狗设备
让每一份宠爱,都有科学回响
@@ -407,42 +1499,56 @@
-
+
- 公司介绍 -

AIoT 主动式宠物健康管理开创者

+ 公司介绍 +

AIoT 主动式宠物健康管理开创者

-
-

- 宠科(Chookoo)成立于中国苏州,立足智慧健康管理领域,是一家专注于构建预防式健康生态的科技企业。 -

-

- 我们传承长三角高端制造与前沿创新能力,深度融合人工智能、物联网与生物传感技术,依托苏州深厚的精密制造底蕴与跨学科研发能力, - 聚焦宠物与长者的主动健康管理需求。通过智能设备无感收集生命体征与行为数据,AI 实时分析将日常细微变化转化为精准的健康洞察, - 致力于让每一个生命都能被真正理解与守护,共同构建更安心、更具预见性的健康生活。 -

+
+
+

关于宠科

+

+ 宠科(Chookoo)成立于中国苏州,立足智慧健康管理领域,是一家专注于构建预防式健康生态的科技企业。 +

+

+ 我们传承长三角高端制造与前沿创新能力,深度融合人工智能、物联网与生物传感技术,通过智能设备无感收集生命体征与行为数据,AI 实时分析将日常细微变化转化为精准的健康洞察。 +

+
+ + 让每一个生命都能被真正理解与守护 +
+
+
+ 宠科科技 +
-
+
愿景 · 使命 · 价值观

成为全球宠物家庭最信赖的智能健康伙伴

-
-
- Vision +
+
+
+ +

愿景

成为全球宠物家庭最信赖的智能健康伙伴,定义主动健康管理新范式。

-
- Mission +
+
+ +

使命

让健康可见,让需求可解,让宠爱无间。

-
- Values +
+
+ +

价值观

  • 科技向善
  • @@ -454,59 +1560,167 @@
-
+
核心产品

多场景智能硬件与健康管理服务

-
-
- 猫厕所 -

猫厕所

-

智能监测、自动清洁,守护猫咪如厕健康。

+
+ +
+
+
+ 猫厕所 +
+
+

智能猫厕所

+

智能监测·自动清洁

+
+
+
+
+ 狗厕所 +
+
+

智能狗厕所

+

科学训练·智能清洁

+
+
-
- 狗厕所 -

狗厕所

-

科学如厕训练与清洁管理,省心易用。

+ +
+
+ 产品展示 +
+
+

产品名称

+

产品描述

+
    +
+
-
- 喂食器 -

喂食器

-

定时定量、数据可视,构建健康饮食习惯。

-
-
- 饮水机 -

饮水机

-

循环净化、饮水提醒,提升饮水健康。

-
-
- 宠物 AI 摄像头 -

宠物 AI 摄像头

-

远程守护、行为识别,实时了解宠物状态。

+ +
+
+
+ 喂食器 +
+
+

智能喂食器

+

定时定量·科学喂养

+
+
+
+
+ 饮水机 +
+
+

智能饮水机

+

循环净化·饮水提醒

+
+
+
+
+ AI摄像头 +
+
+

AI宠物摄像头

+

远程守护·行为识别

+
+
+
+ +
@@ -587,6 +1801,35 @@ 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_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: "查看更多故事 →", section_story_label: "品牌故事", section_story_title: "共筑一个更懂爱的未来", story_p1: "宠科的故事,是一个关于进化的故事。我们因宠爱宠物而出发,理解了「宠爱」更广阔的内涵——它是对家庭中所有生命的细致体察与科学呵护。", @@ -639,6 +1882,26 @@ 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.", @@ -691,6 +1954,17 @@ product_water_desc: "循環浄化と飲水リマインドで健康維持。", product_camera_title: "AI ペットカメラ", product_camera_desc: "遠隔見守りと行動認識で状態を把握。", + section_testimonials_label: "ユーザーの声", + section_testimonials_title: "リアルユーザーからの声", + testimonial_1: "Chookooのスマート猫トイレのおかげで、猫の健康状態をリアルタイムで把握できるようになりました。データレポートを見るたび安心します。", + testimonial_name_1: "茶トラママ", + testimonial_pet_1: "茶トラ猫 · 上海", + testimonial_2: "給餌器のタイマー機能が最高です!出張中でも犬が時間通りに食事できる。アプリのリマインドも便利です。", + testimonial_name_2: "ワンチャイパパ", + testimonial_pet_2: "ゴールデンレトリバー · 北京", + testimonial_3: "AIカメラの行動認識機能には驚きました。猫の様々な状態を自動識別して、いつでも様子を確認できます。", + testimonial_name_3: "プリンちゃんのお姉さん", + testimonial_pet_3: "ブリティッシュショートヘア · 深圳", section_story_label: "ブランドストーリー", section_story_title: "もっと愛を理解する未来へ", story_p1: "Chookoo の物語は進化の物語。私たちはペットへの愛から出発し、家族のすべての命への細やかな観察と科学的ケアという愛の広がりを理解しました。", @@ -743,6 +2017,17 @@ product_water_desc: "Filtration et rappels d’hydratation.", product_camera_title: "Caméra IA pour animaux", product_camera_desc: "Surveillance à distance et reconnaissance comportementale.", + section_testimonials_label: "Témoignages", + section_testimonials_title: "Voix d'utilisateurs réels", + testimonial_1: "Grâce à la litière intelligente Chookoo, je peux enfin surveiller la santé de mon chat en temps réel. Chaque rapport me rassure.", + testimonial_name_1: "Maman d'Orange", + testimonial_pet_1: "Chat tigré orange · Shanghai", + testimonial_2: "La fonction de distribution programmée est géniale ! Même en déplacement, mon chien mange à l'heure. L'application est très pratique.", + testimonial_name_2: "Papa de Wangcai", + testimonial_pet_2: "Golden Retriever · Pékin", + testimonial_3: "La reconnaissance comportementale de la caméra IA m'a surpris. Elle identifie automatiquement les différents états de mon chat.", + testimonial_name_3: "Sœur de Pudding", + testimonial_pet_3: "British Shorthair · Shenzhen", section_story_label: "Histoire de la marque", section_story_title: "Construire un futur qui comprend l’amour", story_p1: "L’histoire de Chookoo est une histoire d’évolution. Nous avons élargi le sens de l’amour en prenant soin de chaque vie au sein de la famille.", @@ -795,6 +2080,17 @@ product_water_desc: "Zirkulation, Filterung und Trink-Erinnerung.", product_camera_title: "KI-Haustierkamera", product_camera_desc: "Fernbetreuung und Verhaltenserkennung.", + section_testimonials_label: "Stimmen", + section_testimonials_title: "Echte Nutzer berichten", + testimonial_1: "Dank der smarten Katzentoilette von Chookoo kann ich die Gesundheit meiner Katze endlich in Echtzeit überwachen. Jeder Bericht beruhigt mich.", + testimonial_name_1: "Oranges Mama", + testimonial_pet_1: "Orange Tabbykatze · Shanghai", + testimonial_2: "Die geplante Fütterungsfunktion ist toll! Auch auf Geschäftsreisen frisst mein Hund pünktlich. Die App-Erinnerungen sind sehr praktisch.", + testimonial_name_2: "Wangcais Papa", + testimonial_pet_2: "Golden Retriever · Peking", + testimonial_3: "Die Verhaltenserkennung der KI-Kamera hat mich überrascht. Sie erkennt automatisch die verschiedenen Zustände meiner Katze.", + testimonial_name_3: "Puddings Schwester", + testimonial_pet_3: "British Shorthair · Shenzhen", section_story_label: "Markengeschichte", section_story_title: "Eine Zukunft, die Liebe versteht", story_p1: "Chookoos Geschichte ist eine Geschichte der Evolution. Wir erweiterten die Bedeutung von Liebe zu wissenschaftlicher Fürsorge für jede Lebensform in der Familie.", @@ -847,6 +2143,17 @@ product_water_desc: "Циркуляция, фильтрация и напоминания.", product_camera_title: "AI‑камера для питомцев", product_camera_desc: "Удаленный уход и распознавание поведения.", + section_testimonials_label: "Отзывы", + section_testimonials_title: "Голоса реальных пользователей", + testimonial_1: "Благодаря умному лотку Chookoo я наконец могу следить за здоровьем кота в реальном времени. Каждый отчет успокаивает меня.", + testimonial_name_1: "Мама Рыжика", + testimonial_pet_1: "Рыжий кот · Шанхай", + testimonial_2: "Функция планирования кормления отличная! Даже в командировках мой пес ест вовремя. Напоминания в приложении очень удобны.", + testimonial_name_2: "Папа Ванцая", + testimonial_pet_2: "Золотистый ретривер · Пекин", + testimonial_3: "Распознавание поведения AI-камеры меня удивило. Она автоматически определяет разные состояния моей кошки.", + testimonial_name_3: "Сестра Пудинга", + testimonial_pet_3: "Британская короткошерстная · Шэньчжэнь", section_story_label: "История бренда", section_story_title: "Будущее, которое понимает любовь", story_p1: "История Chookoo — это история эволюции любви и заботы о каждой жизни в семье.", @@ -899,6 +2206,17 @@ product_water_desc: "تدوير وتنقية مع تذكير بالترطيب.", product_camera_title: "كاميرا AI للحيوانات الأليفة", product_camera_desc: "رعاية عن بُعد وتعرّف على السلوك في الوقت الحقيقي.", + section_testimonials_label: "آراء المستخدمين", + section_testimonials_title: "أصوات من مستخدمين حقيقيين", + testimonial_1: "بفضل المرحاض الذكي من Chookoo، أستطيع أخيراً مراقبة صحة قطتي في الوقت الحقيقي. كل تقرير يطمئنني.", + testimonial_name_1: "أم برتقالي", + testimonial_pet_1: "قطة برتقالية · شنغهاي", + testimonial_2: "ميزة التغذية المجدولة رائعة! حتى في رحلات العمل، كلبي يأكل في الوقت المحدد. تذكيرات التطبيق مفيدة جداً.", + testimonial_name_2: "أب وانغ كاي", + testimonial_pet_2: "ريتريفر ذهبي · بكين", + testimonial_3: "ميزة التعرف على السلوك في كاميرا AI أذهلتني. تتعرف تلقائياً على حالات قطتي المختلفة.", + testimonial_name_3: "أخت بودينغ", + testimonial_pet_3: "قطة بريطانية قصيرة الشعر · شنتشن", section_story_label: "قصة العلامة", section_story_title: "نبني مستقبلاً يفهم الحب", story_p1: "قصة Chookoo هي قصة تطور. بدأنا من حب الحيوانات الأليفة وفهمنا معنى أوسع للحب: ملاحظة دقيقة ورعاية علمية لكل حياة داخل الأسرة.", @@ -1003,6 +2321,243 @@ event.preventDefault(); } }); + + // 滚动显示动画 + 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; + } + }); + + // 鼠标跟随效果(仅用于hero区域) + const heroMedia = document.querySelector('.hero-media'); + if (heroMedia) { + heroMedia.addEventListener('mousemove', (e) => { + const rect = heroMedia.getBoundingClientRect(); + const x = (e.clientX - rect.left - rect.width / 2) / 25; + const y = (e.clientY - rect.top - rect.height / 2) / 25; + + const heroImages = heroMedia.querySelectorAll('.hero-image'); + heroImages.forEach((img, index) => { + const factor = index === 0 ? 1 : -1; + img.style.transform = `translateY(${y * factor}px) translateX(${x * factor}px)`; + }); + }); + + heroMedia.addEventListener('mouseleave', () => { + const heroImages = heroMedia.querySelectorAll('.hero-image'); + heroImages.forEach(img => { + img.style.transform = ''; + }); + }); + } + + // 产品卡片交互:固定展示区方案 + 自动轮播 + const productCards = document.querySelectorAll('.product-card'); + 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: { + title: '智能猫厕所', + subtitle: '守护猫咪如厕健康,AI分析排泄数据', + image: 'cat.png', + features: ['实时监测如厕频率与时长', '排泄物状态AI分析', '自动清洁保持卫生', '健康趋势数据报告'] + }, + 2: { + title: '智能狗厕所', + subtitle: '科学如厕训练,培养良好习惯', + image: 'dog.jpeg', + features: ['科学如厕训练引导', '智能感应自动清洁', 'APP远程监控', '培养良好如厕习惯'] + }, + 3: { + title: '智能喂食器', + subtitle: '精准投喂,养成健康饮食习惯', + image: 'feeder.png', + features: ['多格设计支持不同食材', '定时定量精准投喂', '进食数据实时同步APP', '养成健康饮食习惯'] + }, + 4: { + title: '智能饮水机', + subtitle: '活水吸引,提升饮水健康', + image: 'water.jpeg', + features: ['四重过滤循环净化', '活水吸引增加饮水兴趣', 'APP记录饮水量', '智能饮水提醒'] + }, + 5: { + title: 'AI宠物摄像头', + subtitle: '随时查看,远程守护宠物', + image: 'camera.jpeg', + features: ['1080P高清夜视', 'AI行为识别捕捉精彩瞬间', '双向语音互动', '随时查看宠物状态'] + } + }; + + // 轮播指示器 + const indicatorContainer = document.createElement('div'); + indicatorContainer.className = 'carousel-indicators'; + indicatorContainer.innerHTML = [1,2,3,4,5].map(i => + `` + ).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); + + // 更新内容 + displayImage.src = data.image; + displayTitle.textContent = data.title; + displaySubtitle.textContent = data.subtitle; + displayFeatures.innerHTML = data.features.map(f => `
  • ${f}
  • `).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); })(); diff --git a/stories.html b/stories.html new file mode 100644 index 0000000..e30b6c7 --- /dev/null +++ b/stories.html @@ -0,0 +1,607 @@ + + + + + + 宠物故事 - Chookoo宠科智能 + + + + + + + + + + + + + +
    +
    + +
    +
    + 小橘 + +
    +
    +

    小橘的逆袭日记

    +

    第一次发现Chookoo的智能猫厕所后,小橘终于康复了健康。原本经常尿频尿急的它现在每天都会主动监测,及时发现问题,让我这个做家长的更加安心...

    + + +
    +
    + + +
    +
    + 旺财 + +
    +
    +

    旺财的健身日记

    +

    旺财以前很挑食,Chookoo的智能喂食器帮它养成了定点投喂的好习惯,同时还会监测体重变化,真是做到科学喂养才安心...

    + + +
    +
    + + +
    +
    + 布丁 + +
    +
    +

    布丁的日常

    +

    自从用了AI摄像头,可以自动识别布丁的状态,让我惊喜万分。可以随时查看它在家的情况,还会自动识别猫咪的不同状态...

    + + +
    +
    + + +
    +
    + 豆豆 + +
    +
    +

    豆豆的饮水日记

    +

    豆豆以前不爱喝水,用了智能饮水机后,循环净化的水让它爱喝了。APP还会提醒我今日饮水量,确保健康...

    + + +
    +
    + + +
    +
    + 咪咪 + +
    +
    +

    咪咪的健康守护

    +

    Chookoo的智能设备帮我实时监测咪咪的健康状况,每次数据报告都让我很安心,真正做到了预防式健康管理...

    + + +
    +
    + + +
    +
    + 大黄 + +
    +
    +

    大黄的如厕训练

    +

    大黄以前随地大小便,用了Chookoo的智能狗厕所,科学训练让它很快养成了好习惯,省心又干净...

    + + +
    +
    +
    + + + +
    + + + + +