一改成功
This commit is contained in:
+1903
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
+722
@@ -0,0 +1,722 @@
|
|||||||
|
<!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; margin: 0; padding: 0; }
|
||||||
|
html { overflow-y: scroll; }
|
||||||
|
body {
|
||||||
|
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;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* 导航栏 */
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
.navbar-inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 32px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.navbar-logo img { height: 40px; }
|
||||||
|
.navbar-back {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.navbar-back:hover { color: var(--text); }
|
||||||
|
|
||||||
|
/* 主内容区 */
|
||||||
|
.main-content {
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索区域 */
|
||||||
|
.search-section {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.search-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.search-subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
position: relative;
|
||||||
|
max-width: 560px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 24px 16px 52px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--card);
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.search-input:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.1);
|
||||||
|
}
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.search-results {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: none;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.search-results.active { display: block; }
|
||||||
|
.search-result-item {
|
||||||
|
padding: 14px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.search-result-item:last-child { border-bottom: none; }
|
||||||
|
.search-result-item:hover { background: var(--primary-weak); }
|
||||||
|
.search-result-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.search-result-category {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.search-no-result {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分类标签 */
|
||||||
|
.category-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.category-tab {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.category-tab:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
.category-tab.active {
|
||||||
|
background: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章分类区块 */
|
||||||
|
.articles-section {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.section-icon {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.section-icon.about { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
||||||
|
.section-icon.careers { background: linear-gradient(135deg, #fef3c7, #fde68a); }
|
||||||
|
.section-icon.news { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
|
||||||
|
.section-icon.brand { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
|
||||||
|
.section-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.section-count {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--bg);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
.section-toggle {
|
||||||
|
color: var(--muted);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
.section-header.collapsed .section-toggle {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章列表 */
|
||||||
|
.article-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
padding-left: 56px;
|
||||||
|
}
|
||||||
|
.article-list.hidden { display: none; }
|
||||||
|
.article-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.article-item:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.1);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
.article-item svg {
|
||||||
|
color: var(--primary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.article-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.article-arrow {
|
||||||
|
color: var(--muted);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.article-item:hover .article-arrow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章详情页 */
|
||||||
|
.article-detail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.article-detail.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.article-breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.article-breadcrumb a:hover { color: var(--primary); }
|
||||||
|
.article-detail-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.article-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.article-content {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
.article-content h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 32px 0 16px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.article-content p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.article-content ul, .article-content ol {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.article-content li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.article-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.article-tip {
|
||||||
|
background: var(--primary-weak);
|
||||||
|
border-left: 4px solid var(--primary);
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 0 12px 12px 0;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
.article-tip-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 返回按钮 */
|
||||||
|
.back-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.back-btn:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 相关文章 */
|
||||||
|
.related-articles {
|
||||||
|
margin-top: 48px;
|
||||||
|
padding-top: 32px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.related-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.related-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.related-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.related-item:hover {
|
||||||
|
background: var(--primary-weak);
|
||||||
|
}
|
||||||
|
.related-item svg {
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页脚 */
|
||||||
|
.footer {
|
||||||
|
background: #1a1f2e;
|
||||||
|
color: #9ca3af;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.footer-logo {
|
||||||
|
height: 32px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.footer-text {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.search-title { font-size: 24px; }
|
||||||
|
.search-input { padding: 14px 20px 14px 48px; font-size: 15px; }
|
||||||
|
.article-list { padding-left: 0; margin-top: 16px; }
|
||||||
|
.section-header { padding: 12px 16px; background: var(--card); border-radius: 12px; }
|
||||||
|
.article-detail-title { font-size: 22px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表页隐藏/显示 */
|
||||||
|
.articles-list-view { display: block; }
|
||||||
|
.articles-list-view.hidden { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<a href="index.html" class="navbar-logo">
|
||||||
|
<img src="logo.png" alt="Chookoo" />
|
||||||
|
</a>
|
||||||
|
<a href="index.html" class="navbar-back">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||||
|
返回首页
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主内容 -->
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="container">
|
||||||
|
<!-- 文章列表视图 -->
|
||||||
|
<div class="articles-list-view" id="articlesListView">
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<section class="search-section">
|
||||||
|
<h1 class="search-title">公司介绍</h1>
|
||||||
|
<p class="search-subtitle">搜索您想了解的问题，或浏览下方分类</p>
|
||||||
|
<div class="search-box">
|
||||||
|
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||||
|
<input type="text" class="search-input" id="searchInput" placeholder="搜索问题..." />
|
||||||
|
<div class="search-results" id="searchResults"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 分类标签 -->
|
||||||
|
<div class="category-tabs" id="categoryTabs">
|
||||||
|
<div class="category-tab active" data-category="all">全部</div>
|
||||||
|
<div class="category-tab" data-category="about">关于我们</div>
|
||||||
|
<div class="category-tab" data-category="careers">加入我们</div>
|
||||||
|
<div class="category-tab" data-category="news">新闻动态</div>
|
||||||
|
<div class="category-tab" data-category="brand">品牌故事</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章分类列表 -->
|
||||||
|
<div id="articlesContainer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章详情视图 -->
|
||||||
|
<div class="article-detail" id="articleDetail">
|
||||||
|
<button class="back-btn" id="backToList">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||||
|
返回列表
|
||||||
|
</button>
|
||||||
|
<div id="articleContent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<img src="logo.png" alt="Chookoo" class="footer-logo" />
|
||||||
|
<p class="footer-text">© 2025 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 页面类型
|
||||||
|
const PAGE_TYPE = 'company';
|
||||||
|
|
||||||
|
// 分类配置
|
||||||
|
const categories = {
|
||||||
|
all: { name: '全部', icon: '📋' },
|
||||||
|
about: { name: '关于我们', icon: '🏠' },
|
||||||
|
careers: { name: '加入我们', icon: '💼' },
|
||||||
|
news: { name: '新闻动态', icon: '📰' },
|
||||||
|
brand: { name: '品牌故事', icon: '📖' }
|
||||||
|
};
|
||||||
|
|
||||||
|
// 默认文章数据（公司介绍）
|
||||||
|
const defaultArticles = [
|
||||||
|
{ id: 201, pageType: 'company', category: 'about', categoryName: '关于我们', title: '关于Chookoo宠科', content: '<h2>关于Chookoo</h2><p>Chookoo宠科智能科技（苏州）有限公司是一家专注于宠物智能产品研发的高科技企业。</p><p>我们致力于通过科技创新，为宠物主人提供更便捷、更智能的养宠体验。</p>', views: 1234, date: '2025-01-15' },
|
||||||
|
{ id: 202, pageType: 'company', category: 'about', categoryName: '关于我们', title: '我们的使命', content: '<h2>企业使命</h2><p>让每一位宠物主人都能享受科技带来的便捷，让每一只宠物都能得到更好的照顾。</p>', views: 876, date: '2025-01-14' },
|
||||||
|
{ id: 203, pageType: 'company', category: 'careers', categoryName: '加入我们', title: '热招职位', content: '<h2>热招职位</h2><ul><li>产品经理</li><li>嵌入式工程师</li><li>UI设计师</li><li>运营专员</li></ul><p>简历请投递至：hr@chookoo.com</p>', views: 567, date: '2025-01-13' },
|
||||||
|
{ id: 204, pageType: 'company', category: 'news', categoryName: '新闻动态', title: 'Chookoo获得A轮融资', content: '<h2>融资新闻</h2><p>Chookoo宠科智能科技宣布完成数千万元A轮融资，将用于产品研发和市场拓展。</p>', views: 2345, date: '2025-01-12' },
|
||||||
|
{ id: 205, pageType: 'company', category: 'brand', categoryName: '品牌故事', title: '品牌起源', content: '<h2>品牌故事</h2><p>Chookoo创立于2020年，源于创始人对自己宠物的一份热爱。我们相信，科技可以让养宠变得更简单。</p>', views: 789, date: '2025-01-11' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 文章数据
|
||||||
|
let articles = [...defaultArticles];
|
||||||
|
|
||||||
|
// 当前状态
|
||||||
|
let currentCategory = 'all';
|
||||||
|
let collapsedSections = {};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// 从 localStorage 加载文章数据（如果有）
|
||||||
|
const savedArticles = localStorage.getItem('chookoo_help_articles');
|
||||||
|
if (savedArticles) {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(savedArticles);
|
||||||
|
if (Array.isArray(parsed) && parsed.length > 0) {
|
||||||
|
// 只加载 pageType='company' 的自定义文章
|
||||||
|
const customArticles = parsed.filter(a => (a.pageType || 'help') === 'company');
|
||||||
|
articles.push(...customArticles);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载文章数据失败:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析 URL 参数
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const category = urlParams.get('category');
|
||||||
|
const articleId = urlParams.get('article');
|
||||||
|
const searchQuery = urlParams.get('search');
|
||||||
|
|
||||||
|
// 处理 URL 参数
|
||||||
|
if (articleId) {
|
||||||
|
showArticle(parseInt(articleId));
|
||||||
|
} else if (category && categories[category]) {
|
||||||
|
currentCategory = category;
|
||||||
|
// 更新分类标签高亮
|
||||||
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||||
|
tab.classList.toggle('active', tab.dataset.category === category);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchQuery) {
|
||||||
|
document.getElementById('searchInput').value = searchQuery;
|
||||||
|
document.getElementById('searchInput').dispatchEvent(new Event('input'));
|
||||||
|
}
|
||||||
|
|
||||||
|
renderArticles();
|
||||||
|
initSearch();
|
||||||
|
initCategoryTabs();
|
||||||
|
initBackButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 渲染文章列表
|
||||||
|
function renderArticles() {
|
||||||
|
const container = document.getElementById('articlesContainer');
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
const categoryOrder = ['about', 'careers', 'news', 'brand'];
|
||||||
|
|
||||||
|
categoryOrder.forEach(cat => {
|
||||||
|
if (currentCategory !== 'all' && currentCategory !== cat) return;
|
||||||
|
|
||||||
|
const catArticles = articles.filter(a => a.category === cat && (!a.pageType || a.pageType === PAGE_TYPE));
|
||||||
|
if (catArticles.length === 0) return;
|
||||||
|
|
||||||
|
const isCollapsed = collapsedSections[cat];
|
||||||
|
const catInfo = categories[cat];
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<section class="articles-section" data-category="${cat}">
|
||||||
|
<div class="section-header ${isCollapsed ? 'collapsed' : ''}" onclick="toggleSection('${cat}')">
|
||||||
|
<div class="section-icon ${cat}">${catInfo.icon}</div>
|
||||||
|
<h2 class="section-title">${catInfo.name}</h2>
|
||||||
|
<span class="section-count">${catArticles.length} 篇文章</span>
|
||||||
|
<svg class="section-toggle" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="article-list ${isCollapsed ? 'hidden' : ''}">
|
||||||
|
${catArticles.map(article => `
|
||||||
|
<div class="article-item" onclick="showArticle(${article.id})">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||||
|
<span class="article-title">${article.title}</span>
|
||||||
|
<svg class="article-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
container.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换分类折叠
|
||||||
|
function toggleSection(cat) {
|
||||||
|
collapsedSections[cat] = !collapsedSections[cat];
|
||||||
|
renderArticles();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示文章详情
|
||||||
|
function showArticle(id) {
|
||||||
|
const article = articles.find(a => a.id === id);
|
||||||
|
if (!article) return;
|
||||||
|
|
||||||
|
const content = document.getElementById('articleContent');
|
||||||
|
content.innerHTML = `
|
||||||
|
<div class="article-breadcrumb">
|
||||||
|
<a href="#" onclick="backToList(); return false;">公司介绍</a>
|
||||||
|
<span>/</span>
|
||||||
|
<span>${article.categoryName}</span>
|
||||||
|
</div>
|
||||||
|
<div class="article-detail">
|
||||||
|
<h1 class="article-title">${article.title}</h1>
|
||||||
|
<div class="article-meta">
|
||||||
|
<span class="article-date">${article.date}</span>
|
||||||
|
<span class="article-views">${article.views} 次阅读</span>
|
||||||
|
</div>
|
||||||
|
<div class="article-body">${article.content}</div>
|
||||||
|
${renderRelatedArticles(id, article.category)}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('articlesContainer').style.display = 'none';
|
||||||
|
document.getElementById('articlesListView').style.display = 'none';
|
||||||
|
document.getElementById('articleDetail').style.display = 'block';
|
||||||
|
document.getElementById('articleDetail').classList.add('active');
|
||||||
|
|
||||||
|
// 更新URL
|
||||||
|
history.pushState({ articleId: id }, '', `?article=${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染相关文章
|
||||||
|
function renderRelatedArticles(currentId, currentCategory) {
|
||||||
|
const related = articles
|
||||||
|
.filter(a => a.category === currentCategory && a.id !== currentId)
|
||||||
|
.slice(0, 3);
|
||||||
|
|
||||||
|
if (related.length === 0) return '';
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="related-articles">
|
||||||
|
<h3 class="related-title">相关文章</h3>
|
||||||
|
<div class="related-list">
|
||||||
|
${related.map(a => `
|
||||||
|
<div class="related-item" onclick="showArticle(${a.id})">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||||
|
<span>${a.title}</span>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回列表
|
||||||
|
function backToList() {
|
||||||
|
document.getElementById('articlesContainer').style.display = 'block';
|
||||||
|
document.getElementById('articlesListView').style.display = 'block';
|
||||||
|
document.getElementById('articleDetail').style.display = 'none';
|
||||||
|
document.getElementById('articleDetail').classList.remove('active');
|
||||||
|
history.pushState({}, '', window.location.pathname);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化返回按钮
|
||||||
|
function initBackButton() {
|
||||||
|
document.getElementById('backToList').addEventListener('click', backToList);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化分类标签
|
||||||
|
function initCategoryTabs() {
|
||||||
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||||
|
tab.addEventListener('click', function() {
|
||||||
|
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
currentCategory = this.dataset.category;
|
||||||
|
renderArticles();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化搜索
|
||||||
|
function initSearch() {
|
||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
const results = document.getElementById('searchResults');
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', function() {
|
||||||
|
const query = this.value.toLowerCase().trim();
|
||||||
|
|
||||||
|
if (query.length < 2) {
|
||||||
|
results.classList.remove('active');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const matched = articles.filter(a =>
|
||||||
|
(!a.pageType || a.pageType === PAGE_TYPE) &&
|
||||||
|
(a.title.toLowerCase().includes(query) ||
|
||||||
|
a.content.toLowerCase().includes(query))
|
||||||
|
);
|
||||||
|
|
||||||
|
if (matched.length === 0) {
|
||||||
|
results.innerHTML = '<div class="search-no-result">未找到相关文章</div>';
|
||||||
|
} else {
|
||||||
|
results.innerHTML = matched.slice(0, 8).map(a => `
|
||||||
|
<div class="search-result-item" onclick="showArticle(${a.id})">
|
||||||
|
<div class="search-result-title">${a.title}</div>
|
||||||
|
<div class="search-result-category">${a.categoryName}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
results.classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 点击外部关闭搜索结果
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
if (!searchInput.contains(e.target) && !results.contains(e.target)) {
|
||||||
|
results.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
+2449
-228
File diff suppressed because it is too large
Load Diff
+667
@@ -0,0 +1,667 @@
|
|||||||
|
<!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; margin: 0; padding: 0; }
|
||||||
|
html { overflow-y: scroll; }
|
||||||
|
body {
|
||||||
|
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;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* 导航栏 */
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
.navbar-inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 32px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.navbar-logo img { height: 40px; }
|
||||||
|
.navbar-back {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.navbar-back:hover { color: var(--text); }
|
||||||
|
|
||||||
|
/* 主内容区 */
|
||||||
|
.main-content {
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索区域 */
|
||||||
|
.search-section {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.search-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.search-subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
position: relative;
|
||||||
|
max-width: 560px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 24px 16px 52px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--card);
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.search-input:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.1);
|
||||||
|
}
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.search-results {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: none;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.search-results.active { display: block; }
|
||||||
|
.search-result-item {
|
||||||
|
padding: 14px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.search-result-item:last-child { border-bottom: none; }
|
||||||
|
.search-result-item:hover { background: var(--primary-weak); }
|
||||||
|
.search-result-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.search-result-category {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.search-no-result {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分类标签 */
|
||||||
|
.category-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.category-tab {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.category-tab:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
.category-tab.active {
|
||||||
|
background: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章分类区块 */
|
||||||
|
.articles-section {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.section-icon {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.section-icon.privacy { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
||||||
|
.section-icon.terms { background: linear-gradient(135deg, #fef3c7, #fde68a); }
|
||||||
|
.section-icon.cookies { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
|
||||||
|
.section-icon.warranty { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
|
||||||
|
.section-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.section-count {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--bg);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
.section-toggle {
|
||||||
|
color: var(--muted);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
.section-header.collapsed .section-toggle {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章列表 */
|
||||||
|
.article-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
padding-left: 56px;
|
||||||
|
}
|
||||||
|
.article-list.hidden { display: none; }
|
||||||
|
.article-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.article-item:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.1);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
.article-item svg {
|
||||||
|
color: var(--primary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.article-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.article-arrow {
|
||||||
|
color: var(--muted);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.article-item:hover .article-arrow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章详情页 */
|
||||||
|
.article-detail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.article-detail.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.article-breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.article-breadcrumb a:hover { color: var(--primary); }
|
||||||
|
.article-detail-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.article-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.article-content {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
.article-content h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 32px 0 16px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.article-content p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.article-content ul, .article-content ol {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.article-content li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.article-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.article-tip {
|
||||||
|
background: var(--primary-weak);
|
||||||
|
border-left: 4px solid var(--primary);
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 0 12px 12px 0;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
.article-tip-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 返回按钮 */
|
||||||
|
.back-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.back-btn:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 相关文章 */
|
||||||
|
.related-articles {
|
||||||
|
margin-top: 48px;
|
||||||
|
padding-top: 32px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.related-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.related-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.related-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.related-item:hover {
|
||||||
|
background: var(--primary-weak);
|
||||||
|
}
|
||||||
|
.related-item svg {
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页脚 */
|
||||||
|
.footer {
|
||||||
|
background: #1a1f2e;
|
||||||
|
color: #9ca3af;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.footer-logo {
|
||||||
|
height: 32px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.footer-text {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.search-title { font-size: 24px; }
|
||||||
|
.search-input { padding: 14px 20px 14px 48px; font-size: 15px; }
|
||||||
|
.article-list { padding-left: 0; margin-top: 16px; }
|
||||||
|
.section-header { padding: 12px 16px; background: var(--card); border-radius: 12px; }
|
||||||
|
.article-detail-title { font-size: 22px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表页隐藏/显示 */
|
||||||
|
.articles-list-view { display: block; }
|
||||||
|
.articles-list-view.hidden { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<a href="index.html" class="navbar-logo">
|
||||||
|
<img src="logo.png" alt="Chookoo" />
|
||||||
|
</a>
|
||||||
|
<a href="index.html" class="navbar-back">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||||
|
返回首页
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主内容 -->
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="container">
|
||||||
|
<!-- 文章列表视图 -->
|
||||||
|
<div class="articles-list-view" id="articlesListView">
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<section class="search-section">
|
||||||
|
<h1 class="search-title">法律条款</h1>
|
||||||
|
<p class="search-subtitle">隐私政策、服务条款等信息</p>
|
||||||
|
<div class="search-box">
|
||||||
|
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||||
|
<input type="text" class="search-input" id="searchInput" placeholder="搜索..." />
|
||||||
|
<div class="search-results" id="searchResults"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 分类标签 -->
|
||||||
|
<div class="category-tabs" id="categoryTabs">
|
||||||
|
<div class="category-tab active" data-category="all">全部</div>
|
||||||
|
<div class="category-tab" data-category="privacy">隐私政策</div>
|
||||||
|
<div class="category-tab" data-category="terms">服务条款</div>
|
||||||
|
<div class="category-tab" data-category="cookies">Cookie设置</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章分类列表 -->
|
||||||
|
<div id="articlesContainer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章详情视图 -->
|
||||||
|
<div class="article-detail" id="articleDetail">
|
||||||
|
<button class="back-btn" id="backToList">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||||
|
返回列表
|
||||||
|
</button>
|
||||||
|
<div id="articleContent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<img src="logo.png" alt="Chookoo" class="footer-logo" />
|
||||||
|
<p class="footer-text">© 2025 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 页面类型
|
||||||
|
const PAGE_TYPE = 'legal';
|
||||||
|
|
||||||
|
// 分类配置
|
||||||
|
const categories = {
|
||||||
|
all: { name: '全部', icon: '📋' },
|
||||||
|
privacy: { name: '隐私政策', icon: '🔒' },
|
||||||
|
terms: { name: '服务条款', icon: '📜' },
|
||||||
|
cookies: { name: 'Cookie设置', icon: '🍪' }
|
||||||
|
};
|
||||||
|
|
||||||
|
// 默认文章数据（法律条款）
|
||||||
|
const defaultArticles = [
|
||||||
|
{ id: 401, pageType: 'legal', category: 'privacy', categoryName: '隐私政策', title: '隐私政策', content: '<h2>隐私政策</h2><p>Chookoo重视用户隐私保护。本政策说明我们如何收集、使用和保护您的个人信息。</p><h3>信息收集</h3><p>我们收集的信息包括：账号信息、设备信息、使用数据等。</p><h3>信息使用</h3><p>您的信息用于：提供服务、改进产品、安全保障等。</p>', views: 1234, date: '2025-01-15' },
|
||||||
|
{ id: 402, pageType: 'legal', category: 'terms', categoryName: '服务条款', title: '服务条款', content: '<h2>服务条款</h2><p>使用Chookoo产品和服务即表示您同意本条款。</p><h3>服务内容</h3><p>我们提供智能设备、移动应用及相关服务。</p><h3>用户责任</h3><p>请您遵守相关法律法规，合理使用我们的产品和服务。</p>', views: 876, date: '2025-01-14' },
|
||||||
|
{ id: 403, pageType: 'legal', category: 'cookies', categoryName: 'Cookie设置', title: 'Cookie使用说明', content: '<h2>Cookie使用说明</h2><p>我们使用Cookie来改善您的使用体验。</p><h3>Cookie类型</h3><ul><li>必要的Cookie：确保网站正常运行</li><li>功能性Cookie：记住您的偏好设置</li><li>分析性Cookie：了解用户如何使用网站</li></ul>', views: 654, date: '2025-01-13' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 文章数据
|
||||||
|
let articles = [...defaultArticles];
|
||||||
|
|
||||||
|
// 当前状态
|
||||||
|
let currentCategory = 'all';
|
||||||
|
let collapsedSections = {};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const savedArticles = localStorage.getItem('chookoo_help_articles');
|
||||||
|
if (savedArticles) {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(savedArticles);
|
||||||
|
if (Array.isArray(parsed) && parsed.length > 0) {
|
||||||
|
const customArticles = parsed.filter(a => (a.pageType || 'help') === 'legal');
|
||||||
|
articles.push(...customArticles);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载文章数据失败:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const category = urlParams.get('category');
|
||||||
|
const articleId = urlParams.get('article');
|
||||||
|
|
||||||
|
if (articleId) {
|
||||||
|
showArticle(parseInt(articleId));
|
||||||
|
} else if (category && categories[category]) {
|
||||||
|
currentCategory = category;
|
||||||
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||||
|
tab.classList.toggle('active', tab.dataset.category === category);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderArticles();
|
||||||
|
initSearch();
|
||||||
|
initCategoryTabs();
|
||||||
|
initBackButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderArticles() {
|
||||||
|
const container = document.getElementById('articlesContainer');
|
||||||
|
let html = '';
|
||||||
|
const categoryOrder = ['privacy', 'terms', 'cookies'];
|
||||||
|
|
||||||
|
categoryOrder.forEach(cat => {
|
||||||
|
if (currentCategory !== 'all' && currentCategory !== cat) return;
|
||||||
|
const catArticles = articles.filter(a => a.category === cat && (!a.pageType || a.pageType === PAGE_TYPE));
|
||||||
|
if (catArticles.length === 0) return;
|
||||||
|
|
||||||
|
const isCollapsed = collapsedSections[cat];
|
||||||
|
const catInfo = categories[cat];
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<section class="articles-section" data-category="${cat}">
|
||||||
|
<div class="section-header ${isCollapsed ? 'collapsed' : ''}" onclick="toggleSection('${cat}')">
|
||||||
|
<div class="section-icon ${cat}">${catInfo.icon}</div>
|
||||||
|
<h2 class="section-title">${catInfo.name}</h2>
|
||||||
|
<span class="section-count">${catArticles.length} 篇文章</span>
|
||||||
|
<svg class="section-toggle" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="article-list ${isCollapsed ? 'hidden' : ''}">
|
||||||
|
${catArticles.map(article => `
|
||||||
|
<div class="article-item" onclick="showArticle(${article.id})">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||||
|
<span class="article-title">${article.title}</span>
|
||||||
|
<svg class="article-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
container.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSection(cat) {
|
||||||
|
collapsedSections[cat] = !collapsedSections[cat];
|
||||||
|
renderArticles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showArticle(id) {
|
||||||
|
const article = articles.find(a => a.id === id);
|
||||||
|
if (!article) return;
|
||||||
|
|
||||||
|
const content = document.getElementById('articleContent');
|
||||||
|
content.innerHTML = `
|
||||||
|
<div class="article-breadcrumb">
|
||||||
|
<a href="#" onclick="backToList(); return false;">法律条款</a>
|
||||||
|
<span>/</span>
|
||||||
|
<span>${article.categoryName}</span>
|
||||||
|
</div>
|
||||||
|
<div class="article-detail">
|
||||||
|
<h1 class="article-title">${article.title}</h1>
|
||||||
|
<div class="article-meta">
|
||||||
|
<span class="article-date">${article.date}</span>
|
||||||
|
<span class="article-views">${article.views} 次阅读</span>
|
||||||
|
</div>
|
||||||
|
<div class="article-body">${article.content}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('articlesContainer').style.display = 'none';
|
||||||
|
document.getElementById('articlesListView').style.display = 'none';
|
||||||
|
document.getElementById('articleDetail').style.display = 'block';
|
||||||
|
document.getElementById('articleDetail').classList.add('active');
|
||||||
|
history.pushState({ articleId: id }, '', `?article=${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function backToList() {
|
||||||
|
document.getElementById('articlesContainer').style.display = 'block';
|
||||||
|
document.getElementById('articlesListView').style.display = 'block';
|
||||||
|
document.getElementById('articleDetail').style.display = 'none';
|
||||||
|
document.getElementById('articleDetail').classList.remove('active');
|
||||||
|
history.pushState({}, '', window.location.pathname);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initBackButton() {
|
||||||
|
document.getElementById('backToList').addEventListener('click', backToList);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initCategoryTabs() {
|
||||||
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||||
|
tab.addEventListener('click', function() {
|
||||||
|
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
currentCategory = this.dataset.category;
|
||||||
|
renderArticles();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initSearch() {
|
||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
const results = document.getElementById('searchResults');
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', function() {
|
||||||
|
const query = this.value.toLowerCase().trim();
|
||||||
|
if (query.length < 2) {
|
||||||
|
results.classList.remove('active');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const matched = articles.filter(a =>
|
||||||
|
(!a.pageType || a.pageType === PAGE_TYPE) &&
|
||||||
|
(a.title.toLowerCase().includes(query) || a.content.toLowerCase().includes(query))
|
||||||
|
);
|
||||||
|
|
||||||
|
if (matched.length === 0) {
|
||||||
|
results.innerHTML = '<div class="search-no-result">未找到相关文章</div>';
|
||||||
|
} else {
|
||||||
|
results.innerHTML = matched.slice(0, 8).map(a => `
|
||||||
|
<div class="search-result-item" onclick="showArticle(${a.id})">
|
||||||
|
<div class="search-result-title">${a.title}</div>
|
||||||
|
<div class="search-result-category">${a.categoryName}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
results.classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
if (!searchInput.contains(e.target) && !results.contains(e.target)) {
|
||||||
|
results.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 40 KiB |
@@ -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 筛选
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 确认开始？
|
||||||
+671
@@ -0,0 +1,671 @@
|
|||||||
|
<!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; margin: 0; padding: 0; }
|
||||||
|
html { overflow-y: scroll; }
|
||||||
|
body {
|
||||||
|
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;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
/* 导航栏 */
|
||||||
|
.navbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
.navbar-inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 64px;
|
||||||
|
padding: 0 32px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.navbar-logo img { height: 40px; }
|
||||||
|
.navbar-back {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.navbar-back:hover { color: var(--text); }
|
||||||
|
|
||||||
|
/* 主内容区 */
|
||||||
|
.main-content {
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索区域 */
|
||||||
|
.search-section {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.search-title {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.search-subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.search-box {
|
||||||
|
position: relative;
|
||||||
|
max-width: 560px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 24px 16px 52px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 2px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--card);
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.search-input:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.1);
|
||||||
|
}
|
||||||
|
.search-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.search-results {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: none;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.search-results.active { display: block; }
|
||||||
|
.search-result-item {
|
||||||
|
padding: 14px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.search-result-item:last-child { border-bottom: none; }
|
||||||
|
.search-result-item:hover { background: var(--primary-weak); }
|
||||||
|
.search-result-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.search-result-category {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.search-no-result {
|
||||||
|
padding: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分类标签 */
|
||||||
|
.category-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.category-tab {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.category-tab:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
.category-tab.active {
|
||||||
|
background: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章分类区块 */
|
||||||
|
.articles-section {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.section-icon {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.section-icon.dealer { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
||||||
|
.section-icon.affiliate { background: linear-gradient(135deg, #fef3c7, #fde68a); }
|
||||||
|
.section-icon.business { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
|
||||||
|
.section-icon.tech { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
|
||||||
|
.section-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.section-count {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--bg);
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
.section-toggle {
|
||||||
|
color: var(--muted);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
.section-header.collapsed .section-toggle {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章列表 */
|
||||||
|
.article-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
padding-left: 56px;
|
||||||
|
}
|
||||||
|
.article-list.hidden { display: none; }
|
||||||
|
.article-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.article-item:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 4px 12px rgba(47, 107, 255, 0.1);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
.article-item svg {
|
||||||
|
color: var(--primary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.article-title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.article-arrow {
|
||||||
|
color: var(--muted);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.article-item:hover .article-arrow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章详情页 */
|
||||||
|
.article-detail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.article-detail.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.article-breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.article-breadcrumb a:hover { color: var(--primary); }
|
||||||
|
.article-detail-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.article-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.article-content {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
.article-content h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 32px 0 16px;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.article-content p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.article-content ul, .article-content ol {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.article-content li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.article-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.article-tip {
|
||||||
|
background: var(--primary-weak);
|
||||||
|
border-left: 4px solid var(--primary);
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-radius: 0 12px 12px 0;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
.article-tip-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 返回按钮 */
|
||||||
|
.back-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.back-btn:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 相关文章 */
|
||||||
|
.related-articles {
|
||||||
|
margin-top: 48px;
|
||||||
|
padding-top: 32px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
.related-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.related-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.related-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: var(--card);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.related-item:hover {
|
||||||
|
background: var(--primary-weak);
|
||||||
|
}
|
||||||
|
.related-item svg {
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页脚 */
|
||||||
|
.footer {
|
||||||
|
background: #1a1f2e;
|
||||||
|
color: #9ca3af;
|
||||||
|
padding: 40px 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.footer-logo {
|
||||||
|
height: 32px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.footer-text {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.search-title { font-size: 24px; }
|
||||||
|
.search-input { padding: 14px 20px 14px 48px; font-size: 15px; }
|
||||||
|
.article-list { padding-left: 0; margin-top: 16px; }
|
||||||
|
.section-header { padding: 12px 16px; background: var(--card); border-radius: 12px; }
|
||||||
|
.article-detail-title { font-size: 22px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表页隐藏/显示 */
|
||||||
|
.articles-list-view { display: block; }
|
||||||
|
.articles-list-view.hidden { display: none; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<a href="index.html" class="navbar-logo">
|
||||||
|
<img src="logo.png" alt="Chookoo" />
|
||||||
|
</a>
|
||||||
|
<a href="index.html" class="navbar-back">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||||
|
返回首页
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主内容 -->
|
||||||
|
<main class="main-content">
|
||||||
|
<div class="container">
|
||||||
|
<!-- 文章列表视图 -->
|
||||||
|
<div class="articles-list-view" id="articlesListView">
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<section class="search-section">
|
||||||
|
<h1 class="search-title">合作伙伴</h1>
|
||||||
|
<p class="search-subtitle">搜索您想了解的合作伙伴信息</p>
|
||||||
|
<div class="search-box">
|
||||||
|
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||||
|
<input type="text" class="search-input" id="searchInput" placeholder="搜索..." />
|
||||||
|
<div class="search-results" id="searchResults"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 分类标签 -->
|
||||||
|
<div class="category-tabs" id="categoryTabs">
|
||||||
|
<div class="category-tab active" data-category="all">全部</div>
|
||||||
|
<div class="category-tab" data-category="dealer">经销商入驻</div>
|
||||||
|
<div class="category-tab" data-category="affiliate">联盟推广</div>
|
||||||
|
<div class="category-tab" data-category="business">企业采购</div>
|
||||||
|
<div class="category-tab" data-category="tech">技术合作</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章分类列表 -->
|
||||||
|
<div id="articlesContainer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章详情视图 -->
|
||||||
|
<div class="article-detail" id="articleDetail">
|
||||||
|
<button class="back-btn" id="backToList">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
||||||
|
返回列表
|
||||||
|
</button>
|
||||||
|
<div id="articleContent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="footer">
|
||||||
|
<img src="logo.png" alt="Chookoo" class="footer-logo" />
|
||||||
|
<p class="footer-text">© 2025 宠科智能科技（苏州）有限公司 保留所有权利</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 页面类型
|
||||||
|
const PAGE_TYPE = 'partner';
|
||||||
|
|
||||||
|
// 分类配置
|
||||||
|
const categories = {
|
||||||
|
all: { name: '全部', icon: '📋' },
|
||||||
|
dealer: { name: '经销商入驻', icon: '🏪' },
|
||||||
|
affiliate: { name: '联盟推广', icon: '🔗' },
|
||||||
|
business: { name: '企业采购', icon: '🏢' },
|
||||||
|
tech: { name: '技术合作', icon: '🔬' }
|
||||||
|
};
|
||||||
|
|
||||||
|
// 默认文章数据（合作伙伴）
|
||||||
|
const defaultArticles = [
|
||||||
|
{ id: 301, pageType: 'partner', category: 'dealer', categoryName: '经销商入驻', title: '经销商入驻条件', content: '<h2>入驻条件</h2><ul><li>具有合法经营资质</li><li>有宠物行业经验优先</li><li>具备一定的资金实力</li><li>认同品牌理念</li></ul>', views: 654, date: '2025-01-15' },
|
||||||
|
{ id: 302, pageType: 'partner', category: 'dealer', categoryName: '经销商入驻', title: '经销商政策', content: '<h2>合作政策</h2><ul><li>区域独家保护</li><li>市场费用支持</li><li>培训支持</li><li>售后支持</li></ul>', views: 543, date: '2025-01-14' },
|
||||||
|
{ id: 303, pageType: 'partner', category: 'affiliate', categoryName: '联盟推广', title: '推广联盟计划', content: '<h2>推广联盟</h2><p>加入Chookoo推广联盟，通过分享获得收益。</p><ul><li>佣金比例：10%-15%</li><li>结算周期：月结</li><li>支持素材丰富</li></ul>', views: 432, date: '2025-01-13' },
|
||||||
|
{ id: 304, pageType: 'partner', category: 'business', categoryName: '企业采购', title: '企业采购服务', content: '<h2>企业采购</h2><p>为企业客户提供定制化采购服务：</p><ul><li>批量优惠</li><li>定制包装</li><li>专属客服</li><li>发票支持</li></ul>', views: 321, date: '2025-01-12' },
|
||||||
|
{ id: 305, pageType: 'partner', category: 'tech', categoryName: '技术合作', title: '技术合作', content: '<h2>技术合作</h2><p>我们欢迎各类技术合作：</p><ul><li>智能家居平台对接</li><li>Pet IoT生态合作</li><li>技术授权</li></ul>', views: 234, date: '2025-01-11' }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 文章数据
|
||||||
|
let articles = [...defaultArticles];
|
||||||
|
|
||||||
|
// 当前状态
|
||||||
|
let currentCategory = 'all';
|
||||||
|
let collapsedSections = {};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const savedArticles = localStorage.getItem('chookoo_help_articles');
|
||||||
|
if (savedArticles) {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(savedArticles);
|
||||||
|
if (Array.isArray(parsed) && parsed.length > 0) {
|
||||||
|
const customArticles = parsed.filter(a => (a.pageType || 'help') === 'partner');
|
||||||
|
articles.push(...customArticles);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('加载文章数据失败:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const category = urlParams.get('category');
|
||||||
|
const articleId = urlParams.get('article');
|
||||||
|
|
||||||
|
if (articleId) {
|
||||||
|
showArticle(parseInt(articleId));
|
||||||
|
} else if (category && categories[category]) {
|
||||||
|
currentCategory = category;
|
||||||
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||||
|
tab.classList.toggle('active', tab.dataset.category === category);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderArticles();
|
||||||
|
initSearch();
|
||||||
|
initCategoryTabs();
|
||||||
|
initBackButton();
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderArticles() {
|
||||||
|
const container = document.getElementById('articlesContainer');
|
||||||
|
let html = '';
|
||||||
|
const categoryOrder = ['dealer', 'affiliate', 'business', 'tech'];
|
||||||
|
|
||||||
|
categoryOrder.forEach(cat => {
|
||||||
|
if (currentCategory !== 'all' && currentCategory !== cat) return;
|
||||||
|
const catArticles = articles.filter(a => a.category === cat && (!a.pageType || a.pageType === PAGE_TYPE));
|
||||||
|
if (catArticles.length === 0) return;
|
||||||
|
|
||||||
|
const isCollapsed = collapsedSections[cat];
|
||||||
|
const catInfo = categories[cat];
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<section class="articles-section" data-category="${cat}">
|
||||||
|
<div class="section-header ${isCollapsed ? 'collapsed' : ''}" onclick="toggleSection('${cat}')">
|
||||||
|
<div class="section-icon ${cat}">${catInfo.icon}</div>
|
||||||
|
<h2 class="section-title">${catInfo.name}</h2>
|
||||||
|
<span class="section-count">${catArticles.length} 篇文章</span>
|
||||||
|
<svg class="section-toggle" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||||
|
</div>
|
||||||
|
<div class="article-list ${isCollapsed ? 'hidden' : ''}">
|
||||||
|
${catArticles.map(article => `
|
||||||
|
<div class="article-item" onclick="showArticle(${article.id})">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||||||
|
<span class="article-title">${article.title}</span>
|
||||||
|
<svg class="article-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
container.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSection(cat) {
|
||||||
|
collapsedSections[cat] = !collapsedSections[cat];
|
||||||
|
renderArticles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showArticle(id) {
|
||||||
|
const article = articles.find(a => a.id === id);
|
||||||
|
if (!article) return;
|
||||||
|
|
||||||
|
const content = document.getElementById('articleContent');
|
||||||
|
content.innerHTML = `
|
||||||
|
<div class="article-breadcrumb">
|
||||||
|
<a href="#" onclick="backToList(); return false;">合作伙伴</a>
|
||||||
|
<span>/</span>
|
||||||
|
<span>${article.categoryName}</span>
|
||||||
|
</div>
|
||||||
|
<div class="article-detail">
|
||||||
|
<h1 class="article-title">${article.title}</h1>
|
||||||
|
<div class="article-meta">
|
||||||
|
<span class="article-date">${article.date}</span>
|
||||||
|
<span class="article-views">${article.views} 次阅读</span>
|
||||||
|
</div>
|
||||||
|
<div class="article-body">${article.content}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('articlesContainer').style.display = 'none';
|
||||||
|
document.getElementById('articlesListView').style.display = 'none';
|
||||||
|
document.getElementById('articleDetail').style.display = 'block';
|
||||||
|
document.getElementById('articleDetail').classList.add('active');
|
||||||
|
history.pushState({ articleId: id }, '', `?article=${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function backToList() {
|
||||||
|
document.getElementById('articlesContainer').style.display = 'block';
|
||||||
|
document.getElementById('articlesListView').style.display = 'block';
|
||||||
|
document.getElementById('articleDetail').style.display = 'none';
|
||||||
|
document.getElementById('articleDetail').classList.remove('active');
|
||||||
|
history.pushState({}, '', window.location.pathname);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initBackButton() {
|
||||||
|
document.getElementById('backToList').addEventListener('click', backToList);
|
||||||
|
}
|
||||||
|
|
||||||
|
function initCategoryTabs() {
|
||||||
|
document.querySelectorAll('.category-tab').forEach(tab => {
|
||||||
|
tab.addEventListener('click', function() {
|
||||||
|
document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
currentCategory = this.dataset.category;
|
||||||
|
renderArticles();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initSearch() {
|
||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
const results = document.getElementById('searchResults');
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', function() {
|
||||||
|
const query = this.value.toLowerCase().trim();
|
||||||
|
if (query.length < 2) {
|
||||||
|
results.classList.remove('active');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const matched = articles.filter(a =>
|
||||||
|
(!a.pageType || a.pageType === PAGE_TYPE) &&
|
||||||
|
(a.title.toLowerCase().includes(query) || a.content.toLowerCase().includes(query))
|
||||||
|
);
|
||||||
|
|
||||||
|
if (matched.length === 0) {
|
||||||
|
results.innerHTML = '<div class="search-no-result">未找到相关文章</div>';
|
||||||
|
} else {
|
||||||
|
results.innerHTML = matched.slice(0, 8).map(a => `
|
||||||
|
<div class="search-result-item" onclick="showArticle(${a.id})">
|
||||||
|
<div class="search-result-title">${a.title}</div>
|
||||||
|
<div class="search-result-category">${a.categoryName}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
results.classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', function(e) {
|
||||||
|
if (!searchInput.contains(e.target) && !results.contains(e.target)) {
|
||||||
|
results.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+1189
File diff suppressed because it is too large
Load Diff
+1296
File diff suppressed because it is too large
Load Diff
+704
-72
@@ -29,6 +29,9 @@
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
.container {
|
.container {
|
||||||
width: min(1200px, 100%);
|
width: min(1200px, 100%);
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
@@ -36,54 +39,117 @@
|
|||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
/* 导航栏 */
|
/* 导航栏 */
|
||||||
.nav {
|
.navbar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
padding: 16px 24px;
|
background: rgba(255, 255, 255, 0.92);
|
||||||
background: rgba(255, 255, 255, 0.9);
|
backdrop-filter: blur(20px);
|
||||||
backdrop-filter: blur(12px);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
-webkit-backdrop-filter: blur(12px);
|
transition: all 0.3s ease;
|
||||||
border-bottom: 1px solid var(--line);
|
|
||||||
}
|
}
|
||||||
.nav-inner {
|
.navbar-inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
max-width: 1200px;
|
height: 64px;
|
||||||
|
padding: 0 32px;
|
||||||
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.nav-logo {
|
.navbar-menu {
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
.nav-logo-icon {
|
.navbar-logo {
|
||||||
width: 28px;
|
display: flex;
|
||||||
height: 28px;
|
align-items: center;
|
||||||
background: var(--primary);
|
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;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #fff;
|
width: 40px;
|
||||||
font-size: 14px;
|
height: 40px;
|
||||||
}
|
border-radius: 10px;
|
||||||
.nav-back {
|
background: transparent;
|
||||||
display: flex;
|
border: none;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
gap: 6px;
|
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
font-size: 14px;
|
transition: all 0.2s ease;
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
}
|
||||||
.nav-back:hover {
|
.navbar-btn:hover {
|
||||||
color: var(--primary);
|
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 {
|
.page-header {
|
||||||
@@ -204,26 +270,26 @@
|
|||||||
}
|
}
|
||||||
/* 社交媒体区域 - 紧凑高端设计 */
|
/* 社交媒体区域 - 紧凑高端设计 */
|
||||||
.social-section {
|
.social-section {
|
||||||
padding: 60px 0;
|
padding: 80px 0;
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
|
background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
|
||||||
}
|
}
|
||||||
.social-section h2 {
|
.social-section h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 24px;
|
font-size: 32px;
|
||||||
margin: 0 0 6px;
|
margin: 0 0 12px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
.social-section .subtitle {
|
.social-section .subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
margin: 0 0 32px;
|
margin: 0 0 48px;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.social-grid {
|
.social-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 20px;
|
gap: 32px;
|
||||||
max-width: 720px;
|
max-width: 960px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
@@ -231,65 +297,65 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px 16px;
|
padding: 32px 24px;
|
||||||
border-radius: 16px;
|
border-radius: 20px;
|
||||||
background: var(--card);
|
background: var(--card);
|
||||||
border: 1px solid var(--line);
|
border: 1px solid var(--line);
|
||||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
|
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
.social-card:hover {
|
.social-card:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-6px);
|
||||||
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
|
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
|
||||||
}
|
}
|
||||||
.social-icon {
|
.social-icon {
|
||||||
width: 44px;
|
width: 56px;
|
||||||
height: 44px;
|
height: 56px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
background: var(--primary-weak);
|
background: var(--primary-weak);
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
.social-icon svg {
|
.social-icon svg {
|
||||||
width: 22px;
|
width: 28px;
|
||||||
height: 22px;
|
height: 28px;
|
||||||
}
|
}
|
||||||
.social-card:hover .social-icon {
|
.social-card:hover .social-icon {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
.social-card h3 {
|
.social-card h3 {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1f2937;
|
color: #1f2937;
|
||||||
margin: 0 0 4px;
|
margin: 0 0 6px;
|
||||||
}
|
}
|
||||||
.social-card p {
|
.social-card p {
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
margin: 0 0 12px;
|
margin: 0 0 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.social-card .qr-code {
|
.social-card .qr-code {
|
||||||
width: 80px;
|
width: 120px;
|
||||||
height: 80px;
|
height: 120px;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
}
|
}
|
||||||
.social-card .qr-code img {
|
.social-card .qr-code img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
/* 页脚 */
|
/* 页脚 */
|
||||||
footer {
|
footer {
|
||||||
@@ -337,14 +403,372 @@
|
|||||||
.social-card:nth-child(4) { animation-delay: 1s; }
|
.social-card:nth-child(4) { animation-delay: 1s; }
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.page-header h1 { font-size: 32px; }
|
.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; }
|
.stories-grid { grid-template-columns: 1fr; padding: 24px 16px; }
|
||||||
.social-grid {
|
.social-grid {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 16px;
|
gap: 20px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
.social-card { padding: 16px; }
|
.social-card { padding: 24px 16px; }
|
||||||
.social-card .qr-code { width: 70px; height: 70px; }
|
.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>
|
</style>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link rel="preconnect" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
@@ -359,16 +783,35 @@
|
|||||||
</style>
|
</style>
|
||||||
<body>
|
<body>
|
||||||
<!-- 导航栏 -->
|
<!-- 导航栏 -->
|
||||||
<nav class="nav">
|
<nav class="navbar">
|
||||||
<div class="nav-inner">
|
<div class="navbar-inner">
|
||||||
<a href="index.html" class="nav-logo">
|
<a href="index.html" class="navbar-logo">
|
||||||
<span class="nav-logo-icon">C</span>
|
<img src="logo.png" alt="Chookoo" />
|
||||||
Chookoo
|
|
||||||
</a>
|
|
||||||
<a href="index.html" class="nav-back">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12l-4-4 4-4-4 4-4-4 4 4 4 2a6 2a6 2"></path><path d="M19 12H5"></path><path d="M12 19V5"></path></svg>
|
|
||||||
返回首页
|
|
||||||
</a>
|
</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>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
@@ -595,13 +1038,202 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- 页脚 -->
|
<!-- 页脚 -->
|
||||||
<footer>
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="footer-container">
|
||||||
<p>© 2024 Chookoo宠科智能科技（苏州）有限公司 · 让每一份宠爱，都有科学回响</p>
|
<div class="footer-bottom">
|
||||||
<p style="margin-top: 8px;">
|
<div class="footer-bottom-main">
|
||||||
<a href="index.html">返回首页</a>
|
<p class="footer-copyright">© 2025 Chookoo. All rights reserved.</p>
|
||||||
</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>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Reference in New Issue
Block a user