yunxiafei/my_one_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加快捷导航按钮 🔗

Browse Source 
- 右上角添加思源笔记/Gitea/NocoDB快捷入口
- 悬浮设计，支持暗黑模式
- 移动端自适应布局
This commit is contained in:
root
2026-03-11 22:58:42 +08:00
parent 6a13ac9943
commit 54c05ed026
2 changed files with 139 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
static/css/style.css
View File

@@ -188,6 +188,138 @@ h1 {
50% { opacity: 0.5; }
}
/* 快捷导航栏 */
.quick-nav {
position: fixed;
top: 15px;
right: 80px;
display: flex;
gap: 10px;
z-index: 99;
}
.nav-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: #333;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
[data-theme="dark"] .nav-btn {
background: rgba(40, 40, 60, 0.9);
color: #e0e0e0;
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .nav-btn:hover {
background: rgba(60, 60, 80, 0.95);
}
/* 移动端导航 */
@media (max-width: 600px) {
.quick-nav {
position: absolute;
top: auto;
bottom: -60px;
right: 50%;
transform: translateX(50%);
background: rgba(255, 255, 255, 0.95);
padding: 10px 15px;
border-radius: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .quick-nav {
background: rgba(40, 40, 60, 0.95);
}
.nav-btn {
padding: 6px 10px;
font-size: 12px;
}
}
/* 快捷导航栏 */
.quick-nav {
position: fixed;
top: 15px;
right: 80px;
display: flex;
gap: 10px;
z-index: 99;
}
.nav-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: #333;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
[data-theme="dark"] .nav-btn {
background: rgba(40, 40, 60, 0.9);
color: #e0e0e0;
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .nav-btn:hover {
background: rgba(60, 60, 80, 0.95);
}
/* 移动端导航 */
@media (max-width: 600px) {
.quick-nav {
position: absolute;
top: auto;
bottom: -60px;
right: 50%;
transform: translateX(50%);
background: rgba(255, 255, 255, 0.95);
padding: 10px 15px;
border-radius: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .quick-nav {
background: rgba(40, 40, 60, 0.95);
}
.nav-btn {
padding: 6px 10px;
font-size: 12px;
}
}
/* 主题切换按钮 */
.theme-toggle {
position: absolute;

7
templates/index.html
View File

@@ -7,6 +7,13 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<!-- 快捷导航栏 -->
<div class="quick-nav">
<a href="http://1.14.58.157:6806" target="_blank" class="nav-btn" title="思源笔记">📝 思源</a>
<a href="http://1.14.58.157:3000" target="_blank" class="nav-btn" title="Gitea">📦 Gitea</a>
<a href="http://1.14.58.157:8080" target="_blank" class="nav-btn" title="NocoDB">📊 NocoDB</a>
</div>
<div class="container">
<button class="theme-toggle" aria-label="切换主题">🌙</button>
<div class="avatar">