应用roasbloom品牌VI: 玫瑰配色+DM Sans/Inter/JetBrains Mono字体+Logo
This commit is contained in:
+39
-25
@@ -5,48 +5,62 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DSP Routing Daily 报告</title>
|
||||
<style>
|
||||
:root{--bg:#f5f6f8;--card:#fff;--line:#e3e6ea;--head:#1f2937;--sub:#6b7280;--accent:#2563eb;--accent-bg:#eff4ff;}
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
/* roasbloom Brand System v1.0 */
|
||||
:root{
|
||||
--rose:#C4506A;--rose-50:#FDF5F6;--rose-100:#F9E0E5;--rose-200:#F0C2CC;--rose-600:#A83D55;--rose-700:#8C2D43;
|
||||
--ink:#2D1B20;--ink-80:#57484C;--ink-60:#827578;--ink-40:#ADA2A4;--ink-20:#D8D0D2;--ink-10:#EBE7E8;--ink-5:#F5F3F4;
|
||||
--success:#4A9E6B;--warning:#D4914A;--danger:#C4506A;
|
||||
--font-brand:'DM Sans',sans-serif;--font-body:'Inter','PingFang SC','Microsoft YaHei',sans-serif;--font-mono:'JetBrains Mono',monospace;
|
||||
--bg:#F5F3F4;--card:#FFFFFF;--line:#EBE7E8;--head:#4E1222;--sub:#827578;--accent:#C4506A;--accent-bg:#FDF5F6;
|
||||
}
|
||||
*{box-sizing:border-box;}
|
||||
body{margin:0;background:var(--bg);color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;}
|
||||
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:13px;}
|
||||
.wrap{max-width:1500px;margin:0 auto;padding:24px 20px 60px;}
|
||||
h1{font-size:20px;margin:0 0 4px;}
|
||||
.meta{color:var(--sub);font-size:12px;margin-bottom:20px;}
|
||||
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:22px;box-shadow:0 1px 2px rgba(0,0,0,.03);}
|
||||
.card h2{font-size:15px;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
|
||||
.card h2 .tag{font-size:11px;font-weight:normal;color:var(--sub);background:var(--bg);border:1px solid var(--line);padding:1px 8px;border-radius:20px;}
|
||||
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;}
|
||||
th,td{border:1px solid var(--line);padding:7px 10px;text-align:right;white-space:nowrap;}
|
||||
th{background:var(--head);color:#fff;font-weight:600;text-align:center;position:sticky;top:0;cursor:default;}
|
||||
h1{font-family:var(--font-brand);font-size:20px;font-weight:600;margin:0 0 4px;color:var(--ink);}
|
||||
.meta{color:var(--ink-60);font-size:12px;margin-bottom:20px;}
|
||||
.logo{font-family:var(--font-brand);font-weight:700;font-size:22px;letter-spacing:-.5px;display:inline-flex;align-items:center;margin-bottom:2px;}
|
||||
.logo .roas{color:var(--rose);} .logo .bloom{color:var(--ink);}
|
||||
.logo .ring{display:inline-block;width:.6em;height:.6em;border:.18em solid var(--rose);border-radius:50%;margin:0 .02em;position:relative;top:.05em;}
|
||||
.card{background:var(--card);border:1px solid var(--ink-10);border-radius:10px;padding:16px 18px;margin-bottom:22px;box-shadow:0 1px 2px rgba(45,27,32,.04);}
|
||||
.card h2{font-family:var(--font-brand);font-size:15px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--ink);}
|
||||
.card h2 .tag{font-family:var(--font-body);font-size:11px;font-weight:normal;color:var(--ink-60);background:var(--ink-5);border:1px solid var(--ink-10);padding:1px 8px;border-radius:20px;}
|
||||
table{border-collapse:collapse;width:100%;}
|
||||
th,td{border:1px solid var(--ink-10);padding:7px 10px;text-align:right;white-space:nowrap;}
|
||||
td{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
|
||||
td.txt{font-family:var(--font-body);}
|
||||
th{background:var(--head);color:#fff;font-weight:600;text-align:center;position:sticky;top:0;cursor:default;font-family:var(--font-brand);}
|
||||
td:first-child,th:first-child{text-align:center;}
|
||||
.detail-scroll{max-height:620px;overflow:auto;border:1px solid var(--line);border-radius:8px;}
|
||||
.detail-scroll{max-height:620px;overflow:auto;border:1px solid var(--ink-10);border-radius:8px;}
|
||||
.detail-scroll table th{top:0;}
|
||||
tbody tr:nth-child(even){background:#fafbfc;}
|
||||
tbody tr:nth-child(even){background:var(--ink-5);}
|
||||
tbody tr:hover{background:var(--accent-bg);}
|
||||
.txt{text-align:left;}
|
||||
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:14px;}
|
||||
.fld{display:flex;flex-direction:column;gap:4px;}
|
||||
.fld label{font-size:11px;color:var(--sub);}
|
||||
.fld input,.fld select{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:13px;min-width:150px;background:#fff;}
|
||||
.fld label{font-size:11px;color:var(--ink-60);}
|
||||
.fld input,.fld select{border:1px solid var(--ink-20);border-radius:6px;padding:6px 8px;font-size:13px;min-width:150px;background:#fff;font-family:var(--font-body);}
|
||||
.fld input[type=date]{min-width:140px;}
|
||||
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;padding:7px 16px;font-size:13px;cursor:pointer;}
|
||||
.btn.ghost{background:#fff;color:var(--accent);}
|
||||
.count-note{color:var(--sub);font-size:12px;margin:6px 2px 0;}
|
||||
.pos{color:#059669;} .neg{color:#dc2626;}
|
||||
.empty{padding:30px;text-align:center;color:var(--sub);}
|
||||
.sum-metric{color:var(--accent);font-weight:600;}
|
||||
.note-list{margin:0 0 14px;padding:10px 14px 10px 28px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:#4b5563;font-size:12px;line-height:1.9;}
|
||||
.note-list b{color:var(--head);}
|
||||
.total-row td{position:sticky;top:33px;background:#eef2f7;font-weight:700;color:var(--head);border-top:2px solid #cbd5e1;z-index:1;}
|
||||
.btn{border:1px solid var(--rose);background:var(--rose);color:#fff;border-radius:6px;padding:7px 16px;font-size:13px;cursor:pointer;font-family:var(--font-brand);font-weight:500;}
|
||||
.btn.ghost{background:#fff;color:var(--rose);}
|
||||
.count-note{color:var(--ink-60);font-size:12px;margin:6px 2px 0;}
|
||||
.pos{color:var(--success);} .neg{color:var(--danger);}
|
||||
.empty{padding:30px;text-align:center;color:var(--ink-60);}
|
||||
.sum-metric{color:var(--rose);font-weight:600;}
|
||||
.note-list{margin:0 0 14px;padding:10px 14px 10px 28px;background:var(--ink-5);border:1px solid var(--ink-10);border-radius:8px;color:var(--ink-80);font-size:12px;line-height:1.9;}
|
||||
.note-list b{color:var(--ink);}
|
||||
.total-row td{position:sticky;top:33px;background:var(--rose-50);font-weight:700;color:var(--ink);border-top:2px solid var(--rose-200);z-index:1;}
|
||||
.total-row td.txt{text-align:left;}
|
||||
th.sortable,th.fsortable{cursor:pointer;user-select:none;}
|
||||
th.sortable:hover,th.fsortable:hover{background:#374151;}
|
||||
th .arrow{display:inline-block;width:10px;margin-left:3px;font-size:10px;color:#93c5fd;}
|
||||
th.sortable:hover,th.fsortable:hover{background:var(--rose-700);}
|
||||
th .arrow{display:inline-block;width:10px;margin-left:3px;font-size:10px;color:var(--rose-200);}
|
||||
th.sort-asc .arrow::after{content:"\25B2";}
|
||||
th.sort-desc .arrow::after{content:"\25BC";}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="logo"><span class="roas">roas</span><span class="bloom">bl</span><span class="ring"></span><span class="bloom">m</span></div>
|
||||
<h1>DSP Routing Daily 报告</h1>
|
||||
<div class="meta" id="meta">加载中…</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user