/* 财务看板页样式 — 忠于 H5 原型,spec v3.0 换算(px × 1.8204) */ /* 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 原型 - 2026-03-13 08:00:00 | Prompt: 校对筛选栏滚动行为与 H5 原型一致性 | Direct cause:H5 原型筛选按钮与吸顶板块头共存于同一容器,通过 opacity/scaleX 动画切换;MP 使用 wx:if/wx:else 互斥导致无动画过渡 | Summary:(1) WXML:去掉 wx:if/wx:else 互斥,改为两者同时存在 + CSS 控制显隐 (2) WXSS:吸顶头改为 position:absolute 覆盖在筛选按钮上方,添加 scaleX(0→1)+opacity 从左滑入动画(0.25s ease-out),筛选按钮 opacity 0.2s ease-out 淡出 (3) TS:滚动逻辑对齐 H5 updateStickyHeader(下滑→显示吸顶头,上滑→隐藏吸顶头),移除独立的 filterBarHidden 状态 (4) 吸顶头增加 desc 字段和筛选条件标签非默认值才显示 (5) filter-bar sticky top 从 70rpx 修正为 78rpx | Verify:weixin-devtools 预览滚动行为对比 H5 原型 - 2026-03-13 10:00:00 | Prompt: 校对筛选栏滚动时样式与 H5 原型不一致 | Direct cause:MP 使用 filter-bar-inner--hidden 隐藏整个 inner 容器(含目录按钮),但 H5 原型中目录按钮始终可见,只有 timeBtn/areaBtn/compareToggle 各自独立 opacity→0 淡出 | Summary:(1) WXML:移除 filter-bar-inner 上的 --hidden 类切换,改为在 filter-item 和 compare-switch 上各自添加 --hidden 类 (2) WXSS:删除 filter-bar-inner--hidden 和 filter-bar-inner 的 transition,新增 filter-item--hidden 和 compare-switch--hidden(opacity:0 + translateX(-18rpx) + pointer-events:none),filter-item 和 compare-switch 各自添加 transition | Verify:weixin-devtools 预览确认目录按钮始终可见、筛选按钮独立淡出 - 2026-03-13 12:00:00 | Prompt: 预收资产部分——内部结构、边框与底部锯齿、与经营一览的距离 | Direct cause:card-section 缺少锯齿撕开效果、margin-bottom/padding-bottom 与 H5 不一致、经营一览到预收资产间距不对、border-bottom 应为 none | Summary:(1) card-section:mb 28rpx→74rpx、pb→50rpx、overflow→visible、border-bottom→none、border-color→#eeeeee (2) section-dark:mb→84rpx、overflow→hidden、pb→0 覆盖 card-section (3) 新增 card-tear view 模拟 H5 ::after 锯齿(CSS 三角形 24rpx/28rpx + drop-shadow)(4) WXML 板块 2-6 各加 card-tear view (5) card-header-light 去掉负边距 margin:-2rpx,改加 border-radius:16rpx 16rpx 0 0 防止 overflow:visible 下溢出 | Verify:weixin-devtools 预览确认锯齿效果、间距、圆角 - 2026-03-13 14:00:00 | Prompt: 全卡片内部组件审计——文本内容+间距+line-height 对齐 | Direct cause:(1) 板块2/6 header desc 文案缺失 (2) 板块3 sub-title-row mt 偏差 (3) 板块2 total-balance-label 结构不匹配 H5 flex 布局 (4) 板块4 flow-group-label mt 偏差 (5) 全局 font-size 未同步 Tailwind line-height 导致行高偏矮 | Summary:(1) 文案修复:板块2 加"辅助会员运营策略定制"、板块6 加",用以评估球房分成效益" (2) 间距:sub-title-row mt 28→36rpx、flow-group-label mt 20→22rpx (3) 结构:total-balance-label 从 text 改 view 包裹 label+help-icon (4) line-height 全量补齐:24rpx(text-sm)→34rpx 共23处、28rpx(text-base)→42rpx 共3处、32rpx(text-lg)→48rpx 共3处、22rpx(text-xs)→28rpx 共7处 | Verify:weixin-devtools 预览确认行高、间距、文案 - 2026-03-13 16:00:00 | Prompt: 全页面字号审计——逐一核对所有 font-size 与 H5 原型 | Direct cause:部分选择器 font-size 使用 px×2 而非 px×2×0.875 取偶数公式,导致字号偏大 | Summary:9 处修正——(1) card-header-emoji 36→32rpx (2) toc-header-text 28→24rpx+lh34rpx (3) compare-text-up-sm 22→20rpx (4) compare-text-down-sm 22→20rpx (5) compare-text-up-xs 20→18rpx (6) compare-text-down-xs 20→18rpx (7) compare-text-flat-xs 20→18rpx (8) toc-item-text 26→24rpx+lh34rpx (9) tip-toast-content 24→22rpx | Verify:weixin-devtools 预览确认字号与 H5 原型一致 - 2026-03-13 20:00:00 | Prompt: h5-to-mp-checker 工具比对 + 全页面 line-height 补齐 | Direct cause:工具检测到 45 处严重 line-height 缺失(text-xs/text-sm/text-base 对应选择器未设 line-height),导致行高回退浏览器默认值 | Summary:18 处 line-height 补齐——(1) compare-label 28rpx (2) card-header-desc-dark 28rpx (3) card-header-desc-light 28rpx (4) compare-text-up/down 28rpx (5) compare-text-up-sm/down-sm 28rpx (6) compare-text-up-xs/down-xs/flat-xs 28rpx (7) ai-insight-title 28rpx (8) card-section-title 28rpx (9) card-section-title-sub 28rpx (10) rev-name-desc 28rpx (11) flow-header-desc 28rpx (12) flow-detail-name-desc 28rpx (13) flow-total-desc 28rpx (14) flow-item-desc 28rpx (15) expense-group-note 28rpx (16) sticky-header-desc/tag 28rpx (17) tip-toast-content 1.6→34rpx (18) tip-toast-title 42rpx (19) retry-btn-text 42rpx (20) toc-item-emoji lh:1 | Verify:weixin-devtools 预览确认行高与 H5 原型一致 - 2026-03-13 22:00:00 | Prompt: 全页面 rpx 换算公式修正(×1.75→×1.8204 对齐 spec v3.0) | Direct cause:之前全部 rpx 值使用 px×2×0.875=px×1.75 公式,与 bridge spec v3.0 定义的 px×(750/412)=px×1.8204 不一致,导致字号偏小、间距偏窄、圆角偏小 | Summary:134 处修正——(1) font-size: 29处 text-sm 24→26rpx, 4处 text-base 28→30rpx, 5处 text-lg 32→33rpx (2) line-height: 10处 text-xl/lg lh 48→51rpx, 30处 text-xs lh 28→29rpx, 多处 text-sm lh 34→36rpx (3) padding/margin: 所有 28rpx→30rpx(p-4/m-4 16px), filter-bar-inner 10→12rpx(p-1.5 6px) (4) border-radius: 4处 rounded-xl 24→22rpx, 8处 rounded-2xl 16→30rpx, 1处 rounded-lg 16→14rpx (5) 特定尺寸: toc-btn/sticky-header 70→73rpx, compare-toggle 78→80/42→44rpx, card-section mb 74→76rpx/pb 50→51rpx, section-dark mb 84→87rpx, help-icon 28→29rpx/24→22rpx | Verify:weixin-devtools 预览确认所有尺寸与 spec v3.0 转换表一致 - 2026-03-14 10:00:00 | Prompt: Phase 4 — spec v3.0 token 表精细对齐(23 项差异修复) | Direct cause:子代理逐标签比对 H5 源码与 WXSS,发现 23 处 token 级偏差(Phase 3 批量换算遗留) | Summary:23 处修正分两批——批次1(8项): expense-cell padding 18→22rpx, toc-panel radius 22→30rpx/lr 32→29rpx, toc-header padding 24→26rpx, tip-toast bottom 200→182rpx/lr 32→30rpx, rev-table-header/row/coach-fin-header/row gap 4→8rpx;批次2(15项): rev-val fs 26→30rpx+lh 36→44rpx, rev-name-sub pl 24→30rpx, rev-name-desc fs 20→22rpx, flow-item-desc fs 20→22rpx, flow-group-label +px 8rpx, gift-row-total fs 22→24rpx, cell-label-row-sm mb 6→8rpx, tip-toast-header mb 16→14rpx, tip-toast-title fs 30→26rpx+lh 44→36rpx, 新增 section-dark .card-header-emoji fs 36rpx, rev-table-row--sub pt/pb 22→14rpx, 新增 coach-fin-row--detail pt/pb 18rpx, 新增 coach-fin-row--incentive-total pt/pb 22rpx, 新增明细/激励行 coach-fin-val/bold fs 30rpx+lh 44rpx | Verify:weixin-devtools 预览确认 - 2026-03-14 12:00:00 | Prompt: Phase 5 — ai-insight-section Playwright 实测校验 | Direct cause:用户报告 ai-insight-section 有问题,Playwright evaluate 精确测量 H5 各元素 computedStyle 后发现 ai-insight-title line-height 偏差 | Summary:1 处修正——ai-insight-title line-height 29rpx→36rpx(H5 实测 19.5px × 1.8204 = 35.5 → 36rpx);其余 11 项属性(section margin/padding/bg/border、header gap/mb、icon size/radius、icon-img size、title fs/fw/color、body gap、line fs/lh/color、dim color、underline)全部验证通过 | Verify:Playwright evaluate 精确测量 H5 computedStyle 对比 */ /* ===== 三态 ===== */ .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: 22rpx 0; font-size: 26rpx; 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-13 | intent: H5 filterBar sticky top-[44px]=88rpx×0.875≈78rpx 取偶数;px-4=32rpx×0.875≈28rpx;py-2=16rpx×0.875≈14rpx;position:relative 作为吸顶头定位锚点 */ .filter-bar { background: #f3f3f3; padding: 14rpx 30rpx; position: sticky; top: 80rpx; z-index: 15; border-bottom: 2rpx solid #eeeeee; } /* CHANGE 2026-03-13 | intent: H5 inner p-1.5=6px→10rpx(87.5%), gap-2=8px→14rpx, rounded-lg=8px→14rpx */ .filter-bar-inner { display: flex; align-items: center; gap: 14rpx; background: #ffffff; border-radius: 14rpx; padding: 12rpx; border: 2rpx solid #eeeeee; } .toc-btn { width: 73rpx; height: 73rpx; background: linear-gradient(135deg, #0052d9 0%, #5b9cf8 100%); border-radius: 14rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .toc-btn:active { opacity: 0.85; } .filter-item { flex: 1; min-width: 0; transition: opacity 0.2s ease-out, transform 0.25s ease-out; } /* CHANGE 2026-03-13 | intent: H5 showStickyHeader 时 timeBtn/areaBtn opacity→0 + pointerEvents→none;各按钮独立淡出,目录按钮始终可见 */ .filter-item--hidden { opacity: 0; pointer-events: none; transform: translateX(-18rpx); } /* CHANGE 2026-03-13 | intent: H5 compare-switch gap-2=8px→14rpx, px-2=8px→14rpx */ .compare-switch { display: flex; align-items: center; gap: 14rpx; padding: 0 14rpx; flex-shrink: 0; transition: opacity 0.2s ease-out, transform 0.25s ease-out; } /* CHANGE 2026-03-13 | intent: H5 showStickyHeader 时 compareToggleWrap opacity→0 + pointerEvents→none */ .compare-switch--hidden { opacity: 0; pointer-events: none; transform: translateX(-18rpx); } .compare-label { font-size: 22rpx; line-height: 29rpx; color: #8b8b8b; } .compare-toggle { width: 80rpx; height: 44rpx; 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-13 | intent: 校对 H5 card-section: mb=42px→74rpx(87.5%), pb=28px→50rpx(87.5%取偶), overflow:visible(锯齿需要), border-bottom:none, border-color:#eeeeee(gray-2) */ .card-section { margin: 0 30rpx 76rpx; background: #ffffff; border-radius: 14rpx; overflow: visible; border: 2rpx solid #eeeeee; border-bottom: none; padding-bottom: 51rpx; position: relative; } /* CHANGE 2026-03-13 | intent: H5 经营一览 mb-8=32px + 后续容器 p-4=16px → 总间距 48px → 84rpx(87.5%);经营一览无锯齿无 border-bottom:none,需覆盖 card-section 的锯齿属性 */ .section-dark { background: #3a3a3a; color: #ffffff; border-color: transparent; margin-bottom: 87rpx; overflow: hidden; border-bottom: 2rpx solid transparent; padding-bottom: 0; } .card-section:first-child { margin-top: 30rpx; } /* ===== 板块头 - 深色 ===== */ /* 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: 22rpx; padding: 26rpx 30rpx; background: #1a1a1a; } .card-header-emoji { font-size: 33rpx; line-height: 1; flex-shrink: 0; } /* CHANGE 2026-03-14 | intent: 经营一览深色头 emoji 用 text-xl(20px)→36rpx,浅色头 18px→33rpx 保持不变 */ .section-dark .card-header-emoji { font-size: 36rpx; } .card-header-text { flex: 1; } .card-header-title-dark { font-size: 30rpx; line-height: 44rpx; 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; line-height: 29rpx; color: rgba(255, 255, 255, 0.5); display: block; margin-top: 4rpx; } /* ===== 板块头 - 浅色(拟物灰色渐变) ===== */ /* CHANGE 2026-03-13 | intent: card-section 改 overflow:visible 后负边距会溢出,去掉负边距改用顶部圆角对齐;border-radius 16rpx 与 card-section 一致 */ .card-header-light { display: flex; align-items: flex-start; gap: 18rpx; padding: 22rpx 30rpx; background: linear-gradient(to bottom, #e8e8e8, #d8d8d8); border-bottom: 2rpx solid #c8c8c8; border-radius: 14rpx 14rpx 0 0; } .card-header-title-light { font-size: 26rpx; line-height: 36rpx; 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; line-height: 29rpx; color: #666666; display: block; margin-top: 4rpx; } /* ===== 板块正文容器 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 p-4(16px→32rpx) */ .section-body { padding: 30rpx 30rpx; } /* ===== 子标题 ===== */ /* 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: 14rpx; padding: 0rpx 30rpx 22rpx; } .card-header-dark + .sub-section-label { padding-top: 30rpx; } .sub-label-text { font-size: 22rpx; line-height: 29rpx; color: rgba(255, 255, 255, 0.7); font-weight: 700; } /* CHANGE 2026-03-12 | intent: 校对 H5 text-xs(12px→22rpx) */ .sub-label-desc { font-size: 22rpx; line-height: 29rpx; 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: 22rpx; padding: 0 30rpx 22rpx; } .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: 29rpx; } .help-icon-light { display: inline-flex; align-items: center; justify-content: center; width: 29rpx; height: 29rpx; 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: 51rpx; } .cell-value-red { font-size: 36rpx; font-weight: 700; color: rgba(227, 77, 89, 1); display: block; line-height: 51rpx; } .cell-value-gray { font-size: 36rpx; font-weight: 700; color: #ffffff; display: block; line-height: 51rpx; } /* ===== 环比数据行 ===== */ /* 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; line-height: 29rpx; color: #e34d59; } .compare-text-down { font-size: 22rpx; line-height: 29rpx; color: #00a870; } .compare-text-up-sm { font-size: 24rpx; line-height: 29rpx; color: #e34d59; } .compare-text-down-sm { font-size: 24rpx; line-height: 29rpx; color: #00a870; } .compare-text-up-xs { font-size: 22rpx; line-height: 29rpx; color: #e34d59; } .compare-text-down-xs { font-size: 22rpx; line-height: 29rpx; color: #00a870; } .compare-text-flat-xs { font-size: 22rpx; line-height: 29rpx; 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 30rpx 30rpx; padding: 22rpx 30rpx; background: rgba(255, 255, 255, 0.1); border-radius: 22rpx; } .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: 26rpx; color: rgba(255, 255, 255, 0.7); line-height: 36rpx; } /* CHANGE 2026-03-12 | intent: 校对 H5 gap-3(12px→24rpx) */ .confirmed-right { display: flex; align-items: center; gap: 22rpx; } /* 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: 51rpx; } /* 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: 30rpx 30rpx 40rpx 30rpx; } /* ===== 经营一览 - 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: 22rpx; padding: 0 30rpx; } .overview-cell-bg { text-align: center; background: rgba(255, 255, 255, 0.05); border-radius: 22rpx; padding: 22rpx; } /* CHANGE 2026-03-12 | intent: 补齐 H5 text-lg 的 line-height(28px→48rpx 87.5% 取偶数) */ .cell-value-white-sm { font-size: 33rpx; font-weight: 700; color: #f0f0f0; display: block; line-height: 51rpx; } .cell-value-gray-sm { font-size: 33rpx; font-weight: 700; color: rgba(227, 77, 89, 1); display: block; line-height: 51rpx; } /* ===== AI 洞察 ===== */ /* CHANGE 2026-03-12 | intent: 校对 H5 ai-insight-section margin/padding 16px→32rpx、gap-8px→16rpx、mb-12px→24rpx */ .ai-insight-section { margin: 30rpx 0rpx 0rpx 0rpx; padding: 30rpx 0 40rpx 30rpx; background: #505050; border-top: 2rpx dashed rgba(255, 255, 255, 0.25); } .ai-insight-header { display: flex; align-items: center; gap: 14rpx; margin-bottom: 22rpx; } /* CHANGE 2026-03-12 | intent: H5 原型 AI 图标为 SVG 机器人(24×24 → 42rpx),不可用 emoji 替代 */ .ai-insight-icon { width: 44rpx; height: 44rpx; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 14rpx; 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: 33rpx; height: 33rpx; } /* CHANGE 2026-03-12 | intent: 校对 H5 ai-insight-title font-size:13px→24rpx, line-height:19.5px→36rpx(×1.8204) */ .ai-insight-title { font-size: 24rpx; line-height: 36rpx; 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: 14rpx; } /* CHANGE 2026-03-12 | intent: H5 text-sm lh=20px → 87.5%=34rpx;之前用 1.5 导致 36rpx 偏大 */ .ai-insight-line { font-size: 26rpx; color: rgba(255, 255, 255, 0.85); line-height: 36rpx; } .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: 14rpx; overflow: hidden; } /* ===== 板块小标题 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 card-section-title mb:12px→24rpx */ .card-section-title { font-size: 24rpx; line-height: 29rpx; font-weight: 600; color: #393939; margin-bottom: 22rpx; display: block; } .card-section-title-sub { font-size: 22rpx; line-height: 29rpx; 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: 22rpx 30rpx; 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: 26rpx; line-height: 36rpx; font-weight: 500; color: #4b4b4b; } .table-row-value-lg { font-size: 33rpx; line-height: 51rpx; font-weight: 700; color: #242424; } /* 帮助图标 - 深色版 */ .help-icon-dark { display: inline-flex; align-items: center; justify-content: center; width: 29rpx; height: 29rpx; 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: 22rpx; height: 22rpx; 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: 22rpx; padding: 22rpx 30rpx; background: #ffffff; border-bottom: 2rpx solid #f3f3f3; } .grid-cell { text-align: center; } /* CHANGE 2026-03-14 | intent: H5 mb-1=4px → spec p-1=8rpx */ .cell-label-row-sm { display: flex; align-items: center; justify-content: center; gap: 4rpx; margin-bottom: 8rpx; } .cell-label-sm { font-size: 22rpx; line-height: 29rpx; color: #8b8b8b; } /* CHANGE 2026-03-13 | intent: 校对 H5 cell-value-sm fontSize:14px→24rpx(87.5%) */ .cell-value-sm { font-size: 26rpx; line-height: 36rpx; 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.1fr 1fr 1fr 1fr; gap: 8rpx; padding: 14rpx 30rpx; background: #f0f0f0; } .gift-col { text-align: right; font-size: 26rpx; line-height: 36rpx; color: #4b4b4b; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .gift-col--name { text-align: left; font-weight: 500; align-items: flex-start; } /* 左列标题行:标题靠左,环比靠右 */ .gift-col--name .gift-label-line { display: flex; width: 100%; justify-content: left; align-items: center; gap: 8rpx; } .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.1fr 1fr 1fr 1fr; gap: 8rpx; padding: 22rpx 30rpx; border-bottom: 2rpx solid #f3f3f3; align-items: start; } .gift-table-row:last-child { border-bottom: none; background: #fafafa; } .gift-row-label { font-size: 26rpx; line-height: 36rpx; font-weight: 500; color: #4b4b4b; display: block; } /* CHANGE 2026-03-14 | intent: H5 13px×1.8204=24rpx */ .gift-row-total { font-size: 24rpx; font-weight: 600; color: #393939; display: block; margin-top: 4rpx; } .gift-col-val { font-size: 28rpx; line-height: 36rpx; color: #787878; 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: 20rpx; margin-bottom: 30rpx; padding: 22rpx 30rpx; background: #f0f0f0; border-radius: 14rpx; 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: 26rpx; line-height: 36rpx; 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: 15rpx; text-align: right; } .total-balance-value { font-size: 36rpx; line-height: 51rpx; 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: 14rpx; margin-bottom: 22rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 sub-title-text fontSize:14px→24rpx(87.5%) */ .sub-title-text { font-size: 26rpx; line-height: 36rpx; font-weight: 600; color: #4b4b4b; } .sub-title-desc { font-size: 22rpx; line-height: 29rpx; color: #a6a6a6; } /* ===== 收入结构表格 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 rev-table-header padding:8px 16px→16rpx 32rpx */ /* CHANGE 2026-03-14 | intent: H5 gap-1=4px → spec p-1=8rpx;之前误转为 4rpx */ .rev-table-header { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 8rpx; padding: 14rpx 30rpx; background: #f0f0f0; } .rev-table-header .rev-col { font-size: 22rpx; line-height: 29rpx; color: #5e5e5e; font-weight: 500; } .rev-col { text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } .rev-col--name { text-align: left; } /* CHANGE 2026-03-13 | intent: 校对 H5 rev-table-row padding:12px 16px→24rpx 32rpx */ /* CHANGE 2026-03-14 | intent: H5 gap-1=4px → spec p-1=8rpx */ .rev-table-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 8rpx; padding: 22rpx 30rpx; 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); padding-top: 14rpx; padding-bottom: 14rpx; } .rev-name { font-size: 26rpx; line-height: 36rpx; font-weight: 600; color: #393939; } /* CHANGE 2026-03-14 | intent: H5 pl-4=16px → spec p-4=30rpx */ .rev-name-sub { font-size: 26rpx; line-height: 36rpx; color: #8b8b8b; padding-left: 30rpx; } /* CHANGE 2026-03-14 | intent: H5 text-xs=12px → spec 22rpx */ .rev-name-desc { font-size: 22rpx; line-height: 29rpx; color: #a6a6a6; display: block; margin-top: 2rpx; } /* CHANGE 2026-03-14 | intent: H5 主项数值 text-base(16px)→spec 30rpx, lh=24px→44rpx */ .rev-val { font-size: 28rpx; line-height: 44rpx; color: #4b4b4b; } .rev-val--bold { font-weight: 600; color: #393939; } .rev-val--red { color: rgba(227, 77, 89, 1); } .rev-val--muted { color: #c5c5c5; } /* ===== 损益链流程 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 flow-header padding:10px 16px→20rpx 32rpx */ .flow-header { padding: 18rpx 30rpx; 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: 26rpx; line-height: 36rpx; font-weight: 600; color: #4b4b4b; display: block; } .flow-header-desc { font-size: 20rpx; line-height: 29rpx; 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: 22rpx 30rpx; margin: 14rpx 30rpx; 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: 26rpx; line-height: 36rpx; color: #5e5e5e; } .flow-detail-name-group { display: flex; flex-direction: column; } .flow-detail-name-desc { font-size: 20rpx; line-height: 29rpx; color: #a6a6a6; margin-top: 2rpx; } .flow-detail-right { display: flex; align-items: center; gap: 20rpx; } .flow-detail-val { font-size: 26rpx; line-height: 36rpx; font-weight: 500; color: #4b4b4b; } .flow-detail-val--red { color: rgba(227, 77, 89, 1); } .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: 22rpx 50rpx 22rpx 30rpx; 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: 26rpx; line-height: 36rpx; font-weight: 600; color: #4b4b4b; } .flow-total-desc { font-size: 20rpx; line-height: 29rpx; color: #8b8b8b; } .flow-total-right { display: flex; align-items: center; gap: 20rpx; } .flow-total-value { font-size: 33rpx; line-height: 51rpx; font-weight: 600; color: #242424; } /* ===== 现金流入 - 流水项 ===== */ /* CHANGE 2026-03-14 | intent: H5 px-1=4px → spec p-1=8rpx */ .flow-group-label { font-size: 22rpx; line-height: 29rpx; font-weight: 500; color: #8b8b8b; display: block; margin-bottom: 8rpx; padding-left: 8rpx; padding-right: 8rpx; } .flow-item-list { /* 无额外样式 */ } .flow-item { display: flex; justify-content: space-between; align-items: center; padding: 18rpx 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: 26rpx; line-height: 36rpx; font-weight: 500; color: #4b4b4b; } /* CHANGE 2026-03-14 | intent: H5 text-xs=12px → spec 22rpx */ .flow-item-desc { font-size: 22rpx; line-height: 29rpx; color: #a6a6a6; margin-top: 4rpx; } .flow-item-right { display: flex; flex-direction: column; align-items: flex-end; } .flow-item-value { font-size: 30rpx; line-height: 44rpx; 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: 14rpx; padding: 22rpx 30rpx; background: #f0f0f0; border-radius: 14rpx; border-top: 2rpx solid #e7e7e7; } /* CHANGE 2026-03-13 | intent: 校对 H5 flow-sum-label fontSize:14px→24rpx(87.5%) */ .flow-sum-label { font-size: 26rpx; line-height: 36rpx; font-weight: 600; color: #4b4b4b; } .flow-sum-right { display: flex; align-items: center; gap: 12rpx; } .flow-sum-value { font-size: 33rpx; line-height: 51rpx; 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: 26rpx; line-height: 36rpx; font-weight: 500; color: #4b4b4b; display: block; margin-bottom: 14rpx; margin-top: 22rpx; } .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; line-height: 29rpx; color: #a6a6a6; display: block; margin-top: -8rpx; margin-bottom: 14rpx; } /* 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: 14rpx; margin-bottom: 30rpx; } /* 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: 14rpx; margin-bottom: 30rpx; } /* CHANGE 2026-03-14 | intent: H5 px-3 py-3 = 12px 12px → spec p-3=22rpx;之前误用 18rpx 22rpx */ .expense-cell { background: #fafafa; border: 2rpx solid #e7e7e7; border-radius: 14rpx; padding: 22rpx; text-align: center; } /* CHANGE 2026-03-13 | intent: 校对 H5 expense-cell-label mb:4px→8rpx */ .expense-cell-label { font-size: 22rpx; line-height: 29rpx; color: #8b8b8b; display: block; margin-bottom: 8rpx; } .expense-cell-value { font-size: 30rpx; line-height: 44rpx; font-weight: 600; color: #242424; display: block; } /* ===== 助教分析表格 ===== */ /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-header padding:8px 16px→16rpx 32rpx */ /* CHANGE 2026-03-14 | intent: H5 gap-1=4px → spec p-1=8rpx */ .coach-fin-header { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1fr; gap: 8rpx; padding: 14rpx 30rpx; background: #f0f0f0; } .coach-fin-header .coach-fin-col { font-size: 22rpx; line-height: 29rpx; color: #5e5e5e; font-weight: 500; } .coach-fin-col { text-align: right; } .coach-fin-col--name { text-align: left; font-size: 26rpx; line-height: 36rpx; color: #5e5e5e; } /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-row padding:8px 16px→16rpx 32rpx */ /* CHANGE 2026-03-14 | intent: H5 gap-1=4px → spec p-1=8rpx;基础行 py-2=14rpx */ .coach-fin-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1fr; gap: 8rpx; padding: 14rpx 30rpx; 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-14 | intent: H5 明细行 py-2.5=10px → spec 18rpx */ .coach-fin-row--detail { padding-top: 18rpx; padding-bottom: 18rpx; } /* CHANGE 2026-03-14 | intent: H5 激励课合计行 py-3=12px → spec 22rpx */ .coach-fin-row--incentive-total { padding-top: 22rpx; padding-bottom: 22rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-bold fontSize:14px→24rpx(87.5%) */ .coach-fin-bold { font-size: 26rpx; line-height: 36rpx; font-weight: 600; color: #242424; display: block; } /* CHANGE 2026-03-14 | intent: H5 明细行/激励课合计行数值 text-base(16px)→30rpx/44rpx */ .coach-fin-row--detail .coach-fin-val, .coach-fin-row--incentive-total .coach-fin-val { font-size: 30rpx; line-height: 44rpx; } .coach-fin-row--incentive-total .coach-fin-bold { font-size: 30rpx; line-height: 44rpx; } /* CHANGE 2026-03-13 | intent: 校对 H5 coach-fin-val fontSize:14px→24rpx(87.5%) */ .coach-fin-val { font-size: 26rpx; line-height: 36rpx; color: #5e5e5e; display: block; } /* 助教分析环比列固定宽度,保证上下行对齐 */ .coach-fin-col .compare-row-inline { width: 100%; justify-content: flex-end; } .coach-fin-col .compare-text-up-xs, .coach-fin-col .compare-text-down-xs, .coach-fin-col .compare-text-flat-xs { min-width: 72rpx; text-align: right; display: block; } .coach-fin-val-sm { font-size: 26rpx; line-height: 36rpx; 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; } /* CHANGE 2026-03-14 | intent: H5 toc-dropdown radius=16px → spec rounded-2xl=30rpx;left/right=16px→29rpx */ .toc-panel { position: fixed; top: 200rpx; left: 29rpx; right: 29rpx; background: #ffffff; border-radius: 30rpx; 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; } /* CHANGE 2026-03-14 | intent: H5 toc-dropdown-header padding=14px 16px → spec p-3.5=26rpx, p-4=30rpx */ .toc-header { background: linear-gradient(135deg, #f8faff 0%, #ecf2fe 100%); padding: 26rpx 30rpx; border-bottom: 2rpx solid #e7e7e7; } .toc-header-text { font-size: 26rpx; line-height: 36rpx; font-weight: 600; color: #393939; } .toc-list { padding: 12rpx 0; } .toc-item { display: flex; align-items: center; gap: 22rpx; padding: 22rpx 30rpx; } .toc-item:active { background: #f8faff; } .toc-item--active { background: #ecf2fe; } .toc-item-emoji { font-size: 33rpx; line-height: 1; flex-shrink: 0; } .toc-item-text { font-size: 26rpx; line-height: 36rpx; 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; } /* CHANGE 2026-03-14 | intent: H5 tip-toast bottom=100px→182rpx, left/right=16px→30rpx(spec p-4), radius=12px→22rpx(spec rounded-xl), padding=16px→30rpx */ .tip-toast { position: fixed; bottom: 182rpx; left: 30rpx; right: 30rpx; background: #ffffff; border-radius: 22rpx; padding: 30rpx; 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; } /* CHANGE 2026-03-14 | intent: H5 mb-2=8px → spec p-2=14rpx */ .tip-toast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14rpx; } /* CHANGE 2026-03-14 | intent: H5 text-sm=14px → spec 26rpx/36rpx */ .tip-toast-title { font-size: 26rpx; line-height: 36rpx; font-weight: 600; color: #242424; } .tip-toast-close { padding: 8rpx; } .tip-toast-content { font-size: 24rpx; color: #4b4b4b; line-height: 38rpx; white-space: pre-wrap; } /* ===== 错误态与重试 ===== */ .retry-btn { margin-top: 32rpx; padding: 16rpx 48rpx; background: #0052d9; border-radius: 30rpx; } .retry-btn:active { opacity: 0.85; } .retry-btn-text { font-size: 30rpx; line-height: 44rpx; color: #ffffff; } /* ===== P1: 吸顶板块头 ===== */ /* CHANGE 2026-03-13 | intent: H5 sticky-section-header position:absolute 覆盖在筛选按钮上方;top/left/right 按 filter-bar padding + inner padding + tocBtn + gap 精确计算;border-radius 0 6px→0 10rpx(87.5%) */ /* H5 fixed: top=58px, left=70px, right=22px, height=40px, padding=0 12px, gap=8px, border-radius=0 6px 6px 0 */ /* MP absolute 相对 filter-bar: top=14rpx(py)+10rpx(inner-p)=24rpx; left=28rpx(px)+10rpx(inner-p)+70rpx(toc)+14rpx(gap)=122rpx; right=28rpx(px)+10rpx(inner-p)=38rpx */ .sticky-section-header { position: absolute; top: 24rpx; left: 122rpx; right: 38rpx; height: 73rpx; z-index: 16; background: #ffffff; padding: 0 22rpx; display: flex; align-items: center; gap: 14rpx; border-radius: 0 11rpx 11rpx 0; /* H5: scaleX(0) + opacity(0),从左侧滑入 */ transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; transition: transform 0.25s ease-out, opacity 0.2s ease-out; } /* CHANGE 2026-03-13 | intent: H5 .sticky-section-header.show → scaleX(1) + opacity(1) */ .sticky-section-header--show { transform: scaleX(1); opacity: 1; pointer-events: auto; } /* CHANGE 2026-03-13 | intent: H5 sticky-section-emoji 18px→32rpx(87.5%) */ .sticky-header-emoji { font-size: 33rpx; line-height: 1; flex-shrink: 0; } /* CHANGE 2026-03-13 | intent: H5 sticky-section-content flex:1 + flex row + gap:8px→14rpx,包含 title + desc */ .sticky-header-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14rpx; } /* CHANGE 2026-03-13 | intent: H5 sticky-section-title 14px→24rpx(87.5%), font-weight:600, color:#333→#393939 */ .sticky-header-title { font-size: 26rpx; line-height: 36rpx; font-weight: 600; color: #393939; white-space: nowrap; flex-shrink: 0; } /* CHANGE 2026-03-13 | intent: H5 sticky-section-desc 11px→20rpx(87.5%), color:#999→#a6a6a6, 溢出省略 */ .sticky-header-desc { font-size: 20rpx; line-height: 29rpx; color: #a6a6a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-header-tags { display: flex; align-items: center; gap: 8rpx; flex-shrink: 0; } /* CHANGE 2026-03-13 | intent: H5 sticky-filter-tag padding:4px 8px→8rpx 14rpx(87.5%), radius:6px→10rpx(87.5%) */ .sticky-header-tag { font-size: 20rpx; line-height: 29rpx; color: #5e5e5e; background: #f3f3f3; padding: 8rpx 14rpx; border-radius: 11rpx; white-space: nowrap; } /* ===== 卡片底部锯齿撕开效果(拟物风格,模拟 H5 card-section::after) ===== */ /* CHANGE 2026-03-13 | intent: H5 card-section::after 用 CSS 三角形实现锯齿,height:14px→24rpx(87.5%取偶), bg-size:16px→28rpx(87.5%取偶);小程序不支持 ::after,用额外 view 绝对定位模拟;drop-shadow 模拟 H5 的 filter: drop-shadow(0 4px 3px rgba(0,0,0,0.10)),小程序不支持 clip-path 所以阴影会略微向上溢出但视觉可接受 */ .card-tear { position: absolute; bottom: -20rpx; left: 0; right: 0; height: 24rpx; background: linear-gradient(135deg, #ffffff 40%, transparent 40%), linear-gradient(225deg, #ffffff 40%, transparent 40%); background-size: 28rpx 24rpx; background-color: transparent; filter: drop-shadow(0 6rpx 4rpx rgba(0, 0, 0, 0.08)); } /* 经营一览(深色板块)不显示锯齿 */ .section-dark .card-tear { display: none; } /* ===== 底部安全区 ===== */ .safe-bottom { height: 200rpx; padding-bottom: env(safe-area-inset-bottom); }