From 24d645b77c253d230754769192b547040da4326b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=85=BE=E8=AE=AFWorkBuddy?= Date: Fri, 7 Aug 2026 01:03:05 +0800 Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96=EF=BC=9A?= =?UTF-8?q?=E5=AF=B9=E9=BD=90=E5=8F=82=E8=80=83=E5=9B=BE=E8=A7=86=E8=A7=89?= =?UTF-8?q?=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 统计卡图标改为圆形光盘并加发光环（危险/警告/成功语义用边框色强调） - 新增 3D 卡片栈视觉：总账端「重点公司」、公司端「账户覆盖」以透视扇形呈现，高亮当前需关注项 - 新增覆盖连续性时间轴（横向 12 月轴 + 账户覆盖条 + 今日指示） - 统计卡与玻璃面板加入顶部内高光，提升层次与深度 - 补齐 1180/900/720/460 断点的卡片栈与时间轴响应式 Refs BAI-28 --- web/admin.html | 29 +++++++++++++ web/company.html | 11 +++++ web/styles.css | 105 +++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 142 insertions(+), 3 deletions(-) diff --git a/web/admin.html b/web/admin.html index 5ee0570..312e107 100644 --- a/web/admin.html +++ b/web/admin.html @@ -81,6 +81,20 @@
2 家公司存在起算缺口最早缺口始于 2026.01.01
+
+

重点公司

集团账户状态总览 · 按风险等级排列，荧光绿为公司端第一视角

+
+
+
05C
C公司全部账户连续
2 个账户01.01—07.31
连续 7 个月正常
+
04E
E公司科目待确认
88.00 万元07.09 · 应收与其他应收
等待公司确认中
+
01A
A公司工商银行账户断档
缺口 21 天07.01—07.21
影响 7 月结账高
+
02B
B公司单边流水待匹配
312.00 万元6 笔 · B↔D
今日新增中
+
03F
F公司起算区间待校准
缺口 16 天01.01—01.16
待公司确认中
+
06D
D公司全部账户连续
1 个账户01.01—07.31
连续 7 个月正常
+
+
+
+

优先处理

影响当前账期可靠性的事项

@@ -103,6 +117,21 @@
+
+
覆盖连续性2026.01.01 — 2026.07.3111 条账户 · 1 个断档 · 今日 07.24
+
+
1月2月3月4月5月6月7月8月9月10月11月12月
+
+
A公司 · 工行 9481
+
A公司 · 中信 5316
+
A公司 · 建行 0845
+
A公司 · 农行 3650
+
B公司 · 工行 1234
+
F公司 · 农行 3650
+
+
+
+

公司借贷目录

统计区间 2026.01.01—2026.07.31 · 单位：万元

公司借方合计贷方合计期末方向待审核
diff --git a/web/company.html b/web/company.html index 27d4918..f693184 100644 --- a/web/company.html +++ b/web/company.html @@ -74,6 +74,17 @@
7 月数据尚不能结账

工商银行账户缺少 07.01—07.21 流水，补齐后系统将重新计算匹配结果。

+
+

账户覆盖

A公司 · 4 个银行账户 · 荧光绿为当前连续账户

3 / 4 连续
+
+
+
04中
中信银行 · 5316基本户
01.01—07.317 个月连续
最近导入 09:42连续
+
03农
农业银行 · 3650一般户
01.01—07.317 个月连续
最近导入 08.01连续
+
01工
工商银行 · 9481一般户
缺口 21 天07.01—07.21
已逾期 2 天断档
+
02建
建设银行 · 0845一般户
01.01—07.317 个月连续
最近导入 08.01连续
+
+
+

需要处理

按结账影响和期限排序

