feat: 构建泡泡玛特相关图表

2026-08-23 21:23:41 +08:00
commit 3ae396776d
31 changed files with 3454 additions and 0 deletions
@@ -0,0 +1,101 @@
+:root {
+  --ink: #333;
+  --grey: #8c8c8c;
+  --line: #e8e8e8;
+  --bg: #f5f4f1;
+  --accent: #6b4a2b;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 32px 24px 64px;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+header {
+  max-width: 1180px;
+  margin: 0 auto 28px;
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+header p {
+  margin: 0;
+  color: var(--grey);
+  font-size: 14px;
+}
+
+button {
+  font-family: inherit;
+  font-size: 13px;
+  padding: 6px 14px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--ink);
+  cursor: pointer;
+  transition: border-color .15s, color .15s;
+}
+
+button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+#btn-reload {
+  margin-left: auto;
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+#btn-reload:hover {
+  opacity: .88;
+  color: #fff;
+}
+
+.card {
+  max-width: 1180px;
+  margin: 0 auto 28px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
+  overflow: hidden;
+}
+
+.card-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.card-bar .src {
+  font-size: 12px;
+  color: var(--grey);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.card-bar button { margin-left: auto; }
+
+.chart { width: 100%; }
+
+.chart-error {
+  padding: 40px;
+  color: #c0392b;
+  font-size: 14px;
+  text-align: center;
+}