💿 播放器改为首页独立大卡片：旋转唱片+嵌入网易云iframe+一目了然
This commit is contained in:
root
parent
8095685a29
commit
c5e1daca30
@ -323,36 +323,12 @@ table.tool-table td:last-child{text-align:right}
|
||||
</div>
|
||||
<div class="tb-right">
|
||||
<span class="tb-tag" onclick="toggleLogin()" id="login-toggle">登录</span>
|
||||
<!-- 光湖唱片播放器 -->
|
||||
<div style="position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px;border-radius:20px;border:1px solid rgba(90,208,224,.08);transition:all .3s" onclick="togglePlayer()" id="vinyl-trigger" onmouseover="this.style.borderColor='rgba(90,208,224,.25)'" onmouseout="this.style.borderColor='rgba(90,208,224,.08)'">
|
||||
<div id="vinyl-disc" style="width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,rgba(90,208,224,.6) 0%,#0b1424 25%,#0b1424 50%,rgba(90,208,224,.2) 100%);border:1px solid rgba(90,208,224,.25);display:flex;align-items:center;justify-content:center;animation:spin 6s linear infinite;flex-shrink:0;box-shadow:0 0 12px rgba(90,208,224,.1)">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:rgba(90,208,224,.5);box-shadow:0 0 8px rgba(90,208,224,.3)"></div>
|
||||
</div>
|
||||
<span style="font-size:12px;color:rgba(90,208,224,.5);letter-spacing:1px" id="vinyl-label">▶ 音乐</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="page">
|
||||
<!-- 光湖唱片播放器 - 展开面板 -->
|
||||
<div id="vinyl-panel" style="display:none;position:fixed;top:72px;right:48px;z-index:49;width:320px;background:rgba(11,20,36,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(90,208,224,.1);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(90,208,224,.04);padding:16px;animation:playerSlide .3s cubic-bezier(.22,1,.36,1);transform-origin:top right">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
|
||||
<div style="width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(90,208,224,.5) 0%,rgba(11,20,36,.3) 30%,rgba(11,20,36,.7) 55%,rgba(90,208,224,.12) 100%);border:1px solid rgba(90,208,224,.15);display:flex;align-items:center;justify-content:center;animation:spin 8s linear infinite">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:rgba(90,208,224,.5);box-shadow:0 0 8px rgba(90,208,224,.3)"></div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-size:13px;color:rgba(90,208,224,.7)">光湖 · 音律</div>
|
||||
<div style="font-size:11px;color:rgba(90,208,224,.35);margin-top:2px">网易云音乐 歌单</div>
|
||||
</div>
|
||||
<div style="width:28px;height:28px;border-radius:50%;border:1px solid rgba(90,208,224,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:rgba(90,208,224,.4);transition:.2s" onclick="event.stopPropagation();closePlayer()">✕</div>
|
||||
</div>
|
||||
<div style="border-radius:10px;overflow:hidden">
|
||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=288 height=80 src="//music.163.com/outchain/player?type=0&id=3778678&auto=1&height=80"></iframe>
|
||||
</div>
|
||||
<div style="margin-top:8px;font-size:11px;color:rgba(90,208,224,.2);text-align:center">点击播放箭头开始放歌</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="hero">
|
||||
@ -367,6 +343,25 @@ table.tool-table td:last-child{text-align:right}
|
||||
<div class="info-chip"><strong>2</strong> 人格体活跃</div>
|
||||
</div>
|
||||
|
||||
<!-- 光湖音律播放器卡片 -->
|
||||
<div class="card breathe-violet" style="padding:0;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(90,208,224,.08);background:rgba(90,208,224,.03)">
|
||||
<div style="width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,rgba(90,208,224,.6) 0%,#0b1424 22%,#0b1424 45%,rgba(90,208,224,.25) 100%);border:1px solid rgba(90,208,224,.3);display:flex;align-items:center;justify-content:center;animation:spin 5s linear infinite;box-shadow:0 0 16px rgba(90,208,224,.15)">
|
||||
<div style="width:12px;height:12px;border-radius:50%;background:rgba(90,208,224,.6);box-shadow:0 0 10px rgba(90,208,224,.4)"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:16px;font-weight:500;color:var(--light)">光湖 · 音律</div>
|
||||
<div style="font-size:13px;color:rgba(90,208,224,.4);margin-top:2px">点击播放按钮开始放歌</div>
|
||||
</div>
|
||||
<div style="margin-left:auto;font-size:20px;color:rgba(90,208,224,.2)">♪</div>
|
||||
</div>
|
||||
<div style="padding:16px 20px 20px">
|
||||
<div style="border-radius:12px;overflow:hidden;background:#000">
|
||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=100 src="//music.163.com/outchain/player?type=0&id=3778678&auto=1&height=100"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard">
|
||||
|
||||
<!-- 人格体 + 登录 -->
|
||||
@ -998,35 +993,7 @@ async function sendMessage() {
|
||||
}
|
||||
})();
|
||||
|
||||
// ===== 光湖唱片 =====
|
||||
let playerOpen = false;
|
||||
function togglePlayer() {
|
||||
playerOpen = !playerOpen;
|
||||
const p = document.getElementById("vinyl-panel");
|
||||
const l = document.getElementById("vinyl-label");
|
||||
const d = document.getElementById("vinyl-disc");
|
||||
if (playerOpen) {
|
||||
p.style.display = "block";
|
||||
l.textContent = "▕音";
|
||||
d.style.borderColor = "rgba(90,208,224,.5)";
|
||||
} else {
|
||||
p.style.display = "none";
|
||||
l.textContent = "音乐";
|
||||
d.style.borderColor = "rgba(90,208,224,.2)";
|
||||
}
|
||||
}
|
||||
function closePlayer() {
|
||||
playerOpen = false;
|
||||
document.getElementById("vinyl-panel").style.display = "none";
|
||||
document.getElementById("vinyl-label").textContent = "音乐";
|
||||
document.getElementById("vinyl-disc").style.borderColor = "rgba(90,208,224,.2)";
|
||||
}
|
||||
// 点击页面其他地方关闭播放器
|
||||
document.addEventListener("click", function(e) {
|
||||
if (playerOpen && !e.target.closest("#vinyl-panel") && !e.target.closest("#vinyl-trigger")) {
|
||||
closePlayer();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user