jiameng/DSP-daily
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

应用roasbloom品牌VI: 玫瑰配色+DM Sans/Inter/JetBrains Mono字体+Logo

Browse Source
This commit is contained in:
jiameng
2026-09-11 18:08:04 +08:00
parent 0ae1838399
commit 9e48721e60
1 changed files with 44 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+44 -30
View File
@@ -5,48 +5,62 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSP Daily 日报</title>
<style>
:root{--bg:#f5f6f8;--card:#fff;--line:#e3e6ea;--head:#1f2937;--sub:#6b7280;--accent:#2563eb;}
@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;
}
*{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:1600px;margin:0 auto;padding:22px 18px 60px;}
h1{font-size:20px;margin:0 0 4px;}
.meta{color:var(--sub);font-size:12px;margin-bottom:16px;}
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:16px;}
.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;}
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.tab{padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:13px;}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.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;}
.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;margin-left:6px;}
.scroll{overflow:auto;max-height:640px;border:1px solid var(--line);border-radius:8px;}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;}
th,td{border:1px solid var(--line);padding:6px 9px;text-align:right;white-space:nowrap;}
th{background:var(--head);color:#fff;font-weight:600;text-align:center;position:sticky;top:0;z-index:2;}
.tab{padding:8px 16px;border:1px solid var(--ink-10);border-radius:8px;background:#fff;cursor:pointer;font-size:13px;font-family:var(--font-brand);font-weight:500;color:var(--ink-80);}
.tab.active{background:var(--rose);color:#fff;border-color:var(--rose);}
.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;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;margin-left:6px;}
.scroll{overflow:auto;max-height:640px;border:1px solid var(--ink-10);border-radius:8px;}
table{border-collapse:collapse;width:100%;}
th,td{border:1px solid var(--ink-10);padding:6px 9px;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;z-index:2;font-family:var(--font-brand);}
td.txt,th.txt{text-align:left;}
tbody tr:nth-child(even){background:#fafbfc;}
tbody tr:hover{background:#eff4ff;}
.pos{color:#059669;} .neg{color:#dc2626;}
tbody tr:nth-child(even){background:var(--ink-5);}
tbody tr:hover{background:var(--rose-50);}
.pos{color:var(--success);} .neg{color:var(--danger);}
.hide{display:none;}
.reason-inp{width:260px;border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:12px;}
.sticky-col{position:sticky;left:0;background:#fff;z-index:1;text-align:left;}
tbody tr:nth-child(even) .sticky-col{background:#fafbfc;}
.dod-hi-pos{background:#dcfce7;color:#059669;font-weight:600;}
.dod-hi-neg{background:#fee2e2;color:#dc2626;font-weight:600;}
.sub-note{color:var(--sub);font-size:12px;margin:4px 2px 10px;}
.total-row td{font-weight:700;background:#eef2f7;}
.reason-inp{width:260px;border:1px solid var(--ink-20);border-radius:5px;padding:4px 6px;font-size:12px;font-family:var(--font-body);}
.sticky-col{position:sticky;left:0;background:#fff;z-index:1;text-align:left;font-family:var(--font-body);}
tbody tr:nth-child(even) .sticky-col{background:var(--ink-5);}
.dod-hi-pos{background:var(--rose-50);color:var(--success);font-weight:600;}
.dod-hi-neg{background:var(--rose-100);color:var(--danger);font-weight:600;}
.sub-note{color:var(--ink-60);font-size:12px;margin:4px 2px 10px;}
.total-row td{font-weight:700;background:var(--rose-50);}
.ctrl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.ctrl label{font-size:13px;cursor:pointer;user-select:none;}
.ctrl input[type=text]{border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:12px;min-width:150px;}
th.sortable{cursor:pointer;user-select:none;}
th.sortable:hover{background:#374151;}
th .arw{display:inline-block;width:9px;margin-left:3px;font-size:10px;color:#93c5fd;}
.ctrl label{font-size:13px;cursor:pointer;user-select:none;color:var(--ink-80);}
.ctrl input[type=text],.ctrl select{border:1px solid var(--ink-20);border-radius:6px;padding:5px 8px;font-size:12px;min-width:150px;font-family:var(--font-body);}
th.sortable,th.cd-sort,th.de-sort{cursor:pointer;user-select:none;}
th.sortable:hover,th.cd-sort:hover,th.de-sort:hover{background:var(--rose-700);}
th .arw{display:inline-block;width:9px;margin-left:3px;font-size:10px;color:var(--rose-200);}
th.asc .arw::after{content:"\25B2";} th.desc .arw::after{content:"\25BC";}
tr.acc-sub td{background:#f3f6fb;color:#475569;font-size:12px;}
tr.acc-sub td{background:var(--rose-50);color:var(--ink-80);font-size:12px;}
tr.acc-sub td.txt{padding-left:26px;}
tr.acc-sub:hover td{background:#e8eef7;}
tr.acc-sub:hover td{background:var(--rose-100);}
</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 Daily 日报</h1>
<div class="meta" id="meta">加载中…</div>
<div class="tabs">