初步
This commit is contained in:
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"Bash(git config:*)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
+1707
-152
File diff suppressed because it is too large
Load Diff
+607
@@ -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>
|
||||||
Reference in New Issue
Block a user