/* User reference: deepseek_html_20260924_e099b3.html. Scope includes the overview's shell; navigating away restores existing pages. */ .ec-shell:has(#page-dashboard:not(.hidden)) { --side-bg: #fff; --side-bg-raised: #fff; --side-bg-hover: #f8fafc; --side-bg-active: #eff6ff; --side-line: #e2e8f0; --side-text: #475569; --side-text-strong: #1e293b; --side-text-dim: #94a3b8; --accent: #2563eb; --accent-on-dark: #2563eb; --content-bg: #f5f7fa; --ink-1: #1e293b; --ink-2: #475569; --ink-3: #94a3b8; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-sidebar { border-color: #e2e8f0; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-brand-mark { background: #2563eb; border: 0; color: #fff; box-shadow: 0 2px 5px #2563eb20; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-item.is-active { color: #2563eb; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-item[data-page="dashboard"] { background: #eff6ff; color: #2563eb; font-weight: 600; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-item[data-page="dashboard"] .ec-ico { color: #2563eb; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-item.is-active::before { left: auto; right: -12px; top: 4px; bottom: 4px; width: 3px; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-item i.ec-ico { color: #64748b; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-item.is-active i.ec-ico { color: #2563eb; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-item:hover i.ec-ico { color: #2563eb; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-side-avatar { background: #2563eb; color: #fff; border: 0; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-badge { background: #eff6ff; color: #2563eb; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-nav-badge.is-danger { background: #ef4444; color: #fff; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-crumb strong { color: #1e293b; font-size: 17px; } .ec-shell:has(#page-dashboard:not(.hidden)) .ec-crumb strong i { color: #2563eb; } #mainContent:has(> #page-dashboard:not(.hidden)) { background: #f5f7fa !important; } #page-dashboard.ec-overview { background: none; max-width: 1720px; margin-inline: auto; font-variant-numeric: tabular-nums; } #page-dashboard.ec-overview::before, #page-dashboard .ec-card::after, #page-dashboard .ec-kpi::after { display: none; } #page-dashboard .ec-section { margin-bottom: 20px; } #page-dashboard .ec-page-head { align-items: center; margin-bottom: 16px; z-index: 5; gap: 16px; } #page-dashboard .ec-head-inline { gap: 8px; flex-wrap: wrap; } #page-dashboard .ec-page-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); } #page-dashboard .ec-mkt-window { font-size: 12px; padding: 0; border: 0; color: #94a3b8; } #page-dashboard .ec-info-i { font-size: 12px; color: #94a3b8; } #page-dashboard .ec-info-wrap:focus-within .ec-info-pop { display: block; opacity: 1; visibility: visible; } #page-dashboard .ec-info-pop { font-size: 12px; line-height: 1.8; } #page-dashboard :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 4px; } #page-dashboard .ov-data-status { position: relative; flex-shrink: 0; } #page-dashboard .ov-data-status summary { display: flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; font-size: 12px; color: #64748b; } #page-dashboard .ov-data-status summary::-webkit-details-marker { display: none; } #page-dashboard .ov-data-status summary .fa-chevron-down { font-size: 9px; } #page-dashboard #dash-freshness { position: absolute; right: 0; top: calc(100% + 12px); width: 280px; padding: 18px; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; box-shadow: 0 12px 32px #0f172a14; } #page-dashboard .ec-fresh { padding: 0; margin: 0; border: 0; gap: 12px; } #page-dashboard .ec-fresh-k, #page-dashboard .ec-fresh-v { font-size: 12px; } /* Same compact, white KPI treatment as the supplied reference. */ #page-dashboard .ec-kg { gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); } #page-dashboard .ec-kpi { padding: 20px; min-height: 128px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 2px #0f172a05; transition: box-shadow .15s; } #page-dashboard .ec-kpi:hover { transform: none; border-color: #e2e8f0; box-shadow: 0 4px 12px #0f172a07; } #page-dashboard .ec-kpi-k { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #64748b; } #page-dashboard .ec-kpi-v { margin-top: 10px; color: #1e293b; font-family: 'Inter', system-ui, sans-serif; font-size: 27px; line-height: 1.25; font-weight: 700; letter-spacing: -.6px; } #page-dashboard .ec-kpi-f { font-size: 11px; color: #94a3b8; margin-top: 7px; white-space: normal; line-height: 1.6; gap: 4px; align-items: baseline; } #page-dashboard .ec-kpi-f i { color: #94a3b8; font-size: 10px; flex: none; } #page-dashboard .ec-kpi-sp { display: none; } #page-dashboard .ec-delta { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 7px; gap: 3px; } /* up / down 自第 20 轮起全站统一（:root 的 --delta-*），此处不再覆盖 —— 原先这里是「涨绿跌红」，靠文件末尾那段才被翻成涨红跌绿，两段互相打架。 */ #page-dashboard .ec-delta.flat { background: #f1f5f9; color: #94a3b8; } #page-dashboard .ec-delta i { font-size: 9px; } /* Reference hierarchy: attention + stores, products + traffic. */ #page-dashboard .ov-command-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 20px; } #page-dashboard .ov-pair-grid, #page-dashboard .ov-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #page-dashboard .ov-sales-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; } #page-dashboard .ec-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 2px #0f172a05; min-width: 0; overflow: hidden; } #page-dashboard .ec-card-head { padding: 18px 20px 12px; min-height: 49px; border: 0; gap: 10px; } #page-dashboard .ec-card-head h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #334155; } #page-dashboard .ec-card-head h4 > i { font-size: 13px; } #page-dashboard .ov-icon-blue { color: #3b82f6; } #page-dashboard .ov-icon-amber { color: #f59e0b; } #page-dashboard .ov-icon-cyan { color: #06b6d4; } #page-dashboard .ov-icon-purple { color: #8b5cf6; } #page-dashboard .ec-subunit { color: #94a3b8; font-size: 10px; background: #f8fafc; border: 0; border-radius: 4px; padding: 2px 5px; font-weight: 400; } #page-dashboard .ec-card-head .hint, #page-dashboard .ec-btn-ghost { color: #2563eb; font-size: 11px; font-weight: 400; } #page-dashboard .ec-card-head :is(a, button):hover { text-decoration: underline; background: none; } #page-dashboard .ec-card-pad { padding: 4px 20px 18px; } #page-dashboard .ec-badge-n { background: #f1f5f9; color: #94a3b8; font-size: 10px; } #page-dashboard .ec-issue-list { max-height: 184px; overflow-y: auto; } #page-dashboard .ec-issue-quiet { padding: 12px 0; font-size: 12px; color: #94a3b8; line-height: 1.8; } #page-dashboard .ec-issue-quiet strong { display: block; font-weight: 500; color: #64748b; font-size: 13px; margin-bottom: 3px; } #page-dashboard .ec-issue-quiet b { font-weight: 400; color: #64748b; } #page-dashboard .ec-issue { padding: 10px; margin-bottom: 8px; border: 0; border-left: 3px solid #fbbf24; border-radius: 5px; background: #fffbeb80; } #page-dashboard .ec-issue:has(.high) { border-left-color: #ef4444; background: #fff1f280; } #page-dashboard .ec-issue-dot { width: 6px; height: 6px; } #page-dashboard .ec-issue-t { font-size: 12px; white-space: normal; line-height: 1.6; } #page-dashboard .ec-issue-d { font-size: 11px; color: #94a3b8; } #page-dashboard .ov-task-area { margin: 0 20px 18px; padding-top: 12px; border-top: 1px solid #f1f5f9; } #page-dashboard .ov-task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #64748b; } #page-dashboard .ov-task-head a { color: #2563eb; font-size: 11px; } #page-dashboard #dash-aiwork { padding-top: 7px; max-height: 150px; overflow-y: auto; } #page-dashboard #dash-aiwork .ec-issue-quiet { padding: 0; font-size: 11px; } #page-dashboard .ec-prog-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 2px 0; } #page-dashboard .ec-prog-t { font-size: 11px; } #page-dashboard .ec-prog-s { color: #3b82f6; padding: 2px 6px; background: #eff6ff; border-radius: 4px; font-size: 10px; } #page-dashboard .ec-prog-s.is-waiting { color: #b7791f; background: #fffbeb; } #page-dashboard .ec-prog-s.is-failed { color: #e05260; background: #fff1f2; } /* Store ranking, backed by the current store scope. */ #page-dashboard .ec-quote-head, #page-dashboard .ec-quote { display: grid; grid-template-columns: minmax(0, 1fr) 72px 76px 64px; gap: 14px; align-items: center; } #page-dashboard .ec-quote-head { padding: 0 20px 8px; border: 0; color: #94a3b8; font-size: 10px; } #page-dashboard .ec-quotes { padding: 0 12px 12px; } #page-dashboard .ec-quote { padding: 8px; border-radius: 8px; border: 1px solid transparent; cursor: default; } #page-dashboard .ec-quote:first-child { background: #f8fafc; border-color: #f1f5f9; } #page-dashboard .ec-quote:hover { background: #f8fafc; } #page-dashboard .ec-quote-name { font-size: 12px; font-weight: 500; color: #475569; display: flex; align-items: center; min-width: 0; gap: 9px; } #page-dashboard .ov-store-rank { color: #94a3b8; font-size: 12px; width: 15px; flex: none; font-weight: 700; } #page-dashboard .ec-quote:first-child .ov-store-rank { color: #f59e0b; } #page-dashboard .ov-store-label { overflow: hidden; text-overflow: ellipsis; } #page-dashboard .ec-quote-name em { font-size: 10px; font-style: normal; color: #94a3b8; margin-left: 5px; } #page-dashboard .ov-store-rate { font-size: 11px; color: #94a3b8; text-align: right; } #page-dashboard .ec-quote-v { font-size: 13px; color: #334155; font-weight: 600; text-align: right; } #page-dashboard .ec-quote .ec-delta { font-size: 10px; padding-inline: 5px; } #page-dashboard .ec-contrib { margin: 0 20px 16px; padding: 10px 0 0; border: 0; border-top: 1px solid #f1f5f9; border-radius: 0; box-shadow: none; background: none; } #page-dashboard .ec-contrib:empty { display: none; } #page-dashboard .ec-contrib-head { font-size: 10px; margin-bottom: 7px; color: #94a3b8; } #page-dashboard .ec-contrib-head > span:first-child { font-weight: 400; color: #94a3b8; } #page-dashboard .ec-contrib-bar { height: 5px; border-radius: 3px; gap: 2px; } #page-dashboard .ec-contrib-legend { gap: 3px 12px; font-size: 10px; color: #94a3b8; margin-top: 7px; } #page-dashboard .ec-contrib-legend em { width: 5px; height: 5px; } #page-dashboard .ec-contrib-note { font-size: 10px; color: #a3afbd; margin-top: 5px; } #page-dashboard .ov-contribution { margin: 0 20px 16px; border-top: 1px solid #f1f5f9; } #page-dashboard .ov-contribution summary { padding-top: 9px; list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: #94a3b8; font-size: 10px; } #page-dashboard .ov-contribution summary::-webkit-details-marker { display: none; } #page-dashboard .ov-contribution summary i { font-size: 8px; } #page-dashboard .ov-contribution[open] summary i { transform: rotate(180deg); } #page-dashboard .ov-contribution .ec-contrib { margin: 0; border: 0; padding-top: 10px; } #page-dashboard .ov-contribution:has(.ec-contrib:empty) { display: none; } /* Product list and traffic tiles mirror the reference; no invented product labels. */ #page-dashboard .ov-product-columns { display: grid; grid-template-columns: minmax(0, 1fr) 44px 68px; gap: 12px; color: #94a3b8; font-size: 10px; padding: 0 0 7px; } #page-dashboard .ov-product-columns > span:not(:first-child) { text-align: right; } #page-dashboard .ec-rank-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 44px 68px; gap: 12px; padding: 10px 0; border: 0; cursor: default; } #page-dashboard .ec-rank-i { width: 18px; color: #94a3b8; font-size: 11px; font-weight: 600; } #page-dashboard .ec-rank-row:first-child .ec-rank-i { color: #2563eb; } #page-dashboard .ec-rank-n { font-size: 12px; color: #475569; font-weight: 400; } /* 商品行带平台标识：商品日报也分京东/天猫，标出来才不会被误读成单平台口径 */ #page-dashboard .ec-rank-n { display: flex; align-items: center; gap: 6px; min-width: 0; } #page-dashboard .ec-rank-n .ov-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-dashboard .ec-rank-n em { flex: none; font-style: normal; font-size: 10px; color: #94a3b8; } #page-dashboard .ec-rank-s { font-size: 11px; text-align: right; color: #94a3b8; } #page-dashboard .ec-rank-v { font-size: 12px; font-weight: 550; color: #334155; text-align: right; } #page-dashboard .ec-qchips { margin-top: 10px; gap: 5px; } #page-dashboard .ec-qchip { background: #f8fafc; border: 0; border-radius: 4px; padding: 4px 6px; font-size: 10px; color: #94a3b8; box-shadow: none; } #page-dashboard .ec-qchip b { color: #64748b !important; font-weight: 500; } #page-dashboard .ec-card-foot { border-color: #f1f5f9; margin-top: 12px; padding-top: 10px; font-size: 10px; color: #94a3b8; line-height: 1.6; gap: 6px; } #page-dashboard .ov-traffic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #page-dashboard .ov-traffic-tile { background: #f8fafc; border-radius: 8px; text-align: center; padding: 13px 10px; min-width: 0; } #page-dashboard .ov-traffic-tile > span { display: block; font-size: 11px; color: #94a3b8; } #page-dashboard .ov-traffic-tile > b { display: block; font-size: 22px; line-height: 1.4; color: #1e293b; font-weight: 700; margin-top: 4px; } #page-dashboard .ov-traffic-tile > small { display: block; font-size: 10px; color: #94a3b8; margin-top: 2px; } #page-dashboard .ov-traffic-track { height: 5px; border-radius: 9px; background: #e2e8f0; overflow: hidden; margin-top: 12px; } #page-dashboard .ov-traffic-track > i { display: block; height: 100%; background: var(--source-color); border-radius: 9px; } /* Secondary boards keep the same language and retain their own data periods. */ #page-dashboard .ec-chart-tags { font-size: 10px; gap: 10px; color: #94a3b8; } #page-dashboard .ec-chart-tags b { font-weight: 500; color: #64748b; } #page-dashboard .ov-chart-legend { display: flex; gap: 16px; align-items: center; margin: 3px 0 12px; font-size: 10px; color: #94a3b8; } #page-dashboard .ov-chart-legend > span { display: flex; align-items: center; gap: 6px; } #page-dashboard .ov-chart-legend > span:last-child { margin-left: auto; } #page-dashboard .ov-chart-legend i { width: 14px; height: 2px; background: #3b82f6; } #page-dashboard .ov-chart-legend > span:nth-child(2) i { height: 0; background: none; border-top: 2px dashed #cbd5e1; } #page-dashboard .ec-chart-pad:has(#dash-trend-wrap.hidden) .ov-chart-legend { display: none; } #page-dashboard #dash-trend-wrap { height: 210px; } #page-dashboard .ec-chart-x { margin-top: 7px; font-size: 10px; color: #94a3b8; } #page-dashboard .ec-aud { gap: 22px; padding-top: 10px; } #page-dashboard .ec-aud-top { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; } #page-dashboard .ec-aud-bars { gap: 20px; } #page-dashboard .ec-aud-bk { font-size: 11px; color: #94a3b8; margin-bottom: 7px; } #page-dashboard .ec-aud-bk b { font-size: 12px; color: #334155; font-weight: 600; } #page-dashboard .ec-aud-dc b { font-size: 22px; color: #1e293b; } #page-dashboard .ec-aud-bar { height: 6px; } #page-dashboard .ec-aud-tiles { gap: 10px; } #page-dashboard .ec-aud-tile { background: #f8fafc; padding: 12px 10px; border-radius: 8px; box-shadow: none; text-align: center; } #page-dashboard .ec-aud-tile b { font-size: 18px; color: #334155; font-weight: 600; } #page-dashboard .ec-aud-tile span { font-size: 10px; color: #94a3b8; margin-top: 5px; } #page-dashboard #audience-note { font-size: 10px; color: #94a3b8; } #page-dashboard .ec-lrow { padding: 10px 0; border-bottom: 1px solid #f1f5f9; } #page-dashboard .ec-lrow-k { font-size: 12px; color: #64748b; } #page-dashboard .ec-lrow-v { font-size: 17px; font-weight: 600; color: #334155; text-align: right; } #page-dashboard .ec-lrow-v em { display: block; margin: 3px 0 0; font-size: 10px; color: #94a3b8; } #page-dashboard .ec-lrow.is-stack .ec-lrow-v { font-size: 13px; } #page-dashboard .ec-lrow.is-stack .ec-lrow-v em { display: inline; margin-left: 4px; } #page-dashboard .ec-lrow-bar { background: #f1f5f9; height: 4px; margin-top: 8px; } #page-dashboard .ec-lrow-bar > i { background: #60a5fa !important; } #page-dashboard .ec-gap { background: #f8fafc; box-shadow: none; border-radius: 6px; color: #94a3b8; font-size: 11px; line-height: 1.7; } #page-dashboard .ec-gap i { color: #94a3b8; } @media (max-width: 1250px) { #page-dashboard .ec-kg, #page-dashboard .ov-command-grid, #page-dashboard .ov-pair-grid, #page-dashboard .ov-sales-grid, #page-dashboard .ov-bottom-grid { gap: 14px; } #page-dashboard .ec-kpi { padding: 16px; } #page-dashboard .ec-kpi-v { font-size: 24px; } #page-dashboard .ec-kpi-top { flex-wrap: wrap; gap: 4px; } #page-dashboard .ov-command-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } #page-dashboard .ec-quote-head, #page-dashboard .ec-quote { grid-template-columns: minmax(0, 1fr) 68px 60px; gap: 8px; } #page-dashboard .ov-store-rate, #page-dashboard .ec-quote-head > span:nth-child(2) { display: none; } #page-dashboard .ec-card-head, #page-dashboard .ec-card-pad { padding-inline: 16px; } #page-dashboard .ec-aud-top { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; } #page-dashboard .ec-aud-donut, #page-dashboard .ec-aud-donut svg { width: 84px; height: 84px; } #page-dashboard #audience-note { display: none; } } @media (max-width: 1000px) { #page-dashboard .ec-kg { grid-template-columns: repeat(2, minmax(0, 1fr)); } #page-dashboard .ov-command-grid, #page-dashboard .ov-pair-grid, #page-dashboard .ov-sales-grid, #page-dashboard .ov-bottom-grid { grid-template-columns: 1fr; } #page-dashboard .ec-quote-head, #page-dashboard .ec-quote { grid-template-columns: minmax(0, 1fr) 72px 76px 64px; gap: 12px; } #page-dashboard .ov-store-rate, #page-dashboard .ec-quote-head > span:nth-child(2) { display: block; } } @media (max-width: 600px) { #mainContent:has(> #page-dashboard:not(.hidden)) { padding: 14px; } #page-dashboard .ec-section { margin-bottom: 14px; } #page-dashboard .ec-kpi { padding: 14px 12px; } #page-dashboard .ec-kpi-k { font-size: 12px; } #page-dashboard .ec-kpi-v { font-size: 23px; } #page-dashboard .ec-kpi-f { font-size: 10px; } #page-dashboard .ec-mkt-window { font-size: 10px; } #page-dashboard .ov-data-status summary { font-size: 11px; } #page-dashboard .ov-data-status summary .fa-database { display: none; } #page-dashboard .ec-quote-head, #page-dashboard .ec-quote { grid-template-columns: minmax(0, 1fr) 64px 58px; gap: 7px; } #page-dashboard .ov-store-rate, #page-dashboard .ec-quote-head > span:nth-child(2) { display: none; } #page-dashboard .ec-quote-name { gap: 5px; } #page-dashboard .ec-quote-name em { display: none; } #page-dashboard .ov-product-columns { grid-template-columns: minmax(0, 1fr) 38px 60px; gap: 8px; } #page-dashboard .ec-rank-row { grid-template-columns: 14px minmax(0, 1fr) 38px 60px; gap: 8px; } #page-dashboard .ov-traffic-grid { gap: 8px; } #page-dashboard .ov-traffic-tile { padding: 12px 7px; } #page-dashboard .ov-traffic-tile > b { font-size: 20px; } #page-dashboard .ec-info-pop { width: min(310px, 82vw); left: -190px; } } /* 2026-09-24 第 8 轮：流量按平台分栏。 京东与天猫的「一级来源」是两套互不相容的分类体系（京东=站内场域/站外渠道， 天猫=经营优势/主动回访/付费推广），混在一起求和再算占比没有意义 —— 所以每个平台一组，各自 100%，不跨平台相加。 */ #page-dashboard .ov-traffic-pf + .ov-traffic-pf { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9; } #page-dashboard .ov-traffic-pf-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; min-width: 0; } #page-dashboard .ov-traffic-pf-head > b { flex: none; font-size: 12px; font-weight: 600; color: #334155; } #page-dashboard .ov-traffic-pf-head > span { font-size: 10px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-dashboard .ov-traffic-pf-head > em { margin-left: auto; flex: none; font-style: normal; font-size: 11px; color: #64748b; } /* ========================================================================== 2026-09-25 第 9 轮：按用户当轮反馈迭代（全部**追加**，不改上面已固化的规则） ① 店铺表现的框太长 → 主区改成左右**等宽**两列，它不再是占 1.8fr 的最宽框； ② 版式顺序：左列 销售走势 → 待关注 → 商品 TOP5；右列 店铺表现 → 流量全景 → 人群结构； ③ 涨红跌绿（A 股 / 生意参谋口径），只在经营总览页生效； ④ 销售走势改成按店铺堆积面积：细而淡的色带 + 一行图例。 ========================================================================== */ /* ①② 主区两列栅格 */ #page-dashboard .ov-board-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } #page-dashboard .ov-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* 走势卡要给色带留高度；210px 装 30 天堆积带偏挤 */ #page-dashboard #dash-trend-wrap { height: 250px; } /* ③ 涨跌色：★ 第 20 轮起全站统一为「涨红跌绿」，唯一定义在 ec-shell.css 的 :root。 原先这里还有 4 条覆盖（up / down / up.bad / down.good）， 是因为当时全站默认「涨绿跌红」、只有总览页要反过来； 现在默认值本身就是涨红跌绿，这 4 条与全局逐字相同 → 删除， 避免再出现「同一页两段配色互相打架」—— 这正是「同权重规则、后出现者胜」那类坑：谁在后面谁说话。 */ /* ④ 走势图例（JS 动态生成，每店一个色块；不再用固定的「支付金额 / 3 日均线」图标） */ #page-dashboard .ov-chart-legend { flex-wrap: wrap; gap: 7px 14px; margin-bottom: 4px; } #page-dashboard .ov-chart-legend > b { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 10px; color: #64748b; } #page-dashboard .ov-chart-legend > b > i { width: 9px; height: 9px; border-radius: 2px; flex: none; } #page-dashboard .ov-chart-legend > b.ov-lg-ma > i { height: 0; border-radius: 0; background: none; border-top: 1.5px dashed #cbd5e1; width: 12px; } #page-dashboard .ov-chart-legend > b.ov-lg-total { margin-left: auto; color: #94a3b8; } #page-dashboard .ov-chart-legend > b.ov-lg-total em { font-style: normal; color: #334155; font-weight: 600; } /* 人群结构：等专用数据源，不拿别的口径顶替 */ #page-dashboard .ov-pending { background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 8px; padding: 16px 14px; color: #94a3b8; font-size: 11.5px; line-height: 1.85; text-align: center; } #page-dashboard .ov-pending > i { display: block; font-size: 20px; color: #cbd5e1; margin-bottom: 8px; } #page-dashboard .ov-pending > b { display: block; color: #64748b; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; } @media (max-width: 1250px) { #page-dashboard .ov-board-grid { gap: 14px; } #page-dashboard .ov-col { gap: 14px; } #page-dashboard #dash-trend-wrap { height: 230px; } } /* 窄屏先变单列：两列时走势图与店铺表都会被压到不能读 */ @media (max-width: 1080px) { #page-dashboard .ov-board-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { #page-dashboard #dash-trend-wrap { height: 200px; } #page-dashboard .ov-chart-legend > b.ov-lg-total { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { #page-dashboard * { transition: none !important; } } /* ================================================================== 第 11 轮（2026-09-25）· 侧栏配色全局对齐经营总览 ------------------------------------------------------------------ 背景：总览的浅色侧栏皮肤原先用 `.ec-shell:has(#page-dashboard:not(.hidden))` 限定作用域 —— 一旦切到别的页面，:has() 不成立，侧栏立刻退回 ec-shell.css 的深黑（--side-bg:#121417、激活项白字 + #818cf8 淡紫图标）。用户要求 「左侧的导航栏颜色都要跟经营总览的对齐」。 做法：把**侧栏用到的那几个设计变量**与构件规则从「总览页专属」提升为 「全局 .ec-shell」，取值与总览落地的那套完全一致（白底 + #2563eb 蓝 accent）。 边界：只提升侧栏相关变量（--side-* 与 --accent-on-dark）， 不动 --content-bg / --accent / --ink-*，也不动顶栏 .ec-crumb —— 避免波及 其它页面已经调好的内容区观感。 位置：必须写在文件末尾（同权重后出现者胜，用来压过 ec-shell.css 的深色定义）。 注意：只改变量不够 —— `#sidebar.ec-sidebar { border-right-color:#000 }` 是 硬编码，变量管不到，必须用同级或更高权重显式覆盖（见下第 2 条）。 ================================================================== */ .ec-shell { --side-bg: #fff; --side-bg-raised: #fff; --side-bg-hover: #f8fafc; --side-bg-active: #eff6ff; --side-line: #e2e8f0; --side-text: #475569; --side-text-strong: #1e293b; --side-text-dim: #94a3b8; --accent-on-dark: #2563eb; } /* 2. 侧栏右边框：#000 是硬编码，变量改不动它，需要显式覆盖 */ .ec-shell #sidebar.ec-sidebar { border-right-color: #e2e8f0; } /* 3. 品牌标 / 头像 / 徽标：深色版的深底在白底侧栏里会变成脏色块，统一成蓝色系 */ .ec-shell .ec-sidebar .ec-brand-mark { background: #2563eb; border: 0; color: #fff; box-shadow: 0 2px 5px #2563eb20; } .ec-shell .ec-sidebar .ec-side-avatar { background: #2563eb; color: #fff; border: 0; } .ec-shell .ec-sidebar .ec-nav-badge { background: #eff6ff; color: #2563eb; } .ec-shell .ec-sidebar .ec-nav-badge.is-danger { background: #ef4444; color: #fff; } /* 4. 菜单项三态：常态灰、悬停加深、激活蓝；激活条从「左侧」改到「贴侧栏右缘」 */ .ec-shell .ec-sidebar .ec-nav-item i.ec-ico { color: #64748b; } .ec-shell .ec-sidebar .ec-nav-item:hover { color: #1e293b; } .ec-shell .ec-sidebar .ec-nav-item:hover i.ec-ico { color: #2563eb; } .ec-shell .ec-sidebar .ec-nav-item.is-active { color: #2563eb; } .ec-shell .ec-sidebar .ec-nav-item.is-active i.ec-ico { color: #2563eb; } .ec-shell .ec-sidebar .ec-nav-item.is-active::before { left: auto; right: -12px; top: 4px; bottom: 4px; width: 3px; background: #2563eb; } /* 5. 折叠分组的箭头/图标：深色版的 #6f7784 在白底上偏灰，提亮一档 */ .ec-shell .ec-sidebar .ec-nav-subtoggle .chevron { color: #94a3b8; } .ec-shell .ec-sidebar .ec-side-ctx i { color: #94a3b8; } .ec-shell .ec-sidebar .ec-side-logout { color: #94a3b8; } .ec-shell .ec-sidebar .ec-side-logout:hover { color: #2563eb; } /* ================================================================== 第 12 轮（2026-09-25）· 店铺对比页对齐经营总览的视觉语言 ------------------------------------------------------------------ 背景：用户反馈「店铺对比页还不够细致，页面风格向着经营总览对齐」， 并要求「要有几个维度的排名」。 做法：总览那套皮肤的作用域全是 `#page-dashboard`，别的页面拿不到。 本轮**不改 `#page-dashboard` 的任何规则**（那会影响已定稿的总览页）， 而是把同一套设计语言在 `#page-storesCompare` 下重写一份： 灰底 #f5f7fa 内容区 → 白卡 12px 圆角 → 13/27px 字级 → tabular-nums → 发丝线分隔。 位置：仍写在文件末尾（本文件是最后一个加载的样式表，覆盖力最强）。 涨跌色：**保持全站默认的涨绿跌红**，本页不套总览那套「涨红跌绿」—— 两页口径不同时改色号会让同一份数字在两个页面显示成相反的颜色，先不动。 ================================================================== */ /* 1. 页面骨架：灰底 + 白卡才是总览的层次来源；容器宽度与字号对齐 */ #mainContent:has(> #page-storesCompare:not(.hidden)) { background: #f5f7fa !important; } #page-storesCompare { max-width: 1720px; margin-inline: auto; font-variant-numeric: tabular-nums; } #page-storesCompare .ec-section { margin-bottom: 20px; } #page-storesCompare .ec-page-head { align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; } #page-storesCompare .ec-head-inline { gap: 8px; flex-wrap: wrap; align-items: baseline; } #page-storesCompare .ec-page-title { font-size: 17px; font-weight: 600; color: #1e293b; } #page-storesCompare .sc-window { font-size: 12px; padding: 0; border: 0; color: #94a3b8; font-weight: 400; } #page-storesCompare .ec-info-i { font-size: 12px; color: #94a3b8; } #page-storesCompare .ec-info-wrap:focus-within .ec-info-pop { display: block; opacity: 1; visibility: visible; } #page-storesCompare .ec-info-pop { font-size: 12px; line-height: 1.85; } #page-storesCompare :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 4px; } /* 2. 卡片与卡片头：与总览同一套规格 */ #page-storesCompare .ec-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 2px #0f172a05; min-width: 0; overflow: hidden; } #page-storesCompare .ec-card-head { padding: 18px 20px 12px; min-height: 49px; border: 0; gap: 10px; } #page-storesCompare .ec-card-head h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #334155; } #page-storesCompare .ec-card-head h4 > i { font-size: 13px; } #page-storesCompare .ec-card-head .hint { color: #2563eb; font-size: 11px; font-weight: 400; } #page-storesCompare .ec-card-head :is(a, button):hover { text-decoration: underline; background: none; } #page-storesCompare .ec-card-pad { padding: 4px 20px 18px; } #page-storesCompare .ec-subunit { color: #94a3b8; font-size: 10px; background: #f8fafc; border: 0; border-radius: 4px; padding: 2px 5px; font-weight: 400; } #page-storesCompare .ec-badge-n { background: #f1f5f9; color: #94a3b8; font-size: 10px; } #page-storesCompare .sc-ico-blue { color: #3b82f6; } #page-storesCompare .sc-ico-amber { color: #f59e0b; } #page-storesCompare .sc-ico-cyan { color: #06b6d4; } #page-storesCompare .sc-ico-purple { color: #8b5cf6; } /* 3. 店铺排行：块状卡 ×4（第 15 轮从「一行一店」改回） 直接沿用总览的 KPI 卡规格：标签行（名次徽章 + 店名 + 环比胶囊）→ 27px 金额 → 占比条 → 灰脚注 → 底纹折线。四张卡等宽并排，一眼看高度差就有排序感。 */ #page-storesCompare .ec-kg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } #page-storesCompare .sc-rank { padding: 20px; min-height: 128px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 2px #0f172a05; transition: box-shadow .15s; } #page-storesCompare .sc-rank:hover { box-shadow: 0 4px 12px #0f172a07; } #page-storesCompare .ec-kpi-top { display: flex; align-items: center; gap: 7px; min-width: 0; } #page-storesCompare .ec-kpi-top .ec-delta { margin-left: auto; flex: none; } #page-storesCompare .sc-rank-no { width: 18px; height: 18px; flex: none; border-radius: 5px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-variant-numeric: tabular-nums; } #page-storesCompare .sc-rank-no.is-1 { background: #fef3c7; color: #b45309; } #page-storesCompare .sc-rank-no.is-2 { background: #eef2f6; color: #64748b; } #page-storesCompare .sc-rank-no.is-3 { background: #ffedd5; color: #c2410c; } #page-storesCompare .sc-rank-name { font-size: 13px; font-weight: 500; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #page-storesCompare .sc-rank .ec-kpi-v { display: block; margin-top: 10px; color: #1e293b; font-family: 'Inter', system-ui, sans-serif; font-size: 27px; line-height: 1.25; font-weight: 700; letter-spacing: -.6px; } #page-storesCompare .sc-share { height: 5px; border-radius: 3px; background: #f1f5f9; overflow: hidden; margin-top: 10px; } #page-storesCompare .sc-share > i { display: block; height: 100%; border-radius: 3px; } /* 真实 0（本窗口 0 成交）占比 0 → 条宽 0，这家店在卡里就「消失」了； 给一根 3px 短桩说明「有这家店、占比就是 0」。缺字段仍是 0 宽 + 无短桩， 两者靠脚注（「占全场 0.0%」vs「占比不可算」）区分 —— 宁缺勿 0 与真实 0 不能混。 */ #page-storesCompare .sc-share > i.is-zero { min-width: 3px; } #page-storesCompare .sc-rank-f { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 7px; font-size: 11px; color: #94a3b8; white-space: normal; overflow: visible; } #page-storesCompare .sc-rank-f > em { font-style: normal; color: #64748b; font-weight: 500; } #page-storesCompare .sc-spark { display: block; width: 100%; height: 30px; margin: 8px 0 0; } #page-storesCompare .ec-delta { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 7px; gap: 3px; } #page-storesCompare .ec-delta i { font-size: 9px; } /* 4. 两行并排（第 15 轮用户指定） ① 差异诊断（左）| 指标对比（右）② 转化漏斗 | 新老买家结构。 比「三张各占整宽」省掉近一半高度；等宽两列，最窄档塌成单列（见文末响应式）。 */ #page-storesCompare .sc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } #page-storesCompare .sc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* 5. 指标对比：9 个指标的页签（第 14 轮替换掉「36 根条画在一张图里」的版本） 页签切换只换 class，条长用 CSS 宽度 —— 不重建 DOM、不起 Chart.js 实例， 所以「点击就变」是真的零延迟。 */ #page-storesCompare .sc-tabbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; } #page-storesCompare .sc-tab { appearance: none; border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; padding: 5px 11px; cursor: pointer; font-size: 11.5px; font-weight: 500; color: #64748b; line-height: 1.6; transition: background .12s, color .12s, border-color .12s; } #page-storesCompare .sc-tab:hover { color: #2563eb; border-color: #bfdbfe; background: #f8fbff; } #page-storesCompare .sc-tab.is-on { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 600; } #page-storesCompare .sc-cmp-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 2.1fr) auto 40px; align-items: center; gap: 12px; padding: 9px 0; } #page-storesCompare .sc-cmp-row + .sc-cmp-row { border-top: 1px solid #f8fafc; } #page-storesCompare .sc-cmp-row.is-na { opacity: .55; } #page-storesCompare .sc-cmp-no { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #94a3b8; font-variant-numeric: tabular-nums; } #page-storesCompare .sc-cmp-no.is-1 { background: #fef3c7; color: #b45309; } #page-storesCompare .sc-cmp-no.is-2 { background: #eef2f6; color: #64748b; } #page-storesCompare .sc-cmp-no.is-3 { background: #ffedd5; color: #c2410c; } #page-storesCompare .sc-cmp-shop { font-size: 12px; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-storesCompare .sc-cmp-track { display: block; height: 14px; border-radius: 4px; background: #f1f5f9; overflow: hidden; } #page-storesCompare .sc-cmp-track > i { display: block; height: 100%; border-radius: 4px; } /* 真实 0（本窗口 0 成交）留一根短桩 —— 与「字段缺失不画」区分开 */ #page-storesCompare .sc-cmp-track > i.is-zero { min-width: 3px; } #page-storesCompare .sc-cmp-v { font-size: 12.5px; font-weight: 600; color: #1e293b; text-align: right; min-width: 68px; font-variant-numeric: tabular-nums; } #page-storesCompare .sc-cmp-tagbox { text-align: right; } #page-storesCompare .sc-cmp-tag { font-style: normal; font-size: 9px; padding: 1px 4px; border-radius: 3px; white-space: nowrap; } #page-storesCompare .sc-cmp-tag.is-best { background: #eff6ff; color: #2563eb; } #page-storesCompare .sc-cmp-tag.is-worst { background: #fff7ed; color: #c2410c; } #page-storesCompare .sc-cmp-empty { padding: 14px 0; font-size: 12px; color: #94a3b8; line-height: 1.85; } /* 6. 多维画像：一店一张小雷达并排（小倍数）。同尺、不叠加， 所以四张图可以直接横向比「谁的面更鼓」。 */ #page-storesCompare .sc-radar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } #page-storesCompare .sc-radar-cell { min-width: 0; } #page-storesCompare .sc-radar-box { position: relative; height: 268px; } #page-storesCompare .sc-radar-cap { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; text-align: center; line-height: 1.6; } #page-storesCompare .sc-radar-cap > b { display: block; font-size: 11.5px; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-storesCompare .sc-radar-cap > span { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; color: #94a3b8; } #page-storesCompare .sc-radar-cap em { width: 8px; height: 8px; border-radius: 2px; flex: none; } #page-storesCompare .sc-note-line { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #f1f5f9; font-size: 11.5px; line-height: 1.85; color: #64748b; } #page-storesCompare .sc-note-line b { font-weight: 600; color: #334155; } /* 7. 差异诊断：沿用总览「待关注」的 issue 语言（左侧 3px 色条 + 淡底） */ #page-storesCompare .ec-issue { padding: 10px; margin-bottom: 8px; border: 0; border-left: 3px solid #fbbf24; border-radius: 5px; background: #fffbeb80; } #page-storesCompare .ec-issue:last-child { margin-bottom: 0; } #page-storesCompare .ec-issue.is-alert { border-left-color: #ef4444; background: #fff1f280; } #page-storesCompare .ec-issue.is-ok { border-left-color: #3b82f6; background: #eff6ff80; } #page-storesCompare .ec-issue-t { display: block; font-size: 12px; line-height: 1.65; color: #475569; white-space: normal; } #page-storesCompare .ec-issue-t > b { display: inline-block; margin-right: 7px; font-size: 11px; font-weight: 600; color: #334155; } #page-storesCompare .ec-issue-quiet { padding: 12px 0; font-size: 12px; color: #94a3b8; line-height: 1.85; } #page-storesCompare .ec-issue-quiet strong { display: block; font-weight: 500; color: #64748b; font-size: 13px; margin-bottom: 3px; } /* 8. 转化漏斗：三段同轨嵌套（绝对定位左对齐、宽度递减），看起来就是收窄的喇叭口 第 14 轮改「标签行 + 轨道」两行式：卡片从半屏宽变 1/3 屏宽后， 单行布局会把轨道挤到 200px 以内，喇叭口的层次就看不出来了。 */ #page-storesCompare .sc-fn-row { display: block; padding: 9px 0; } #page-storesCompare .sc-fn-row + .sc-fn-row { border-top: 1px solid #f8fafc; } #page-storesCompare .sc-fn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } #page-storesCompare .sc-fn-shop { font-size: 11.5px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-storesCompare .sc-fn-track { position: relative; display: block; height: 10px; border-radius: 5px; background: #f1f5f9; overflow: hidden; } #page-storesCompare .sc-fn-track > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; } /* 三段同轨嵌套，颜色由浅到深 —— 段与段之间要能看出分界， 否则「加购 → 支付」这一小截会被前两段吃掉，看不出漏斗收窄。 */ #page-storesCompare .sc-fn-track > .s1 { background: #dbeafe; } #page-storesCompare .sc-fn-track > .s2 { background: #93c5fd; } #page-storesCompare .sc-fn-track > .s3 { background: #2563eb; } #page-storesCompare .sc-fn-v { font-size: 11px; font-weight: 600; color: #334155; flex: none; font-variant-numeric: tabular-nums; } #page-storesCompare .sc-na { font-size: 11px; color: #cbd5e1; flex: none; } /* 9. 新老买家结构：一根堆叠条，左新右老。同样是两行式。 */ #page-storesCompare .sc-mix-row { display: block; padding: 9px 0; } #page-storesCompare .sc-mix-row + .sc-mix-row { border-top: 1px solid #f8fafc; } #page-storesCompare .sc-mix-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } #page-storesCompare .sc-mix-shop { font-size: 11.5px; color: #475569; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-storesCompare .sc-mix-v { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; color: #334155; } #page-storesCompare .sc-mix-n { flex: none; font-size: 10.5px; color: #94a3b8; font-variant-numeric: tabular-nums; } #page-storesCompare .sc-mix-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #f1f5f9; } #page-storesCompare .sc-mix-bar > .is-new { background: #2563eb; } #page-storesCompare .sc-mix-bar > .is-old { background: #cbd5e1; } /* 10. 全场构成：复用总览的贡献条语言，但去掉卡片内边距（它已经在卡里了） */ #page-storesCompare .sc-contrib { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } #page-storesCompare .ec-contrib-head { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #94a3b8; margin-bottom: 7px; } #page-storesCompare .ec-contrib-head > span:last-child { color: #334155; font-weight: 600; } #page-storesCompare .ec-contrib-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: #f1f5f9; } #page-storesCompare .ec-contrib-bar > i { display: block; height: 100%; } #page-storesCompare .ec-contrib-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 10.5px; color: #475569; } #page-storesCompare .ec-contrib-legend > span { display: inline-flex; align-items: center; gap: 6px; } #page-storesCompare .ec-contrib-legend em { width: 8px; height: 8px; border-radius: 2px; flex: none; } #page-storesCompare .ec-contrib-legend b { font-weight: 600; color: #334155; } #page-storesCompare .ec-contrib-note { margin-top: 8px; font-size: 10px; color: #a3afbd; } /* 11. 脚注（各卡的补充说明） 第 14 轮删掉了原来的 10 列指标对比表与日走势图 —— 指标数据已收进上面的页签， 走势用户这轮先不要。表格与走势的样式随之移除。 */ #page-storesCompare .sc-foot { margin: 12px 0 0; font-size: 10.5px; color: #94a3b8; line-height: 1.8; } #page-storesCompare .sc-foot b { font-weight: 500; color: #64748b; } /* 12. 响应式：先收 KPI 卡与并排行，再塌成单列 */ @media (max-width: 1250px) { #page-storesCompare .ec-kg { gap: 14px; } #page-storesCompare .sc-rank { padding: 16px; } #page-storesCompare .sc-rank .ec-kpi-v { font-size: 24px; } #page-storesCompare .sc-duo { gap: 14px; } #page-storesCompare .sc-col { gap: 14px; } #page-storesCompare .ec-card-head, #page-storesCompare .ec-card-pad { padding-inline: 16px; } #page-storesCompare .sc-radar-grid { gap: 10px; } #page-storesCompare .sc-radar-box { height: 238px; } #page-storesCompare .sc-cmp-row { gap: 10px; } } @media (max-width: 1080px) { /* 并排行先塌成单列：两列各半宽时，指标对比的 9 个页签会折成 3 行、差异诊断也会挤 */ #page-storesCompare .sc-duo { grid-template-columns: 1fr; } #page-storesCompare .sc-radar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { #page-storesCompare .ec-kg { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { #page-storesCompare .sc-radar-grid { grid-template-columns: 1fr; } /* 窄屏下条与「优/弱」徽章留不住，先让位给店名与数值 */ #page-storesCompare .sc-cmp-row { grid-template-columns: 20px minmax(0, 1fr) auto; } #page-storesCompare .sc-cmp-tagbox { display: none; } #page-storesCompare .sc-mix-n { display: none; } } @media (max-width: 600px) { #mainContent:has(> #page-storesCompare:not(.hidden)) { padding: 14px; } #page-storesCompare .ec-kg { grid-template-columns: 1fr; } #page-storesCompare .sc-rank { padding: 14px 12px; } } /* ================================================================== ★ 第 16 轮 · 销售分析（#page-anSales）· 基础件 ------------------------------------------------------------------ 视觉规格对齐「经营总览 / 店铺对比」，而且刻意**不另造一套**： - 数据状态卡、各店铺表、历史明细表、页签、说明折叠全部沿用既有组件类； 第 17 轮把「5 张 KPI 卡 + 独立趋势图」换成了多维看板，原来那 6 条 .sa-kg / .sa-kpi* 规则随 DOM 一并删除（留着就是死规则）； 看板自己的规则见文件末尾「第 17 轮」那一段。 ================================================================== */ /* ★ 第 20 轮：这里原来有一整块「各店铺当日表现表 / 历史销售明细表」的样式 （.sa-shop-card / .sa-table / .sa-td-date / .sa-td-days / .sa-na-cell / .sa-hist-head）， 随那两个板块一起删除（已用「CSS 类名 ↔ JS 输出」集合差确认 JS 侧再无输出）。 现在每张走势图下面挂的是 .sa-tbl*，规格见文件末尾「第 20 轮」那一段。 ⚠ 紧跟着的 .sa-tabbar / .sa-tab 是**活的**（工具条上的粒度页签），别跟着删。 */ #page-anSales .sa-tabbar { display: inline-flex; gap: 4px; padding: 2px; background: #f1f5f9; border-radius: 8px; } #page-anSales .sa-tab { appearance: none; border: 0; background: transparent; cursor: pointer; border-radius: 6px; padding: 4px 14px; font-size: 11.5px; font-weight: 500; color: #64748b; line-height: 1.7; transition: background .12s, color .12s; } #page-anSales .sa-tab:hover { color: #2563eb; } #page-anSales .sa-tab.is-on { background: #fff; color: #2563eb; font-weight: 600; box-shadow: 0 1px 2px #0f172a0f; } /* .sa-foot / .sa-table-wrap 随「历史销售明细」一起删除（第 20 轮） */ /* ★ 当前**不可达**：/api/sales-report 只在显式给了 start+end 且窗口过窄时才回 autoNote， 而第 19 轮起销售分析页的窗口跟着粒度走、不传 start/end，所以这段永远不会显示。 保留是因为后端字段还在、语义仍然成立 —— 哪天本页重新加回区间入口就直接能用。 删之前先确认 `saUrl()` 里还是只传 grain。 */ #page-anSales .sa-auto-note { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 7px 11px; border-radius: 8px; background: #f8fbff; border: 1px solid #e3edfb; font-size: 11px; color: #5b708c; } #page-anSales .sa-auto-note > i { color: #7ba7e0; } /* 销售异常：标题 + 描述两行，底部一个「去待办事项处理」（本页不放 AI 任务入口） */ #page-anSales .sa-exc-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f4f7fa; } #page-anSales .sa-exc-row:last-of-type { border-bottom: 0; } #page-anSales .sa-exc-main { min-width: 0; flex: 1; } #page-anSales .sa-exc-t { font-size: 12.5px; font-weight: 500; color: #1e293b; } #page-anSales .sa-exc-d { margin-top: 3px; font-size: 11.5px; line-height: 1.6; color: #94a3b8; } #page-anSales .sa-exc-more { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; font-size: 11.5px; } #page-anSales .sa-exc-more a { color: #2563eb; } /* （第 20 轮删除）这里原本有一条只服务 .sa-hist-head 的 @media 600 —— 目标板块已删。 本页真正的响应式仍集中在文件末尾，那才是唯一该出现 @media 的地方。 */ /* ================================================================== ★ 第 17 轮 · 销售分析 · 多维看板（#page-anSales） ------------------------------------------------------------------ 老板给了一个 A 股量化系统的「看盘工作台 · 多图网格」做参照，要「多维看板的感觉」， 同时明确「不要改变现在的颜色」——所以**只借骨架，不借配色**： 下面这一整段用的仍是本页原来的浅色 + 蓝主色，没有一个色值来自参照物。 骨架三件套： ① .sa-status 顶部数据状态（数据日期 / 距今 / 口径 / 覆盖 / 最新一日合计） ② .sa-work > .sa-panel（左栏清单） + .sa-main（右栏） ③ .sa-main > .sa-bar（工具条） + .sa-grid > .sa-cell ×N ★ 第 18 轮把 ③ 整体换成了「.sa-mpanel（指标多选）+ .sa-sheets > .sa-sheet ×N （一店一张表）」，原来的 .sa-grid / .sa-cell / .sa-legend / .sa-mrow / .sa-plus 都随 DOM 一起删掉了。当前定义见文件末尾「第 18 轮」那一段。 ⚠ 两处容易翻车的地方，改的时候留意： - 左栏是 sticky 吸顶的，**自身可滚动**（max-height + overflow-y）， 这样右边的表格滚到哪，左栏的店铺列表都还在。 - 「网格列数 / --sa-cols」那套机制**第 18 轮已整体作废**（右侧不再有网格）， 别再照旧注释去改；现在右侧列数 = 勾选指标数 + 1，由 JS 决定，CSS 不参与。 ================================================================== */ /* ---- 通用小件 ---- */ #page-anSales .sa-flex { flex: 1 1 auto; min-width: 0; } #page-anSales .sa-sep { width: 1px; height: 16px; flex: none; background: #e8edf4; margin: 0 2px; } /* ---- ① 顶部数据状态 ---- */ #page-anSales .sa-status { margin-bottom: 16px; } #page-anSales .sa-strow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #page-anSales .sa-strow2 { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; gap: 26px; } #page-anSales .sa-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #cbd5e1; } #page-anSales .sa-dot.is-ok { background: #10b981; box-shadow: 0 0 0 3px #10b9811f; } #page-anSales .sa-dot.is-warn { background: #f59e0b; box-shadow: 0 0 0 3px #f59e0b1f; } #page-anSales .sa-stdate { font-size: 13.5px; font-weight: 650; color: #1e293b; font-variant-numeric: tabular-nums; } #page-anSales .sa-stsub { font-size: 11.5px; color: #94a3b8; font-variant-numeric: tabular-nums; } #page-anSales .sa-stnote { margin-top: 9px; font-size: 10.5px; line-height: 1.7; color: #b3bdcc; } #page-anSales .sa-kv { display: inline-flex; align-items: baseline; gap: 7px; } #page-anSales .sa-kv > i { font-style: normal; font-size: 11.5px; color: #94a3b8; } #page-anSales .sa-kv > b { font-size: 17px; font-weight: 680; color: #1e293b; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } #page-anSales .sa-kv .ec-delta { transform: translateY(-1px); } /* ---- ② 看板：左栏 + 右栏 ---- ★ 这块是**定高工作台**，不是普通两栏：左栏店铺列表从头排到尾， 右侧一店一张表（4 家 × 30 期）会很高 —— 让它们各自自然高会在右下方留一大片空白。 参照物就是这么做的（height: calc(100vh - Npx) + 两栏各自内部滚动），照搬： · 高度取 min(视口推导, 780px)：视口很高时不至于把工作台拉成一根长条； · 左栏自己滚（店铺再多也不影响布局）；表格区自己滚（加满列也不会撑破）。 ⚠ 表格区不能设 `overflow: hidden`：它靠 flex:1 + min-height:0 吃满剩余空间， 写死高度或裁掉溢出会在底部留白/把表切掉。 */ #page-anSales .sa-work { display: flex; align-items: stretch; gap: 14px; height: min(calc(100vh - 300px), 780px); min-height: 460px; } #page-anSales .sa-panel { flex: 0 0 268px; width: 268px; height: 100%; background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; overflow-y: auto; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } #page-anSales .sa-search { padding: 10px 10px 6px; position: sticky; top: 0; background: #fff; z-index: 2; border-radius: 12px 12px 0 0; } #page-anSales .sa-search input { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; padding: 6px 10px; font-size: 12px; color: #334155; outline: none; transition: border-color .12s, background .12s; } #page-anSales .sa-search input:focus { border-color: #93b4f5; background: #fff; box-shadow: 0 0 0 3px #2563eb14; } #page-anSales .sa-search input::placeholder { color: #b3bdcc; } #page-anSales .sa-tip { padding: 2px 12px 9px; font-size: 10px; line-height: 1.7; color: #aab4c2; } #page-anSales .sa-lists { padding: 0 6px 10px; } #page-anSales .sa-side-empty { padding: 18px 8px; text-align: center; font-size: 11.5px; color: #a8b4c7; } #page-anSales .sa-group { border-radius: 8px; } #page-anSales .sa-group + .sa-group { border-top: 1px solid #f1f5f9; padding-top: 4px; margin-top: 4px; } #page-anSales .sa-ghead { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 620; color: #4a5260; } #page-anSales .sa-ghead:hover { background: #f6f8fb; color: #1e293b; } /* ★ 左栏/指标列表的分组标题**不可折叠**（JS 里一律带 `is-static`）—— 第 17/18 轮那套折叠机（`.sa-group.is-fold` + `.sa-mgcaret` 旋转 + 指标多选面板的 `.sa-mgroup/.sa-mghead/.sa-mgrows`）已随各自 DOM 一起删掉。 现在整份样式表里不该再出现 `sa-mg` 前缀的类。 */ #page-anSales .sa-gname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-anSales .sa-gcount { margin-left: auto; flex: none; font-size: 10px; font-weight: 500; color: #94a3b8; background: #f1f5f9; border-radius: 20px; padding: 0 6px; line-height: 16px; } /* ★ 第 26 轮补齐：`.sa-rows` 是左栏指标分组内的行容器，但**从第 19 轮起就没有 对应规则** —— 第 25 轮类名自查里它落在「无样式类」清单里，当时只处理了 sa-report-x，把它漏了（那一版 missing 只打印、不参与 FAIL，所以没拦住）。 */ #page-anSales .sa-rows { display: flex; flex-direction: column; } #page-anSales .sa-main { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; flex-direction: column; } /* ---- ③ 工具条 ---- */ #page-anSales .sa-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 10px; background: #fff; border: 1px solid #e6e8ec; border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } #page-anSales .sa-bar-lab { font-size: 11px; color: #94a3b8; } #page-anSales .sa-bar .sa-tabbar { padding: 2px; } #page-anSales .sa-bar .sa-tab { padding: 3px 10px; font-size: 11px; } #page-anSales .sa-ge-big { font-size: 14px; font-weight: 650; color: #64748b; } #page-anSales .sa-ge-tip { margin-top: 10px; text-align: center; font-size: 11.5px; line-height: 2; color: #a8b4c7; } /* ================================================================== ★ 第 19 轮 · 销售分析改成「每店一张走势图」（#page-anSales） ------------------------------------------------------------------ 老板把第 18 轮的形态推翻了一半，原话： 「我要的是图表，左侧是指标不是店铺。右上角的 09-25 ~ 09-25 / 全部店铺 去掉。」 三个拍板（AskUserQuestion）： · 右侧形态 = 一个店铺一张走势图（4 家店 4 张），悬停出同环比 · 时间范围 = 跟着粒度走（日 近 30 天 / 周 近 26 周 / 月 近 12 个月 / 年 全部） · 左栏指标 = 单选（点一个，4 张图同时换成它） 所以这一轮把第 18 轮的「左栏店铺列表 + 右侧一店一表」换成了： · 左栏 .sa-panel-metrics > .sa-group > .sa-mrow ×23 指标列表（单选） · 右侧 .sa-bar（只剩粒度）+ .sa-charts > .sa-chart ×N 每店一张走势图 · 悬停 用 Chart.js 原生 tooltip（值 / 环比 / 同比 三行），第 18 轮那套 HTML 浮层（.sa-hover / .sa-tip-*）随「一店一表」一起删掉了 ⚠ 四条容易翻车的： ① 定高工作台（.sa-work，第 17 轮定的）沿用：**.sa-charts 不写死高度** —— 它靠 flex:1 + min-height:0 吃满剩余空间，写死就会在底部留白。 ② 图卡里的画布走**固定高度**（.sa-chart-b 190px），**不能**让卡片高度去 1fr —— 画布尺寸跟父级高度算、父级又跟画布变，用 1fr 会来回抖。 ③ 左栏 `.sa-mrow` 是 `