docs: 官网更新内容为文档
This commit is contained in:
zstar
parent
1241acf916
commit
7208b0eaa6
|
|
@ -2,4 +2,6 @@
|
|||
- [进阶技巧](skill/)
|
||||
- [API接口](api/)
|
||||
- [构建镜像](build/)
|
||||
- [博客系列](blog/)
|
||||
- [博客系列](blog/)
|
||||
- [常见问题](question/)
|
||||
- [开发计划](development/)
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
# RagflowPlus 开发计划
|
||||
|
||||
## 下版本计划
|
||||
|
||||
- [x] 图片输出顺序优化
|
||||
|
||||
- [ ] 聊天文件上传
|
||||
|
||||
- [ ] chunk关联图片修改
|
||||
|
||||
- [ ] 图片输出顺序优化
|
||||
|
||||
|
||||
- [ ] 关键词显性显示
|
||||
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ragflow-Plus</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
|
||||
<meta name="description" content="Description">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="custom.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">加载中...</div>
|
||||
<script src="//cdn.jsdelivr.net/npm/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Ragflow-Plus',
|
||||
repo: 'https://github.com/zstar1003/ragflow-plus',
|
||||
loadSidebar: '/ragflow-plus/docs/_sidebar.md',
|
||||
basePath: '/ragflow-plus/',
|
||||
auto2top: true,
|
||||
subMaxLevel: 2,
|
||||
|
||||
pagination: {
|
||||
previousText: '上一节',
|
||||
nextText: '下一节',
|
||||
},
|
||||
count: {
|
||||
countable: true,
|
||||
fontsize: '0.9em',
|
||||
color: 'rgb(90,90,90)',
|
||||
language: 'chinese'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Put them above docsify.min.js -->
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
|
||||
<!-- code render-->
|
||||
<script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-bash.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-python.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-pagination@latest/dist/docsify-pagination.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked@3"></script>
|
||||
<!-- CDN files for docsify-katex -->
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
|
||||
<!-- 字数统计 -->
|
||||
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
275
docs/index.html
275
docs/index.html
|
|
@ -1,229 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>RagflowPlus</title>
|
||||
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta charset="UTF-8">
|
||||
<title>Ragflow-Plus</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
|
||||
<meta name="description" content="Description">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css">
|
||||
<link rel="stylesheet" href="custom.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container">
|
||||
<nav class="navbar">
|
||||
<div class="logo">
|
||||
<img src="images/ragflow-plus.png" alt="RagflowPlus Logo">
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="docs/index.html">文档</a></li>
|
||||
<li><a href="#features">功能</a></li>
|
||||
<li><a href="#demo">演示</a></li>
|
||||
<li><a href="#quick-start">快速开始</a></li>
|
||||
<li><a href="#community">社群</a></li>
|
||||
<li><a href="#faq">常见问题</a></li>
|
||||
<li><a href="#dev-plan">开发计划</a></li>
|
||||
<li><a href="https://github.com/zstar1003/ragflow-plus" target="_blank" title="GitHub Repository">
|
||||
GitHub
|
||||
</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div id="app">加载中...</div>
|
||||
<script src="//cdn.jsdelivr.net/npm/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Ragflow-Plus',
|
||||
repo: 'https://github.com/zstar1003/ragflow-plus',
|
||||
loadSidebar: true,
|
||||
auto2top: true,
|
||||
subMaxLevel: 2,
|
||||
alias: {
|
||||
'/.*/_sidebar.md': '_sidebar.md'
|
||||
},
|
||||
pagination: {
|
||||
previousText: '上一节',
|
||||
nextText: '下一节',
|
||||
},
|
||||
count: {
|
||||
countable: true,
|
||||
fontsize: '0.9em',
|
||||
color: 'rgb(90,90,90)',
|
||||
language: 'chinese'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Put them above docsify.min.js -->
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
|
||||
<!-- code render-->
|
||||
<script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-bash.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/prismjs@latest/components/prism-python.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-pagination@latest/dist/docsify-pagination.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div class="hero-content" data-aos="fade-right">
|
||||
<h1>RagflowPlus - 为实际应用而生的增强型 RAG 框架</h1>
|
||||
<p>基于Ragflow的二次开发项目，提供增强的文件解析、图文输出和全新文档撰写模式</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#quick-start" class="btn btn-primary">立即开始</a>
|
||||
<a href="https://www.bilibili.com/video/BV1UJLezaEEE" class="btn btn-secondary">观看演示</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="features">
|
||||
<div class="container" data-aos="fade-up">
|
||||
<div class="section-title">
|
||||
<h2>主要特性</h2>
|
||||
<p>RagflowPlus基于Ragflow进行二次开发，解决了实际应用中的多个问题</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card" data-aos="zoom-in">
|
||||
<div class="icon">📊</div>
|
||||
<h3>管理模式</h3>
|
||||
<p>完整后台管理系统，支持用户、团队、配置、文件和知识库管理</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="zoom-in" data-aos-delay="100">
|
||||
<div class="icon">🔒</div>
|
||||
<h3>权限回收</h3>
|
||||
<p>简化前台界面，优化用户体验</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="zoom-in" data-aos-delay="200">
|
||||
<div class="icon">🔍</div>
|
||||
<h3>解析增强</h3>
|
||||
<p>使用MinerU替代DeepDoc算法，支持图片解析，效果更佳</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="zoom-in">
|
||||
<div class="icon">🖼️</div>
|
||||
<h3>图文输出</h3>
|
||||
<p>回答时输出引用文本块关联的相关图片</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="zoom-in" data-aos-delay="100">
|
||||
<div class="icon">✍️</div>
|
||||
<h3>文档撰写模式</h3>
|
||||
<p>全新的文档模式交互体验</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" data-aos="zoom-in" data-aos-delay="200">
|
||||
<div class="icon">🚀</div>
|
||||
<h3>更多功能</h3>
|
||||
<p>更多功能正在开发中，敬请期待</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demo Section -->
|
||||
<section id="demo" class="demo" data-aos="fade-up">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>视频演示</h2>
|
||||
<p>观看RagflowPlus的操作演示和教程</p>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<a href="https://www.bilibili.com/video/BV1UJLezaEEE">
|
||||
<img src="images/video-thumbnail.jpg" alt="Ragflow-Plus演示视频缩略图">
|
||||
<div class="play-button">▶</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Section -->
|
||||
<section id="quick-start" class="quick-start" data-aos="fade-up">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>快速开始</h2>
|
||||
<p>快速部署和使用RagflowPlus的详细指南</p>
|
||||
</div>
|
||||
|
||||
<div class="installation-option">
|
||||
<h3>使用Docker Compose运行</h3>
|
||||
<p>在项目根目录下执行</p>
|
||||
|
||||
<div class="code-tabs">
|
||||
<div class="tab-header">
|
||||
<button class="tab-button active" onclick="openTab(event, 'gpu')">GPU版本</button>
|
||||
<button class="tab-button" onclick="openTab(event, 'cpu')">CPU版本</button>
|
||||
</div>
|
||||
|
||||
<div id="gpu" class="tab-content active">
|
||||
<pre><code>docker compose -f docker/docker-compose_gpu.yml up -d</code></pre>
|
||||
</div>
|
||||
|
||||
<div id="cpu" class="tab-content">
|
||||
<pre><code>docker compose -f docker/docker-compose.yml up -d</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>访问地址：<code>服务器ip:80</code>，进入到前台界面</p>
|
||||
<p>访问地址：<code>服务器ip:8888</code>，进入到后台管理界面</p>
|
||||
<p>图文教程：<a href="https://blog.csdn.net/qq1198768105/article/details/147475488">CSDN教程</a></p>
|
||||
</div>
|
||||
|
||||
<div class="installation-option">
|
||||
<h3>源码运行</h3>
|
||||
<h4>0. 启动必要组件</h4>
|
||||
<p>docker启动ragflow-mysql、ragflow-es-01、ragflow-minio三个容器</p>
|
||||
|
||||
<h4>1. 启动后台管理系统：</h4>
|
||||
<p>启动后端：进入到<code>management/server</code>，执行：</p>
|
||||
<pre><code>python app.py</code></pre>
|
||||
|
||||
<p>启动前端：进入到<code>management\web</code>，执行：</p>
|
||||
<pre><code>pnpm dev</code></pre>
|
||||
|
||||
<h4>2. 启动前台交互系统：</h4>
|
||||
<p>启动后端：项目根目录下执行：</p>
|
||||
<pre><code>python -m api.ragflow_server</code></pre>
|
||||
|
||||
<p>启动前端：进入到<code>web</code>，执行：</p>
|
||||
<pre><code>pnpm dev</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community Section -->
|
||||
<section id="community" class="community" data-aos="fade-up">
|
||||
<div class="container">
|
||||
<h2>加入社群</h2>
|
||||
<p>如果有需求或问题反馈，可加入交流群进行讨论</p>
|
||||
<div class="qrcodes-wrapper">
|
||||
<div class="qrcode-container">
|
||||
<img src="images/group.jpg" alt="Ragflow-Plus作者微信二维码">
|
||||
<p>群超200人，需要进群扫码备注“进群”</p>
|
||||
</div>
|
||||
<div class="qrcode-container">
|
||||
<img src="images/qrcode.jpg" alt="[我有一计]微信公众号二维码">
|
||||
<p>扫码关注公众号</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="faq-section" data-aos="fade-up">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>常见问题</h2>
|
||||
<p>您可能会关心的一些常见问题及其解答</p>
|
||||
</div>
|
||||
<!-- Markdown 内容将加载到这里 -->
|
||||
<div id="faq-container">
|
||||
<p>正在加载常见问题...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Development Plan Section -->
|
||||
<section id="dev-plan" class="dev-plan-section" data-aos="fade-up">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>开发计划</h2>
|
||||
<p>了解 RagflowPlus 的未来开发方向和计划。</p>
|
||||
</div>
|
||||
<div id="dev-plan-container">
|
||||
<!-- Markdown content will be loaded here -->
|
||||
<p>正在加载开发计划...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="links">
|
||||
<a href="https://github.com/zstar1003/ragflow-plus/blob/main/LICENSE">许可证</a>
|
||||
<a href="https://github.com/zstar1003/ragflow-plus">GitHub</a>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© 2025 RagflowPlus. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script src="script.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked@3"></script>
|
||||
<!-- CDN files for docsify-katex -->
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
|
||||
<!-- 字数统计 -->
|
||||
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 186 KiB After Width: | Height: | Size: 186 KiB |
|
Before Width: | Height: | Size: 297 KiB After Width: | Height: | Size: 297 KiB |
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 476 KiB After Width: | Height: | Size: 476 KiB |
|
|
@ -1,63 +0,0 @@
|
|||
function openTab(evt, tabName) {
|
||||
// Hide all tab content
|
||||
var tabContents = document.getElementsByClassName("tab-content");
|
||||
for (var i = 0; i < tabContents.length; i++) {
|
||||
tabContents[i].classList.remove("active");
|
||||
}
|
||||
|
||||
// Remove active class from all tab buttons
|
||||
var tabButtons = document.getElementsByClassName("tab-button");
|
||||
for (var i = 0; i < tabButtons.length; i++) {
|
||||
tabButtons[i].classList.remove("active");
|
||||
}
|
||||
|
||||
// Show the current tab and add active class to the button
|
||||
document.getElementById(tabName).classList.add("active");
|
||||
evt.currentTarget.classList.add("active");
|
||||
}
|
||||
/**
|
||||
* @function fetchAndRenderMarkdown
|
||||
* @description 异步获取 Markdown 文件内容并使用 Marked.js 将其渲染为 HTML。
|
||||
* @param {string} markdownPath - Markdown 文件的路径。
|
||||
* @param {string} containerId - 用于显示渲染后 HTML 的容器元素的 ID。
|
||||
*/
|
||||
async function fetchAndRenderMarkdown(markdownPath, containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) {
|
||||
console.error(`Container element with id "${containerId}" not found.`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(markdownPath);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const markdownText = await response.text();
|
||||
const htmlContent = marked.parse(markdownText); // 使用 marked.parse()
|
||||
container.innerHTML = htmlContent;
|
||||
} catch (error) {
|
||||
console.error('Error fetching or rendering Markdown:', error);
|
||||
container.innerHTML = '<p style="color: red;">加载常见问题失败，请稍后重试。</p>';
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
// 默认打开第一个标签页
|
||||
const firstTabButton = document.querySelector('.tab-button');
|
||||
if (firstTabButton) {
|
||||
firstTabButton.click();
|
||||
}
|
||||
|
||||
// 加载 FAQ Markdown 内容
|
||||
fetchAndRenderMarkdown('faq.md', 'faq-container');
|
||||
fetchAndRenderMarkdown('plan.md', 'dev-plan-container');
|
||||
// 初始化 AOS
|
||||
AOS.init({
|
||||
duration: 800, // 动画持续时间 (毫秒)
|
||||
once: true, // 动画是否只播放一次
|
||||
offset: 50, // 触发动画的偏移量 (像素)
|
||||
});
|
||||
});
|
||||
|
||||
671
docs/style.css
671
docs/style.css
|
|
@ -1,671 +0,0 @@
|
|||
:root {
|
||||
--primary-color: #3a86ff;
|
||||
--secondary-color: #28a745;
|
||||
--dark-color: #343a40;
|
||||
--light-color: #f8f9fa;
|
||||
--gray-color: #6c757d;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--dark-color);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
header {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.language-switcher {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.language-switcher a {
|
||||
margin: 0 5px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 20px;
|
||||
border-radius: 5px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--dark-color);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
padding: 80px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 2rem;
|
||||
color: var(--dark-color);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section-title p {
|
||||
color: var(--gray-color);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-card .icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
/* Demo Section */
|
||||
.demo {
|
||||
padding: 80px 0;
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.video-container img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.play-button:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Quick Start Section */
|
||||
.quick-start {
|
||||
padding: 80px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.installation-option {
|
||||
margin-bottom: 50px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.installation-option h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.installation-option p {
|
||||
margin-bottom: 15px;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 10px 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
color: var(--gray-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: var(--primary-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* Community Section */
|
||||
.community {
|
||||
padding: 80px 0;
|
||||
background-color: var(--light-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.community h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 20px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.community p {
|
||||
color: var(--gray-color);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
/* 保持原有样式，可以根据需要调整 max-width */
|
||||
margin: 15px; /* 调整外边距 */
|
||||
max-width: 250px; /* 可以调整宽度 */
|
||||
display: inline-block; /* 确保在 flex 布局中正确表现 */
|
||||
vertical-align: top; /* 顶部对齐 */
|
||||
}
|
||||
|
||||
.qrcode-container img {
|
||||
max-width: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 10px; /* 图片和文字间距 */
|
||||
}
|
||||
|
||||
.qrcode-container p {
|
||||
color: var(--gray-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 新增包裹层样式 */
|
||||
.qrcodes-wrapper {
|
||||
display: flex; /* 使用 Flexbox 布局 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: flex-start; /* 顶部对齐 */
|
||||
flex-wrap: wrap; /* 在小屏幕上换行 */
|
||||
gap: 30px; /* 设置元素之间的间距 */
|
||||
margin-top: 30px; /* 与上方标题的间距 */
|
||||
}
|
||||
|
||||
.update-info {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
max-width: 700px;
|
||||
margin: 30px auto 0;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.update-info h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 15px;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* Contribution Section */
|
||||
.contribution {
|
||||
padding: 80px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.contribution h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--dark-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contribution ol {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.contribution li {
|
||||
margin-bottom: 15px;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
color: white;
|
||||
padding: 50px 0 20px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.license {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.license img {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.license span {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #adb5bd;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: #adb5bd;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 992px) {
|
||||
.hero {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding-right: 0;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin-top: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.qrcodes-wrapper {
|
||||
flex-direction: column; /* 改为垂直排列 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
.qrcode-container {
|
||||
max-width: 80%; /* 调整宽度以适应垂直布局 */
|
||||
}
|
||||
}
|
||||
|
||||
/* FAQ Section Styles */
|
||||
.faq-section {
|
||||
padding: 80px 0;
|
||||
background-color: #fff; /* 或者 var(--light-color) */
|
||||
}
|
||||
|
||||
#faq-container {
|
||||
margin-top: 30px;
|
||||
background-color: #fff; /* 可以给容器加个背景 */
|
||||
padding: 20px 30px; /* 内边距 */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
|
||||
}
|
||||
|
||||
#faq-container h1 { /* Markdown 中的 H1 */
|
||||
font-size: 1.8rem;
|
||||
color: var(--dark-color);
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#faq-container h2 { /* Markdown 中的 H2 */
|
||||
font-size: 1.4rem;
|
||||
color: var(--primary-color);
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#faq-container h3 { /* Markdown 中的 H3 */
|
||||
font-size: 1.2rem;
|
||||
color: var(--dark-color);
|
||||
margin-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#faq-container p {
|
||||
margin-bottom: 15px;
|
||||
color: var(--gray-color);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
#faq-container ul, #faq-container ol {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 15px;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
#faq-container li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#faq-container code {
|
||||
background-color: #e9ecef; /* 代码片段背景色 */
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
color: #c7254e; /* 代码片段文字颜色 */
|
||||
}
|
||||
|
||||
#faq-container pre {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#faq-container pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: var(--dark-color); /* 代码块内文字颜色 */
|
||||
}
|
||||
|
||||
#faq-container a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
#faq-container a:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.dev-plan-section {
|
||||
padding: 80px 0;
|
||||
background-color: var(--light-color); /* Slightly different background */
|
||||
}
|
||||
|
||||
#dev-plan-container {
|
||||
margin-top: 30px;
|
||||
background-color: #fff;
|
||||
padding: 20px 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Apply similar heading/paragraph styles as FAQ if needed */
|
||||
#dev-plan-container h1 {
|
||||
font-size: 1.8rem; color: var(--dark-color); margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid #eee;
|
||||
}
|
||||
#dev-plan-container h2 {
|
||||
font-size: 1.4rem; color: var(--primary-color); margin-top: 30px; margin-bottom: 15px;
|
||||
}
|
||||
#dev-plan-container h3 {
|
||||
font-size: 1.2rem; color: var(--dark-color); margin-top: 25px; margin-bottom: 10px;
|
||||
}
|
||||
#dev-plan-container p {
|
||||
margin-bottom: 15px; color: var(--gray-color); line-height: 1.7;
|
||||
}
|
||||
#dev-plan-container ul, #dev-plan-container ol {
|
||||
margin-left: 20px; margin-bottom: 15px; color: var(--gray-color);
|
||||
}
|
||||
#dev-plan-container li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#dev-plan-container code {
|
||||
background-color: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: monospace; color: #c7254e;
|
||||
}
|
||||
#dev-plan-container pre {
|
||||
background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 5px; padding: 15px; overflow-x: auto; margin-bottom: 15px;
|
||||
}
|
||||
#dev-plan-container pre code {
|
||||
background-color: transparent; padding: 0; border-radius: 0; color: var(--dark-color);
|
||||
}
|
||||
#dev-plan-container a {
|
||||
color: var(--primary-color); text-decoration: underline;
|
||||
}
|
||||
#dev-plan-container a:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
Loading…
Reference in New Issue