Mortar_peng/Chookoo.netPro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初步

Browse Source
This commit is contained in:
test
2026-03-18 10:40:32 +08:00
parent 747407d826
commit 14651f81f5
3 changed files with 2321 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/settings.local.json
+7
View File
@@ -0,0 +1,7 @@
{
"permissions": {
"allow": [
"Bash(git config:*)"
]
}
}
index.html
+1707 -152
View File
File diff suppressed because it is too large Load Diff
stories.html
+607
View File
@@ -0,0 +1,607 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>宠物故事 - Chookoo宠科智能</title>
<style>
:root {
color-scheme: light;
--bg: #f5f7fb;
--text: #0f172a;
--muted: #5b6472;
--primary: #2f6bff;
--primary-weak: #e8f1ff;
--card: #ffffff;
--line: #e5e7eb;
--shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}
* { box-sizing: border-box; }
html, 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);
min-width: 320px;
}
a {
color: inherit;
text-decoration: none;
}
.container {
width: min(1200px, 100%);
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* 导航栏 */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 16px 24px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
.nav-logo {
font-size: 20px;
font-weight: 700;
color: var(--primary);
display: flex;
align-items: center;
gap: 8px;
}
.nav-logo-icon {
width: 28px;
height: 28px;
background: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
}
.nav-back {
display: flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 14px;
transition: color 0.3s ease;
}
.nav-back:hover {
color: var(--primary);
}
/* 页面头部 */
.page-header {
padding: 120px 0 60px;
text-align: center;
background: linear-gradient(180deg, rgba(245, 247, 251, 0.8) 0%, rgba(245, 247, 251, 1) 100%);
}
.page-header h1 {
font-size: 42px;
margin: 0 0 16px;
font-weight: 700;
}
.page-header p {
font-size: 18px;
color: var(--muted);
margin: 0;
}
/* 故事网格 */
.stories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 32px;
padding: 40px 0 80px;
}
.story-card {
border-radius: 24px;
overflow: hidden;
background: var(--card);
border: 1px solid var(--line);
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;
}
.story-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}
.story-image-wrapper {
position: relative;
height: 220px;
overflow: hidden;
}
.story-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.story-card:hover .story-image {
transform: scale(1.08);
}
.story-category {
position: absolute;
top: 16px;
left: 16px;
padding: 6px 14px;
border-radius: 999px;
background: var(--primary);
color: #fff;
font-size: 12px;
font-weight: 600;
}
.story-content {
padding: 24px;
}
.story-content h2 {
font-size: 20px;
font-weight: 600;
margin: 0 0 12px;
color: #1f2937;
transition: color 0.3s ease;
}
.story-card:hover .story-content h2 {
color: var(--primary);
}
.story-content p {
font-size: 15px;
line-height: 1.7;
color: var(--muted);
margin: 0 0 16px;
}
.story-meta {
display: flex;
align-items: center;
gap: 12px;
}
.story-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-weak);
}
.story-author {
flex: 1;
}
.story-author-name {
font-size: 14px;
font-weight: 500;
color: #374151;
margin: 0 0 2px;
}
.story-date {
font-size: 12px;
color: #9ca3af;
}
.story-tags {
display: flex;
gap: 8px;
margin-top: 16px;
}
.story-tag {
padding: 4px 12px;
border-radius: 999px;
background: var(--primary-weak);
color: var(--primary);
font-size: 12px;
}
/* 社交媒体区域 - 紧凑高端设计 */
.social-section {
padding: 60px 0;
background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
}
.social-section h2 {
text-align: center;
font-size: 24px;
margin: 0 0 6px;
font-weight: 600;
}
.social-section .subtitle {
text-align: center;
color: var(--muted);
margin: 0 0 32px;
font-size: 14px;
}
.social-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
}
.social-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 16px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--line);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
transition: all 0.3s ease;
}
.social-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.social-icon {
width: 44px;
height: 44px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--primary-weak);
color: var(--primary);
transition: all 0.3s ease;
}
.social-icon svg {
width: 22px;
height: 22px;
}
.social-card:hover .social-icon {
background: var(--primary);
color: #fff;
}
.social-card h3 {
font-size: 14px;
font-weight: 600;
color: #1f2937;
margin: 0 0 4px;
}
.social-card p {
font-size: 12px;
color: var(--muted);
margin: 0 0 12px;
text-align: center;
}
.social-card .qr-code {
width: 80px;
height: 80px;
border-radius: 8px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--muted);
}
.social-card .qr-code img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
/* 页脚 */
footer {
padding: 40px 24px;
text-align: center;
border-top: 1px solid var(--line);
background: #f9fafb;
}
.footer p {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.footer a {
color: var(--primary);
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(1);
}
}
.story-card {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.story-card:nth-child(1) { animation-delay: 0.1s; }
.story-card:nth-child(2) { animation-delay: 0.2s; }
.story-card:nth-child(3) { animation-delay: 0.3s; }
.story-card:nth-child(4) { animation-delay: 0.4s; }
.story-card:nth-child(5) { animation-delay: 0.5s; }
.story-card:nth-child(6){ animation-delay: 0.6s; }
.social-card {
opacity: 0;
animation: fadeInUp 0.5s ease forwards;
}
.social-card:nth-child(1) { animation-delay: 0.7s; }
.social-card:nth-child(2) { animation-delay: 0.8s; }
.social-card:nth-child(3) { animation-delay: 0.9s; }
.social-card:nth-child(4) { animation-delay: 1s; }
@media (max-width: 768px) {
.page-header h1 { font-size: 32px; }
.stories-grid { grid-template-columns: 1fr; padding: 24px 16px; }
.social-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 0 16px;
}
.social-card { padding: 16px; }
.social-card .qr-code { width: 70px; height: 70px; }
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/lucide@latest"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
/* 替代图片样式 */
.social-icon svg {
width: 32px;
height: 32px;
}
</style>
<body>
<!-- 导航栏 -->
<nav class="nav">
<div class="nav-inner">
<a href="index.html" class="nav-logo">
<span class="nav-logo-icon">C</span>
Chookoo
</a>
<a href="index.html" class="nav-back">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12l-4-4 4-4-4 4-4-4 4 4 4 2a6 2a6 2"></path><path d="M19 12H5"></path><path d="M12 19V5"></path></svg>
返回首页
</a>
</div>
</nav>
<!-- 页面头部 -->
<header class="page-header">
<div class="container">
<h1>宠物故事</h1>
<p>每一个毛孩子背后的温馨故事</p>
</div>
</header>
<!-- 故事列表 -->
<main class="container">
<div class="stories-grid">
<!-- 故事1 -->
<div class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-1.jpg" alt="小橘" onerror="this.src='cat.png'" />
<span class="story-category">健康恢复</span>
</div>
<div class="story-content">
<h2>小橘的逆袭日记</h2>
<p>第一次发现Chookoo的智能猫厕所后，小橘终于康复了健康。原本经常尿频尿急的它现在每天都会主动监测，及时发现问题，让我这个做家长的更加安心...</p>
<div class="story-meta">
<img class="story-avatar" src="story-cat-1.jpg" alt="小橘" onerror="this.src='cat.png'" />
<div class="story-author">
<p class="story-author-name">小橘妈妈</p>
<p class="story-date">橘猫 · 上海 · 2024.03</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">健康监测</span>
<span class="story-tag">智能猫厕所</span>
<span class="story-tag">数据报告</span>
</div>
</div>
</div>
<!-- 故事2 -->
<div class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-2.jpg" alt="旺财" onerror="this.src='dog.jpeg'" />
<span class="story-category">体重管理</span>
</div>
<div class="story-content">
<h2>旺财的健身日记</h2>
<p>旺财以前很挑食，Chookoo的智能喂食器帮它养成了定点投喂的好习惯，同时还会监测体重变化，真是做到科学喂养才安心...</p>
<div class="story-meta">
<img class="story-avatar" src="story-dog-1.jpg" alt="旺财" onerror="this.src='dog.jpeg'" />
<div class="story-author">
<p class="story-author-name">旺财爸爸</p>
<p class="story-date">金毛 · 北京 · 2024.02</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">智能喂食</span>
<span class="story-tag">体重管理</span>
<span class="story-tag">定时定量</span>
</div>
</div>
</div>
<!-- 故事3 -->
<div class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-3.jpg" alt="布丁" onerror="this.src='cat.png'" />
<span class="story-category">AI识别</span>
</div>
<div class="story-content">
<h2>布丁的日常</h2>
<p>自从用了AI摄像头，可以自动识别布丁的状态，让我惊喜万分。可以随时查看它在家的情况，还会自动识别猫咪的不同状态...</p>
<div class="story-meta">
<img class="story-avatar" src="story-cat-2.jpg" alt="布丁" onerror="this.src='cat.png'" />
<div class="story-author">
<p class="story-author-name">布丁姐姐</p>
<p class="story-date">英短 · 深圳 · 2024.01</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">AI摄像头</span>
<span class="story-tag">行为识别</span>
<span class="story-tag">远程守护</span>
</div>
</div>
</div>
<!-- 故事4 -->
<div class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-4.jpg" alt="豆豆" onerror="this.src='dog.jpeg'" />
<span class="story-category">饮水健康</span>
</div>
<div class="story-content">
<h2>豆豆的饮水日记</h2>
<p>豆豆以前不爱喝水，用了智能饮水机后，循环净化的水让它爱喝了。APP还会提醒我今日饮水量,确保健康...</p>
<div class="story-meta">
<img class="story-avatar" src="story-dog-2.jpg" alt="豆豆" onerror="this.src='dog.jpeg'" />
<div class="story-author">
<p class="story-author-name">豆豆妈妈</p>
<p class="story-date">柯基 · 杭州 · 2024.01</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">智能饮水机</span>
<span class="story-tag">饮水提醒</span>
<span class="story-tag">循环净化</span>
</div>
</div>
</div>
<!-- 故事5 -->
<div class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-5.jpg" alt="咪咪" onerror="this.src='cat.png'" />
<span class="story-category">健康监测</span>
</div>
<div class="story-content">
<h2>咪咪的健康守护</h2>
<p>Chookoo的智能设备帮我实时监测咪咪的健康状况，每次数据报告都让我很安心，真正做到了预防式健康管理...</p>
<div class="story-meta">
<img class="story-avatar" src="story-cat-3.jpg" alt="咪咪" onerror="this.src='cat.png'" />
<div class="story-author">
<p class="story-author-name">咪咪妈妈</p>
<p class="story-date">美短 · 广州 · 2023.12</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">健康监测</span>
<span class="story-tag">预防管理</span>
<span class="story-tag">数据报告</span>
</div>
</div>
</div>
<!-- 故事6 -->
<div class="story-card">
<div class="story-image-wrapper">
<img class="story-image" src="story-6.jpg" alt="大黄" onerror="this.src='dog.jpeg'" />
<span class="story-category">训练养成</span>
</div>
<div class="story-content">
<h2>大黄的如厕训练</h2>
<p>大黄以前随地大小便，用了Chookoo的智能狗厕所，科学训练让它很快养成了好习惯，省心又干净...</p>
<div class="story-meta">
<img class="story-avatar" src="story-dog-3.jpg" alt="大黄" onerror="this.src='dog.jpeg'" />
<div class="story-author">
<p class="story-author-name">大黄爸爸</p>
<p class="story-date">田园犬 · 成都 · 2023.11</p>
</div>
</div>
<div class="story-tags">
<span class="story-tag">智能狗厕所</span>
<span class="story-tag">如厕训练</span>
<span class="story-tag">清洁管理</span>
</div>
</div>
</div>
</div>
<!-- 社交媒体区域 -->
<section class="social-section">
<h2>关注我们</h2>
<p class="subtitle">获取更多宠物护理知识和产品资讯</p>
<div class="social-grid">
<!-- 微信公众号 -->
<div class="social-card">
<div class="social-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
</svg>
</div>
<h3>微信公众号</h3>
<p>Chookoo宠科智能</p>
<div class="qr-code">
<img src="qr-wechat.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
<!-- 视频号 -->
<div class="social-card">
<div class="social-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="23 7 16 12 23 17 23 7"/>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
</svg>
</div>
<h3>视频号</h3>
<p>Chookoo宠科智能</p>
<div class="qr-code">
<img src="qr-video.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
<!-- 抖音 -->
<div class="social-card">
<div class="social-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/>
</svg>
</div>
<h3>抖音</h3>
<p>@Chookoo宠科智能</p>
<div class="qr-code">
<img src="qr-douyin.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
<!-- 小红书 -->
<div class="social-card">
<div class="social-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
<polyline points="22,6 12,13 2,6"/>
</svg>
</div>
<h3>小红书</h3>
<p>Chookoo宠科智能</p>
<div class="qr-code">
<img src="qr-xiaohongshu.png" alt="扫码关注" onerror="this.parentElement.innerHTML='扫码关注'" />
</div>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer>
<div class="container">
<p>© 2024 Chookoo宠科智能科技（苏州）有限公司 · 让每一份宠爱，都有科学回响</p>
<p style="margin-top: 8px;">
<a href="index.html">返回首页</a>
</p>
</div>
</footer>
</body>
</html>