fangjie/mediabuy-wh
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: blue/white theme, black text, PingFang SC font

Browse Source
This commit is contained in:
fangjie
2026-08-25 11:05:50 +08:00
parent e0658c89b3
commit dc0a676afb
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6 -6
View File
@@ -6,9 +6,9 @@
<title>武汉自投 · 投手投放花费报告</title> <title>武汉自投 · 投手投放花费报告</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style> <style>
:root{--bg:#0f1117;--card:#1a1d27;--line:#2a2e3a;--txt:#e6e8ee;--sub:#9aa0ad;--accent:#5b8cff;--accent2:#ff9f5b;} :root{--bg:#ffffff;--card:#f4f8ff;--line:#d6e2f5;--txt:#111111;--sub:#5b6472;--accent:#2f6bff;--accent2:#ff9f5b;}
*{box-sizing:border-box} *{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.5} body{margin:0;background:var(--bg);color:var(--txt);font-family:"PingFang SC","PingFang TC","Apple LiGothic","STHeiti","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;line-height:1.5}
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px 60px} .wrap{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
h1{font-size:24px;margin:0 0 4px} h1{font-size:24px;margin:0 0 4px}
.sub{color:var(--sub);font-size:13px;margin-bottom:22px} .sub{color:var(--sub);font-size:13px;margin-bottom:22px}
@@ -22,12 +22,12 @@ table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)} th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--sub);font-weight:500;font-size:12px} th{color:var(--sub);font-weight:500;font-size:12px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pkg{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#cfd3dd} .pkg{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#333a45}
.buyer-name{font-weight:600} .buyer-name{font-weight:600}
details{margin-top:6px} details{margin-top:6px}
summary{cursor:pointer;color:var(--accent);font-size:12px} summary{cursor:pointer;color:var(--accent);font-size:12px}
.foot{color:var(--sub);font-size:12px;margin-top:30px;border-top:1px solid var(--line);padding-top:14px} .foot{color:var(--sub);font-size:12px;margin-top:30px;border-top:1px solid var(--line);padding-top:14px}
.badge{display:inline-block;background:#2a2e3a;color:var(--sub);border-radius:6px;padding:2px 8px;font-size:11px;margin-left:8px} .badge{display:inline-block;background:#e6eefc;color:var(--sub);border-radius:6px;padding:2px 8px;font-size:11px;margin-left:8px}
.chartbox{position:relative;height:300px} .chartbox{position:relative;height:300px}
</style> </style>
</head> </head>
@@ -52,8 +52,8 @@ function render(d){
const cards=[['投手数',buyers.length],['投放花费合计',fmt(d.grand_total)],['覆盖 Adpingid 数',d.week34_id_count],['花费最高投手',buyers[0].name]]; const cards=[['投手数',buyers.length],['投放花费合计',fmt(d.grand_total)],['覆盖 Adpingid 数',d.week34_id_count],['花费最高投手',buyers[0].name]];
document.getElementById('cards').innerHTML=cards.map(c=>'<div class="card"><div class="k">'+c[0]+'</div><div class="v">'+c[1]+'</div></div>').join(''); document.getElementById('cards').innerHTML=cards.map(c=>'<div class="card"><div class="k">'+c[0]+'</div><div class="v">'+c[1]+'</div></div>').join('');
const palette=['#5b8cff','#ff9f5b','#4dd6a8','#c78bff','#ff6b81','#f5c451']; const palette=['#5b8cff','#ff9f5b','#4dd6a8','#c78bff','#ff6b81','#f5c451'];
new Chart(document.getElementById('spendChart'),{type:'bar',data:{labels:buyers.map(b=>b.name),datasets:[{label:'投放花费',data:buyers.map(b=>b.total),backgroundColor:buyers.map((b,i)=>palette[i%palette.length])}]},options:{indexAxis:'y',plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#9aa0ad'},grid:{color:'#2a2e3a'}},y:{ticks:{color:'#e6e8ee'},grid:{display:false}}}}}); new Chart(document.getElementById('spendChart'),{type:'bar',data:{labels:buyers.map(b=>b.name),datasets:[{label:'投放花费',data:buyers.map(b=>b.total),backgroundColor:buyers.map((b,i)=>palette[i%palette.length])}]},options:{indexAxis:'y',plugins:{legend:{display:false}},scales:{x:{ticks:{color:'#5b6472'},grid:{color:'#d6e2f5'}},y:{ticks:{color:'#111111'},grid:{display:false}}}}});
new Chart(document.getElementById('pkgChart'),{type:'bar',data:{labels:buyers.map(b=>b.name),datasets:[{label:'主要Package花费',data:buyers.map(b=>b.pkgs[0].spend),backgroundColor:'#4dd6a8'}]},options:{plugins:{legend:{display:false},tooltip:{callbacks:{afterLabel:(ctx)=>buyers[ctx.dataIndex].pkgs[0].pkg}}},scales:{x:{ticks:{color:'#e6e8ee'},grid:{display:false}},y:{ticks:{color:'#9aa0ad'},grid:{color:'#2a2e3a'}}}}}); new Chart(document.getElementById('pkgChart'),{type:'bar',data:{labels:buyers.map(b=>b.name),datasets:[{label:'主要Package花费',data:buyers.map(b=>b.pkgs[0].spend),backgroundColor:'#4dd6a8'}]},options:{plugins:{legend:{display:false},tooltip:{callbacks:{afterLabel:(ctx)=>buyers[ctx.dataIndex].pkgs[0].pkg}}},scales:{x:{ticks:{color:'#111111'},grid:{display:false}},y:{ticks:{color:'#5b6472'},grid:{color:'#d6e2f5'}}}}});
document.getElementById('tables').innerHTML=buyers.map(b=>{ document.getElementById('tables').innerHTML=buyers.map(b=>{
const rows=b.pkgs.map(p=>'<tr><td class="pkg">'+p.pkg+'</td><td class="num">'+fmt(p.spend)+'</td></tr>').join(''); const rows=b.pkgs.map(p=>'<tr><td class="pkg">'+p.pkg+'</td><td class="num">'+fmt(p.spend)+'</td></tr>').join('');
return '<div style="margin-bottom:18px"><div class="buyer-name">'+b.name+'　<span style="color:var(--sub);font-weight:400">合计 '+fmt(b.total)+'　·　主要订单 '+b.pkgs[0].pkg+'</span></div><details><summary>展开 '+b.pkgs.length+' 个 Package 明细</summary><table><thead><tr><th>Package</th><th class="num">花费</th></tr></thead><tbody>'+rows+'</tbody></table></details></div>'; return '<div style="margin-bottom:18px"><div class="buyer-name">'+b.name+'　<span style="color:var(--sub);font-weight:400">合计 '+fmt(b.total)+'　·　主要订单 '+b.pkgs[0].pkg+'</span></div><details><summary>展开 '+b.pkgs.length+' 个 Package 明细</summary><table><thead><tr><th>Package</th><th class="num">花费</th></tr></thead><tbody>'+rows+'</tbody></table></details></div>';