/* ========================================================================== 第 81 轮 · 全站「阴影 + 动效」层（ec-polish.css） -------------------------------------------------------------------------- 定位：**只做加法**的视觉层，不重写任何既有布局。 · 本文件在 index.html 里排在 ec-gpu.css 之后 ⇒ 全站最后加载，同名属性优先。 · 不改任何结构、不改字号档位、不改色板 token、不改涨跌色。 · 所有动效都可被 `prefers-reduced-motion: reduce` 一次性关掉（见文件末尾）。 · 为什么部分规则用 !important： 既有规则里有 `#page-dashboard .ec-card { box-shadow: 1px 2px }` 这种带 id 的 高优先级写法，`.ec-card` 单类选择器压不过；本层是纯装饰层， 不承担任何布局职责，用 !important 把「阴影」这一件事钉死最稳妥， 避免为了提权去写一串 `#page-xxx .ec-card`（那会让以后每条新页面都要补一次）。 ========================================================================== */ /* -------------------------------------------------------------------------- ① 设计 token —— 三层阴影 + 统一缓动 -------------------------------------------------------------------------- */ :root { /* 三层阴影：贴地 1px（接触感）+ 中距扩散（体积）+ 远距柔化（悬浮） 比原来单层 `0 1px 2px rgba(15,23,42,.02)` 有层次，但仍在「克制」区间。 */ --r81-sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04); --r81-sh-2: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 10px -2px rgba(16, 24, 40, .06), 0 12px 28px -16px rgba(16, 24, 40, .12); --r81-sh-3: 0 2px 4px rgba(16, 24, 40, .06), 0 8px 20px -4px rgba(16, 24, 40, .09), 0 22px 44px -22px rgba(16, 24, 40, .16); --r81-sh-pop: 0 8px 20px -6px rgba(16, 24, 40, .16), 0 36px 72px -28px rgba(16, 24, 40, .26); --r81-ease: cubic-bezier(.22, .61, .36, 1); --r81-t: 200ms; /* 覆盖旧的两级阴影变量（ec-shell.css 里用的就是这两个名字） ⇒ 所有写着 `box-shadow: var(--shadow-panel)` 的地方自动升级，无需逐条改。 */ --shadow-panel: var(--r81-sh-2); --shadow-pop: var(--r81-sh-pop); } /* -------------------------------------------------------------------------- ② 卡片：分层阴影 + 悬停加深（只动阴影，不动位置 ⇒ 不可能引起重排/溢出） -------------------------------------------------------------------------- */ .ec-card { box-shadow: var(--r81-sh-2) !important; transition: box-shadow var(--r81-t) var(--r81-ease), border-color var(--r81-t) var(--r81-ease); } .ec-card:hover { box-shadow: var(--r81-sh-3) !important; } /* 静止卡片轻浮起：只给「不太可能很高」的卡片（看板统计块）， 长表格卡不动 —— 一张 8000px 的卡整体上移 1px 会显得在抖。 */ .ec-kpi, .ec-stat, .ov-stat, .sc-kpi { transition: box-shadow var(--r81-t) var(--r81-ease), transform var(--r81-t) var(--r81-ease); } .ec-kpi:hover, .ec-stat:hover, .ov-stat:hover, .sc-kpi:hover { transform: translateY(-2px); box-shadow: var(--r81-sh-3); } /* 卡片标题不许被长注释挤成竖排 —— ★ 实测病灶：`.ec-card-head` 是 flex + space-between，h4 没有 flex:none / nowrap， 右侧 `.hint` 一长就把 h4 压到最小内容宽度 ⇒ 中文逐字换行，「指标对比」竖着排。 店铺对比页右侧那张卡就是这个样子。 */ .ec-card-head h4 { flex: 0 0 auto; white-space: nowrap; } .ec-card-head .hint { flex: 1 1 auto; min-width: 0; text-align: right; } /* -------------------------------------------------------------------------- ③ 顶栏 / 侧栏 -------------------------------------------------------------------------- */ #topbar.ec-topbar { box-shadow: 0 1px 0 rgba(16, 24, 40, .05), 0 8px 20px -16px rgba(16, 24, 40, .22); z-index: 20; } /* 侧栏激活项：已有左侧竖条（is-active::before），这里只补一道极淡内描边做「浮起」感 */ .ec-nav-item { transition: background var(--r81-t) var(--r81-ease), color var(--r81-t) var(--r81-ease); } .ec-nav-item.is-active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } /* 子菜单展开：原实现没有过渡，这里补一个极短的淡入下移 */ .ec-nav-sub.open { animation: r81SlideDown 180ms var(--r81-ease) both; } /* -------------------------------------------------------------------------- ④ 按钮：常态轻投影，悬停加深，按下回弹 -------------------------------------------------------------------------- */ .ec-btn { transition: background var(--r81-t) var(--r81-ease), border-color var(--r81-t) var(--r81-ease), color var(--r81-t) var(--r81-ease), box-shadow var(--r81-t) var(--r81-ease), transform 90ms var(--r81-ease); } .ec-btn:not(:disabled):hover { box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 6px 14px -8px rgba(16, 24, 40, .28); } .ec-btn:not(:disabled):active { transform: translateY(1px) scale(.99); box-shadow: inset 0 1px 2px rgba(16, 24, 40, .12); transition-duration: 60ms; } .ec-btn-primary { box-shadow: 0 1px 2px rgba(37, 99, 235, .22), 0 6px 16px -8px rgba(37, 99, 235, .50); } .ec-btn-primary:not(:disabled):hover { box-shadow: 0 2px 4px rgba(37, 99, 235, .24), 0 10px 22px -8px rgba(37, 99, 235, .58); } .ec-btn:focus-visible, .ec-tab:focus-visible { outline: 2px solid rgba(59, 130, 246, .45); outline-offset: 2px; } /* -------------------------------------------------------------------------- ⑤ 表格：行悬停过渡 + 长表表头常驻 -------------------------------------------------------------------------- */ .ec-table tbody tr { transition: background var(--r81-t) var(--r81-ease); } .ec-table tbody tr:hover { background: #f7fafd; } /* 数据源页：189 行客户端，原来没有任何高度约束 ⇒ 整页 10117px，表头一滚就没了。 这里把表格容器限高 + 表头吸顶，页面回到一屏高度出头。 */ #clients-table-wrap { max-height: calc(100vh - 268px); overflow: auto; overscroll-behavior: contain; } #clients-table-wrap thead th { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: inset 0 -1px 0 var(--panel-line-soft, #eef2f7); } /* -------------------------------------------------------------------------- ⑥ 页头：解释性副标题收起（与「解释小字全部隐藏」同一条口径） -------------------------------------------------------------------------- */ .ec-page-desc { display: none !important; } /* -------------------------------------------------------------------------- ⑦ 弹窗 / 抽屉 -------------------------------------------------------------------------- */ .sa-report-mask, .mkx-mask, .cc-drawer-mask { animation: r81Fade 160ms ease both; } .sa-report-mask > .sa-report { animation: r81Pop 220ms var(--r81-ease) both; } .cc-drawer-mask > .cc-drawer { animation: r81SlideIn 220ms var(--r81-ease) both; } .sa-report, .cc-drawer { box-shadow: var(--r81-sh-pop); } /* -------------------------------------------------------------------------- ⑧ 动效：页面入场 + 区块错峰 + 图表淡入 + 空态轻浮 -------------------------------------------------------------------------- */ @keyframes r81Fade { from { opacity: 0; } to { opacity: 1; } } @keyframes r81Rise { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } } @keyframes r81Pop { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } to { opacity: 1; transform: none; } } @keyframes r81SlideIn { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes r81SlideDown { from { opacity: 0; transform: translate3d(0, -4px, 0); } to { opacity: 1; transform: none; } } @keyframes r81Float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -3px, 0); } } /* 切页入场：app.js 的 navTo() 每次都会给目标页加 .page-enter，320ms 后移除。 直接挂在这个类上 —— 不需要改任何 JS，也不会影响首屏以外的元素。 ★ 总时长必须 < 320ms，否则类被移除时动画还没播完，会「闪一下」跳回原位。 这里 200ms + 最大延迟 88ms = 288ms。 */ .page.page-enter > * { animation: r81Rise 200ms var(--r81-ease) both; } .page.page-enter > *:nth-child(2) { animation-delay: 24ms; } .page.page-enter > *:nth-child(3) { animation-delay: 40ms; } .page.page-enter > *:nth-child(4) { animation-delay: 56ms; } .page.page-enter > *:nth-child(5) { animation-delay: 68ms; } .page.page-enter > *:nth-child(6) { animation-delay: 80ms; } .page.page-enter > *:nth-child(n+7) { animation-delay: 88ms; } /* 图表：新画出来的 canvas 淡入，避免「数据到位瞬间硬闪」 */ .page canvas { animation: r81Fade 300ms ease both; } /* 空态图标：极轻的呼吸浮动，让「什么都没有」的页面不至于像坏掉 */ .ec-empty-ico { animation: r81Float 3.6s ease-in-out infinite; } /* 进度条 / 结构条：宽度变化走过渡（原来多数是瞬间跳变） */ .sc-share > i, .ec-mix-bar > i, .ov-traffic-track > i, .mkx-bar > i { transition: width 420ms var(--r81-ease); } /* -------------------------------------------------------------------------- ⑩ 第 82 轮 · 强行解释的小字：全站清掉 r82-explain-off -------------------------------------------------------------------------- 老板原话（2026-10-27）：「付款口径：支付 + 结算 / 只来自销售日报 这个解释删了， 还有其他页面上 但凡有这种小字强行解释的 直接删了」 ★ 这里**只藏不删节点**，两条理由： ① 这些节点有 id（如 #dash-trend-period）或被渲染函数每次重写，删结构下一次刷新就回来； ② display:none 之后文字不渲染、不占高度，视觉上与「删掉」完全一致。 销售分析页那两枚口径 pill 与全站页头描述是**真删源码**的，见 patch82a。 ★ 白名单（以下小字**不藏** —— 藏了会丢信息或让人误判）： · 空态原因（未接入 XX 报表 / 缺字段 / 这些商品没有分组控价） · 数据状态（统计窗口 / 覆盖 649 天 / 在线 0 共 189 / 第 1-4 页 / 口径断点） · 图例与图表坐标轴标注 ·
折叠说明（默认收起，本来就不占版面） -------------------------------------------------------------------------- */ /* ---- 经营总览 ---- */ #page-dashboard .ec-contrib-note, /* 「另 3 家窗口内无成交或没有日报，不计入分母」 */ #page-dashboard #dash-trend-period, /* 销售走势卡底部「…单位 元 · 无日期的账单子 0 计入堆叠 · 窗口内无日期天未灌入…」 */ #page-dashboard .ec-issue-d { /* 待关注每条下面「2026-10-25 支付金额 ¥19,476，退款 ¥6,559，退款率 33.7%（健康线 <8%）」 */ display: none !important; } /* ---- 店铺对比 ---- */ #page-storesCompare .hint, /* 「对比期 … · 条长 = 占全场比例」「相对分：该指标最优 = 100…」「宽度按各店自己的访客数归一」 */ #page-storesCompare .sc-foot, /* 「条内左为新买家…」「该指标只有 1 家有值…相对分不可算，条长不表示强弱」 */ #page-storesCompare .ec-subunit { /* 「9 个指标 · 点上方切换」 */ display: none !important; } /* ---- 商品分析 ---- */ #page-anGoods .hint, /* 「系列 → 店铺 ｜ 帕累托…」「不做的判断」 */ #page-anGoods .gd-prop-hs, /* 「不用打开弹窗，直接在这里改」 */ #page-anGoods .gd-kpi-f, /* 每个 KPI 下面的算式：「件数 × 每件瓶数」「支付金额 ÷ 总瓶数」「支付买家 ÷ 访客」… */ #page-anGoods .gd-chart-note, /* 「按月 · 8 期」 */ #page-anGoods .gd-tbln, /* 「8 月份 · 最新在前 · 环比贴在每个数值右侧 · 报表无规格列，瓶数为 --」 */ #page-anGoods .gd-tblfoot, /* 「每个数值右侧的百分比 = 环比（…同比已按第 29 轮要求从本表撤掉…）」 */ #page-anGoods .gd-dpick-hint, /* 「最多 2 个 —— ① 分析对象 ② 结构细分」 */ #page-anGoods .gd-sku-entryt > span { /* 「一件里装什么 · 系列名 · 毫升数 · 每件瓶数 —— 报表没有这几列，靠这里补齐…」 */ display: none !important; } /* ---- 流量分析 ---- */ #page-anTraffic .hint, /* 「同一平台内、同一层级内聚合，不跨平台也不跨层级相加」 */ #page-anTraffic .fp-k-f { /* 「各来源口径合计」 */ display: none !important; } /* ---- 人群分析 ---- */ #page-anAudience .hint, /* 「分子分母同为报表口径，不平均百分比」「缺依据就不给结论」 */ #page-anAudience .ec-kpi-foot, /* KPI 下方「新访客 + 老访客 合计口径」「口径：支付新买家数 ÷ 支付买家数」 */ #page-anAudience .ec-mix-note, /* 「新访客占比 79.79%（= 新访客数 ÷（新访客数+老访客数）…）」 */ #page-anAudience .ec-mix-caveat { /* 「年龄、性别、消费层级、复购率…本页不做推导」 */ display: none !important; } /* ---- 推广分析 / 人群分析：「本页不做的推导」整张卡 ---- 正文全是「为什么这里没有数字」，属于交付式文字，只藏正文会剩一个孤零零的标题； 用 :has() 连卡一起藏。两张卡里没有业务数字，藏掉不丢信息。 */ #page-anAds .ec-section:has(.ec-notes), #page-anAudience .ec-section:has(.ec-notes) { display: none !important; } /* ---- 推广分析 ---- */ #page-anAds .hint { /* 「不展示无法从现有数据算出的指标」「来自流量报表的来源分类」 */ display: none !important; } /* ---- 数据源：「60 秒内有心跳视为在线」（右侧的「在线 0 / 共 189」要留）---- */ #page-clients .ec-toolbar-note:not(#clients-summary) { display: none !important; } /* ---- ★ 救回被误伤的**数据位**（第 81 轮遗留 bug）---- `#sc-window` 的 class 是 `ec-page-desc sc-window`，于是被上面第 148 行那条 `.ec-page-desc { display:none !important }` 一起藏了 —— 但它是店铺对比页的 **统计窗口日期**（renderStoresCompare 里填 2026-10-12 ~ 2026-10-18）， 不是解释文字。这里用 id 提权把它放回来。 ★ 判据见 _r82-verify.js 的 W10：可见 + 文本是 yyyy-mm-dd ~ yyyy-mm-dd。 r82-sc-window-keep */ #page-storesCompare .ec-page-head #sc-window { display: inline-block !important; overflow: visible !important; } /* -------------------------------------------------------------------------- ⑩ 销售分析工具条上的「范围」下拉（第 83 轮） -------------------------------------------------------------------------- 老板原话（2026-10-30）：「把销售日报的数据补到销售分析里」—— 数据本就在库（1516 条 / 逐字段 0 差异），缺的是能翻到 2025 年的入口。 尺寸对齐已有的 .sa-bar-lab / .sa-tab（11.5px 文字、26px 高），不新造字号。 */ #page-anSales .sa-range { /* r83r-css */ height: 26px; padding: 0 22px 0 8px; border: 1px solid #e6e8ec; border-radius: 7px; background-color: #fff; color: #334155; font-family: inherit; font-size: 11.5px; line-height: 24px; -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; transition: border-color .15s, box-shadow .15s; } #page-anSales .sa-range:hover { border-color: #c7d2e5; } #page-anSales .sa-range:focus { outline: none; border-color: #5b8def; box-shadow: 0 0 0 3px rgba(91, 141, 239, .13); } /* r83c-headnums ★ 店铺卡头的「值 / 环比 / 同比」收成一个整体：靠右、内部不拆行。 margin-left:auto 取代原来的 .sa-flex 占位 —— 窄卡装不下时整组落到第二行右端， 而不是只有「同比」掉下来、还孤零零靠在左边。 */ #page-anSales .sa-chart-nums { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; white-space: nowrap; } /* -------------------------------------------------------------------------- ⑨ 可访问性：系统开了「减少动态效果」⇒ 本层所有动效一次性关掉 （@media 必须放文件最末尾，否则后面的规则会把这里盖掉） -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .page.page-enter > *, .page canvas, .ec-empty-ico, .ec-nav-sub.open, .sa-report-mask, .sa-report-mask > .sa-report, .cc-drawer-mask, .cc-drawer-mask > .cc-drawer { animation: none !important; } .ec-card, .ec-btn, .ec-table tbody tr, .ec-nav-item, .ec-kpi, .ec-stat, .ov-stat, .sc-kpi, .sc-share > i, .ec-mix-bar > i, .ov-traffic-track > i, .mkx-bar > i { transition: none !important; } .ec-btn:not(:disabled):active, .ec-kpi:hover, .ec-stat:hover, .ov-stat:hover, .sc-kpi:hover { transform: none !important; } }