r113/music.html · 约 3099 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
6<title>音乐娱乐用户中心</title>
7<link rel="icon" href="data:,">
8<link rel="stylesheet" href="style.css">
9</head>
10<body data-page="music" style="--brand:#e60026;--brand-d:#c4001f">
11<header class="uc-hero music" style="--brand:#e60026;--brand-d:#c4001f"><div class="avatar" style="width:60px;height:60px;background:rgba(255,255,255,.3);font-size:30px">🎧</div><div class="uc-name">我的音乐</div><div class="ms-row"><div class="ms"><div class="ms-v">听歌</div><div class="ms-l">1,286</div></div><div class="ms"><div class="ms-v">时长</div><div class="ms-l">342</div></div><div class="ms"><div class="ms-v">等级</div><div class="ms-l">Lv.12</div></div></div></header><main class="uc-wrap"><div class="card"><div class="card-h">听歌排行</div><div class="rk"><span class="rk-no">1</span><div class="rk-m"><div class="rk-s">晴天</div><div class="rk-a">周杰伦</div></div><span class="rk-n" data-toast="播放 晴天">▶ 128</span></div><div class="rk"><span class="rk-no">2</span><div class="rk-m"><div class="rk-s">起风了</div><div class="rk-a">买辣椒也用券</div></div><span class="rk-n" data-toast="播放 起风了">▶ 96</span></div><div class="rk"><span class="rk-no">3</span><div class="rk-m"><div class="rk-s">夜曲</div><div class="rk-a">周杰伦</div></div><span class="rk-n" data-toast="播放 夜曲">▶ 87</span></div><div class="rk"><span class="rk-no">4</span><div class="rk-m"><div class="rk-s">孤勇者</div><div class="rk-a">陈奕迅</div></div><span class="rk-n" data-toast="播放 孤勇者">▶ 64</span></div></div><div class="card"><div class="card-h">我的歌单</div><div class="pl"><div class="pl-ic">🎵</div><div class="pl-m"><div class="pl-n">我喜欢的音乐</div><div class="pl-c">328 首</div></div></div><div class="pl"><div class="pl-ic">🎵</div><div class="pl-m"><div class="pl-n">深夜 emo</div><div class="pl-c">76 首</div></div></div><div class="pl"><div class="pl-ic">🎵</div><div class="pl-m"><div class="pl-n">通勤路上</div><div class="pl-c">140 首</div></div></div><div class="pl"><div class="pl-ic">🎵</div><div class="pl-m"><div class="pl-n">经典老歌</div><div class="pl-c">210 首</div></div></div></div><div class="card"><div class="card-h">最近</div><div class="rc-row"><div class="rc">🎧 最近播放</div><div class="rc">🔁 循环播放</div><div class="rc">📥 已下载</div><div class="rc">📡 播客</div></div></div></main><nav class="uctab"><a class="ut" data-toast="演示页面，仅展示 UI"><span class="ut-ic">🔍</span><span class="ut-tx">发现</span></a><a class="ut on" data-toast="演示页面，仅展示 UI"><span class="ut-ic">👤</span><span class="ut-tx">我的</span></a></nav>
12
13<div class="mask" id="mask"></div>
14<div class="toast" id="toast"></div>
15<script src="data/fallback.js"></script>
16<script src="app.js"></script>
17<script></script>
18</body>
19</html>