yhm-shop-data/store-ops/frontend/report.css

/* 门店检测工作台 —— 单店分析报告（A4 可打印）
   独立样式表：屏幕上是弹层，打印/另存为 PDF 时只留报告正文。
   下载成单文件 HTML 时本文件会被整段内联，所以这里不要引用外部资源。 */

.rp{
  --rp-ink:#211a10; --rp-ink2:#5c5241; --rp-ink3:#93876f; --rp-line:#e8dcc0;
  --rp-line2:#f2e9d6; --rp-gold:#c8952c; --rp-gold-bg:#fbf4e2; --rp-brown:#a4761c;
  --rp-red:#b5563a; --rp-amber:#cd8a35; --rp-green:#5f8d72;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--rp-ink); font-size:12.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ================= 屏幕：弹层 ================= */
.rpwrap{position:fixed;inset:0;z-index:60;display:none;overflow:auto;
  background:rgba(38,29,14,.42);backdrop-filter:blur(3px);padding:32px 20px 48px}
.rpwrap.on{display:block}
.rpcard{width:min(880px,100%);margin:0 auto;background:#fff;border-radius:14px;
  box-shadow:0 24px 70px rgba(60,44,12,.28);overflow:hidden;animation:rpin .22s ease}
@keyframes rpin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.rptoolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;
  padding:12px 20px;background:#fdf8ee;border-bottom:1px solid var(--rp-line)}
.rptoolbar .rpname{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--rp-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rptoolbar .rpsub{font-size:11px;color:var(--rp-ink3);font-weight:400;margin-left:8px}
.rpbtn{font-family:inherit;font-size:12px;padding:7px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--rp-line);background:#fff;color:var(--rp-ink2);transition:.15s}
.rpbtn:hover{border-color:var(--rp-gold);color:var(--rp-brown)}
.rpbtn.primary{background:linear-gradient(135deg,#eab94e,#d29a29 48%,#b57e15);color:#fff;
  border-color:transparent;font-weight:600;box-shadow:0 3px 10px rgba(180,126,21,.26),
  inset 0 1px 0 rgba(255,255,255,.32)}
.rpbtn.primary:hover{filter:brightness(1.04)}
.rpbtn.x{width:32px;padding:7px 0;text-align:center;font-size:15px;line-height:1;color:var(--rp-ink3)}

/* ================= 报告正文（屏幕 + 打印 + 下载共用） ================= */
.rpdoc{padding:28px 40px 32px;background:#fff}
/* 报告头：显式 block，避免被 style.css 里的全局 header{display:flex} 带跑偏 */
.rphead{display:block;padding-bottom:16px;border-bottom:1.5px solid var(--rp-gold);position:relative}
.rphead::after{display:none}
.rphead .rpbrand{display:inline-block;background:linear-gradient(135deg,#eab94e,#c8952c 55%,#a4761c);
  color:#fff;font-size:10.5px;letter-spacing:1px;padding:3px 10px;border-radius:5px;font-weight:600}
.rphead h1{font-size:20px;font-weight:600;letter-spacing:-.2px;margin:9px 0 6px;line-height:1.3}
.rpmeta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11px;color:var(--rp-ink3);letter-spacing:.1px}
.rpmeta b{font-weight:500;color:var(--rp-ink2)}

/* 结论摘要 */
.rpsum{display:flex;flex-wrap:wrap;gap:10px 18px;margin:16px 0 2px;padding:13px 17px;
  background:var(--rp-gold-bg);border:1px solid #f0e2c2;border-radius:10px}
.rpsum .rplead{flex:0 0 auto;min-width:132px}
.rpsum .rplead .k{font-size:11px;color:var(--rp-ink3);letter-spacing:.3px}
.rpsum .rplead .v{font-size:26px;font-weight:600;line-height:1.2;margin:2px 0 4px;color:var(--rp-ink)}
.rpsum .rplead .v .u{font-size:12px;font-weight:400;color:var(--rp-ink3);margin-left:6px}
.rpsev{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;font-weight:600}
.rpsev.s3{background:#f7e0d7;color:#93401f}
.rpsev.s2{background:#fae8d4;color:#9a5a1c}
.rpsev.s1{background:#f8efd6;color:#8a6a2f}
.rpsev.n{background:#efeade;color:#6b6150}
.rpsev.s0{background:#e9f1ea;color:#4a7458}
.rpstats{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:flex-end;flex:1 1 auto}
.rpstats div{text-align:center;min-width:62px}
.rpstats b{display:block;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--rp-ink)}
.rpstats span{font-size:10.5px;color:var(--rp-ink3)}

/* 章节 */
.rpdoc h2{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  margin:24px 0 12px;padding-left:11px;position:relative;letter-spacing:.1px;
  break-after:avoid;page-break-after:avoid;break-inside:avoid}
.rpdoc h2::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;
  border-radius:2px;background:var(--rp-gold)}
.rpdoc h2 .n{color:var(--rp-gold);font-weight:600}

/* 指标条 */
.rpmetrics{display:grid;grid-template-columns:1fr 1fr;gap:2px 30px}
.rpbar{margin:7px 0;break-inside:avoid}
.rpbar .lab{display:flex;justify-content:space-between;font-size:11px;color:var(--rp-ink3)}
.rpbar .lab b{font-weight:500;color:var(--rp-ink2);font-variant-numeric:tabular-nums}
.rpbar .track{position:relative;height:6px;background:#f5ecda;border-radius:4px;margin-top:6px}
.rpbar .fill{height:100%;border-radius:4px}
.rpbar .mk{position:absolute;top:-3px;width:1.5px;height:12px;background:#c6b48c}
.rpbar .mk.t{background:var(--rp-green)}
.rplegend{margin-top:12px;font-size:10.5px;color:var(--rp-ink3)}
.rplegend i{display:inline-block;width:1.5px;height:10px;background:#c6b48c;margin:0 4px 0 12px;vertical-align:-1px}
.rplegend i.t{background:var(--rp-green)}

/* 风险条目（表格样式自带全，不依赖 style.css，保证下载的单文件 HTML 长得一样） */
.rpflags{width:100%;border-collapse:collapse;font-size:11.5px}
.rpflags th{text-align:left;font-weight:500;font-size:10.5px;color:#8a7548;letter-spacing:.3px;
  padding:6px 0 7px;background:#fdf9ee;border-bottom:1px solid #e8d8b2;border-radius:0;white-space:nowrap}
.rpflags th:first-child{padding-left:2px}
.rpflags th:last-child{padding-left:12px}
.rpflags td{padding:7px 0;border-bottom:1px solid var(--rp-line2);vertical-align:top}
.rpflags tr:last-child td{border-bottom:0}
.rpflags td.no{width:26px;color:var(--rp-ink3);font-variant-numeric:tabular-nums}
.rpflags td.act{color:var(--rp-ink2);width:44%;padding-left:12px}
.rpdx{margin:0 0 11px;padding:10px 13px;background:#fdfaf3;border-left:3px solid var(--rp-gold);
  border-radius:0 8px 8px 0;font-size:11.5px;line-height:1.7;color:var(--rp-ink2)}
.rpflag{display:inline-block;font-size:9.5px;color:#93401f;background:#f7e0d7;
  padding:1px 6px;border-radius:4px;margin-left:7px;vertical-align:1px;font-weight:600}
.rptag{display:inline-block;padding:1px 7px;border-radius:5px;font-size:10.5px}
.rptag.R3{background:#f7e0d7;color:#93401f}
.rptag.R2{background:#fae8d4;color:#9a5a1c}
.rptag.R1{background:#f8efd6;color:#8a6a2f}
.rptag.B{background:#f0e6d0;color:#5f4b28}
.rptag.T{background:#efeade;color:#6b6150}

/* 数据小卡 */
.rpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rpgrid div{padding:9px 11px;background:#fdfaf3;border:1px solid var(--rp-line2);border-radius:8px}
.rpgrid .k{font-size:10.5px;color:var(--rp-ink3);letter-spacing:.2px}
.rpgrid .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.rpgrid .v small{font-size:10.5px;font-weight:400;color:var(--rp-ink3);margin-left:3px}

/* 洞察 / 动作 */
.rpol{padding-left:0;margin:0}
.rpol li{list-style:none;position:relative;padding:2px 0 6px 24px;font-size:11.5px;line-height:1.75;
  color:var(--rp-ink2);break-inside:avoid}
.rpol li .idx{position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
  background:var(--rp-gold-bg);color:var(--rp-brown);font-size:10px;font-weight:600;
  text-align:center;line-height:17px;font-variant-numeric:tabular-nums}
.rpacts{margin:0;padding:0;background:#fdfaf3;border:1px solid var(--rp-line2);
  border-radius:9px;padding:13px 16px}
.rpacts li{list-style:none;position:relative;padding:3px 0 8px 24px;font-size:11.5px;line-height:1.75;
  color:var(--rp-ink2);break-inside:avoid}
.rpacts li:last-child{padding-bottom:2px}
.rpacts li .ic{position:absolute;left:0;top:3px;font-size:11px;color:var(--rp-green)}
.rpmuted{color:var(--rp-ink3);font-size:11.5px}
.rpfoot{margin-top:28px;padding-top:12px;border-top:1px solid var(--rp-line2);
  font-size:10px;color:var(--rp-ink3);line-height:1.8;letter-spacing:.1px}

/* ================= 打印 / 另存为 PDF ================= */
@page{size:A4;margin:14mm}
@media print{
  html,body{background:#fff !important}
  body.rp-on .wrap,
  body.rp-on .rail,
  body.rp-on .overlay,
  body.rp-on .drawer,
  body.rp-on .sidepanel,
  body.rp-on .toast,
  body.rp-on .pvwrap,
  body.rp-on .rptoolbar{display:none !important}
  body.rp-on .rpwrap{position:static !important;inset:auto;overflow:visible;
    background:#fff !important;padding:0;backdrop-filter:none;display:block !important}
  .rpcard{width:auto;max-width:none;box-shadow:none;border-radius:0;margin:0;animation:none}
  .rpdoc{padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rpdoc h2{margin-top:16px}
  .rpdoc h2 + *{break-before:avoid;page-break-before:avoid}
  .rpsum{margin-top:12px}
  .rpmetrics,.rpgrid{break-inside:avoid}
}

/* ================= 窄屏（手机上看报告） ================= */
@media (max-width:640px){
  .rpwrap{padding:14px 10px 30px}
  .rpdoc{padding:22px 18px 26px}
  .rphead h1{font-size:18px}
  .rpmetrics{grid-template-columns:1fr}
  .rpgrid{grid-template-columns:1fr 1fr}
  .rpflags td.act{width:auto}
  .rptoolbar{padding:10px 12px;flex-wrap:wrap}
  .rptoolbar .rpname{flex:1 0 100%;margin-bottom:4px}
}