.wst-page { padding: 16px 20px 24px; } .wst-header { margin-bottom: 14px; } .wst-header .ant-typography { margin-bottom: 4px; } .wst-note { display: block; max-width: 1180px; margin-top: 8px; padding: 10px 14px; /* 页面顶部是深色渐变,直接放浅色小字会看不清,给口径说明一块浅底 */ background: var(--sycm-bg-container); border: 1px solid var(--sycm-border-color); border-radius: 8px; font-size: 12px; line-height: 1.75; } /* ============ 轮次状态条 ============ */ .wst-status { margin-bottom: 12px; } .wst-status__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wst-status__round { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wst-status__badge { padding: 1px 8px; border-radius: 4px; background: rgba(22, 119, 255, 0.12); color: #0958d9; font-size: 12px; font-weight: 600; line-height: 20px; } .wst-status__badge--idle { background: rgba(136, 135, 128, 0.14); color: var(--sycm-text-tertiary); } .wst-status__label { font-size: 13px; color: var(--sycm-text-primary); } .wst-status__window, .wst-status__time { font-size: 12px; color: var(--sycm-text-tertiary); } .wst-alert { margin-bottom: 12px; } /* ============ 统计卡 ============ */ /* 5 张卡(超时未出库 / 业务挂起 / 涉及仓库 / 最久未出库 / 合计金额) 用 grid 而不是 Row/Col:24 栅格除不尽 5,Row/Col 会把第 5 张挤到下一行。 */ .wst-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } @media (max-width: 1500px) { .wst-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .wst-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wst-stat { height: 100%; } /* 「业务挂起」卡可点开明细 */ .wst-stat--held { cursor: pointer; transition: box-shadow 0.2s; } .wst-stat--held:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .wst-stat__more { font-size: 12px; font-weight: 400; color: #1677ff; } /* 超时卡下面的「其中 N 单数据未同步」—— 订单表停更时的警示小字(2026-10-28) */ .wst-stat__warn { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #cf1322; cursor: help; } /* 停更告警里逐个源列出「最后同步时间 / 滞后多久」 */ .wst-alert__sources { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; } .wst-alert__source { font-size: 12px; color: rgba(0, 0, 0, 0.65); font-variant-numeric: tabular-nums; } /* 明细里的「内部单号 + 未同步标记」 */ .wst-detail__oid { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } .wst-detail__stale { margin-inline-end: 0; font-size: 11px; line-height: 16px; padding-inline: 5px; cursor: help; } /* ============ 主从两栏 ============ */ .wst-body { display: flex; align-items: flex-start; gap: 14px; } .wst-centers { flex: none; width: 264px; } .wst-centers__hint { font-size: 11px; } .wst-centers__list { margin: 0; padding: 0; list-style: none; } .wst-center { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; margin-bottom: 2px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 13px; text-align: left; color: var(--sycm-text-primary); cursor: pointer; transition: background 0.12s ease; } .wst-center:hover { background: var(--sycm-bg-subtle); } .wst-center.is-active { border-color: rgba(22, 119, 255, 0.45); background: rgba(22, 119, 255, 0.08); } .wst-center.is-empty .wst-center__name { color: var(--sycm-text-tertiary); } .wst-center.is-disabled { cursor: not-allowed; opacity: 0.6; } .wst-center__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .wst-center__badge { flex: none; min-width: 24px; padding: 0 6px; border-radius: 9px; background: rgba(136, 135, 128, 0.12); font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; color: var(--sycm-text-tertiary); font-variant-numeric: tabular-nums; } .wst-center__badge.is-warn { background: rgba(255, 77, 79, 0.16); color: #cf1322; } .wst-center__badge--none { font-weight: 400; } .wst-detail { flex: 1 1 auto; min-width: 0; } .wst-detail__scope { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--sycm-text-tertiary); } .wst-detail__clear { padding: 0; border: none; background: transparent; font-size: 12px; color: #1677ff; cursor: pointer; } .wst-detail__overdue { color: #cf1322; font-variant-numeric: tabular-nums; } /* 创建时间没补到、回退成付款时间时的提示色(带 * 号,tooltip 有说明) */ .wst-detail__fallback { color: var(--sycm-text-tertiary); font-style: italic; } .wst-foot { display: block; margin-top: 12px; font-size: 12px; color: var(--sycm-text-tertiary); } /* 窄屏:仓库列表改为两列网格,明细整行下移 */ @media (max-width: 1200px) { .wst-body { flex-direction: column; } .wst-centers { width: 100%; } .wst-centers__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; } } /* ── 钉钉通知(两轮核验完成后各推一次)───────────────────────────── */ .wst-notify__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wst-notify__label { flex: 0 0 88px; font-size: 13px; color: var(--sycm-text-secondary); } .wst-notify__last { padding: 8px 10px; border-radius: 6px; background: var(--sycm-fill-quaternary, rgba(0, 0, 0, 0.02)); font-size: 12px; } .wst-notify__error { margin-top: 4px; } .wst-notify__help { font-size: 12px; line-height: 1.8; color: var(--sycm-text-secondary); } .wst-notify__help code { padding: 0 4px; border-radius: 3px; background: var(--sycm-fill-quaternary, rgba(0, 0, 0, 0.04)); } .wst-notify__preview { padding: 10px 12px; border: 1px solid var(--sycm-border, rgba(0, 0, 0, 0.08)); border-radius: 8px; background: var(--sycm-fill-quaternary, rgba(0, 0, 0, 0.02)); font-size: 12px; line-height: 1.8; } .wst-notify__preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wst-notify__preview pre { margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--sycm-bg-container, #fff); white-space: pre-wrap; word-break: break-all; font-size: 12px; line-height: 1.7; /* 30 条明细大概 40 行,别把整个弹窗撑爆;内部滚动看全 */ max-height: 280px; overflow: auto; }