diff --git a/admin.html b/admin.html new file mode 100644 index 0000000..4e4cdad --- /dev/null +++ b/admin.html @@ -0,0 +1,1903 @@ + + + + + + 文章管理后台 - Chookoo + + + + + + + +
+ +
+
+
总文章数
+
0
+
+
+
自定义文章
+
0
+
+
+
分类数
+
6
+
+
+
最后更新
+
-
+
+
+ + +
+ + + + +
+
+
全部文章
+
+
+ 已选 0 项 + + +
+ +
+
+
+
+
+
+ + + + + + + + + + + +
+ + 操作成功 +
+ + + + diff --git a/app.html b/app.html new file mode 100644 index 0000000..c1ef531 --- /dev/null +++ b/app.html @@ -0,0 +1,1002 @@ + + + + + + Chookoo App - 智能宠物健康管理 + + + + + + + +
+
+
+
+ + 全球独家 · 毫米波雷达 + 红外测温 +
+

Chookoo App

+

AI宠物健康平台,全球独家搭载毫米波雷达红外测温技术。不仅能自动铲屎,更能24小时无感监测猫咪心率、呼吸与体温,通过多设备生态联动主动管理宠物健康,是真正能"救命"的AI宠物医生。

+ +
+
+
+
+
+
+ +
+

Chookoo

+

智能宠物健康管理

+
+
+
+
+
+
+ + +
+
+
+ 核心技术 +

AI宠物健康平台

+

全球独家搭载毫米波雷达与红外测温,真正能"救命"的AI宠物医生

+
+
+
+
+ +
+
+

毫米波雷达监测

+

24小时无感监测宠物心率与呼吸频率,无需佩戴任何设备,实现真正无接触健康追踪

+
+
+
+
+ +
+
+

红外体温检测

+

精准红外测温技术,实时监测宠物体温变化,发烧预警第一时间推送

+
+
+
+
+ +
+
+

AI健康预警

+

基于AI算法分析健康趋势,异常情况即时提醒,在问题发生前主动干预

+
+
+
+
+ +
+
+

多设备生态联动

+

智能喂食器、猫砂盆、饮水机等设备数据互通,构建完整健康管理生态

+
+
+
+
+
+ + +
+
+
+
+ 全球独家 +

毫米波雷达 · 心率呼吸监测

+

搭载医疗级毫米波雷达技术,24小时无感监测宠物心率与呼吸频率。无需任何穿戴设备,宠物在猫砂盆内即可完成健康检测,数据实时同步至App。

+
+ + + 无接触监测 + + + + 心率异常预警 + + + + 呼吸频率追踪 + +
+
+
+ +
+
+ +
+
+ 红外测温 +

体温实时监测 · 发烧即时预警

+

精准红外测温传感器,每次如厕自动测量体温。体温异常立即推送通知,让家长第一时间发现潜在健康问题,真正做到"救命"于未然。

+
+ + + 精准±0.1°C + + + + 发烧即时提醒 + + + + 体温趋势分析 + +
+
+
+ +
+
+ +
+
+ AI分析 +

多设备联动 · 主动健康管理

+

喂食器、猫砂盆、饮水机数据互通,AI综合分析饮食、排泄、活动等多维度数据。识别健康风险趋势,提供个性化建议,主动守护宠物健康。

+
+ + + 多维度数据分析 + + + + 健康风险预警 + + + + 个性化建议 + +
+
+
+ +
+
+ +
+
+ 智能清洁 +

自动铲屎 · 如厕行为追踪

+

智能猫砂盆自动清理,App实时记录如厕次数、时长、排泄量等数据。通过历史趋势分析,及早发现泌尿系统疾病征兆。

+
+ + + 自动清理 + + + + 如厕行为分析 + + + + 泌尿健康预警 + +
+
+
+ +
+
+
+
+ + +
+
+
+
+
100万+
+
活跃用户
+
+
+
10亿+
+
健康数据点
+
+
+
30+
+
覆盖国家
+
+
+
4.9
+
用户评分
+
+
+
+
+ + +
+
+

立即下载 Chookoo App

+

开启AI宠物健康管理之旅,让毫米波雷达和AI守护每一个毛孩子的生命健康

+ +
+
+ + + + + diff --git a/camera(1).jpg b/camera(1).jpg new file mode 100644 index 0000000..9c53e7f Binary files /dev/null and b/camera(1).jpg differ diff --git a/company.html b/company.html new file mode 100644 index 0000000..92307a9 --- /dev/null +++ b/company.html @@ -0,0 +1,722 @@ + + + + + + 公司介绍 - Chookoo + + + + + + + +
+
+ +
+ +
+

公司介绍

+

搜索您想了解的问题,或浏览下方分类

+ +
+ + +
+
全部
+
关于我们
+
加入我们
+
新闻动态
+
品牌故事
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/help.html b/help.html new file mode 100644 index 0000000..1b0b9f4 --- /dev/null +++ b/help.html @@ -0,0 +1,1330 @@ + + + + + + 帮助中心 - Chookoo + + + + + + + +
+
+ +
+ +
+

帮助中心

+

搜索您想了解的问题,或浏览下方分类

