【NEON-A2O LITE】- Semo 霓虹不止于此，这就是我们奔赴的方向
<style>:root{
--card-hex:#BFEB78;
--card-alpha:0.6;
--icon-hex:#174139;
}
.music-card-neon{width:100%;max-width:420px;margin:10px auto;backdrop-filter:blur(14px);background:var(--card-bg);border-radius:34px;padding:24px;box-sizing:border-box;overflow:hidden;font-family:system-ui,sans-serif}
.music-cover{width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;margin-bottom:18px}
.music-cover img{width:100%;height:100%;object-fit:cover;display:block}
.music-title-wrap{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.music-title{font-size:26px !important;font-weight:700;color:#222;margin:0}
.like-icon{width:26px;height:26px;display:block}
.music-artist{font-size:18px;color:#444;margin:0 0 14px}
.music-lyric-tip{font-size:15px;color:#666;margin:0 0 16px}
.music-progress-box{width:100%;margin-bottom:22px}
.music-time-row{display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px}
.music-progress{width:100%;height:4px;background:#ddd;border-radius:99px;cursor:pointer;position:relative}
.music-progress-bar{height:100%;width:0;background:var(--icon-hex);border-radius:99px}
.music-control{display:flex;align-items:center;justify-content:space-between}
.music-icon-btn{border:0;background:transparent;padding:0;cursor:pointer}
.music-icon-btn img,.music-play-btn img{width:26px;height:26px;display:block;filter:var(--icon-filter)}
.music-play-btn{border:0;background:#fff;width:56px;height:56px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer}
.music-play-btn img{width:24px;height:24px}
.music-audio{display:none}
</style>
<div class="music-card-neon" id="musicCard">
<div class="music-cover"></div>
<div class="music-title-wrap">
<h2 class="music-title">NEON-A2O LITE</h2>
<div class="like-wrap" id="likeWrap">
<img class="like-icon" id="likeIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png">
</div>
</div>
<div class="music-artist">Semo</div>
<div class="music-lyric-tip">Neon and beyond<br> that's what we on and beyond, yeah</div>
<div class="music-progress-box">
<div class="music-time-row"><span id="curTime">00:00</span><span id="totalTime">03:00</span></div>
<div class="music-progress" id="progressWrap"><div class="music-progress-bar" id="progressBar"></div></div>
</div>
<div class="music-control">
<button class="music-icon-btn"><img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730vnammnln61bttn5g.png"></button>
<button class="music-icon-btn"><img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730a4pbp8pnep7ppp47.png"></button>
<button class="music-play-btn" id="playBtn"><img id="playIcon" src="https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png"></button>
<button class="music-icon-btn"><img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730f3yog1tdtdkx40wg.png"></button>
<button class="music-icon-btn"><img src="https://www.qqmcc.net/data/attachment/album/202610/22/155730wr9t66s1lb19mdz4.png"></button>
</div>
<audio class="music-audio" id="audioPlayer">
</div>
<script>
function hex2rgb(h){h=h.replace('#','');return{r:parseInt(h.slice(0,2),16),g:parseInt(h.slice(2,4),16),b:parseInt(h.slice(4,6),16)}}
function hexToFilter(c){c=c.replace('#','');let r=parseInt(c.slice(0,2),16)/255,g=parseInt(c.slice(2,4),16)/255,b=parseInt(c.slice(4,6),16)/255,m=Math.max(r,g,b),n=Math.min(r,g,b),h,s,l;l=(m+n)/2;if(m===n)h=s=0;else{let d=m-n;s=l>.5?d/(2-m-n):d/(m+n);switch(m){case r:h=((g-b)/d+(g<b?6:0))/6;break;case g:h=((b-r)/d+2)/6;break;case b:h=((r-g)/d+4)/6}}h=Math.round(h*360);s=Math.round(s*100);l=Math.round(l*100);return`invert(100%) sepia(100%) saturate(${s}%) hue-rotate(${h}deg) brightness(${l}%) contrast(100%)`}
document.addEventListener('DOMContentLoaded',()=>{
const r=document.documentElement,ch=getComputedStyle(r).getPropertyValue('--card-hex').trim(),ca=parseFloat(getComputedStyle(r).getPropertyValue('--card-alpha').trim()),ih=getComputedStyle(r).getPropertyValue('--icon-hex').trim(),rgb=hex2rgb(ch);
r.style.setProperty('--card-bg',`rgba(${rgb.r},${rgb.g},${rgb.b},${ca})`);
r.style.setProperty('--icon-filter',hexToFilter(ih));
})
// 修复时间格式化（重点改这里，Math.floor取整）
function fmt(s){
let m=Math.floor(s/60);
let sec=Math.floor(s%60);
return String(m).padStart(2,'0')+':'+String(sec).padStart(2,'0');
}
let t=null,p=0,tot=180,run=true,ct=document.getElementById('curTime'),pb=document.getElementById('progressBar'),pw=document.getElementById('progressWrap'),pi=document.getElementById('playIcon'),au=document.getElementById('audioPlayer');
function up(){pb.style.width=(p/tot*100)+'%';ct.innerText=fmt(p)}
function st(){t=setInterval(()=>{p+=0.1;if(p>=tot){p=tot;cl();run=false;pi.src='https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png'}up()},100)}
function cl(){clearInterval(t);t=null}
up();au.play().catch(()=>{});st();
document.getElementById('playBtn').onclick=()=>{
const ps='https://www.qqmcc.net/data/attachment/album/202610/22/155730rm7ldu8jdgd87y0g.png',pa='https://www.qqmcc.net/data/attachment/album/202610/22/155731nb5pk2epp2dmmzc5.png';
run?(au.pause(),cl(),run=false,pi.src=ps):(au.play().catch(()=>{}),run=true,pi.src=pa,st())
}
pw.onclick=e=>{let w=pw.getBoundingClientRect();p=(e.clientX-w.left)/w.width*tot;up()}
const li=document.getElementById('likeIcon'),ho='https://www.qqmcc.net/data/attachment/album/202610/22/160519yh2qmxmyrh2xcqmc.png',hf='https://www.qqmcc.net/data/attachment/album/202610/22/160812nt71pzittbuetpfx.png',lk=document.getElementById('likeWrap');
lk.onclick=()=>li.src=li.src===ho?hf:ho;
</script>
**** Hidden Message ***** 安静聆听，内心慢慢平静下来 偶然点开试听，意外收获惊喜 挖到宝了，加入我的歌单。 安静聆听，内心慢慢平静下来 好听不火系列，期待被更多人看见。 古韵绵长，听着让人内心安宁 激昂的曲调，浑身都觉得畅快 安静聆听，内心慢慢平静下来 楼主审美绝了，又被安利成功