Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(about): 添加音乐播放器和移动端悬浮菜单功能

Browse Source 
- 在 about.html 中引入 APlayer 样式与脚本依赖
- 新增音乐模块区域 `.area-music` 并实现黑胶唱片动画效果
- 添加移动端悬浮功能按钮（语言切换、主题切换、音乐控制）
- 扩展 CSS 样式支持音乐模块布局及交互反馈
- 在 JavaScript 中初始化音乐播放器并集成 APlayer
- 实现移动端功能菜单逻辑及其国际化支持
- 更新配置文件添加网易云歌单ID及相关默认设置
- 优化部分原有代码结构与可读性
This commit is contained in:
hehh
2025-11-23 20:18:55 +08:00
parent 40cc772316
commit 6a84d81fee
4 changed files with 336 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
css/about.css
View File

@@ -321,11 +321,12 @@ body {
gap: 24px;
/* PC: 3 Col, 2 Row Main */
grid-template-columns: 320px 1fr 260px;
grid-template-rows: 240px 220px auto;
grid-template-rows: 240px 220px auto auto;
grid-template-areas:
"profile bio stats"
"profile bio mbti"
"tech tech interests";
"tech tech interests"
"music music interests";
}
/* --- Areas --- */
@@ -352,6 +353,7 @@ body {
.area-interests {
grid-area: interests;
}
.area-music { grid-area: music; }
.mobile-social {
display: none;
@@ -1575,4 +1577,21 @@ body {
-webkit-text-fill-color: initial;
}
.social-dock .s-icon { color: var(--text-primary); }
.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
.area-music { padding: 20px; display: flex; flex-direction: column; }
.vinyl-player { position: relative; display: flex; align-items: center; gap: 16px; }
.vinyl-disc { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(#222 0%, #111 30%, #000 60%, #111 100%); box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.2); position: relative; }
.vinyl-disc::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.vinyl-arm { width: 80px; height: 8px; background: #888; border-radius: 8px; transform-origin: left center; transform: rotate(12deg); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.vinyl-info { display: flex; flex-direction: column; gap: 6px; }
.vinyl-title { font-weight: 700; background: var(--gradient-4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vinyl-status { font-size: 0.85rem; color: var(--text-secondary); }
.netease-embed { position: absolute; right: 20px; bottom: 10px; width: 340px; height: 86px; border-radius: 12px; overflow: hidden; }
.spinning { animation: spinDisc 8s linear infinite; }
@keyframes spinDisc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; }
.fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); }
.fab-label { font-size: 12px; }
.fab-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
.fab-item { display: flex; align-items: center; gap: 6px; background: var(--glass-bg); border-radius: 18px; padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); }
.fab-menu.open { display: flex; }