重构: 前端Vue3+Tailwind+Vite构建管线+设置组件拆分

2026-05-27 02:42:25 +08:00
parent f3148bf72f
commit aee7997195
44 changed files with 4309 additions and 1720 deletions
--- a/web-ui/src/overlay/overlay.css
+++ b/web-ui/src/overlay/overlay.css
@@ -0,0 +1,86 @@
+* { margin: 0; padding: 0; }
+html, body {
+  width: 100%; height: 100%;
+  overflow: hidden;
+  background: #000;
+  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+}
+
+:root {
+  --card-bg: rgba(22, 19, 28, 0.56);
+  --card-bg-strong: rgba(24, 20, 30, 0.68);
+  --card-line: rgba(255,255,255,0.10);
+  --card-line-soft: rgba(255,255,255,0.06);
+  --text-main: rgba(255,255,255,0.92);
+  --text-soft: rgba(255,255,255,0.66);
+  --text-faint: rgba(255,255,255,0.42);
+  --accent-warm: #ffd86b;
+  --accent-cool: #6bdcff;
+  --shadow-card: 0 18px 60px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
+  --layout-x: 48px;
+  --layout-top: 38px;
+  --layout-bottom: 72px;
+  --layout-gap: 18px;
+  --layout-col-gap: 24px;
+  --right-panel: 400px;
+  --knowledge-panel: 460px;
+  --time-panel-h: 154px;
+  --zodiac-panel-h: 326px;
+  --photo-panel-h: 360px;
+}
+
+.card {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)), var(--card-bg);
+  backdrop-filter: blur(28px) saturate(1.2);
+  -webkit-backdrop-filter: blur(28px) saturate(1.2);
+  border: 1px solid var(--card-line);
+  border-radius: 8px;
+  padding: 22px 24px;
+  box-shadow: var(--shadow-card);
+}
+.card::before {
+  content: "";
+  position: absolute; inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(90deg, rgba(255,255,255,0.13), transparent 34%),
+    radial-gradient(circle at 12% 0%, rgba(255,216,107,0.13), transparent 38%);
+  opacity: 0.55;
+}
+.card > * { position: relative; }
+
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
+  margin: 18px 0;
+}
+
+@keyframes hourlyGlow {
+  0%   { text-shadow: 0 0 30px rgba(255,255,255,1), 0 0 80px rgba(180,200,255,0.8), 0 0 120px rgba(100,150,255,0.5); color: #fff; }
+  8%   { text-shadow: 0 0 50px rgba(255,255,255,1), 0 0 100px rgba(180,200,255,1), 0 0 160px rgba(100,150,255,0.6); }
+  18%  { text-shadow: 0 0 20px rgba(255,255,255,0.6), 0 0 40px rgba(180,200,255,0.3); }
+  28%  { text-shadow: 0 0 35px rgba(255,255,255,0.85), 0 0 70px rgba(180,200,255,0.6), 0 0 100px rgba(100,150,255,0.35); }
+  38%  { text-shadow: 0 0 15px rgba(255,255,255,0.4), 0 0 30px rgba(180,200,255,0.2); }
+  48%  { text-shadow: 0 0 25px rgba(255,255,255,0.6), 0 0 50px rgba(180,200,255,0.4); }
+  60%  { text-shadow: 0 0 10px rgba(255,255,255,0.25), 0 0 20px rgba(180,200,255,0.12); }
+  75%  { text-shadow: 0 0 15px rgba(255,255,255,0.35), 0 0 30px rgba(180,200,255,0.2); }
+  100% { text-shadow: 0 2px 20px rgba(0,0,0,0.5); color: #fff; }
+}
+
+@media (max-width: 1500px) {
+  :root {
+    --layout-x: 32px;
+    --layout-col-gap: 18px;
+    --right-panel: 360px;
+    --knowledge-panel: 380px;
+    --time-panel-h: 144px;
+    --zodiac-panel-h: 312px;
+    --photo-panel-h: 320px;
+  }
+}