Files
SMANAGE/TempLate/Document/index.html
T
2026-06-16 11:55:14 +08:00

659 lines
39 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平滑阅读</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<link href="https://cdn.gvsds.com/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="print" onload="this.media='all'">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
neutral: {
100: '#F9FAFB',
200: '#F3F4F6',
300: '#E5E7EB',
400: '#D1D5DB',
500: '#9CA3AF',
600: '#6B7280',
700: '#4B5563',
800: '#374151',
900: '#1F2937',
}
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
serif: ['Merriweather', 'Georgia', 'serif'],
},
boxShadow: {
'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
}
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-balance {
text-wrap: balance;
}
.reading-mode {
@apply bg-amber-50 text-neutral-800;
}
.reading-mode .article-card {
@apply bg-white shadow-lg;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.transition-all-300 {
transition: all 300ms ease-in-out;
}
}
</style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-800 transition-all duration-300">
<!-- 导航栏 -->
<header id="navbar" class="fixed top-0 left-0 w-full bg-white/90 backdrop-blur-md shadow-sm z-50 transition-all duration-300">
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fa fa-book text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-primary">doc<span class="text-neutral-800">.gvsds</span><span class="text-primary">.com</span></h1>
</div>
<!-- 桌面端导航 -->
<nav class="hidden md:flex items-center space-x-8">
<!--a href="#" class="font-medium text-primary border-b-2 border-primary pb-1">首页</a>
<a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors">分类</a>
<a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors">收藏</a>
<a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors">历史</a>
<a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors">关于</a-->
</nav>
<!-- 搜索栏 --
<div class="hidden md:flex items-center relative">
<input type="text" placeholder="搜索文档..." class="w-64 py-2 pl-10 pr-4 rounded-full border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
<i class="fa fa-search absolute left-4 text-neutral-400"></i>
</div>
<-- 用户菜单 --
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="p-2 rounded-full hover:bg-neutral-200 transition-colors">
<i class="fa fa-moon-o text-neutral-700"></i>
</button>
<button id="reading-mode" class="p-2 rounded-full hover:bg-neutral-200 transition-colors">
<i class="fa fa-eye text-neutral-700"></i>
</button>
<button id="search-toggle" class="md:hidden p-2 rounded-full hover:bg-neutral-200 transition-colors">
<i class="fa fa-search text-neutral-700"></i>
</button>
<button id="menu-toggle" class="md:hidden p-2 rounded-full hover:bg-neutral-200 transition-colors">
<i class="fa fa-bars text-neutral-700"></i>
</button>
<a href="#" class="hidden md:block">
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white shadow-sm">
</a>
</div-->
</div>
<!-- 移动端搜索框 -->
<div id="mobile-search" class="hidden px-4 pb-3">
<!--div class="relative">
<input type="text" placeholder="搜索文档..." class="w-full py-2 pl-10 pr-4 rounded-full border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
<i class="fa fa-search absolute left-4 top-3 text-neutral-400"></i>
</div-->
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="hidden px-4 pb-4 md:hidden">
<!--nav class="flex flex-col space-y-3">
<a href="#" class="font-medium text-primary py-2">首页</a>
<a href="#" class="font-medium text-neutral-600 py-2 hover:text-primary transition-colors">分类</a>
<a href="#" class="font-medium text-neutral-600 py-2 hover:text-primary transition-colors">收藏</a>
<a href="#" class="font-medium text-neutral-600 py-2 hover:text-primary transition-colors">历史</a>
<a href="#" class="font-medium text-neutral-600 py-2 hover:text-primary transition-colors">关于</a>
<a href="#" class="flex items-center space-x-2 font-medium text-neutral-600 py-2 hover:text-primary transition-colors">
<img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white shadow-sm">
<span>登录/注册</span>
</a>
</nav-->
</div>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-16">
<!-- 欢迎横幅 -->
<section class="mb-12 bg-gradient-to-r from-primary/90 to-primary rounded-2xl overflow-hidden shadow-lg">
<div class="flex flex-col md:flex-row items-center">
<div class="p-8 md:p-12 text-white">
<h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold mb-4">发现知识的乐趣</h2>
<p class="text-white/90 text-lg mb-6 max-w-xl">doc.gvsds.com 提供高质量的技术文档、教程和资源,帮助你平滑阅读和学习。</p>
<p class="text-white/90 text-lg mb-6 max-w-xl">用户可以在 manage.gvsds.com 自由上传文档,因此,请识别链接来源并遵守相关法律法规。同时我们也会做好审核工作</p>
<div class="flex flex-wrap gap-4">
<a href="https://doc.gvsds.com/42be05d96dc33dd781930925fba827c7" class="px-6 py-3 bg-white text-primary font-medium rounded-full hover:bg-neutral-100 transition-colors shadow-md hover:shadow-lg transform hover:-translate-y-0.5 duration-300" target="_blank">
阅读示例 (API 文档)
</a>
</div>
</div>
<div class="hidden md:block w-1/2 h-full ml-auto">
<img src="https://picsum.photos/id/1/600/400" alt="阅读场景" class="w-full h-full object-cover">
</div>
</div>
</section>
<!-- 分类导航 -->
<section class="mb-12">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold">探索分类</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a class="category-card bg-white rounded-xl p-5 shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1 flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-3">
<i class="fa fa-code text-blue-500 text-xl"></i>
</div>
<h3 class="font-medium">编程开发</h3>
</a>
<a class="category-card bg-white rounded-xl p-5 shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1 flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-3">
<i class="fa fa-database text-green-500 text-xl"></i>
</div>
<h3 class="font-medium">数据库</h3>
</a>
<a class="category-card bg-white rounded-xl p-5 shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1 flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-3">
<i class="fa fa-mobile text-purple-500 text-xl"></i>
</div>
<h3 class="font-medium">移动开发</h3>
</a>
<a class="category-card bg-white rounded-xl p-5 shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1 flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mb-3">
<i class="fa fa-cloud text-orange-500 text-xl"></i>
</div>
<h3 class="font-medium">云计算</h3>
</a>
<a class="category-card bg-white rounded-xl p-5 shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1 flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-3">
<i class="fa fa-robot text-red-500 text-xl"></i>
</div>
<h3 class="font-medium">人工智能</h3>
</a>
<a class="category-card bg-white rounded-xl p-5 shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1 flex flex-col items-center text-center">
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-3">
<i class="fa fa-server text-yellow-500 text-xl"></i>
</div>
<h3 class="font-medium">运维部署</h3>
</a>
</div>
</section>
<!-- 精选文档 -->
<section class="mb-12">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold">精选文档</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 文章卡片 1 -->
<article class="article-card bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/id/0/600/400" alt="Python高级编程技巧" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
<div class="absolute top-3 left-3">
<span class="bg-primary text-white text-xs font-medium px-2.5 py-0.5 rounded-full">编程开发</span>
</div>
</div>
<div class="p-5">
<div class="flex items-center text-sm text-neutral-500 mb-3">
<span>2025-06-15</span>
<span class="mx-2">•</span>
<span>10 分钟阅读</span>
</div>
<h3 class="text-xl font-bold mb-2 hover:text-primary transition-colors">Python高级编程技巧与最佳实践</h3>
<p class="text-neutral-600 mb-4 line-clamp-3">探索Python高级编程技巧,包括装饰器、生成器、元类和异步编程。了解如何编写更简洁、高效和可维护的Python代码...</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/id/1001/30/30" alt="作者头像" class="w-7 h-7 rounded-full">
<span class="ml-2 text-sm font-medium">张教授</span>
</div>
<div class="flex items-center space-x-3 text-neutral-500">
<button class="hover:text-primary transition-colors">
<i class="fa fa-bookmark-o"></i>
</button>
<button class="hover:text-primary transition-colors">
<i class="fa fa-share-alt"></i>
</button>
</div>
</div>
</div>
</article>
<!-- 文章卡片 2 -->
<article class="article-card bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/id/180/600/400" alt="数据库性能优化" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
<div class="absolute top-3 left-3">
<span class="bg-green-500 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">数据库</span>
</div>
</div>
<div class="p-5">
<div class="flex items-center text-sm text-neutral-500 mb-3">
<span>2025-06-10</span>
<span class="mx-2">•</span>
<span>15 分钟阅读</span>
</div>
<h3 class="text-xl font-bold mb-2 hover:text-primary transition-colors">MySQL数据库性能优化实战指南</h3>
<p class="text-neutral-600 mb-4 line-clamp-3">深入了解MySQL数据库性能优化的核心原则和实践方法。从查询优化、索引设计到配置调优,全面提升数据库性能...</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/id/1002/30/30" alt="作者头像" class="w-7 h-7 rounded-full">
<span class="ml-2 text-sm font-medium">李工程师</span>
</div>
<div class="flex items-center space-x-3 text-neutral-500">
<button class="hover:text-primary transition-colors">
<i class="fa fa-bookmark-o"></i>
</button>
<button class="hover:text-primary transition-colors">
<i class="fa fa-share-alt"></i>
</button>
</div>
</div>
</div>
</article>
<!-- 文章卡片 3 -->
<article class="article-card bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-all-300 hover:-translate-y-1">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/id/160/600/400" alt="前端框架对比" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
<div class="absolute top-3 left-3">
<span class="bg-purple-500 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">前端开发</span>
</div>
</div>
<div class="p-5">
<div class="flex items-center text-sm text-neutral-500 mb-3">
<span>2025-06-05</span>
<span class="mx-2">•</span>
<span>20 分钟阅读</span>
</div>
<h3 class="text-xl font-bold mb-2 hover:text-primary transition-colors">2025年前端框架全面对比:React、Vue、Angular</h3>
<p class="text-neutral-600 mb-4 line-clamp-3">详细对比三大主流前端框架的优缺点、适用场景和性能表现。从生态系统、学习曲线到实际项目应用,助你做出最佳选择...</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/id/1003/30/30" alt="作者头像" class="w-7 h-7 rounded-full">
<span class="ml-2 text-sm font-medium">王架构师</span>
</div>
<div class="flex items-center space-x-3 text-neutral-500">
<button class="hover:text-primary transition-colors">
<i class="fa fa-bookmark-o"></i>
</button>
<button class="hover:text-primary transition-colors">
<i class="fa fa-share-alt"></i>
</button>
</div>
</div>
</div>
</article>
</div>
</section>
<!-- 平滑阅读体验展示 -->
<section class="mb-12 bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="flex flex-col md:flex-row">
<div class="p-8 md:p-12 md:w-1/2 flex flex-col justify-center">
<h2 class="text-2xl md:text-3xl font-bold mb-4">享受平滑阅读体验</h2>
<p class="text-neutral-600 mb-6">我们专注于打造舒适的阅读环境,让你可以更专注于内容本身。支持多种阅读模式和自定义选项,满足你的个性化需求。</p>
<div class="space-y-4 mb-8">
<div class="flex items-start">
<div class="mt-1 mr-4 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
<i class="fa fa-check text-primary"></i>
</div>
<div>
<h3 class="font-medium text-lg mb-1">护眼模式</h3>
<p class="text-neutral-600">多种背景色和字体设置,减轻眼睛疲劳,长时间阅读也舒适。</p>
</div>
</div>
<div class="flex items-start">
<div class="mt-1 mr-4 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
<i class="fa fa-check text-primary"></i>
</div>
<div>
<h3 class="font-medium text-lg mb-1">智能排版</h3>
<p class="text-neutral-600">自动优化文章排版,段落间距适中,字体大小合适,提升阅读体验。</p>
</div>
</div>
<div class="flex items-start">
<div class="mt-1 mr-4 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
<i class="fa fa-check text-primary"></i>
</div>
<div>
<h3 class="font-medium text-lg mb-1">Markdown 阅读</h3>
<p class="text-neutral-600">支持 Markdown 格式文档,实现流程图、公式、代码的查看。</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2 bg-neutral-100 p-6 flex items-center justify-center">
<div class="relative w-full max-w-md">
<div class="absolute -top-4 -right-4 w-20 h-20 bg-secondary/20 rounded-full"></div>
<div class="absolute -bottom-8 -left-8 w-32 h-32 bg-primary/10 rounded-full"></div>
<div class="relative bg-white rounded-xl shadow-lg overflow-hidden z-10">
<div class="h-12 bg-neutral-200 flex items-center px-4">
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-400"></div>
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
<div class="w-3 h-3 rounded-full bg-green-400"></div>
</div>
<div class="ml-4 text-sm text-neutral-600">Python装饰器详解.md</div>
</div>
<div class="p-6 h-96 overflow-y-auto scrollbar-hide">
<h1 class="text-2xl font-bold mb-4">Python装饰器详解</h1>
<p class="mb-4 text-neutral-700">装饰器是Python中一种强大而灵活的工具,用于修改或扩展函数或类的行为。它们允许你在不修改原始代码的情况下,增加额外的功能。</p>
<h2 class="text-xl font-bold mt-6 mb-3">什么是装饰器?</h2>
<p class="mb-4 text-neutral-700">装饰器本质上是一个函数,它接受另一个函数作为参数,并返回一个新的函数。这个新的函数通常会包含原始函数的功能,同时增加一些额外的功能。</p>
<div class="bg-neutral-100 p-4 rounded-lg my-4">
<pre class="text-sm text-neutral-800 font-mono">def my_decorator(func):
def wrapper():
print("在函数执行前做一些事情")
func()
print("在函数执行后做一些事情")
return wrapper
@my_decorator
def say_hello():
print("Hello, World!")</pre>
</div>
<p class="mb-4 text-neutral-700">上面的代码定义了一个装饰器`my_decorator`,它会在调用被装饰的函数前后打印一些信息。使用`@my_decorator`语法糖可以很方便地应用装饰器。</p>
<h2 class="text-xl font-bold mt-6 mb-3">装饰器的应用场景</h2>
<ul class="list-disc pl-5 mb-4 space-y-2 text-neutral-700">
<li>日志记录</li>
<li>性能测试</li>
<li>权限验证</li>
<li>缓存</li>
<li>事务处理</li>
</ul>
<p class="text-neutral-700">装饰器是Python中一种非常强大的元编程技术,可以帮助你写出更加简洁、优雅和可维护的代码。</p>
</div>
<div class="bg-neutral-200 h-10 flex items-center justify-between px-4">
<div class="flex items-center space-x-3">
<button class="text-neutral-600 hover:text-primary transition-colors">
<i class="fa fa-font"></i>
</button>
<button class="text-neutral-600 hover:text-primary transition-colors">
<i class="fa fa-text-height"></i>
</button>
<button class="text-neutral-600 hover:text-primary transition-colors">
<i class="fa fa-paint-brush"></i>
</button>
</div>
<div class="flex items-center space-x-3">
<button class="text-neutral-600 hover:text-primary transition-colors">
<i class="fa fa-chevron-left"></i>
</button>
<span class="text-sm text-neutral-600">(1/1) FULL</span>
<button class="text-neutral-600 hover:text-primary transition-colors">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 热门标签 --
<section class="mb-12">
<h2 class="text-2xl font-bold mb-6">热门标签</h2>
<div class="flex flex-wrap gap-3">
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">Python</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">JavaScript</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">React</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">Vue</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">机器学习</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">数据结构</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">算法</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">Node.js</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">微服务</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">Docker</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">Kubernetes</a>
<a href="#" class="px-4 py-2 bg-neutral-200 hover:bg-primary hover:text-white rounded-full transition-colors text-sm font-medium">TypeScript</a>
</div>
</section>
<-- 订阅区域 --
<section class="bg-gradient-to-r from-primary/90 to-primary rounded-2xl p-8 md:p-12 shadow-lg">
<div class="max-w-2xl mx-auto text-center">
<h2 class="text-2xl md:text-3xl font-bold text-white mb-4">订阅我们的更新</h2>
<p class="text-white/90 mb-8">获取最新的技术文章、教程和行业动态,直接发送到你的邮箱。</p>
<form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
<input type="email" placeholder="输入你的邮箱地址" class="flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-white/30">
<button type="submit" class="bg-white text-primary font-medium px-6 py-3 rounded-lg hover:bg-neutral-100 transition-colors shadow-md hover:shadow-lg transform hover:-translate-y-0.5 duration-300">
订阅
</button>
</form>
<p class="text-white/70 text-sm mt-4">我们尊重你的隐私,绝不会向第三方分享你的邮箱地址。</p>
</div>
</section-->
</main>
<!-- 页脚 -->
<footer class="bg-neutral-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fa fa-book text-primary text-2xl"></i>
<h3 class="text-xl font-bold">doc<span class="text-white">.gvsds</span><span class="text-primary">.com</span></h3>
</div>
<p class="text-neutral-400 mb-4">提供高质量的技术文档和学习资源,帮助开发者平滑阅读和成长。</p>
</div>
<!--div>
<h4 class="text-lg font-medium mb-4">快速链接</h4>
<ul class="space-y-2">
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">首页</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">分类</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">最新文章</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">热门标签</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">关于我们</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-medium mb-4">支持</h4>
<ul class="space-y-2">
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">帮助中心</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">联系我们</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">常见问题</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">隐私政策</a></li>
<li><a href="#" class="text-neutral-400 hover:text-primary transition-colors">使用条款</a></li>
</ul>
</div-->
<div>
<h4 class="text-lg font-medium mb-4">联系我们</h4>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
<span class="text-neutral-400">天津市武清区</span>
</li>
<li class="flex items-center">
<i class="fa fa-envelope text-primary mr-3"></i>
<a href="mailto:contact@doc.gvsds.com" class="text-neutral-400 hover:text-primary transition-colors">support@gvsds.com</a>
</li>
<li class="flex items-center">
<i class="fa fa-phone text-primary mr-3"></i>
<span class="text-neutral-400">+86 182 2215 2539</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-neutral-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-neutral-500 text-sm">© 2025 银河锋锐软件开发工作室. 保留所有权利。</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="https://doc.gvsds.com/fc084ab20a283208adb19033ca4de173" class="text-neutral-500 hover:text-primary text-sm transition-colors">隐私政策</a>
<a href="https://doc.gvsds.com/1f07d3b8cec43a2ab9892a15b150bdd6" class="text-neutral-500 hover:text-primary text-sm transition-colors">服务条款</a>
</div>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 transform hover:-translate-y-1">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
const backToTopBtn = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
navbar.classList.add('py-2', 'shadow-md');
navbar.classList.remove('py-3', 'shadow-sm');
backToTopBtn.classList.remove('opacity-0', 'invisible');
backToTopBtn.classList.add('opacity-100', 'visible');
} else {
navbar.classList.add('py-3', 'shadow-sm');
navbar.classList.remove('py-2', 'shadow-md');
backToTopBtn.classList.add('opacity-0', 'invisible');
backToTopBtn.classList.remove('opacity-100', 'visible');
}
});
// 返回顶部功能
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 移动端菜单切换
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// 移动端搜索框切换
const searchToggle = document.getElementById('search-toggle');
const mobileSearch = document.getElementById('mobile-search');
searchToggle.addEventListener('click', function() {
mobileSearch.classList.toggle('hidden');
});
// 主题切换
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
themeToggle.addEventListener('click', function() {
body.classList.toggle('bg-neutral-900');
body.classList.toggle('text-white');
const isDark = body.classList.contains('bg-neutral-900');
themeToggle.innerHTML = isDark ?
'<i class="fa fa-sun-o text-yellow-400"></i>' :
'<i class="fa fa-moon-o text-neutral-700"></i>';
// 更新文章卡片样式
const articleCards = document.querySelectorAll('.article-card');
articleCards.forEach(card => {
if (isDark) {
card.classList.remove('bg-white');
card.classList.add('bg-neutral-800');
} else {
card.classList.add('bg-white');
card.classList.remove('bg-neutral-800');
}
});
});
// 阅读模式切换
const readingModeBtn = document.getElementById('reading-mode');
readingModeBtn.addEventListener('click', function() {
body.classList.toggle('reading-mode');
});
// 文章轮播
const prevArticleBtn = document.getElementById('prev-article');
const nextArticleBtn = document.getElementById('next-article');
// 模拟文章轮播功能
let currentArticleIndex = 0;
const totalArticles = 3; // 假设有3篇文章
prevArticleBtn.addEventListener('click', function() {
currentArticleIndex = (currentArticleIndex - 1 + totalArticles) % totalArticles;
updateArticleDisplay();
});
nextArticleBtn.addEventListener('click', function() {
currentArticleIndex = (currentArticleIndex + 1) % totalArticles;
updateArticleDisplay();
});
function updateArticleDisplay() {
// 这里可以实现文章轮播的实际逻辑
console.log(`切换到文章索引: ${currentArticleIndex}`);
}
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>