/* 财务看板页样式 — 忠于 H5 原型,87.5% 缩放 */ /* AI_CHANGELOG - 2026-03-12 23:30:00 | Prompt: 校对小程序财务看板经营一览部分与 H5 原型视觉还原 | Direct cause:WXSS 间距/字号与 H5 原型存在 2-4rpx 偏差 | Summary:逐属性校对经营一览全部元素(Tab 导航、筛选栏、板块头、3列/2列网格、确认收入行、分隔线、AI 洞察区域等 23 处),统一按 H5 px×2=rpx(间距)和 px×2×0.875 取偶数(字号)换算规则对齐 | Verify:微信开发者工具预览对比 H5 原型截图 - 2026-03-13 02:00:00 | Prompt: 补齐 line-height + 修复间距叠加 | Direct cause:Tailwind 字号类捆绑 line-height,WXSS 只写 font-size 未写 line-height 导致块高度偏矮;overview-grid-2 底部 padding 与 ai-insight mt 叠加导致间距翻倍 | Summary:(1) 5 处 line-height 补齐(cell-value 48rpx、cell-label 28rpx、confirmed 34rpx/48rpx)(2) overview-grid-2 去掉多余底部 padding 32rpx (3) ai-insight-line lh 从 1.5 改为 34rpx | Verify:Playwright 实测 H5 元素尺寸 + weixin-devtools 截图对比 - 2026-03-13 04:00:00 | Prompt: 板块2-6全面校对(预收资产/应计收入/现金流入/现金流出/助教分析) | Direct cause:Playwright 实测 H5 元素尺寸后发现板块2-6存在系统性 padding/fontSize/gap 偏差 | Summary:31处修复——(1) 共用样式:card-section-title mb、card-header-desc-light color (2) 表格行:table-row/gift-table/rev-table/coach-fin padding 对齐 32rpx (3) 字号:14px 对应选择器统一从 26rpx→24rpx(table-row-label-bold/cell-value-sm/total-balance-label/sub-title-text/flow-total-label/flow-sum-label/flow-item-name/flow-header-title/coach-fin-bold/coach-fin-val/expense-group-label)(4) 间距:expense-grid gap→16rpx mb→32rpx、expense-cell padding→20rpx 24rpx、expense-cell-label mb→8rpx、flow-detail-list margin→16rpx 32rpx (5) 网格:table-row-grid3 gap/padding 对齐 | Verify:weixin-devtools 截图对比 H5 原型 */ /* ===== 三态 ===== */ .page-loading, .page-empty, .page-error { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60vh; } /* ===== 看板 Tab 导航 ===== */ .board-tabs { display: flex; background: #ffffff; border-bottom: 2rpx solid #eeeeee; position: sticky; top: 0; z-index: 20; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05); } /* CHANGE 2026-03-12 | intent: 校对 H5 py-3(12px→24rpx) */ .board-tab { flex: 1; text-align: center; padding: 24rpx 0; font-size: 24rpx; line-height: 36rpx; font-weight: 500; color: #8b8b8b; position: relative; } .board-tab--active { color: #0052d9; font-weight: 500; } .board-tab--active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 42rpx; height: 5rpx; background: linear-gradient(90deg, #0052d9, #5b9cf8); border-radius: 3rpx; } /* ===== 筛选区域 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 px-4(16px→32rpx) py-2(8px→16rpx) */ .filter-bar { background: #f3f3f3; padding: 16rpx 32rpx; position: sticky; top: 70rpx; z-index: 15; border-bottom: 2rpx solid #eeeeee; } /* CHANGE 2026-03-12 | intent: 校对 H5 gap-2(8px→16rpx) p-1.5(6px→12rpx) */ .filter-bar-inner { display: flex; align-items: center; gap: 16rpx; background: #ffffff; border-radius: 16rpx; padding: 12rpx; border: 2rpx solid #eeeeee; transition: opacity 0.2s; } /* P2: 下滑隐藏筛选内容 */ .filter-bar-inner--hidden { opacity: 0; pointer-events: none; } .toc-btn { width: 70rpx; height: 70rpx; background: linear-gradient(135deg, #0052d9 0%, #5b9cf8 100%); border-radius: 16rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .toc-btn:active { opacity: 0.85; } .filter-item { flex: 1; min-width: 0; } .compare-switch { display: flex; align-items: center; gap: 8rpx; padding: 0 8rpx; flex-shrink: 0; } .compare-label { font-size: 22rpx; color: #8b8b8b; } .compare-toggle { width: 78rpx; height: 42rpx; background: #dcdcdc; border-radius: 22rpx; position: relative; transition: background 0.3s; } .compare-toggle--active { background: #0052d9; } .compare-toggle-dot { position: absolute; width: 36rpx; height: 36rpx; background: #ffffff; border-radius: 50%; top: 3rpx; left: 3rpx; transition: left 0.3s; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2); } .compare-toggle--active .compare-toggle-dot { left: 39rpx; } /* ===== 内容区(页面自然滚动) ===== */ .board-content { /* 不设固定高度,使用页面自然滚动 */ } /* ===== 板块卡片通用 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 mx-4(16px→32rpx) mb-8(32px→64rpx) */ .card-section { margin: 0 32rpx 32rpx; background: #ffffff; border-radius: 16rpx; overflow: hidden; border: 2rpx solid #e7e7e7; } /* 深色板块(经营一览) — margin-bottom 匹配 H5 mb-8 (32px→64rpx) */ .section-dark { background: #3a3a3a; color: #ffffff; border-color: transparent; margin-bottom: 64rpx; } .card-section:first-child { margin-top: 32rpx; } /* ===== 板块头 - 深色 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 原型 gap-3(12px→24rpx)、padding 14px 16px→28rpx 32rpx */ .card-header-dark { display: flex; align-items: flex-start; gap: 24rpx; padding: 28rpx 32rpx; background: #1a1a1a; } .card-header-emoji { font-size: 36rpx; line-height: 1; flex-shrink: 0; } .card-header-text { flex: 1; } .card-header-title-dark { font-size: 28rpx; font-weight: 600; color: #ffffff; display: block; } /* CHANGE 2026-03-12 | intent: 校对 H5 mt-0.5(2px→4rpx) */ .card-header-desc-dark { font-size: 22rpx; color: rgba(255, 255, 255, 0.5); display: block; margin-top: 4rpx; } /* ===== 板块头 - 浅色(拟物灰色渐变) ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 card-header gap:10px→20rpx, padding:12px 16px→24rpx 32rpx */ .card-header-light { display: flex; align-items: flex-start; gap: 20rpx; margin: -2rpx -2rpx 0 -2rpx; padding: 24rpx 32rpx; background: linear-gradient(to bottom, #e8e8e8, #d8d8d8); border-bottom: 2rpx solid #c8c8c8; } .card-header-title-light { font-size: 24rpx; font-weight: 600; color: #222222; display: block; } /* CHANGE 2026-03-13 | intent: 校对 H5 card-header-desc color:#666→#666666 */ .card-header-desc-light { font-size: 20rpx; color: #666666; display: block; margin-top: 4rpx; } /* ===== 板块正文容器 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 p-4(16px→32rpx) */ .section-body { padding: 32rpx 32rpx; } /* ===== 子标题 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 gap-2(8px→16rpx)、mb-3(12px→24rpx)、padding 匹配 summary-content 16px→32rpx */ .sub-section-label { display: flex; align-items: center; gap: 16rpx; padding: 0rpx 32rpx 24rpx; } .card-header-dark + .sub-section-label { padding-top: 32rpx; } .sub-label-text { font-size: 22rpx; color: rgba(255, 255, 255, 0.7); font-weight: 500; } /* CHANGE 2026-03-12 | intent: 校对 H5 text-xs(12px→22rpx) */ .sub-label-desc { font-size: 22rpx; color: rgba(255, 255, 255, 0.4); } /* ===== 经营一览 - 3列网格 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 gap-3(12px→24rpx)、mb-3(12px→24rpx)、padding 匹配 summary-content */ .overview-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24rpx; padding: 0 32rpx 24rpx; } .overview-cell { text-align: center; } /* CHANGE 2026-03-12 | intent: 校对 H5 help-icon margin-left:4px→8rpx,用 gap 实现 */ .cell-label-row { display: flex; align-items: center; justify-content: center; gap: 8rpx; margin-bottom: 8rpx; } /* CHANGE 2026-03-12 | intent: 补齐 H5 text-xs 的 line-height(16px→28rpx 87.5%) */ .cell-label-light { font-size: 22rpx; color: rgba(255, 255, 255, 0.6); line-height: 28rpx; } .help-icon-light { display: inline-flex; align-items: center; justify-content: center; width: 28rpx; height: 28rpx; background: rgba(255, 255, 255, 0.2); border-radius: 50%; font-size: 18rpx; color: rgba(255, 255, 255, 0.7); flex-shrink: 0; } /* CHANGE 2026-03-12 | intent: 补齐 H5 text-xl 的 line-height(28px→48rpx 87.5%) */ .cell-value-white { font-size: 36rpx; font-weight: 700; color: #ffffff; display: block; line-height: 48rpx; } .cell-value-red { font-size: 36rpx; font-weight: 700; color: rgba(227, 77, 89, 0.85); display: block; line-height: 48rpx; } .cell-value-gray { font-size: 36rpx; font-weight: 700; color: #c5c5c5; display: block; line-height: 48rpx; } /* ===== 环比数据行 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 compare-data margin-top:2px→4rpx、gap:2px→4rpx */ .compare-row { display: flex; align-items: center; justify-content: center; gap: 4rpx; margin-top: 4rpx; } .compare-text-up { font-size: 22rpx; color: #e34d59; } .compare-text-down { font-size: 22rpx; color: #00a870; } .compare-text-up-sm { font-size: 22rpx; color: #e34d59; } .compare-text-down-sm { font-size: 22rpx; color: #00a870; } .compare-text-up-xs { font-size: 20rpx; color: #e34d59; } .compare-text-down-xs { font-size: 20rpx; color: #00a870; } .compare-text-flat-xs { font-size: 20rpx; color: #a6a6a6; } .compare-row-inline { display: flex; align-items: center; gap: 2rpx; } /* ===== 确认收入行 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 px-4(16px→32rpx) py-3(12px→24rpx) rounded-xl(12px→24rpx),mb 匹配父容器 mb-4(16px→32rpx) */ .confirmed-row { display: flex; justify-content: space-between; align-items: center; margin: 0 32rpx 32rpx; padding: 24rpx 32rpx; background: rgba(255, 255, 255, 0.1); border-radius: 24rpx; } .confirmed-left { display: flex; align-items: center; gap: 8rpx; } /* CHANGE 2026-03-12 | intent: 补齐 H5 text-sm 的 line-height(20px→34rpx 87.5%) */ .confirmed-label { font-size: 24rpx; color: rgba(255, 255, 255, 0.7); line-height: 34rpx; } /* CHANGE 2026-03-12 | intent: 校对 H5 gap-3(12px→24rpx) */ .confirmed-right { display: flex; align-items: center; gap: 24rpx; } /* CHANGE 2026-03-12 | intent: 补齐 H5 text-xl 的 line-height(28px→48rpx 87.5%) */ .confirmed-value { font-size: 36rpx; font-weight: 700; color: #f0f0f0; line-height: 48rpx; } /* CHANGE 2026-03-12 | intent: 校对 H5 my-4(16px→32rpx)、margin 匹配 summary-content padding */ .section-divider-light { height: 1rpx; background: rgba(255, 255, 255, 0.1); margin: 32rpx 32rpx; } /* ===== 经营一览 - 2列网格 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 gap-3(12px→24rpx)、padding 匹配 summary-content;底部无 padding(H5 grid-cols-2 mb=0,间距由 ai-insight mt 提供) */ .overview-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24rpx; padding: 0 32rpx; } .overview-cell-bg { text-align: center; background: rgba(255, 255, 255, 0.05); border-radius: 24rpx; padding: 24rpx; } /* CHANGE 2026-03-12 | intent: 补齐 H5 text-lg 的 line-height(28px→48rpx 87.5% 取偶数) */ .cell-value-white-sm { font-size: 32rpx; font-weight: 700; color: #f0f0f0; display: block; line-height: 48rpx; } .cell-value-gray-sm { font-size: 32rpx; font-weight: 700; color: #c5c5c5; display: block; line-height: 48rpx; } /* ===== AI 洞察 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 ai-insight-section margin/padding 16px→32rpx、gap-8px→16rpx、mb-12px→24rpx */ .ai-insight-section { margin: 32rpx -2rpx -2rpx -2rpx; padding: 32rpx 32rpx; background: #505050; border-top: 2rpx dashed rgba(255, 255, 255, 0.25); } .ai-insight-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 24rpx; } /* CHANGE 2026-03-12 | intent: H5 原型 AI 图标为 SVG 机器人(24×24 → 42rpx),不可用 emoji 替代 */ .ai-insight-icon { width: 42rpx; height: 42rpx; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 16rpx; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* CHANGE 2026-03-12 | intent: H5 SVG 18px → 18×2×0.875=31.5 取偶数 32rpx */ .ai-insight-icon-img { width: 32rpx; height: 32rpx; } /* CHANGE 2026-03-12 | intent: 校对 H5 ai-insight-title font-size:13px→26rpx(87.5%=22rpx) */ .ai-insight-title { font-size: 22rpx; font-weight: 500; color: rgba(255, 255, 255, 0.8); } /* CHANGE 2026-03-12 | intent: 校对 H5 space-y-2(8px→16rpx) */ .ai-insight-body { display: flex; flex-direction: column; gap: 16rpx; } /* CHANGE 2026-03-12 | intent: H5 text-sm lh=20px → 87.5%=34rpx;之前用 1.5 导致 36rpx 偏大 */ .ai-insight-line { font-size: 24rpx; color: rgba(255, 255, 255, 0.85); line-height: 34rpx; } .ai-insight-dim { color: rgba(255, 255, 255, 0.5); } /* CHANGE 2026-03-12 | intent: H5 原型 AI 洞察第三行关键词有 underline 样式 */ .ai-insight-underline { text-decoration: underline; color: rgba(255, 255, 255, 0.85); } /* ===== 通用表格边框容器 ===== */ .table-bordered { border: 2rpx solid #e7e7e7; border-radius: 16rpx; overflow: hidden; } /* ===== 板块小标题 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 card-section-title mb:12px→24rpx */ .card-section-title { font-size: 22rpx; font-weight: 600; color: #393939; margin-bottom: 24rpx; display: block; } .card-section-title-sub { font-size: 22rpx; color: #8b8b8b; font-weight: 400; } /* ===== 预收资产 - 储值卡统计 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 table-row padding:12px 16px→24rpx 32rpx */ .table-row { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 32rpx; border-bottom: 2rpx solid #f3f3f3; } .table-row:last-child { border-bottom: none; } .table-row--highlight { background: #fafafa; } .table-row--footer { background: #f0f0f0; } .table-row-left { display: flex; align-items: center; gap: 8rpx; } .table-row-right { display: flex; align-items: center; gap: 12rpx; text-align: right; } /* CHANGE 2026-03-13 | intent: 校对 H5 table-row-label-bold fontSize:14px→24rpx(87.5%) */ .table-row-label-bold { font-size: 24rpx; font-weight: 500; color: #4b4b4b; } .table-row-value-lg { font-size: 32rpx; font-weight: 700; color: #242424; } /* 帮助图标 - 深色版 */ .help-icon-dark { display: inline-flex; align-items: center; justify-content: center; width: 28rpx; height: 28rpx; background: rgba(0, 0, 0, 0.08); border-radius: 50%; font-size: 18rpx; color: #777777; flex-shrink: 0; } .help-icon-dark-sm { display: inline-flex; align-items: center; justify-content: center; width: 24rpx; height: 24rpx; background: rgba(0, 0, 0, 0.08); border-radius: 50%; font-size: 16rpx; color: #777777; flex-shrink: 0; } /* 储值卡 3列网格行 */ /* CHANGE 2026-03-13 | intent: 校对 H5 table-row-grid3 gap:12px→24rpx, padding:12px 16px→24rpx 32rpx */ .table-row-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24rpx; padding: 24rpx 32rpx; background: #ffffff; border-bottom: 2rpx solid #f3f3f3; } .grid-cell { text-align: center; } .cell-label-row-sm { display: flex; align-items: center; justify-content: center; gap: 4rpx; margin-bottom: 6rpx; } .cell-label-sm { font-size: 22rpx; color: #8b8b8b; } /* CHANGE 2026-03-13 | intent: 校对 H5 cell-value-sm fontSize:14px→24rpx(87.5%) */ .cell-value-sm { font-size: 24rpx; font-weight: 500; color: #4b4b4b; display: block; } /* ===== 赠送卡表格 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 gift-table-header padding:8px 16px→16rpx 32rpx */ .gift-table-header { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 8rpx; padding: 16rpx 32rpx; background: #f0f0f0; } .gift-col { text-align: right; font-size: 24rpx; color: #4b4b4b; } .gift-col--name { text-align: left; font-weight: 500; } .gift-table-header .gift-col { font-weight: 500; color: #393939; } /* CHANGE 2026-03-13 | intent: 校对 H5 gift-table-row padding:12px 16px→24rpx 32rpx */ .gift-table-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 8rpx; padding: 24rpx 32rpx; border-bottom: 2rpx solid #f3f3f3; align-items: start; } .gift-table-row:last-child { border-bottom: none; background: #fafafa; } .gift-row-label { font-size: 24rpx; font-weight: 500; color: #4b4b4b; display: block; } .gift-row-total { font-size: 22rpx; font-weight: 600; color: #393939; display: block; margin-top: 4rpx; } .gift-col-val { font-size: 24rpx; color: #8b8b8b; display: block; } .gift-table-row:last-child .gift-row-label { font-weight: 600; color: #242424; } .gift-table-row:last-child .gift-row-total { font-weight: 700; color: #242424; } .gift-table-row:last-child .gift-col-val { font-weight: 700; color: #242424; } /* ===== 全类别余额合计 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 total-balance-row padding:12px 16px→24rpx 32rpx */ .total-balance-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24rpx; padding: 24rpx 32rpx; background: #f0f0f0; border-radius: 16rpx; border: 2rpx solid #e7e7e7; } .total-balance-left { display: flex; flex-direction: column; gap: 4rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 total-balance-label fontSize:14px→24rpx(87.5%) */ .total-balance-label { font-size: 24rpx; font-weight: 500; color: #4b4b4b; display: flex; align-items: center; gap: 8rpx; } .total-balance-note { font-size: 18rpx; color: #a6a6a6; } .total-balance-right { display: flex; align-items: center; gap: 12rpx; text-align: right; } .total-balance-value { font-size: 36rpx; font-weight: 700; color: #242424; } /* ===== 应计收入 - 子标题行 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 sub-title-row gap:8px→16rpx, mb:12px→24rpx */ .sub-title-row { display: flex; align-items: center; gap: 16rpx; margin-bottom: 24rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 sub-title-text fontSize:14px→24rpx(87.5%) */ .sub-title-text { font-size: 24rpx; font-weight: 600; color: #4b4b4b; } .sub-title-desc { font-size: 22rpx; color: #a6a6a6; } /* ===== 收入结构表格 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 rev-table-header padding:8px 16px→16rpx 32rpx */ .rev-table-header { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 4rpx; padding: 16rpx 32rpx; background: #f0f0f0; } .rev-table-header .rev-col { font-size: 22rpx; color: #5e5e5e; font-weight: 500; } .rev-col { text-align: right; } .rev-col--name { text-align: left; } /* CHANGE 2026-03-13 | intent: 校对 H5 rev-table-row padding:12px 16px→24rpx 32rpx */ .rev-table-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 4rpx; padding: 24rpx 32rpx; border-bottom: 2rpx solid #f3f3f3; align-items: start; } .rev-table-row:last-child { border-bottom: none; } .rev-table-row--sub { background: rgba(255, 255, 255, 0.5); } .rev-name { font-size: 24rpx; font-weight: 600; color: #393939; } .rev-name-sub { font-size: 24rpx; color: #8b8b8b; padding-left: 24rpx; } .rev-name-desc { font-size: 20rpx; color: #a6a6a6; display: block; margin-top: 2rpx; } .rev-val { font-size: 24rpx; color: #4b4b4b; } .rev-val--bold { font-weight: 600; color: #393939; } .rev-val--red { color: rgba(227, 77, 89, 0.85); } .rev-val--muted { color: #c5c5c5; } /* ===== 损益链流程 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 flow-header padding:10px 16px→20rpx 32rpx */ .flow-header { padding: 20rpx 32rpx; background: #fafafa; } .flow-header--deduct { border-top: 2rpx solid #f3f3f3; } /* CHANGE 2026-03-13 | intent: 校对 H5 flow-header-title fontSize:14px→24rpx(87.5%) */ .flow-header-title { font-size: 24rpx; font-weight: 600; color: #4b4b4b; display: block; } .flow-header-desc { font-size: 20rpx; color: #8b8b8b; display: block; margin-top: 2rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 flow-detail-list padding:12px 16px→24rpx 32rpx, margin:8px 16px→16rpx 32rpx */ .flow-detail-list { padding: 24rpx 32rpx; margin: 16rpx 32rpx; border-left: 4rpx solid #c5c5c5; } .flow-detail-item { display: flex; justify-content: space-between; align-items: center; padding: 10rpx 0; } .flow-detail-name { font-size: 24rpx; color: #5e5e5e; } .flow-detail-name-group { display: flex; flex-direction: column; } .flow-detail-name-desc { font-size: 20rpx; color: #a6a6a6; margin-top: 2rpx; } .flow-detail-right { display: flex; align-items: center; gap: 8rpx; } .flow-detail-val { font-size: 24rpx; font-weight: 500; color: #4b4b4b; } .flow-detail-val--red { color: rgba(227, 77, 89, 0.85); } .flow-detail-val--muted { color: #9e9e9e; } /* CHANGE 2026-03-13 | intent: 校对 H5 flow-total-row padding:12px 16px→24rpx 32rpx */ .flow-total-row { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 32rpx; background: #f0f0f0; } .flow-total-row--accent { background: #e8f0fe; } .flow-total-left { display: flex; flex-direction: column; } /* CHANGE 2026-03-13 | intent: 校对 H5 flow-total-label fontSize:14px→24rpx(87.5%) */ .flow-total-label { font-size: 24rpx; font-weight: 600; color: #4b4b4b; } .flow-total-desc { font-size: 20rpx; color: #8b8b8b; } .flow-total-right { display: flex; align-items: center; gap: 12rpx; } .flow-total-value { font-size: 32rpx; font-weight: 600; color: #242424; } /* ===== 现金流入 - 流水项 ===== */ .flow-group-label { font-size: 22rpx; font-weight: 500; color: #8b8b8b; display: block; margin-bottom: 8rpx; } .flow-item-list { /* 无额外样式 */ } .flow-item { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0; border-bottom: 2rpx solid #f3f3f3; } .flow-item:last-child { border-bottom: none; } .flow-item-left { display: flex; flex-direction: column; } /* CHANGE 2026-03-13 | intent: 校对 H5 flow-item-name fontSize:14px→24rpx(87.5%) */ .flow-item-name { font-size: 24rpx; font-weight: 500; color: #4b4b4b; } .flow-item-desc { font-size: 20rpx; color: #a6a6a6; margin-top: 4rpx; } .flow-item-right { display: flex; flex-direction: column; align-items: flex-end; } .flow-item-value { font-size: 28rpx; font-weight: 600; color: #242424; } /* 合计行 */ /* CHANGE 2026-03-13 | intent: 校对 H5 flow-sum-row padding:12px 16px→24rpx 32rpx */ .flow-sum-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; padding: 24rpx 32rpx; background: #f0f0f0; border-radius: 16rpx; border-top: 2rpx solid #e7e7e7; } /* CHANGE 2026-03-13 | intent: 校对 H5 flow-sum-label fontSize:14px→24rpx(87.5%) */ .flow-sum-label { font-size: 24rpx; font-weight: 600; color: #4b4b4b; } .flow-sum-right { display: flex; align-items: center; gap: 12rpx; } .flow-sum-value { font-size: 32rpx; font-weight: 700; color: #242424; } /* ===== 现金流出 - 网格 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 expense-group-label fontSize:14px→24rpx(87.5%), mb:8px→16rpx */ .expense-group-label { font-size: 24rpx; font-weight: 500; color: #4b4b4b; display: block; margin-bottom: 16rpx; margin-top: 24rpx; } .expense-group-label:first-child { margin-top: 0; } /* CHANGE 2026-03-13 | intent: 校对 H5 expense-group-note mb:8px→16rpx */ .expense-group-note { font-size: 20rpx; color: #a6a6a6; display: block; margin-top: -8rpx; margin-bottom: 16rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 expense-grid-3 gap:8px→16rpx, mb:16px→32rpx */ .expense-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16rpx; margin-bottom: 32rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 expense-grid-2 gap:8px→16rpx, mb:16px→32rpx */ .expense-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16rpx; margin-bottom: 32rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 expense-cell padding:10px 12px→20rpx 24rpx */ .expense-cell { background: #fafafa; border: 2rpx solid #e7e7e7; border-radius: 16rpx; padding: 20rpx 24rpx; text-align: center; } /* CHANGE 2026-03-13 | intent: 校对 H5 expense-cell-label mb:4px→8rpx */ .expense-cell-label { font-size: 22rpx; color: #8b8b8b; display: block; margin-bottom: 8rpx; } .expense-cell-value { font-size: 28rpx; font-weight: 600; color: #242424; display: block; } /* ===== 助教分析表格 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-header padding:8px 16px→16rpx 32rpx */ .coach-fin-header { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1fr; gap: 4rpx; padding: 16rpx 32rpx; background: #f0f0f0; } .coach-fin-header .coach-fin-col { font-size: 22rpx; color: #5e5e5e; font-weight: 500; } .coach-fin-col { text-align: right; } .coach-fin-col--name { text-align: left; font-size: 24rpx; color: #5e5e5e; } /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-row padding:8px 16px→16rpx 32rpx */ .coach-fin-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1fr; gap: 4rpx; padding: 16rpx 32rpx; border-bottom: 2rpx solid #f3f3f3; align-items: start; } .coach-fin-row:last-child { border-bottom: none; } .coach-fin-row--total { background: #fafafa; border-bottom: 2rpx solid #e7e7e7; } /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-bold fontSize:14px→24rpx(87.5%) */ .coach-fin-bold { font-size: 24rpx; font-weight: 600; color: #242424; display: block; } /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-val fontSize:14px→24rpx(87.5%) */ .coach-fin-val { font-size: 24rpx; color: #5e5e5e; display: block; } .coach-fin-val-sm { font-size: 24rpx; color: #8b8b8b; display: block; } /* ===== 目录导航 ===== */ .toc-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1000; } .toc-panel { position: fixed; top: 200rpx; left: 32rpx; right: 32rpx; background: #ffffff; border-radius: 24rpx; box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.15); z-index: 1001; overflow: hidden; transform: scale(0.9); opacity: 0; pointer-events: none; transition: all 0.25s ease-out; } .toc-panel--show { transform: scale(1); opacity: 1; pointer-events: auto; } .toc-header { background: linear-gradient(135deg, #f8faff 0%, #ecf2fe 100%); padding: 24rpx 28rpx; border-bottom: 2rpx solid #e7e7e7; } .toc-header-text { font-size: 28rpx; font-weight: 600; color: #393939; } .toc-list { padding: 12rpx 0; } .toc-item { display: flex; align-items: center; gap: 20rpx; padding: 20rpx 28rpx; } .toc-item:active { background: #f8faff; } .toc-item--active { background: #ecf2fe; } .toc-item-emoji { font-size: 32rpx; flex-shrink: 0; } .toc-item-text { font-size: 26rpx; color: #4b4b4b; } .toc-item--active .toc-item-text { color: #0052d9; font-weight: 500; } /* ===== 指标说明弹窗 ===== */ .tip-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1999; } .tip-toast { position: fixed; bottom: 200rpx; left: 32rpx; right: 32rpx; background: #ffffff; border-radius: 24rpx; padding: 28rpx; box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.25); z-index: 2000; transform: translateY(120%); opacity: 0; transition: all 0.3s ease; } .tip-toast--show { transform: translateY(0); opacity: 1; } .tip-toast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; } .tip-toast-title { font-size: 30rpx; font-weight: 600; color: #242424; } .tip-toast-close { padding: 8rpx; } .tip-toast-content { font-size: 24rpx; color: #4b4b4b; line-height: 1.6; white-space: pre-wrap; } /* ===== 错误态与重试 ===== */ .retry-btn { margin-top: 32rpx; padding: 16rpx 48rpx; background: #0052d9; border-radius: 16rpx; } .retry-btn:active { opacity: 0.85; } .retry-btn-text { font-size: 28rpx; color: #ffffff; } /* ===== P1: 吸顶板块头 ===== */ .sticky-section-header { display: flex; align-items: center; gap: 12rpx; padding: 14rpx 20rpx; min-height: 70rpx; box-sizing: border-box; } .sticky-header-emoji { font-size: 28rpx; flex-shrink: 0; } .sticky-header-title { font-size: 26rpx; font-weight: 600; color: #393939; flex-shrink: 0; } .sticky-header-tags { display: flex; align-items: center; gap: 8rpx; margin-left: auto; } .sticky-header-tag { font-size: 22rpx; color: #5e5e5e; background: #f0f0f0; padding: 4rpx 14rpx; border-radius: 8rpx; } /* ===== 底部安全区 ===== */ .safe-bottom { height: 200rpx; padding-bottom: env(safe-area-inset-bottom); }