+ +
+ + +
+
全部
+
安装指导
+
智能猫厕所
+
智能饮水机
+
智能喂食器
+
APP使用
+
其他问题
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + + diff --git a/img_v3_02vs_10f2ef76-5d4f-4c1e-82fa-04b1852570dg.png b/img_v3_02vs_10f2ef76-5d4f-4c1e-82fa-04b1852570dg.png new file mode 100644 index 0000000..772cf06 Binary files /dev/null and b/img_v3_02vs_10f2ef76-5d4f-4c1e-82fa-04b1852570dg.png differ diff --git a/index.html b/index.html index 9f5c94f..6faf743 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,10 @@ } * { box-sizing: border-box; } html, body { - height: 100%; + height: auto; + } + html { + overflow-y: scroll; } body { margin: 0; @@ -26,8 +29,7 @@ "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); - scroll-snap-type: y mandatory; - overflow-y: scroll; + overflow-y: auto; scroll-behavior: smooth; min-width: 320px; } @@ -36,7 +38,7 @@ text-decoration: none; } a:hover { - text-decoration: underline; + text-decoration: none; } .container { width: min(1120px, 100%); @@ -44,6 +46,676 @@ 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; + } + /* 页面底部 - 扩展版 */ + .footer-section { + background: linear-gradient(180deg, #0f172a 0%, #020617 100%); + color: #94a3b8; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 0 40px; + } + .footer-container { + max-width: 1280px; + margin: 0 auto; + padding: 0 24px; + width: 100%; + } + .footer-top { + display: flex; + justify-content: space-between; + gap: 60px; + padding-bottom: 48px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + margin-bottom: 48px; + } + .footer-brand-area { + max-width: 360px; + } + .footer-logo { + display: flex; + align-items: center; + margin-bottom: 16px; + } + .footer-logo img { + height: 48px; + width: auto; + } + .footer-tagline { + font-size: 16px; + font-weight: 500; + color: #fff; + margin-bottom: 12px; + } + .footer-desc { + font-size: 14px; + line-height: 1.8; + color: #64748b; + margin-bottom: 24px; + } + .footer-social { + display: flex; + gap: 12px; + } + .footer-social a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 10px; + background: rgba(255, 255, 255, 0.05); + color: #94a3b8; + transition: all 0.25s ease; + } + .footer-social a:hover { + background: var(--primary); + color: #fff; + transform: translateY(-2px); + } + .footer-social svg { + width: 20px; + height: 20px; + } + .footer-subscribe { + max-width: 360px; + } + .footer-subscribe h4 { + font-size: 18px; + font-weight: 600; + color: #fff; + margin: 0 0 12px; + } + .footer-subscribe p { + font-size: 14px; + color: #64748b; + margin-bottom: 20px; + line-height: 1.6; + } + .subscribe-form { + display: flex; + gap: 12px; + } + .subscribe-form input { + flex: 1; + padding: 14px 18px; + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.05); + color: #fff; + font-size: 14px; + outline: none; + transition: all 0.2s ease; + } + .subscribe-form input::placeholder { + color: #64748b; + } + .subscribe-form input:focus { + border-color: var(--primary); + background: rgba(255, 255, 255, 0.08); + } + .subscribe-form button { + padding: 14px 28px; + border-radius: 12px; + border: none; + background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%); + color: #fff; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.25s ease; + white-space: nowrap; + } + .subscribe-form button:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(47, 107, 255, 0.3); + } + .subscribe-msg { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 16px; + margin-top: 12px; + border-radius: 10px; + font-size: 13px; + font-weight: 500; + opacity: 0; + transform: translateY(-8px); + transition: all 0.3s ease; + pointer-events: none; + } + .subscribe-msg.show { + opacity: 1; + transform: translateY(0); + pointer-events: auto; + } + .subscribe-msg.error { + background: rgba(239, 68, 68, 0.15); + color: #fca5a5; + border: 1px solid rgba(239, 68, 68, 0.3); + } + .subscribe-msg.success { + background: rgba(34, 197, 94, 0.15); + color: #86efac; + border: 1px solid rgba(34, 197, 94, 0.3); + } + .subscribe-msg svg { + flex-shrink: 0; + } + .footer-links-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 48px; + margin-bottom: 48px; + } + .footer-column h4 { + font-size: 14px; + font-weight: 600; + color: #fff; + margin: 0 0 20px; + text-transform: uppercase; + letter-spacing: 0.5px; + } + .footer-links { + list-style: none; + padding: 0; + margin: 0; + } + .footer-links li { + margin-bottom: 12px; + } + .footer-links a { + font-size: 14px; + color: #64748b; + text-decoration: none; + transition: all 0.2s ease; + } + .footer-links a:hover { + color: #fff; + padding-left: 4px; + } + .footer-bottom { + padding-top: 32px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + } + .footer-bottom-main { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + flex-wrap: wrap; + gap: 20px; + } + .footer-bottom-main .footer-social { + display: flex; + gap: 12px; + margin-left: -580px; + margin-top: -17px; + } + .footer-bottom-main .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-bottom-main .footer-social a:hover { + background: var(--primary); + color: #fff; + transform: translateY(-2px); + } + .footer-bottom-main .footer-social svg { + width: 18px; + height: 18px; + } + .footer-copyright { + font-size: 13px; + color: #475569; + } + .footer-legal { + display: flex; + gap: 28px; + } + .footer-legal a { + font-size: 13px; + color: #475569; + text-decoration: none; + transition: color 0.2s ease; + } + .footer-legal a:hover { + color: #fff; + } + /* 联系我们弹窗 */ + .contact-modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(4px); + 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 { + position: relative; + background: #ffffff; + border-radius: 24px; + padding: 40px 48px; + max-width: 380px; + width: 90%; + transform: scale(0.95) translateY(20px); + transition: transform 0.3s ease; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); + text-align: center; + border: 1px solid rgba(0, 0, 0, 0.06); + } + .contact-modal-overlay.active .contact-modal { + transform: scale(1) translateY(0); + } + .contact-modal-close { + position: absolute; + top: 12px; + right: 12px; + width: 32px; + height: 32px; + border-radius: 50%; + background: transparent; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #9ca3af; + transition: all 0.2s ease; + } + .contact-modal-close:hover { + background: #f3f4f6; + color: #6b7280; + } + .contact-modal-icon { + width: 56px; + height: 56px; + margin: 0 auto 20px; + background: #f0f7ff; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + } + .contact-modal-icon svg { + width: 28px; + height: 28px; + color: #3b82f6; + } + .contact-modal h3 { + font-size: 22px; + font-weight: 600; + color: #1f2937; + margin: 0 0 6px; + } + .contact-modal p { + font-size: 14px; + color: #6b7280; + margin: 0 0 28px; + } + .contact-qr-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + } + .contact-qr-box { + width: 180px; + height: 180px; + background: #fafafa; + border-radius: 16px; + padding: 12px; + border: 1px solid #f0f0f0; + display: flex; + align-items: center; + justify-content: center; + } + .contact-qr-box img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 8px; + } + .contact-qr-label { + font-size: 13px; + color: #9ca3af; + display: flex; + align-items: center; + gap: 6px; + } + .contact-qr-label svg { + width: 16px; + height: 16px; + color: #9ca3af; + } + /* 社交媒体弹窗 */ + .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); + } + .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: 120px; + height: 120px; + margin: 0 auto 12px; + background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); + 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: #9ca3af; + } + .beian-row { + font-size: 12px; + color: #475569; + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + justify-content: center; + } + .beian-row .sep { + color: #334155; + } + .beian-icon { + width: 14px; + height: 14px; + vertical-align: middle; + margin-right: 4px; + } + /* 响应式 */ + @media (max-width: 1024px) { + .footer-top { + flex-direction: column; + gap: 40px; + } + .footer-brand-area, + .footer-subscribe { + max-width: 100%; + } + .footer-links-grid { + grid-template-columns: repeat(2, 1fr); + gap: 32px; + } + } + @media (max-width: 768px) { + .navbar-menu { + display: none; + } + .mobile-menu-btn { + display: flex; + } + .navbar-cta { + display: none; + } + .footer-top { + flex-direction: column; + gap: 32px; + } + .subscribe-form { + flex-direction: column; + } + .subscribe-form button { + width: 100%; + } + .footer-links-grid { + grid-template-columns: repeat(2, 1fr); + gap: 28px; + } + .footer-bottom-main { + flex-direction: column; + text-align: center; + gap: 16px; + } + .footer-legal { + flex-wrap: wrap; + justify-content: center; + } + } .lang-switch { position: fixed; top: 24px; @@ -87,7 +759,7 @@ .hero { position: relative; background: url("hero.jpeg") center/cover no-repeat; - padding: 80px 0 64px; + padding: 120px 0 64px; } .hero::before { content: ""; @@ -117,9 +789,61 @@ margin-bottom: 16px; } h1 { - font-size: 44px; + font-size: 40px; margin: 0 0 12px; letter-spacing: 0.3px; + display: flex; + align-items: baseline; + flex-wrap: nowrap; + } + .brand-name { + font-size: 48px !important; + font-weight: 800 !important; + letter-spacing: -1px; + background: linear-gradient( + 135deg, + #2f6bff 0%, + #06b6d4 25%, + #8b5cf6 50%, + #06b6d4 75%, + #2f6bff 100% + ); + background-size: 200% auto; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradientFlow 15s ease-in-out infinite; + display: inline-block; + position: relative; + line-height: 1; + margin-right: 8px; + vertical-align: baseline; + transform: scaleY(1.15); + transform-origin: bottom; + top: 3px; + } + .brand-name::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent 0%, + rgba(255, 255, 255, 0.4) 50%, + transparent 100% + ); + animation: shimmer 3s ease-in-out infinite; + } + @keyframes gradientFlow { + 0%, 100% { background-position: 0% center; } + 50% { background-position: 200% center; } + } + @keyframes shimmer { + 0% { left: -100%; } + 50%, 100% { left: 100%; } } .lead { font-size: 18px; @@ -201,34 +925,86 @@ 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; - font-weight: 500; + padding: 24px 36px; + border-radius: 24px; + background: rgba(255, 255, 255, 0.55); + border: 1px solid rgba(255, 255, 255, 0.6); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + font-size: 16px; + font-weight: 600; color: #1e293b; - box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8); + box-shadow: + 0 20px 60px rgba(15, 23, 42, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.5); z-index: 4; - letter-spacing: 0.3px; + letter-spacing: 1px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 4px; + animation: glassFloat 5s ease-in-out infinite; + } + .glass-line { + display: block; + line-height: 1.4; + } + .glass-line:first-child { + font-size: 17px; + font-weight: 700; + background: linear-gradient(135deg, #2f6bff 0%, #8b5cf6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + .glass-line:last-child { + font-size: 15px; + font-weight: 500; + color: #475569; + } + .highlight-word { + font-size: 1.15em; + font-weight: 700; + color: #1e40af; + margin: 0 6px; + padding: 2px 4px; + position: relative; + display: inline-block; + animation: wordBounce 2s ease-in-out infinite; + } + .highlight-word::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + height: 3px; + background: #1e40af; + border-radius: 2px; + } + @keyframes wordBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-4px); } + } + @keyframes glassFloat { + 0%, 100% { transform: translate(-50%, -50%) translateY(0); } + 50% { transform: translate(-50%, -50%) translateY(-8px); } } main { padding: 0; } .snap-section { - height: 100vh; - height: 100svh; + min-height: 100vh; + min-height: 100svh; display: flex; align-items: center; justify-content: center; - scroll-snap-align: start; - scroll-snap-stop: always; } .snap-section .container { width: 100%; - padding: 56px 24px; + padding: 80px 24px 56px; } .section { margin: 0; @@ -256,21 +1032,22 @@ display: inline-flex; align-items: center; gap: 8px; - padding: 6px 14px; + padding: 8px 18px; border-radius: 999px; background: var(--primary); color: #fff; - font-size: 13px; + font-size: 14px; font-weight: 600; + margin-bottom: 4px; } h2 { - font-size: 28px; - margin: 14px 0 8px; + font-size: 32px; + margin: 16px 0 10px; } p { - font-size: 16px; - line-height: 1.7; - margin: 0 0 16px; + font-size: 17px; + line-height: 1.8; + margin: 0 0 18px; color: var(--muted); } /* 公司介绍板块 - 高级布局 */ @@ -280,66 +1057,545 @@ align-items: center; gap: 48px; } - .company-intro { + /* 关于宠科 - 新增公司介绍区域 */ + .about-chookoo-section { + background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); + } + .about-chookoo-wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 56px; + max-width: 1100px; + margin: 0 auto; + } + .about-brand { + text-align: center; + max-width: 720px; + } + .brand-logo-box { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + margin-bottom: 32px; + } + .logo-mark-large { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(47, 107, 255, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%); + border-radius: 24px; + margin-bottom: 8px; + } + .brand-text { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + } + .brand-name { + font-size: 32px; + font-weight: 700; + background: linear-gradient(135deg, #2F6BFF 0%, #8B5CF6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + /* Hero区域的品牌名 - 更大更醒目 */ + .hero .brand-name { + font-size: 48px !important; + font-weight: 800 !important; + letter-spacing: -1px; + background: linear-gradient( + 135deg, + #2f6bff 0%, + #06b6d4 25%, + #8b5cf6 50%, + #06b6d4 75%, + #2f6bff 100% + ); + background-size: 200% auto; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradientFlow 15s ease-in-out infinite; + line-height: 1; + margin-right: 8px; + } + .brand-slogan { + font-size: 15px; + color: var(--muted); + font-weight: 500; + } + .brand-intro { + font-size: 16px; + line-height: 2; + color: #4b5563; + margin: 0; + } + /* 亮点卡片 */ + .about-highlights { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(3, 1fr); + gap: 32px; + width: 100%; + } + .highlight-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 40px 32px; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 20px; + border: 1px solid rgba(226, 232, 240, 0.8); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + .highlight-card:hover { + transform: translateY(-6px); + box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); + border-color: transparent; + } + .highlight-icon { + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 16px; + margin-bottom: 20px; + } + .highlight-icon.rd { + background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); + color: #2563eb; + } + .highlight-icon.cert { + background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); + color: #059669; + } + .highlight-icon.lab { + background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); + color: #7c3aed; + } + .highlight-content { + display: flex; + flex-direction: column; + gap: 4px; + margin-bottom: 8px; + } + .highlight-number { + font-size: 28px; + font-weight: 700; + color: #1f2937; + } + .highlight-label { + font-size: 14px; + color: var(--primary); + font-weight: 500; + } + .highlight-desc { + font-size: 14px; + color: var(--muted); + line-height: 1.7; + margin: 0; + } + /* 底部信息 */ + .about-footer { + display: flex; + justify-content: center; + align-items: center; + gap: 32px; + padding-top: 24px; + border-top: 1px solid rgba(226, 232, 240, 0.8); + width: 100%; + max-width: 600px; + } + .footer-location { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + color: var(--muted); + } + .footer-location svg { + color: var(--primary); + } + .footer-year { + font-size: 12px; + color: var(--muted); + padding: 4px 12px; + background: rgba(241, 245, 249, 0.8); + border-radius: 12px; + } + /* 公司介绍 - 新版高级设计 */ + .company-section-new { + display: flex; + flex-direction: column; + align-items: center; + gap: 48px; + padding: 60px 24px; + } + .company-hero { + text-align: center; + max-width: 600px; + } + .company-badge { + display: inline-block; + padding: 6px 16px; + background: linear-gradient(135deg, rgba(47, 107, 255, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); + border: 1px solid rgba(47, 107, 255, 0.2); + border-radius: 20px; + font-size: 12px; + font-weight: 500; + color: var(--primary); + margin-bottom: 20px; + } + .company-title { + font-size: 36px; + font-weight: 700; + color: #1f2937; + line-height: 1.3; + margin: 0 0 16px; + } + .gradient-text { + background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 50%, #ec4899 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + .company-desc { + font-size: 16px; + color: var(--muted); + line-height: 1.7; + margin: 0; + } + /* 数据统计卡片 */ + .company-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + max-width: 1000px; + width: 100%; + } + .stat-card { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + padding: 32px 20px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border-radius: 20px; + border: 1px solid rgba(226, 232, 240, 0.8); + box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + } + .stat-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); + border-color: transparent; + } + .stat-card:hover .stat-bar { + transform: scaleX(1); + } + .stat-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 12px; + margin-bottom: 16px; + } + .stat-icon.patent { + background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); + color: #d97706; + } + .stat-icon.ai { + background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); + color: #7c3aed; + } + .stat-icon.data { + background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); + color: #2563eb; + } + .stat-icon.global { + background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); + color: #059669; + } + .stat-number { + font-size: 32px; + font-weight: 700; + color: #1f2937; + margin-bottom: 4px; + } + .stat-label { + font-size: 13px; + color: var(--muted); + font-weight: 500; + } + .stat-bar { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--primary) 0%, #8b5cf6 50%, #ec4899 100%); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s ease; + } + /* 底部位置信息 */ + .company-footer { + display: flex; + justify-content: center; + } + .company-location { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + background: rgba(248, 250, 252, 0.8); + border-radius: 24px; + font-size: 13px; + color: var(--muted); + } + .company-location svg { + color: var(--primary); + } + /* 愿景使命价值观 - 全新设计 */ + .vmv-new-section { + background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%); + } + .vmv-new-wrapper { + display: flex; + flex-direction: column; + align-items: center; gap: 48px; max-width: 1000px; margin: 0 auto; - align-items: center; } - .company-text { - text-align: left; - padding: 32px; + .vmv-header { + text-align: center; + max-width: 500px; } - .company-text h3 { - font-size: 22px; - font-weight: 600; - color: #1f2937; - margin: 0 0 16px; - } - .company-text p { - font-size: 15px; - line-height: 1.9; - color: var(--muted); - margin: 0; - } - .company-highlight { + .vmv-badge { display: inline-flex; align-items: center; - 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 { + gap: 8px; + padding: 8px 18px; + border-radius: 999px; + background: var(--primary); + color: #fff; font-size: 14px; - font-weight: 500; - color: var(--primary); + font-weight: 600; + margin-bottom: 16px; } - .company-image { + .vmv-title { + font-size: 32px; + font-weight: 700; + color: #1f2937; + line-height: 1.4; + margin: 0; + } + .vmv-title .highlight { + background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + /* 卡片网格 */ + .vmv-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + width: 100%; + } + .vmv-new-card { 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%; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; - object-fit: cover; - transition: transform 0.6s ease; + display: flex; } - .company-image:hover img { - transform: scale(1.05); + .vmv-new-card:hover { + transform: translateY(-8px); } - .company-image::after { - content: ''; + .card-glow { position: absolute; inset: 0; - background: linear-gradient(135deg, transparent 60%, rgba(47, 107, 255, 0.1) 100%); - pointer-events: none; + opacity: 0; + transition: opacity 0.4s ease; + } + .vmv-new-card.vision .card-glow { + background: radial-gradient(circle at 50% 0%, rgba(47, 107, 255, 0.15) 0%, transparent 70%); + } + .vmv-new-card.mission .card-glow { + background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 70%); + } + .vmv-new-card.values .card-glow { + background: radial-gradient(circle at 50% 0%, rgba(236, 72, 153, 0.15) 0%, transparent 70%); + } + .vmv-new-card:hover .card-glow { + opacity: 1; + } + .card-content { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 40px 28px; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border: 1px solid rgba(226, 232, 240, 0.8); + border-radius: 24px; + flex: 1; + min-height: 280px; + } + .card-icon { + width: 64px; + height: 64px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 20px; + margin-bottom: 20px; + transition: transform 0.4s ease; + } + .vmv-new-card:hover .card-icon { + transform: scale(1.1); + } + .vmv-new-card.vision .card-icon { + background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); + color: #2563eb; + } + .vmv-new-card.mission .card-icon { + background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); + color: #7c3aed; + } + .vmv-new-card.values .card-icon { + background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); + color: #db2777; + } + .card-label { + font-size: 10px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1.5px; + color: var(--muted); + margin-bottom: 8px; + } + .card-title { + font-size: 22px; + font-weight: 700; + color: #1f2937; + margin: 0 0 12px; + } + .card-desc { + font-size: 14px; + line-height: 1.7; + color: #4b5563; + margin: 0; + flex: 1; + display: flex; + align-items: center; + } + .values-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + width: 100%; + flex: 1; + align-content: center; + } + .value-item { + padding: 8px 12px; + background: linear-gradient(135deg, rgba(236, 72, 153, 0.08) 0%, rgba(244, 114, 182, 0.08) 100%); + border-radius: 10px; + font-size: 13px; + font-weight: 500; + color: #db2777; + } + .card-decoration { + margin-top: 20px; + } + .deco-line { + display: block; + width: 40px; + height: 3px; + border-radius: 2px; + } + .vmv-new-card.vision .deco-line { + background: linear-gradient(90deg, #2563eb, #3b82f6); + } + .vmv-new-card.mission .deco-line { + background: linear-gradient(90deg, #7c3aed, #8b5cf6); + } + .vmv-new-card.values .deco-line { + background: linear-gradient(90deg, #db2777, #ec4899); + } + /* 底部装饰 */ + .vmv-footer { + display: flex; + align-items: center; + justify-content: center; + padding: 40px 50px; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + border-radius: 24px; + border: 1px solid rgba(226, 232, 240, 0.8); + } + .vmv-pet-decoration { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + } + .decoration-row { + display: flex; + align-items: center; + gap: 20px; + } + .vmv-footer .floating-icon { + display: flex; + align-items: center; + justify-content: center; + opacity: 0.6; + animation: vmvBounce 2s ease-in-out infinite; + } + .vmv-footer .floating-icon.icon-1 { + color: var(--primary); + animation-delay: 0s; + } + .vmv-footer .floating-icon.icon-2 { + color: #ec4899; + animation-delay: 0.3s; + } + .vmv-footer .floating-icon.icon-3 { + color: #f59e0b; + animation-delay: 0.6s; + } + .vmv-footer .floating-icon.icon-4 { + color: #10b981; + animation-delay: 0.9s; + } + @keyframes vmvBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } + } + .vmv-slogan { + font-size: 18px; + font-weight: 500; + color: #4b5563; + letter-spacing: 2px; + margin: 0; } /* 愿景·使命·价值观板块 - 高级卡片 */ .vmv-section { @@ -455,11 +1711,10 @@ display: flex; justify-content: center; align-items: center; - gap: 40px; - max-width: 1200px; + gap: 120px; + max-width: 1300px; margin: 0 auto; - padding: 40px 20px; - min-height: 580px; + padding: 20px; } /* 左侧卡片组 */ .product-group-left { @@ -477,18 +1732,17 @@ } /* 中央展示区 */ .product-display-area { - width: 260px; - height: 480px; + width: 400px; + height: 520px; 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); + 0 20px 50px -10px rgba(15, 23, 42, 0.15), + 0 0 80px -20px rgba(47, 107, 255, 0.1); opacity: 0; visibility: hidden; - transform: scale(0.85); - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); - z-index: 5; + transform: translateY(15px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; flex-shrink: 0; } @@ -499,14 +1753,14 @@ } .product-card { position: relative; - width: 200px; - height: 200px; + width: 175px; + height: 185px; padding: 0; - border-radius: 20px; + border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); - box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04); + box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; flex-shrink: 0; @@ -524,21 +1778,46 @@ transform: scale(0.95); } .product-card .product-image-wrapper { - height: 100px; + height: 90px; } .product-card .product-content { - padding: 16px; + padding: 14px; } .product-card .product-content h3 { - font-size: 15px; + font-size: 14px; margin-bottom: 4px; } .product-card .product-content p { font-size: 11px; } + /* 更多产品卡片 */ + .product-card-more { + text-decoration: none; + background: linear-gradient(135deg, var(--primary-weak) 0%, #e0f2fe 100%); + border: 2px dashed rgba(47, 107, 255, 0.3); + } + .product-card-more:hover { + border-color: var(--primary); + background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); + } + .product-card-more .more-products-icon { + display: flex; + align-items: center; + justify-content: center; + color: var(--primary); + opacity: 0.6; + transition: all 0.3s ease; + } + .product-card-more:hover .more-products-icon { + opacity: 1; + transform: scale(1.1); + } + .product-card-more .product-content h3 { + color: var(--primary); + } .display-image-wrapper { position: relative; - height: 240px; + height: 220px; display: flex; align-items: center; justify-content: center; @@ -630,6 +1909,189 @@ font-size: 10px; font-weight: bold; } + /* 展示区主体布局 */ + .display-body { + display: flex; + gap: 16px; + align-items: flex-start; + } + .display-features { + flex: 1; + } + /* 右侧装饰区 - 高级动效版 */ + .display-side { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + padding-left: 20px; + margin-left: 16px; + border-left: 1px solid rgba(47, 107, 255, 0.1); + } + .side-decoration { + display: flex; + flex-direction: column; + gap: 12px; + align-items: center; + } + .floating-icon { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(4px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + opacity: 0; + transform: translateX(20px); + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + } + .product-display-area.show .floating-icon.icon-1 { + opacity: 1; + transform: translateX(0); + animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards, + float 3s ease-in-out 1s infinite; + } + .product-display-area.show .floating-icon.icon-2 { + opacity: 1; + transform: translateX(0); + animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards, + float 3s ease-in-out 1.5s infinite; + } + .product-display-area.show .floating-icon.icon-3 { + opacity: 1; + transform: translateX(0); + animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards, + float 3s ease-in-out 2s infinite; + } + @keyframes slideIn { + 0% { opacity: 0; transform: translateX(20px) scale(0.8); } + 100% { opacity: 1; transform: translateX(0) scale(1); } + } + @keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-6px); } + } + .floating-icon:hover { + transform: scale(1.15) translateY(-2px); + box-shadow: 0 8px 20px rgba(47, 107, 255, 0.15); + } + .floating-icon.icon-1 { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); } + .floating-icon.icon-1 svg { color: #7c3aed; } + .floating-icon.icon-2 { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); } + .floating-icon.icon-2 svg { color: #db2777; } + .floating-icon.icon-3 { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); } + .floating-icon.icon-3 svg { color: #d97706; } + /* AI徽章 */ + .tech-badge { + position: relative; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 4px; + } + .badge-ring { + position: absolute; + width: 100%; + height: 100%; + border: 1.5px solid transparent; + border-top-color: #7c3aed; + border-right-color: #ec4899; + border-radius: 50%; + animation: spin 4s linear infinite; + } + .badge-ring::after { + content: ''; + position: absolute; + inset: 2px; + border: 1px solid transparent; + border-bottom-color: #06b6d4; + border-radius: 50%; + animation: spin 3s linear infinite reverse; + } + @keyframes spin { + to { transform: rotate(360deg); } + } + .badge-text { + font-size: 9px; + font-weight: 700; + background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + /* 底部栏 */ + .display-footer-line { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid var(--line); + opacity: 0; + transform: translateY(10px); + transition: all 0.4s ease 0.5s; + } + .product-display-area.show .display-footer-line { + opacity: 1; + transform: translateY(0); + } + .footer-pets { + display: flex; + gap: 4px; + } + .footer-pets .pet-icon { + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + color: var(--primary); + opacity: 0.7; + transition: all 0.3s ease; + } + .footer-pets .pet-icon:hover { + opacity: 1; + transform: scale(1.1); + } + .footer-pets .pet-icon.cat svg { color: #6366f1; } + .footer-pets .pet-icon.dog svg { color: #ec4899; } + .footer-pets .pet-icon.bird svg { color: #10b981; } + .footer-dots { + display: flex; + gap: 4px; + } + .footer-dots .dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary) 0%, #06b6d4 100%); + opacity: 0.5; + } + .footer-dots .dot:nth-child(2) { + opacity: 0.8; + width: 8px; + height: 8px; + } + .footer-link { + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + color: var(--primary); + text-decoration: none; + transition: all 0.3s ease; + } + .footer-link:hover { + gap: 6px; + } + .footer-link:hover svg { + transform: translateX(2px); + } /* 展示区装饰 */ .product-display-area::before { content: ''; @@ -1402,11 +2864,34 @@ .company-intro { grid-template-columns: 1fr; gap: 24px; } .company-text { padding: 0; text-align: center; } .company-image { height: 200px; } + /* 关于宠科响应式 */ + .about-chookoo-wrapper { gap: 32px; padding: 0 8px; } + .brand-name { font-size: 26px; } + .brand-intro { font-size: 14px; } + .about-highlights { grid-template-columns: 1fr; gap: 16px; } + .highlight-card { padding: 24px 20px; } + .about-footer { flex-direction: column; gap: 12px; } + /* 公司介绍新版响应式 */ + .company-section-new { padding: 40px 16px; gap: 32px; } + .company-title { font-size: 26px; } + .company-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; } + .stat-card { padding: 24px 16px; } + .stat-number { font-size: 26px; } + .stat-icon { width: 40px; height: 40px; margin-bottom: 12px; } /* 愿景使命价值观响应式 */ .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; } + /* 新版愿景使命价值观响应式 */ + .vmv-new-wrapper { gap: 32px; } + .vmv-title { font-size: 24px; } + .vmv-cards { grid-template-columns: 1fr; gap: 20px; } + .vmv-new-card .card-content { padding: 32px 24px; } + .vmv-footer { padding: 24px; } + .vmv-slogan { font-size: 14px; letter-spacing: 1px; } + .decoration-row { gap: 12px; } + .vmv-footer .floating-icon svg { width: 18px; height: 18px; } /* 产品板块响应式 */ .product-grid { flex-direction: column; @@ -1462,7 +2947,40 @@ -
+ + + + +
+ + + + + + + + - + + +
+
+ + + +
+
+ + +
+
+ +
+ + + +
+

联系我们

+

扫描下方二维码,添加专属客服

+
+
+ 客服二维码 +
+
+ + + + + + + + + + 微信扫码咨询 +
+
+
+
+ + +
+
+ +
+ + + + + +
+

官方旗舰店

+

扫描二维码,进入官方店铺选购

+
+
+ 旗舰店二维码 +
+
+ + + + + + + + + + 扫码进店 +
+
+
+
+ + diff --git a/legal.html b/legal.html new file mode 100644 index 0000000..d891864 --- /dev/null +++ b/legal.html @@ -0,0 +1,667 @@ + + + + + + 法律条款 - Chookoo + + + + + + + +
+
+ +
+ +
+

法律条款

+

隐私政策、服务条款等信息

+ +
+ + +
+
全部
+
隐私政策
+
服务条款
+
Cookie设置
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/logo.png b/logo.png index ad83def..6c0a722 100644 Binary files a/logo.png and b/logo.png differ diff --git a/lookme.md b/lookme.md new file mode 100644 index 0000000..9fd3cd5 --- /dev/null +++ b/lookme.md @@ -0,0 +1,48 @@ +# 文章管理后台改造方案(最小改动) + +## 改动内容 + +### 1. 后台改名 +- `help-admin.html` → `admin.html` +- 页面标题改为「文章管理后台」 + +### 2. 后台新增字段 +在现有分类基础上,给文章增加 `pageType` 字段: +- `help` - 帮助中心(默认) +- `company` - 公司介绍 +- `partner` - 合作伙伴 +- `legal` - 法律条款 + +### 3. 新建3个页面模板 +复用 `help.html` 的样式和逻辑,只是筛选不同的 `pageType`: +- `company.html` - 公司页面(关于我们、加入我们、新闻、品牌故事) +- `partner.html` - 合作伙伴(经销商、联盟、企业采购、技术合作) +- `legal.html` - 法律条款(隐私政策、服务条款、Cookie) + +### 4. 更新首页链接 +| 按钮 | 链接 | +|------|------| +| 关于我们 | `company.html?page=about` | +| 加入我们 | `company.html?page=careers` | +| 新闻动态 | `company.html?page=news` | +| 品牌故事 | `company.html?page=brand` | +| 经销商入驻 | `partner.html?page=dealer` | +| 联盟推广 | `partner.html?page=affiliate` | +| 企业采购 | `partner.html?page=business` | +| 技术合作 | `partner.html?page=tech` | +| 隐私政策 | `legal.html?page=privacy` | +| 服务条款 | `legal.html?page=terms` | +| Cookie设置 | `legal.html?page=cookies` | + +--- + +## 代码复用 + +- ✅ 复用现有文章数据结构 +- ✅ 复用现有后台管理功能 +- ✅ 复用 help.html 的样式和渲染逻辑 +- ✅ 只需增加 pageType 筛选 + +--- + +## 确认开始? diff --git a/partner.html b/partner.html new file mode 100644 index 0000000..3ba1d50 --- /dev/null +++ b/partner.html @@ -0,0 +1,671 @@ + + + + + + 合作伙伴 - Chookoo + + + + + + + +
+
+ +
+ +
+

合作伙伴

+

搜索您想了解的合作伙伴信息

+ +
+ + +
+
全部
+
经销商入驻
+
联盟推广
+
企业采购
+
技术合作
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/product-detail.html b/product-detail.html new file mode 100644 index 0000000..1aff302 --- /dev/null +++ b/product-detail.html @@ -0,0 +1,1189 @@ + + + + + + 产品详情 - Chookoo 宠科智能科技 + + + + + + + +
+ +
+ + + + + +
+
+ +
+ +
+

官方旗舰店

+

扫描二维码,进入官方店铺选购

+
+
旗舰店二维码
+
+ + 扫码进店 +
+
+
+
+ + + + diff --git a/products.html b/products.html new file mode 100644 index 0000000..761b4bc --- /dev/null +++ b/products.html @@ -0,0 +1,1296 @@ + + + + + + 全部产品 - Chookoo 宠科智能科技 + + + + + + + +
+ + + + +
+ + + + + + +
+ + +
+
+

智能厕所系列

+ 查看全部 → +
+
+
+
+ 智能猫厕所 +
+
+
+ 猫用 + 热销 +
+

智能猫厕所 Pro

+

AI健康监测,自动清洁,守护猫咪如厕健康

+ +
+
+
+
+ 智能猫厕所 Lite +
+
+
+ 猫用 + 新品 +
+

智能猫厕所 Lite

+

入门之选,核心功能一应俱全

+ +
+
+
+
+ 智能狗厕所 +
+
+
+ 狗用 +
+

智能狗厕所

+

科学如厕训练,智能清洁管理

+ +
+
+
+
+ + +
+
+

喂养系列

+ 查看全部 → +
+
+
+
+ 智能喂食器 +
+
+
+ 通用 + 热销 +
+

智能喂食器

+

定时定量精准投喂,养成健康饮食习惯

+ +
+
+
+
+ 智能饮水机 +
+
+
+ 通用 +
+

智能饮水机

+

四重过滤循环净化,提升饮水健康

+ +
+
+
+
+ 猫粮储存桶 +
+
+
+ 猫用 +
+

智能猫粮桶

+

真空保鲜,智能控湿,锁住新鲜

+ +
+
+
+
+ 狗粮储存桶 +
+
+
+ 狗用 +
+

智能狗粮桶

+

大容量设计,适合多狗家庭

+ +
+
+
+
+ + +
+
+

监控系列

+ 查看全部 → +
+
+
+
+ AI宠物摄像头 +
+
+
+ 通用 + 新品 +
+

AI宠物摄像头

+

1080P高清夜视,AI行为识别,双向语音

+ +
+
+
+
+ 宠物健康追踪器 +
+
+
+ 通用 +
+

宠物健康追踪器

+

轻便佩戴,实时监测活动量与睡眠

+ +
+
+
+
+ 环境监测仪 +
+
+
+ 通用 +
+

环境监测仪

+

温湿度、空气质量实时监测

+ +
+
+
+
+ + +
+
+

配件系列

+ 查看全部 → +
+
+
+
+ 替换滤网套装 +
+
+
+ 配件 +
+

替换滤网套装

+

适用于饮水机,建议3个月更换

+ +
+
+
+
+ 清洁耗材包 +
+
+
+ 配件 +
+

清洁耗材包

+

适用于智能厕所,保持卫生洁净

+ +
+
+
+
+ 备用电源适配器 +
+
+
+ 配件 +
+

备用电源适配器

+

通用设计,支持全系产品

+ +
+
+
+
+ 延长保修服务 +
+
+
+ 服务 +
+

延长保修服务

+

额外1年保修,安心无忧

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

官方旗舰店

+

扫描二维码,进入官方店铺选购

+
+
旗舰店二维码
+
+ + + + + + + + + + 扫码进店 +
+
+
+
+ + + + diff --git a/stories.html b/stories.html index e30b6c7..f4187cd 100644 --- a/stories.html +++ b/stories.html @@ -29,6 +29,9 @@ color: inherit; text-decoration: none; } + a:hover { + text-decoration: none; + } .container { width: min(1200px, 100%); max-width: 1200px; @@ -36,54 +39,117 @@ padding: 0 24px; } /* 导航栏 */ - .nav { + .navbar { 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); + 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; } - .nav-inner { + .navbar-inner { display: flex; align-items: center; justify-content: space-between; - max-width: 1200px; + height: 64px; + padding: 0 32px; + max-width: 1400px; margin: 0 auto; + position: relative; } - .nav-logo { - font-size: 20px; - font-weight: 700; - color: var(--primary); + .navbar-menu { display: flex; align-items: center; gap: 8px; + position: absolute; + left: 50%; + transform: translateX(-50%); } - .nav-logo-icon { - width: 28px; - height: 28px; - background: var(--primary); + .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; - color: #fff; - font-size: 14px; - } - .nav-back { - display: flex; - align-items: center; - gap: 6px; + width: 40px; + height: 40px; + border-radius: 10px; + background: transparent; + border: none; + cursor: pointer; color: var(--muted); - font-size: 14px; - transition: color 0.3s ease; + transition: all 0.2s ease; } - .nav-back:hover { - color: var(--primary); + .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 { @@ -204,26 +270,26 @@ } /* 社交媒体区域 - 紧凑高端设计 */ .social-section { - padding: 60px 0; + padding: 80px 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; + font-size: 32px; + margin: 0 0 12px; + font-weight: 700; } .social-section .subtitle { text-align: center; color: var(--muted); - margin: 0 0 32px; - font-size: 14px; + margin: 0 0 48px; + font-size: 16px; } .social-grid { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 20px; - max-width: 720px; + gap: 32px; + max-width: 960px; margin: 0 auto; padding: 0 24px; } @@ -231,65 +297,65 @@ display: flex; flex-direction: column; align-items: center; - padding: 20px 16px; - border-radius: 16px; + 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(-4px); - box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); + transform: translateY(-6px); + box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1); } .social-icon { - width: 44px; - height: 44px; - margin-bottom: 12px; + width: 56px; + height: 56px; + margin-bottom: 16px; display: flex; align-items: center; justify-content: center; - border-radius: 12px; + border-radius: 16px; background: var(--primary-weak); color: var(--primary); transition: all 0.3s ease; } .social-icon svg { - width: 22px; - height: 22px; + width: 28px; + height: 28px; } .social-card:hover .social-icon { background: var(--primary); color: #fff; } .social-card h3 { - font-size: 14px; + font-size: 16px; font-weight: 600; color: #1f2937; - margin: 0 0 4px; + margin: 0 0 6px; } .social-card p { - font-size: 12px; + font-size: 13px; color: var(--muted); - margin: 0 0 12px; + margin: 0 0 16px; text-align: center; } .social-card .qr-code { - width: 80px; - height: 80px; - border-radius: 8px; + 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: 10px; + font-size: 12px; color: var(--muted); } .social-card .qr-code img { width: 100%; height: 100%; object-fit: cover; - border-radius: 8px; + border-radius: 12px; } /* 页脚 */ footer { @@ -337,14 +403,372 @@ .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: 16px; + gap: 20px; padding: 0 16px; } - .social-card { padding: 16px; } - .social-card .qr-code { width: 70px; height: 70px; } + .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; } @@ -359,16 +783,35 @@ -