feat: improve Banban UI and binding diagnostics

2026-09-23 20:19:14 +08:00
parent da3f71a2e3
commit 3fd750989f
34 changed files with 4247 additions and 61 deletions
@@ -0,0 +1,130 @@
+:root {
+  --orange: #ff8c42;
+  --orange-deep: #ff6b35;
+  --orange-soft: #fef3e8;
+  --ink: #1a1a1a;
+  --muted: #666666;
+  --quiet: #999999;
+  --line: #ece9e5;
+  --surface: #ffffff;
+  --canvas: #f5f7fa;
+  --green: #16a34a;
+  --green-soft: #e8f8f0;
+  --blue: #5b8ff9;
+  --blue-soft: #e8f0fe;
+  --red: #be123c;
+  --red-soft: #fff1f2;
+  --purple: #8b5cf6;
+  --purple-soft: #f0e6ff;
+  --yellow: #f59e0b;
+  --yellow-soft: #fff7e8;
+  --shadow: 0 10px 30px rgba(31, 41, 55, 0.08);
+  --shadow-soft: 0 4px 16px rgba(31, 41, 55, 0.06);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: #eceff3;
+  color: var(--ink);
+  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  letter-spacing: 0;
+}
+
+button,
+input {
+  font: inherit;
+  letter-spacing: 0;
+}
+
+.poster {
+  width: 1440px;
+  margin: 0 auto;
+  overflow: hidden;
+  background: #fbfaf8;
+}
+
+.poster-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--orange-deep);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.poster-kicker::before {
+  width: 24px;
+  height: 4px;
+  border-radius: 999px;
+  background: var(--orange);
+  content: "";
+}
+
+.poster-title {
+  margin: 14px 0 8px;
+  font-size: 56px;
+  line-height: 1.12;
+  font-weight: 800;
+}
+
+.poster-subtitle {
+  margin: 0;
+  color: var(--muted);
+  font-size: 22px;
+  line-height: 1.6;
+}
+
+.meta-chip {
+  display: inline-flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 18px;
+  border: 1px solid #ebe7e1;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.86);
+  color: #4b5563;
+  font-size: 16px;
+  font-weight: 650;
+}
+
+.section-eyebrow {
+  color: var(--orange-deep);
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.section-title {
+  margin: 8px 0 4px;
+  font-size: 30px;
+  line-height: 1.25;
+  font-weight: 800;
+}
+
+.section-note {
+  margin: 0;
+  color: var(--muted);
+  font-size: 16px;
+  line-height: 1.55;
+}
+
+.poster-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 34px 56px 40px;
+  border-top: 1px solid #ece7df;
+  color: #7b7b7b;
+  font-size: 14px;
+}
+
+.footer-brand {
+  color: var(--ink);
+  font-weight: 800;
+}