全部界面叠加绚丽增强层：动态极光背景、卡片旋转描边、按钮扫光、菜单指示条、霓虹滚动条及大屏/登录/监控/AI 页面级动效

2026-10-14 10:55:45 +08:00
parent 3c99299381
commit caffa4ec44
6 changed files with 531 additions and 2 deletions
@@ -352,3 +352,171 @@
  .overview-panels { grid-template-columns: 1fr; }
  .overview-header { flex-direction: column; gap: 10px; align-items: flex-start; }
 }
+
+/* ================= 绚丽增强（概览大屏专属） ================= */
+
+/* 头部横幅：流动的极光底色 + 顶部高光扫过 */
+.overview-header {
+  position: relative;
+  overflow: hidden;
+}
+
+.overview-header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.2), transparent 42%),
+    radial-gradient(circle at 82% 30%, rgba(139, 92, 246, 0.18), transparent 46%);
+  animation: dazzle-ov-header-drift 16s ease-in-out infinite alternate;
+}
+
+@keyframes dazzle-ov-header-drift {
+  from { transform: translate3d(-3%, 0, 0) scale(1); }
+  to   { transform: translate3d(3%, -4%, 0) scale(1.06); }
+}
+
+.overview-header::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 12%;
+  left: 12%;
+  height: 1px;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.85), transparent);
+  background-repeat: no-repeat;
+  background-size: 45% 100%;
+  animation: dazzle-ov-topline 5.5s linear infinite;
+}
+
+@keyframes dazzle-ov-topline {
+  from { background-position: -45% 0; }
+  to   { background-position: 145% 0; }
+}
+
+/* 标题图标呼吸 + 副标题字母微光 */
+.overview-title-icon {
+  animation: dazzle-ov-icon-breathe 3s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-icon-breathe {
+  0%, 100% { text-shadow: 0 0 14px rgba(34, 211, 238, 0.7); transform: scale(1); }
+  50%      { text-shadow: 0 0 26px rgba(34, 211, 238, 1), 0 0 40px rgba(139, 92, 246, 0.5); transform: scale(1.08); }
+}
+
+/* 时钟数字霓虹 */
+.overview-clock {
+  text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
+  animation: dazzle-ov-clock 2.4s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-clock {
+  0%, 100% { text-shadow: 0 0 10px rgba(34, 211, 238, 0.35); }
+  50%      { text-shadow: 0 0 20px rgba(34, 211, 238, 0.7); }
+}
+
+/* KPI 卡片：进入浮起 + 图标光晕脉冲 + 数值渐变发光 */
+.kpi-card {
+  animation: dazzle-ov-card-in 0.5s ease both;
+}
+
+.kpi-card:nth-child(1) { animation-delay: 0.02s; }
+.kpi-card:nth-child(2) { animation-delay: 0.08s; }
+.kpi-card:nth-child(3) { animation-delay: 0.14s; }
+.kpi-card:nth-child(4) { animation-delay: 0.2s; }
+.kpi-card:nth-child(5) { animation-delay: 0.26s; }
+
+@keyframes dazzle-ov-card-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.kpi-icon {
+  position: relative;
+  box-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
+  animation: dazzle-ov-icon-halo 3.2s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-icon-halo {
+  0%, 100% { box-shadow: 0 0 10px rgba(34, 211, 238, 0.1); }
+  50%      { box-shadow: 0 0 24px rgba(34, 211, 238, 0.32); }
+}
+
+.kpi-value {
+  color: #d9f6ff;
+  animation: dazzle-ov-kpi-glow 3.4s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-kpi-glow {
+  0%, 100% { text-shadow: 0 0 10px rgba(34, 211, 238, 0.35); }
+  50%      { text-shadow: 0 0 22px rgba(34, 211, 238, 0.65), 0 0 36px rgba(139, 92, 246, 0.3); }
+}
+
+.kpi-corner {
+  animation: dazzle-ov-corner 3.6s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-corner {
+  0%, 100% { opacity: 0.35; }
+  50%      { opacity: 0.85; }
+}
+
+/* 面板：顶部高光线 + 标题条流光 */
+.ov-panel {
+  position: relative;
+  overflow: hidden;
+}
+
+.ov-panel::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 16%;
+  left: 16%;
+  height: 1px;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.7), transparent);
+}
+
+.panel-title-bar {
+  background: linear-gradient(180deg, #22d3ee, #3b82f6, #8b5cf6);
+  animation: dazzle-ov-titlebar 2.8s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-titlebar {
+  0%, 100% { box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
+  50%      { box-shadow: 0 0 18px rgba(34, 211, 238, 1), 0 0 30px rgba(139, 92, 246, 0.45); }
+}
+
+/* 趋势图与环图：发光滤镜 */
+.trend-chart svg {
+  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.28));
+}
+
+.donut-svg {
+  animation: dazzle-ov-donut-spin 40s linear infinite;
+  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.3));
+}
+
+@keyframes dazzle-ov-donut-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* 最新动态列表：行进入交错 */
+.latest-list li {
+  animation: dazzle-ov-row-in 0.4s ease both;
+}
+
+.latest-list li:nth-child(1) { animation-delay: 0.05s; }
+.latest-list li:nth-child(2) { animation-delay: 0.1s; }
+.latest-list li:nth-child(3) { animation-delay: 0.15s; }
+.latest-list li:nth-child(4) { animation-delay: 0.2s; }
+.latest-list li:nth-child(5) { animation-delay: 0.25s; }
+
+@keyframes dazzle-ov-row-in {
+  from { opacity: 0; transform: translateX(8px); }
+  to   { opacity: 1; transform: translateX(0); }
+}