1240 lines
47 KiB
HTML
1240 lines
47 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>宠物故事 - Chookoo宠科智能</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;
|
|
}
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
.container {
|
|
width: min(1200px, 100%);
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
/* 导航栏 */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.navbar-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 0 32px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.navbar-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.navbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-logo img {
|
|
height: 40px;
|
|
width: auto;
|
|
}
|
|
.navbar-link {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-link:hover {
|
|
color: var(--text);
|
|
background: rgba(0, 0, 0, 0.04);
|
|
text-decoration: none;
|
|
}
|
|
.navbar-link.active {
|
|
color: var(--primary);
|
|
background: var(--primary-weak);
|
|
}
|
|
.navbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.navbar-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
transition: all 0.2s ease;
|
|
}
|
|
.navbar-btn:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
color: var(--text);
|
|
}
|
|
.navbar-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.navbar-cta {
|
|
padding: 10px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%);
|
|
border: none;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
}
|
|
.navbar-cta:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.3);
|
|
}
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.navbar-menu {
|
|
display: none;
|
|
}
|
|
.mobile-menu-btn {
|
|
display: flex;
|
|
}
|
|
.navbar-cta {
|
|
display: none;
|
|
}
|
|
}
|
|
/* 页面头部 */
|
|
.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: 80px 0;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
|
|
}
|
|
.social-section h2 {
|
|
text-align: center;
|
|
font-size: 32px;
|
|
margin: 0 0 12px;
|
|
font-weight: 700;
|
|
}
|
|
.social-section .subtitle {
|
|
text-align: center;
|
|
color: var(--muted);
|
|
margin: 0 0 48px;
|
|
font-size: 16px;
|
|
}
|
|
.social-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 32px;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
.social-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 32px 24px;
|
|
border-radius: 20px;
|
|
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(-6px);
|
|
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
|
|
}
|
|
.social-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16px;
|
|
background: var(--primary-weak);
|
|
color: var(--primary);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.social-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.social-card:hover .social-icon {
|
|
background: var(--primary);
|
|
color: #fff;
|
|
}
|
|
.social-card h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0 0 6px;
|
|
}
|
|
.social-card p {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
margin: 0 0 16px;
|
|
text-align: center;
|
|
}
|
|
.social-card .qr-code {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.social-card .qr-code img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
}
|
|
/* 页脚 */
|
|
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; }
|
|
.social-section h2 { font-size: 24px; }
|
|
.social-section .subtitle { font-size: 14px; margin-bottom: 32px; }
|
|
.stories-grid { grid-template-columns: 1fr; padding: 24px 16px; }
|
|
.social-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
padding: 0 16px;
|
|
}
|
|
.social-card { padding: 24px 16px; }
|
|
.social-card .qr-code { width: 100px; height: 100px; }
|
|
.social-card h3 { font-size: 14px; }
|
|
.social-card p { font-size: 12px; }
|
|
}
|
|
/* 页脚样式 */
|
|
.footer {
|
|
background: #0f172a;
|
|
color: #94a3b8;
|
|
padding: 40px 0 48px;
|
|
}
|
|
.footer-container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
width: 100%;
|
|
}
|
|
.footer-bottom {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
padding-top: 32px;
|
|
}
|
|
.footer-bottom-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
padding-bottom: 32px;
|
|
}
|
|
.footer-copyright {
|
|
font-size: 13px;
|
|
color: #475569;
|
|
}
|
|
.footer-social {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-left: -580px;
|
|
}
|
|
.footer-social a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: #94a3b8;
|
|
transition: all 0.25s ease;
|
|
}
|
|
.footer-social a:hover {
|
|
background: #2f6bff;
|
|
color: #fff;
|
|
transform: translateY(-2px);
|
|
}
|
|
.footer-social svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.footer-legal {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|
|
.footer-legal a {
|
|
font-size: 13px;
|
|
color: #475569;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
.footer-legal a:hover {
|
|
color: #fff;
|
|
}
|
|
.beian-row {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 32px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
.beian-row .sep {
|
|
color: #334155;
|
|
}
|
|
.beian-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.footer-bottom-main {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 16px;
|
|
}
|
|
.footer-legal {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
/* 社交媒体弹窗 */
|
|
.social-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.social-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.social-modal {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border-radius: 24px;
|
|
padding: 40px;
|
|
max-width: 480px;
|
|
width: 90%;
|
|
transform: scale(0.9) translateY(20px);
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
|
|
position: relative;
|
|
}
|
|
.social-modal-overlay.active .social-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
.social-modal-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
.social-modal-header h3 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin: 0 0 8px;
|
|
}
|
|
.social-modal-header p {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
}
|
|
.social-modal-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.social-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: #1f2937;
|
|
}
|
|
.social-qr-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.social-qr-item {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
border: 1px solid #e5e7eb;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.social-qr-item:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.social-qr-item .qr-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 0 auto 12px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.social-qr-item .qr-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.social-qr-item.wechat .qr-icon {
|
|
background: linear-gradient(135deg, #07c160 0%, #1aad19 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item.weibo .qr-icon {
|
|
background: linear-gradient(135deg, #ff5722 0%, #e51c23 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item.xiaohongshu .qr-icon {
|
|
background: linear-gradient(135deg, #fe2c55 0%, #ff2442 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item.tiktok .qr-icon {
|
|
background: linear-gradient(135deg, #000 0%, #25f4ee 100%);
|
|
color: #fff;
|
|
}
|
|
.social-qr-item .qr-image {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto 12px;
|
|
background: #f3f4f6;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.social-qr-item .qr-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.social-qr-item .qr-placeholder {
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
}
|
|
.social-qr-item .qr-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 4px;
|
|
}
|
|
.social-qr-item .qr-desc {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
/* 购物弹窗样式 */
|
|
.contact-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(8px);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.contact-modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.contact-modal {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border-radius: 24px;
|
|
padding: 40px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
transform: scale(0.9) translateY(20px);
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
.contact-modal-overlay.active .contact-modal {
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
.contact-modal-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.contact-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
color: #1f2937;
|
|
}
|
|
.contact-modal-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 16px;
|
|
background: linear-gradient(135deg, #2f6bff 0%, #06b6d4 100%);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
}
|
|
.contact-modal-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.contact-modal h3 {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin: 0 0 8px;
|
|
}
|
|
.contact-modal p {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0 0 24px;
|
|
}
|
|
.contact-qr-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.contact-qr-box {
|
|
width: 160px;
|
|
height: 160px;
|
|
background: #f3f4f6;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.contact-qr-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.contact-qr-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: #f3f4f6;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
color: #4b5563;
|
|
}
|
|
.contact-qr-label svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
</style>
|
|
<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="navbar">
|
|
<div class="navbar-inner">
|
|
<a href="index.html" class="navbar-logo">
|
|
<img src="logo.png" alt="Chookoo" />
|
|
</a>
|
|
<div class="navbar-menu">
|
|
<a href="index.html" class="navbar-link">首页</a>
|
|
<a href="products.html" class="navbar-link">产品</a>
|
|
<a href="stories.html" class="navbar-link active">故事</a>
|
|
<a href="app.html" class="navbar-link">App</a>
|
|
<a href="index.html#support" class="navbar-link">关于我们</a>
|
|
</div>
|
|
<div class="navbar-actions">
|
|
<a href="help.html" class="navbar-btn" aria-label="Search">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
</a>
|
|
<button class="navbar-btn" id="shopBtn" aria-label="Cart">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
|
|
</button>
|
|
<select id="langSelect" aria-label="Language" style="background:transparent;border:none;font-size:13px;color:var(--muted);cursor:pointer;padding:8px;">
|
|
<option value="zh">中文</option>
|
|
<option value="en">EN</option>
|
|
<option value="ja">日本語</option>
|
|
</select>
|
|
<a href="index.html#contact" class="navbar-cta">联系我们</a>
|
|
<button class="navbar-btn mobile-menu-btn" aria-label="Menu">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
</button>
|
|
</div>
|
|
</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 class="footer">
|
|
<div class="footer-container">
|
|
<div class="footer-bottom">
|
|
<div class="footer-bottom-main">
|
|
<p class="footer-copyright">© 2025 Chookoo. All rights reserved.</p>
|
|
<div class="footer-social">
|
|
<a href="#" aria-label="WeChat">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="Weibo">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.579-.18-.405-.649.381-.998.42-1.859.003-2.474-.785-1.159-2.924-1.095-5.399-.034 0 0-.773.335-.576-.272.383-1.217.324-2.236-.271-2.823-1.35-1.329-4.935.05-8.006 3.073C1.203 10.674 0 13.078 0 15.09c0 3.854 4.946 6.194 9.783 6.194 6.334 0 10.555-3.681 10.555-6.6 0-1.765-1.489-2.763-2.68-3.025h.001zm1.895-5.962c-.766-.847-1.896-1.217-3.036-1.109l.049-.003c.263-.03.49.168.512.436a.475.475 0 0 1-.428.516c-.842.09-1.651.509-2.219 1.261a.468.468 0 0 1-.656.09.473.473 0 0 1-.088-.662c.722-.958 1.773-1.505 2.871-1.623 1.427-.147 2.835.369 3.795 1.432.957 1.06 1.331 2.483 1.086 3.864a.47.47 0 0 1-.545.39.472.472 0 0 1-.386-.548c.195-1.1-.104-2.237-.865-3.08l-.09-.064zm.963-3.178c-1.262-1.396-3.123-1.999-4.998-1.662a.471.471 0 0 0 .165.927c1.513-.272 3.013.213 4.03 1.339 1.017 1.125 1.39 2.626 1.04 4.093a.473.473 0 0 0 .346.57.467.467 0 0 0 .568-.345c.425-1.78-.033-3.617-1.151-4.922z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="Xiaohongshu">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
|
|
</a>
|
|
<a href="#" aria-label="TikTok">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
|
|
</a>
|
|
</div>
|
|
<div class="footer-legal">
|
|
<a href="#">隐私政策</a>
|
|
<a href="#">服务条款</a>
|
|
<a href="#">Cookie 设置</a>
|
|
</div>
|
|
</div>
|
|
<p class="beian-row">
|
|
<span>宠科智能科技（苏州）有限公司</span>
|
|
<span class="sep">|</span>
|
|
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">苏ICP备2025227635号</a>
|
|
<span class="sep">|</span>
|
|
<img class="beian-icon" src="https://www.beian.gov.cn/img/new/gongan.png" alt="公安备案" />
|
|
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32050902103112" target="_blank" rel="noopener noreferrer">苏公网安备32050902103112号</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 社交媒体二维码弹窗 -->
|
|
<div class="social-modal-overlay" id="socialModal">
|
|
<div class="social-modal">
|
|
<button class="social-modal-close" id="socialModalClose">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<div class="social-modal-header">
|
|
<h3>关注我们</h3>
|
|
<p>扫描二维码，获取更多精彩内容</p>
|
|
</div>
|
|
<div class="social-qr-grid">
|
|
<div class="social-qr-item wechat">
|
|
<div class="qr-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.269-.03-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/></svg>
|
|
</div>
|
|
<div class="qr-image">
|
|
<img src="qr-wechat.png" alt="微信二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
|
</div>
|
|
<div class="qr-name">微信公众号</div>
|
|
<div class="qr-desc">获取最新资讯</div>
|
|
</div>
|
|
<div class="social-qr-item weibo">
|
|
<div class="qr-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.573h.014zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.578-.18-.405-.649.381-1.017.422-1.896-.006-2.523-.802-1.171-2.996-1.107-5.528-.031 0 0-.791.346-.589-.283.389-1.229.332-2.26-.275-2.857-1.379-1.36-5.049.051-8.199 3.154C.946 11.718 0 14.132 0 16.194c0 3.949 5.06 6.347 10.014 6.347 6.496 0 10.819-3.774 10.819-6.772 0-1.811-1.527-2.838-2.774-3.32zm2.059-3.799c-.637-.785-1.584-1.216-2.662-1.216l-.273.006.074-.27c.098-.358.148-.699.148-1.018 0-.802-.314-1.521-.887-2.024-.573-.503-1.341-.78-2.163-.78-.823 0-1.59.277-2.163.78-.387.34-.655.749-.807 1.197l-.088.26-.222-.132c-.398-.237-.856-.363-1.325-.363-.484 0-.955.133-1.362.385l-.222.138.074-.268c.12-.434.174-.843.174-1.229 0-1.158-.456-2.247-1.286-3.068C6.107.435 5.007 0 3.84 0 2.672 0 1.572.435.743 1.224-.087 2.014-.543 3.102-.543 4.26c0 1.159.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256.484 0 .955-.088 1.407-.262l.222-.088-.074.268c-.12.434-.174.843-.174 1.229 0 1.158.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256s2.267-.436 3.097-1.256c.387-.382.68-.813.879-1.278l.088-.207.222.132c.398.237.856.363 1.325.363.484 0 .955-.133 1.362-.385l.222-.138-.074.268c-.12.434-.174.843-.174 1.229 0 1.158.456 2.247 1.286 3.068.83.82 1.93 1.256 3.097 1.256s2.267-.436 3.097-1.256c.83-.82 1.286-1.91 1.286-3.068 0-1.158-.456-2.247-1.286-3.068z"/></svg>
|
|
</div>
|
|
<div class="qr-image">
|
|
<img src="qr-weibo.png" alt="微博二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
|
</div>
|
|
<div class="qr-name">官方微博</div>
|
|
<div class="qr-desc">互动交流</div>
|
|
</div>
|
|
<div class="social-qr-item xiaohongshu">
|
|
<div class="qr-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.615 14.154h-2.423v-3.077h-2.769v3.077H9V7.846h2.423v3.077h2.769V7.846h2.423v8.308z"/></svg>
|
|
</div>
|
|
<div class="qr-image">
|
|
<img src="qr-xiaohongshu.png" alt="小红书二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
|
</div>
|
|
<div class="qr-name">小红书</div>
|
|
<div class="qr-desc">种草分享</div>
|
|
</div>
|
|
<div class="social-qr-item tiktok">
|
|
<div class="qr-icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/></svg>
|
|
</div>
|
|
<div class="qr-image">
|
|
<img src="qr-tiktok.png" alt="抖音二维码" onerror="this.parentElement.innerHTML='<span class=\'qr-placeholder\'>请替换二维码</span>'" />
|
|
</div>
|
|
<div class="qr-name">抖音</div>
|
|
<div class="qr-desc">精彩视频</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 社交媒体弹窗控制
|
|
const socialModal = document.getElementById('socialModal');
|
|
const socialModalClose = document.getElementById('socialModalClose');
|
|
|
|
// 点击社交媒体图标打开弹窗
|
|
document.querySelectorAll('.footer-social a').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
socialModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
});
|
|
|
|
// 关闭弹窗
|
|
socialModalClose.addEventListener('click', function() {
|
|
socialModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
|
|
// 点击遮罩关闭
|
|
socialModal.addEventListener('click', function(e) {
|
|
if (e.target === socialModal) {
|
|
socialModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- 购物弹窗 -->
|
|
<div class="contact-modal-overlay" id="shopModal">
|
|
<div class="contact-modal">
|
|
<button class="contact-modal-close" id="shopModalClose">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<div class="contact-modal-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
</svg>
|
|
</div>
|
|
<h3>官方旗舰店</h3>
|
|
<p>扫描二维码，进入官方店铺选购</p>
|
|
<div class="contact-qr-wrapper">
|
|
<div class="contact-qr-box"><img src="qr-shop.png" alt="旗舰店二维码" onerror="this.parentElement.innerHTML='<span style=\'color:#9ca3af;font-size:14px;\'>请替换店铺二维码<br>qr-shop.png</span>'" /></div>
|
|
<div class="contact-qr-label">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="7" y1="7" x2="7" y2="7"></line>
|
|
<line x1="17" y1="7" x2="17" y2="7"></line>
|
|
<line x1="7" y1="12" x2="7" y2="12"></line>
|
|
<line x1="17" y1="12" x2="17" y2="12"></line>
|
|
<line x1="7" y1="17" x2="7" y2="17"></line>
|
|
<line x1="17" y1="17" x2="17" y2="17"></line>
|
|
</svg>
|
|
<span>扫码进店</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 购物弹窗控制
|
|
const shopModal = document.getElementById('shopModal');
|
|
const shopBtn = document.getElementById('shopBtn');
|
|
const shopModalClose = document.getElementById('shopModalClose');
|
|
|
|
if (shopBtn) {
|
|
shopBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
shopModal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
}
|
|
|
|
if (shopModalClose) {
|
|
shopModalClose.addEventListener('click', function() {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
}
|
|
|
|
if (shopModal) {
|
|
shopModal.addEventListener('click', function(e) {
|
|
if (e.target === shopModal) {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && shopModal && shopModal.classList.contains('active')) {
|
|
shopModal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|