小橘的逆袭日记
+第一次发现Chookoo的智能猫厕所后,小橘终于康复了健康...
+ +From 14651f81f556d256b24365e76b6d6412be1786a8 Mon Sep 17 00:00:00 2001 From: test <3072785233@qq.com> Date: Wed, 18 Mar 2026 10:40:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/settings.local.json | 7 + index.html | 1859 ++++++++++++++++++++++++++++++++--- stories.html | 607 ++++++++++++ 3 files changed, 2321 insertions(+), 152 deletions(-) create mode 100644 .claude/settings.local.json create mode 100644 stories.html 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 @@
+
- 宠科(Chookoo)成立于中国苏州,立足智慧健康管理领域,是一家专注于构建预防式健康生态的科技企业。 -
-- 我们传承长三角高端制造与前沿创新能力,深度融合人工智能、物联网与生物传感技术,依托苏州深厚的精密制造底蕴与跨学科研发能力, - 聚焦宠物与长者的主动健康管理需求。通过智能设备无感收集生命体征与行为数据,AI 实时分析将日常细微变化转化为精准的健康洞察, - 致力于让每一个生命都能被真正理解与守护,共同构建更安心、更具预见性的健康生活。 -
++ 宠科(Chookoo)成立于中国苏州,立足智慧健康管理领域,是一家专注于构建预防式健康生态的科技企业。 +
++ 我们传承长三角高端制造与前沿创新能力,深度融合人工智能、物联网与生物传感技术,通过智能设备无感收集生命体征与行为数据,AI 实时分析将日常细微变化转化为精准的健康洞察。 +
+
+ 成为全球宠物家庭最信赖的智能健康伙伴,定义主动健康管理新范式。
让健康可见,让需求可解,让宠爱无间。
- 智能监测、自动清洁,守护猫咪如厕健康。
+
+ 智能监测·自动清洁
+
+ 科学训练·智能清洁
+
- 科学如厕训练与清洁管理,省心易用。
+ +产品描述
+
- 定时定量、数据可视,构建健康饮食习惯。
-
- 循环净化、饮水提醒,提升饮水健康。
-
- 远程守护、行为识别,实时了解宠物状态。
+ +
+ 定时定量·科学喂养
+
+ 循环净化·饮水提醒
+
+ 远程守护·行为识别
+每一个毛孩子背后的温馨故事
+
+ 健康恢复
+ 第一次发现Chookoo的智能猫厕所后,小橘终于康复了健康。原本经常尿频尿急的它现在每天都会主动监测,及时发现问题,让我这个做家长的更加安心...
+ + +
+ 体重管理
+ 旺财以前很挑食,Chookoo的智能喂食器帮它养成了定点投喂的好习惯,同时还会监测体重变化,真是做到科学喂养才安心...
+ + +
+ AI识别
+ 自从用了AI摄像头,可以自动识别布丁的状态,让我惊喜万分。可以随时查看它在家的情况,还会自动识别猫咪的不同状态...
+ + +
+ 饮水健康
+ 豆豆以前不爱喝水,用了智能饮水机后,循环净化的水让它爱喝了。APP还会提醒我今日饮水量,确保健康...
+ + +
+ 健康监测
+ Chookoo的智能设备帮我实时监测咪咪的健康状况,每次数据报告都让我很安心,真正做到了预防式健康管理...
+ + +
+ 训练养成
+ 大黄以前随地大小便,用了Chookoo的智能狗厕所,科学训练让它很快养成了好习惯,省心又干净...
+ + +diff --git a/stories.html b/stories.html new file mode 100644 index 0000000..e30b6c7 --- /dev/null +++ b/stories.html @@ -0,0 +1,607 @@ + + +
+ + +
+ + + + + +