diff --git a/web/styles.css b/web/styles.css index aa2d126..8296531 100644 --- a/web/styles.css +++ b/web/styles.css @@ -135,8 +135,10 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } .swap-button { width: 38px; height: 38px; border-radius: 12px; align-self: end; } /* Glass surfaces */ -.panel, .period-ribbon, .query-band, .filter-bar, .filter-grid, .pair-report, .work-progress, .reconcile-summary { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-low); backdrop-filter: blur(22px) saturate(120%); } +.panel, .period-ribbon, .query-band, .filter-bar, .filter-grid, .pair-report, .work-progress, .reconcile-summary { position: relative; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-low); backdrop-filter: blur(22px) saturate(120%); } +.panel::before, .period-ribbon::before, .reconcile-summary::before, .work-progress::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(168deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; } .panel { min-width: 0; overflow: hidden; } +.panel > * { position: relative; } .panel-heading { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 17px; border-bottom: 1px solid var(--color-line); } .panel-heading h2 { font-size: 15px; } .panel-heading p { margin-top: 3px; color: var(--color-ink-muted); font-size: 11px; } @@ -152,14 +154,16 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } /* Dashboard */ .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; } -.metric-card { position: relative; min-height: 142px; display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-content: space-between; gap: 14px; padding: 20px; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-low); backdrop-filter: blur(24px) saturate(125%); transition: transform var(--duration-standard) var(--ease-out), border-color var(--duration-standard), box-shadow var(--duration-standard); } +.metric-card { position: relative; min-height: 142px; display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-content: space-between; gap: 14px; padding: 20px; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-low); backdrop-filter: blur(24px) saturate(125%); transition: transform var(--duration-standard) var(--ease-out), border-color var(--duration-standard), box-shadow var(--duration-standard); } +.metric-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(168deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 38%); pointer-events: none; } .metric-card::after { content: ""; position: absolute; inset: auto 15% -1px 15%; height: 1px; background: currentColor; opacity: 0.35; box-shadow: 0 -8px 24px currentColor; } .metric-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.17); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.3); } .metric-copy { align-self: start; } .metric-label { display: block; color: var(--color-ink-soft); font-size: 12px; } .metric-value { display: block; margin-top: 7px; font: 700 31px/1 var(--font-data); letter-spacing: 0; } .metric-value small { margin-left: 5px; color: var(--color-ink-muted); font: 11px var(--font-ui); } -.metric-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 15px; background: rgba(255, 255, 255, 0.055); color: var(--color-ink-soft); } +.metric-icon { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 70%); color: var(--color-ink-soft); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); } +.metric-icon::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.12; pointer-events: none; } .metric-foot { grid-column: 1 / -1; color: var(--color-ink-muted); font-size: 11px; } .metric-foot strong { color: var(--color-positive); } .metric-card.warning { color: var(--color-warning); } @@ -170,8 +174,11 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } .metric-card .metric-foot { color: var(--color-ink-muted); } .metric-card[data-metric-link], .metric-card[data-metric-action] { cursor: pointer; } .metric-card.warning .metric-icon, .metric-card.warning .metric-foot strong { color: var(--color-warning); } +.metric-card.warning .metric-icon::after { opacity: 0.28; } .metric-card.danger .metric-icon, .metric-card.danger .metric-foot strong { color: var(--color-danger); } +.metric-card.danger .metric-icon::after { opacity: 0.32; } .metric-card.success .metric-icon { color: var(--color-positive); } +.metric-card.success .metric-icon::after { opacity: 0.22; border-color: var(--color-positive); } .period-ribbon { display: grid; grid-template-columns: 1fr 1fr 1fr minmax(310px, 1.4fr); margin-bottom: 18px; overflow: hidden; } .period-ribbon > div { min-height: 72px; display: flex; flex-direction: column; justify-content: center; padding: 13px 17px; border-left: 1px solid var(--color-line); } .period-ribbon > div:first-child { border-left: 0; } @@ -195,6 +202,69 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } .quick-result strong { display: block; margin: 4px 0; color: var(--color-primary-strong); font: 700 22px var(--font-data); } .quick-result small { margin-left: 4px; font: 10px var(--font-ui); } +/* Stack-deck: signature 3D card-stack visual */ +.stack-deck { position: relative; height: 188px; perspective: 1400px; perspective-origin: 50% 60%; } +.deck-stage { position: absolute; inset: 0; display: grid; place-items: center; } +.deck-card { position: absolute; width: 184px; min-height: 158px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(28, 36, 32, 0.92), rgba(14, 19, 16, 0.92)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.05); transform-origin: 50% 100%; transition: transform var(--duration-standard) var(--ease-out), box-shadow var(--duration-standard), border-color var(--duration-standard), opacity var(--duration-standard); cursor: pointer; } +.deck-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(168deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 36%); pointer-events: none; } +.deck-card > * { position: relative; } +.deck-card .deck-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: var(--color-primary-wash); color: var(--color-primary); font-weight: 800; font-size: 13px; } +.deck-card .deck-name { display: flex; flex-direction: column; } +.deck-card .deck-name strong { font-size: 14px; } +.deck-card .deck-name small { color: var(--color-ink-muted); font-size: 11px; } +.deck-card .deck-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } +.deck-card .deck-meta strong { font: 600 16px var(--font-data); color: var(--color-ink); } +.deck-card .deck-meta small { color: var(--color-ink-muted); font-size: 11px; } +.deck-card .deck-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--color-ink-muted); } +.deck-card.is-active { border-color: rgba(55, 235, 137, 0.55); background: linear-gradient(180deg, rgba(20, 56, 36, 0.95), rgba(8, 22, 14, 0.95)); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45), 0 0 36px rgba(55, 235, 137, 0.22), inset 0 1px rgba(112, 255, 174, 0.18); } +.deck-card.is-active .deck-mark { background: rgba(255, 255, 255, 0.08); color: var(--color-primary-strong); box-shadow: inset 0 0 0 1px rgba(112, 255, 174, 0.4); } +.deck-card.is-active .deck-name strong { color: var(--color-primary-strong); } +.deck-card.is-warning { border-color: rgba(255, 188, 82, 0.35); } +.deck-card.is-danger { border-color: rgba(255, 98, 109, 0.35); } +.deck-card .deck-pos { position: absolute; top: 12px; right: 12px; font: 700 10px var(--font-data); color: var(--color-ink-muted); letter-spacing: 0.06em; } +.deck-card.is-active .deck-pos { color: var(--color-primary-strong); } + +/* Stack-deck fan layout */ +.deck-stage .deck-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5); opacity: 1; z-index: 6; } +.deck-stage .deck-card.is-active:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(55, 235, 137, 0.3), inset 0 1px rgba(112, 255, 174, 0.18); } +.deck-panel { padding-bottom: 6px; overflow: visible; } +.deck-panel > .panel-heading { background: var(--color-surface); position: relative; z-index: 7; } +.deck-panel .stack-deck { overflow: visible; padding: 12px 16px 18px; } + +/* Deck card fan layout driven by --deck-offset / --deck-rotate */ +.deck-card { --deck-offset: 0px; --deck-rotate: 0deg; --deck-scale: 1; transform: translate(var(--deck-offset), 6px) rotate(var(--deck-rotate)) scale(var(--deck-scale)); } +.deck-stage .deck-card:nth-child(1) { --deck-offset: -280px; --deck-rotate: -22deg; --deck-scale: 0.92; z-index: 1; opacity: 0.85; } +.deck-stage .deck-card:nth-child(2) { --deck-offset: -165px; --deck-rotate: -12deg; --deck-scale: 0.96; z-index: 2; opacity: 0.92; } +.deck-stage .deck-card:nth-child(3) { --deck-offset: -55px; --deck-rotate: -4deg; z-index: 3; } +.deck-stage .deck-card:nth-child(4) { --deck-offset: 55px; --deck-rotate: 4deg; z-index: 4; } +.deck-stage .deck-card:nth-child(5) { --deck-offset: 165px; --deck-rotate: 12deg; --deck-scale: 0.96; z-index: 2; opacity: 0.92; } +.deck-stage .deck-card:nth-child(6) { --deck-offset: 280px; --deck-rotate: 22deg; --deck-scale: 0.92; z-index: 1; opacity: 0.85; } +.deck-stage .deck-card:nth-child(7) { --deck-offset: 395px; --deck-rotate: 30deg; --deck-scale: 0.88; z-index: 0; opacity: 0.7; } +.deck-stage .deck-card:nth-child(8) { --deck-offset: -395px; --deck-rotate: -30deg; --deck-scale: 0.88; z-index: 0; opacity: 0.7; } +.deck-card.is-active { z-index: 5; } + +/* Timeline-strip: horizontal calculation window ribbon */ +.timeline-strip { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 16px 18px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(20, 26, 23, 0.86), rgba(10, 14, 12, 0.86)); box-shadow: var(--shadow-low); backdrop-filter: blur(22px) saturate(125%); } +.timeline-strip::before { content: ""; position: absolute; } +.timeline-legend { display: flex; flex-direction: column; justify-content: center; gap: 6px; } +.timeline-legend strong { font-size: 13px; } +.timeline-legend span { color: var(--color-ink-muted); font-size: 11px; } +.timeline-body { position: relative; min-height: 88px; padding-top: 6px; } +.timeline-axis { position: relative; height: 14px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--color-line); } +.timeline-axis span { font: 600 10px var(--font-data); color: var(--color-ink-muted); align-self: end; padding-bottom: 4px; text-align: left; } +.timeline-axis span + span { border-left: 1px solid var(--color-line); padding-left: 4px; } +.timeline-rows { display: grid; gap: 8px; margin-top: 12px; } +.timeline-row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 11px; } +.timeline-row > span { color: var(--color-ink-soft); } +.timeline-track { position: relative; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); overflow: hidden; } +.timeline-track i { position: absolute; top: 0; bottom: 0; border-radius: inherit; } +.timeline-track i.coverage { background: linear-gradient(90deg, rgba(55, 235, 137, 0.35), rgba(55, 235, 137, 0.55)); box-shadow: inset 0 0 0 1px rgba(112, 255, 174, 0.32); } +.timeline-track i.warning { background: linear-gradient(90deg, rgba(255, 188, 82, 0.32), rgba(255, 188, 82, 0.52)); box-shadow: inset 0 0 0 1px rgba(255, 188, 82, 0.32); } +.timeline-track i.danger { background: linear-gradient(90deg, rgba(255, 98, 109, 0.32), rgba(255, 98, 109, 0.52)); box-shadow: inset 0 0 0 1px rgba(255, 98, 109, 0.32); } +.timeline-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--color-primary-strong); box-shadow: 0 0 12px rgba(112, 255, 174, 0.6); border-radius: 1px; } +.timeline-today::after { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary-strong); box-shadow: 0 0 0 4px rgba(112, 255, 174, 0.18); } +.timeline-strip-panel { position: relative; } + /* Ledger and queries */ .inline-search { width: min(240px, 38vw); height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--color-line); border-radius: 11px; background: rgba(0, 0, 0, 0.18); color: var(--color-ink-muted); } .inline-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--color-ink); } @@ -521,6 +591,35 @@ main { width: min(1560px, 100%); margin: 0 auto; padding: 32px 32px 58px; } .role-switch { grid-template-columns: 1fr; } } +@media (max-width: 1180px) { + .stack-deck { height: 168px; } + .deck-card { width: 168px; min-height: 144px; padding: 14px; } + .deck-stage .deck-card:nth-child(1), .deck-stage .deck-card:nth-child(6) { opacity: 0; pointer-events: none; } + .deck-stage .deck-card:nth-child(1) { transform: translate(-260px, 14px) rotate(-22deg) scale(0.85); } + .deck-stage .deck-card:nth-child(6) { transform: translate(260px, 14px) rotate(22deg) scale(0.85); } + .deck-stage .deck-card:nth-child(2) { transform: translate(-160px, 6px) rotate(-12deg) scale(0.94); } + .deck-stage .deck-card:nth-child(5) { transform: translate(160px, 6px) rotate(12deg) scale(0.94); } + .timeline-strip { grid-template-columns: 1fr; } + .timeline-legend { padding-bottom: 4px; } +} + +@media (max-width: 900px) { + .stack-deck { height: auto; padding: 0 4px 8px; } + .deck-stage { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } + .deck-stage .deck-card { position: relative; transform: none !important; opacity: 1 !important; width: auto; } + .deck-card .deck-pos { right: 10px; } +} + +@media (max-width: 720px) { + .stack-deck { height: auto; padding-bottom: 4px; } + .deck-stage { grid-template-columns: 1fr; gap: 8px; } + .deck-card { width: auto; min-height: 0; padding: 12px; } + .timeline-strip { padding: 14px; } + .timeline-rows { gap: 6px; } + .timeline-row { grid-template-columns: 80px minmax(0, 1fr); } + .timeline-axis span { font-size: 9px; } +} + @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }