:root { font-family: 'DM Sans', 'Noto Sans SC', system-ui, sans-serif; color: #172033; background: #f5f7fa; font-synthesis: none; } * { box-sizing: border-box; } body { margin: 0; background: #f5f7fa; cursor: default; } .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, #f0f5ff, #f7f9fc); } .login-card { width: 100%; max-width: 430px; border-radius: 16px; box-shadow: 0 18px 60px rgba(22, 55, 110, .12); } .brand-title { margin: 0 !important; color: #172033; } .login-form { margin-top: 28px; } .login-error { margin: -3px 0 16px; } /* 「记住账号密码」：勾选框本身不用占一行 label 高度，收紧一点 */ .login-remember-row { margin-bottom: 12px; } .login-remember-row .ant-form-item-control-input { min-height: 0; } .login-note { display: block; text-align: center; font-size: 12px; line-height: 1.6; } /* 弹窗里的登录表单：整页那套 28px 顶距太松，收紧一点 */ .login-form.is-compact { margin-top: 16px; } .login-form.is-compact .ant-form-item { margin-bottom: 14px; } .relogin-hint { margin-bottom: 4px; } .relogin-modal .login-note { margin-top: 4px; } /* 应用外壳：整页锁死视口高度，页面本身不滚动 —— 顶部和左侧固定，只有内容区自己滚。 注意别给 body 加 overflow:hidden，登录页（.login-page）是独立的，内容多时要能滚。 */ .app-layout { height: 100vh; min-height: 0; overflow: hidden; } /* 右侧那一列（Header + Content）也锁高，否则 Content 的 overflow 不会生效 */ .app-layout > .ant-layout { height: 100%; min-height: 0; display: flex; flex-direction: column; } .app-sider { position: relative; z-index: 2; overflow: hidden; background: #fff !important; border-right: 1px solid #e9eef5; box-shadow: 2px 0 12px rgba(31, 52, 82, .035); } .app-sider .ant-layout-sider-children { display: flex; flex-direction: column; height: 100%; } .app-logo { height: 76px; flex: 0 0 76px; display: flex; align-items: center; gap: 11px; padding: 0 22px; color: #172033; border-bottom: 1px solid #f2f4f7; } .logo-mark { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #1677ff; border-radius: 9px; font-size: 19px; font-weight: 800; box-shadow: 0 6px 14px rgba(22, 119, 255, .22); } .logo-copy { min-width: 0; line-height: 1.1; } .logo-copy strong { display: block; font-size: 16px; letter-spacing: .5px; } .logo-copy small { display: block; margin-top: 5px; color: #9aa5b5; font-size: 9px; letter-spacing: 1.4px; } /* 菜单项多了在侧栏内部滚，logo 和底部按钮始终可见 */ .app-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 15px 12px; border-inline-end: 0 !important; background: transparent !important; } .app-menu .ant-menu-item { width: 100% !important; height: 44px; line-height: 44px; margin: 3px 0 !important; padding: 0 15px !important; color: #667085; border-radius: 8px; } .app-menu .ant-menu-item .anticon { min-width: 18px; font-size: 16px; } .app-menu .ant-menu-item:hover { color: #1677ff; background: #f0f6ff; } .app-menu .ant-menu-item-selected { color: #1677ff; background: #e8f2ff; font-weight: 600; } .app-menu .ant-menu-item-selected::after { display: none; } .app-menu .ant-menu-item-selected .anticon { color: #1677ff; } .app-menu .ant-badge { margin-left: 7px; } .app-menu .ant-badge-count { min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px; box-shadow: none; font-size: 10px; } .app-menu .ant-menu-sub { background: transparent !important; cursor: default; } .app-menu .ant-menu-submenu-title { height: 40px; line-height: 40px; margin: 4px 0 2px !important; color: #1d2939; font-weight: 600; font-size: 13px; border-radius: 8px; cursor: pointer; } .app-menu .ant-menu-submenu-title:hover { background: #f0f6ff; } .app-menu .ant-menu-submenu-title .anticon { min-width: 18px; font-size: 16px; } .app-menu .ant-menu-submenu .ant-menu-item { padding-left: 40px !important; height: 40px; line-height: 40px; font-size: 14px; cursor: pointer; } .app-menu .ant-menu-submenu .ant-menu-item .anticon { font-size: 15px; } .ant-layout-sider-collapsed .app-menu .ant-menu-submenu-title { padding: 0 !important; text-align: center; } .sider-bottom { flex: 0 0 auto; padding: 14px 12px 18px; border-top: 1px solid #f0f2f5; } /* 「最该做的一件事」浅蓝卡（设计稿 §2.1）：侧栏底部是行动入口，不是广告位。 文案里的数字来自真实库存（level !== 'ok' 的 SKU 数）。 */ .sider-cta { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; padding: 12px 13px; border-radius: var(--d-r-sm); background: var(--d-blue-soft); } .sider-cta b { font-size: 13px; font-weight: 800; letter-spacing: -.02em; color: #1E4E8C; } .sider-cta span { font-size: 11.5px; line-height: 1.55; color: #3F6EA8; } .sider-cta u { margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--d-blue); text-decoration: underline; cursor: pointer; } .sider-bottom .ant-btn { height: 38px; margin-top: 4px; color: #667085; text-align: left; border-radius: 7px; } .sider-bottom .ant-btn:hover { color: #1677ff; background: #f5f8fc; } .sider-bottom .ant-btn-dangerous:hover { color: #ff4d4f; background: #fff1f0; } .ant-layout-sider-collapsed .app-logo { justify-content: center; padding: 0; } .ant-layout-sider-collapsed .logo-copy, .ant-layout-sider-collapsed .sider-bottom .ant-btn > span:not(.anticon) { display: none; } .ant-layout-sider-collapsed .app-menu { padding-inline: 10px; } .ant-layout-sider-collapsed .app-menu .ant-menu-item { padding: 0 !important; text-align: center; } .ant-layout-sider-collapsed .app-menu .anticon { margin: 0; } .ant-layout-sider-collapsed .sider-bottom { padding: 12px 10px; } .ant-layout-sider-collapsed .sider-bottom .ant-btn { padding: 0; text-align: center; } /* 注意 line-height：antd 的 .ant-layout-header 默认是 height/line-height 都是 64px， 这里只改了 height，line-height 会继续往下继承。文字放在普通 div 里看不出来（单行 64px 仍然塞得进 72px 的 header），但一旦包成 flex 容器、文字变成会换行的块级 flex item， 就会变成「2 行 × 64px = 128px」把 header 撑破、跟下面重叠。所以这里必须显式收掉。 */ .app-header { height: 72px; flex: 0 0 72px; padding: 0 28px; background: #fff; border-bottom: 1px solid #edf0f5; display: flex; align-items: center; justify-content: space-between; line-height: 1.5; } .app-header h3 { margin: 3px 0 0 !important; } /* 内容区：吃掉剩余高度并自己滚，表格再各自限高，就不会把整页撑长 */ /* 内容区：吃掉剩余高度并自己滚，表格再各自限高，就不会把整页撑长。 宽度**不设上限** —— 订单表列多、宽屏下要给足横向空间（`width: 100%` 跟着外壳走， 表格自己的横向滚动会按需出现）。之前写死 max-width: 1800px，宽屏两边留白纯浪费。 */ .app-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; width: 100%; } /* 每个 tab 一个 pane：自己滚自己的，切回旧 tab 时滚动位置和页面状态都还在。 上下左右的内边距挪到 pane 上（外壳不滚了，padding 留在外壳会变成永远空着的一圈）。 */ .tab-pane { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; padding: 28px; } /* 外壳常驻滚动条，收细一点别抢视线 */ .app-content::-webkit-scrollbar, .tab-pane::-webkit-scrollbar, .app-menu::-webkit-scrollbar { width: 10px; height: 10px; } .app-content::-webkit-scrollbar-thumb, .tab-pane::-webkit-scrollbar-thumb, .app-menu::-webkit-scrollbar-thumb { background: #d3dae4; border: 2px solid transparent; background-clip: content-box; border-radius: 6px; } .app-content::-webkit-scrollbar-thumb:hover, .tab-pane::-webkit-scrollbar-thumb:hover, .app-menu::-webkit-scrollbar-thumb:hover { background: #b6c1d0; background-clip: content-box; } .app-content::-webkit-scrollbar-track, .tab-pane::-webkit-scrollbar-track, .app-menu::-webkit-scrollbar-track { background: transparent; } /* ── 多标签页：Header 下面那一排 tab ────────────────────────────────── */ .app-tabbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 20px 0; background: #fff; border-bottom: 1px solid #edf0f5; } /* tab 多了横向滚，滚动条压成 0 高（悬浮时才露出一条细的） */ .app-tabbar-scroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .app-tabbar-scroll::-webkit-scrollbar { height: 4px; } .app-tabbar-scroll::-webkit-scrollbar-thumb { background: #d3dae4; border-radius: 4px; } .app-tabbar-scroll::-webkit-scrollbar-track { background: transparent; } /* 页签 = 顶部圆角小卡：未激活全透明（只剩文字），悬停淡底色； 激活白底 + 左右描边 + 往下压 1px 盖过分隔线，看起来跟内容区「连」在一起 */ .app-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; background: transparent; color: rgba(0, 0, 0, .62); font-size: 13px; line-height: 1; cursor: pointer; user-select: none; white-space: nowrap; transition: color .18s, background .18s, border-color .18s, box-shadow .18s; } .app-tab:hover { color: #1677ff; background: #f5f8fd; } /* 激活态要一眼可辨：淡蓝底 + 蓝描边 + 通宽 3px 蓝底线 + 轻投影 */ .app-tab.is-active { color: #0958d9; background: #e8f3ff; border-color: #91caff; margin-bottom: -1px; font-weight: 600; box-shadow: 0 2px 8px rgba(22, 119, 255, .16); } /* 激活页签底部的蓝色短线（页签里的绝对定位，不跟分隔线打架） */ .app-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: #1677ff; } .app-tab-icon { display: inline-flex; align-items: center; font-size: 13px; color: rgba(0, 0, 0, .38); transition: color .18s; } .app-tab:hover .app-tab-icon, .app-tab.is-active .app-tab-icon { color: #1677ff; } .app-tab-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .app-tab-close { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; color: rgba(0, 0, 0, .4); font-size: 10px; opacity: .45; transition: opacity .15s, background .15s, color .15s; } .app-tab:hover .app-tab-close, .app-tab.is-active .app-tab-close { opacity: 1; } .app-tab-close:hover { background: rgba(0, 0, 0, .08); color: rgba(0, 0, 0, .85); } /* 页签上的刷新小按钮：跟 × 同款式，默认淡、悬停才显出来 */ .app-tab-refresh { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; color: rgba(0, 0, 0, .38); font-size: 10px; opacity: 0; transition: opacity .15s, background .15s, color .15s; } .app-tab:hover .app-tab-refresh, .app-tab.is-active .app-tab-refresh { opacity: 1; } .app-tab-refresh:hover { background: rgba(0, 0, 0, .08); color: rgba(0, 0, 0, .85); } /* 拖动换位：被拖的半透明，落点页签亮蓝框 */ .app-tab[draggable="true"] { cursor: grab; } .app-tab.is-drop-target { border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22, 119, 255, .25); } .app-tab.is-drop-target::before { content: ''; position: absolute; left: -4px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: #1677ff; } .app-tabbar-extra { flex: 0 0 auto; color: rgba(0, 0, 0, .45); } /* 单个 tab 崩了时的错误块（别让它把整站拖白） */ .pane-error { padding-top: 8px; } .pane-error p { margin: 0 0 8px; } .pane-error-detail { max-height: 220px; overflow: auto; margin: 8px 0; padding: 10px 12px; border-radius: 6px; background: #fff5f5; color: #a8071a; font-size: 12px; white-space: pre-wrap; word-break: break-all; } .page-stack { width: 100%; } /* page-stack 有两种实现：antd Space 版（间距靠 Space 自带 gap，子节点都包在 .ant-space-item 里）和 div 版（商品管理 / 新建系统商品 / 入库页，天生没有间距， 卡片会贴在一起）。这里给 div 版的相邻子块统一补 16px； 用 :not(.ant-space-item) 排除 Space 版，避免和它自带的间距叠加。 */ .page-stack > * + *:not(.ant-space-item) { margin-top: 16px; } .page-heading { display: flex; align-items: flex-start; justify-content: space-between; } .page-heading h3 { margin: 5px 0 !important; } .page-heading p { margin: 4px 0 0; } .stat-card { height: 132px; border: 0; overflow: hidden; } /* 白底黑字 + 彩色图标徽标（仿参考图：第一行图标+标题，下方大数字，再下方副标题） */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .stat-card { height: auto; min-height: 158px; border: 1px solid #f0f0f0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .04); border-radius: 10px; } .stat-card .ant-card-body { height: 100%; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; } .stat-card .stat-header { display: flex; align-items: center; gap: 8px; color: #595959; } .stat-card .stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; } .stat-card .stat-title { font-size: 14px; color: #262626; } /* 全局而非只在 .stat-card 内：表头（快递+包装）也会用到这个问号 */ .stat-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #f0f0f0; color: #8c8c8c; font-size: 11px; cursor: help; margin-left: 2px; } /* 「快递+包装」列的数字：虚线下划线提示可悬停看明细 */ .fulfillment-cell { border-bottom: 1px dashed #bfbfbf; cursor: help; } /* tabular-nums：数字等宽，滚动时千分位变化不会让整行左右跳动 */ .stat-card .ant-statistic-content { font-size: 32px; line-height: 1.1; color: #1f1f1f; font-weight: 600; font-variant-numeric: tabular-nums; } .stat-card .stat-sub { font-size: 12px; color: #8c8c8c; } /* 四色图标（浅色圆底 + 彩色图标） */ .stat-card.blue .stat-icon { background: #eaf1fb; color: #4a7fc0; } .stat-card.cyan .stat-icon { background: #e6f5f4; color: #3a9d96; } .stat-card.orange .stat-icon { background: #fbeede; color: #d98c45; } .stat-card.green .stat-icon { background: #e8f4ea; color: #5a9e63; } .stat-card.purple .stat-icon { background: #f0ecf8; color: #7c6bb0; } .content-card > .ant-card-head { min-height: 72px; } .sku-text { font-size: 11px; } .sku-thumb { flex: none; display: inline-flex; width: 34px; height: 34px; border-radius: 4px; overflow: hidden; background: #f5f5f5; cursor: zoom-in; } .sku-thumb .ant-image-img { object-fit: cover; } .sku-thumb .ant-image-mask { cursor: zoom-in; } .sku-thumb .ant-image-mask-info { font-size: 11px; } .bar-chart { height: 245px; display: flex; gap: 12px; align-items: flex-end; padding: 28px 12px 4px; border-bottom: 1px solid #f0f0f0; } .bar-column { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; font-size: 10px; } .bar-column > span { color: #8c8c8c; font-size: 10px; } /* ⚠️ 这几条是「发货统计 / 销售统计」页内图表的柱子，属于页面层 —— 但颜色统一走 公共层的 --d-blue（全站唯一强调色），别再留 #1677ff，否则同一个 App 里两种蓝。 */ .bar-fill { width: min(28px, 70%); min-height: 8px; background: linear-gradient(180deg, var(--d-blue-2, #93C5FD), var(--d-blue)); border-radius: 5px 5px 2px 2px; } /* 发货统计：按天趋势的天数可能远超 30 天，柱子给最小宽度后横向滚动，别挤成一条线 */ .bar-chart-scroll { overflow-x: auto; overflow-y: hidden; gap: 8px; } .bar-chart-scroll .bar-column { min-width: 36px; } .ship-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; } .ship-trend-title { font-size: 14px; color: #262626; } /* 排行表第一列：名次徽标 + 名称（名称过长省略，靠 title 看全） */ .rank-cell { display: flex; align-items: center; gap: 8px; min-width: 0; } .rank-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: #f0f0f0; color: #8c8c8c; font-size: 11px; font-variant-numeric: tabular-nums; } .rank-badge.rank-top { background: #e6f4ff; color: #1677ff; font-weight: 600; } .rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ship-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .ant-table-thead > tr > th, .ant-table-tbody > tr > td { font-size: 12px; } .ant-table-tbody > tr.store-row-active > td { background: #e8f2ff; } .ant-table-tbody > tr.store-row-total > td { background: #fafafa; font-weight: 600; } .ant-card { border-radius: 10px; } .ant-badge { line-height: 1; } .ant-badge-count { box-shadow: none; } .ant-statistic-content-prefix { margin-right: 7px; font-size: 19px; } /* 库存明细：SKU 可点击 + 同商品 SKU 弹窗 */ .sku-link { color: #1677ff; font-size: 12px; cursor: pointer; } .sku-link:hover { text-decoration: underline; } /* 分类并入商品列：跟在 SKU 后面，紧凑一点，别把商品列撑宽 */ .sku-class-tag { margin-left: 5px; margin-right: 0; padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 8px; } .sku-class-none { margin-left: 5px; font-size: 11px; color: #bfbfbf; } .sku-group-summary { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; font-size: 13px; color: #8c8c8c; } .sku-group-summary .ant-typography { color: #262626; } .ant-table-tbody > tr.sku-row-current > td { background: #e8f2ff; } /* 库存明细：在途 / 实际库存 / 可用库存 三列视觉区分 在途 = 还没到手的期望（蓝，弱化）；实际库存 = 实物基准（中性加粗）； 可用库存 = 真正能卖的（绿=正常 / 红=负值即超卖欠货）。 */ .stock-num { font-variant-numeric: tabular-nums; font-size: 12px; } .stock-arriving { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 9px; background: #e6f4ff; color: #0958d9; border: 1px solid #bae0ff; font-variant-numeric: tabular-nums; line-height: 18px; } .stock-arriving-zero { display: inline-block; color: #bfbfbf; font-variant-numeric: tabular-nums; } .stock-arriving-icon { font-size: 12px; opacity: .9; vertical-align: -1px; } .stock-actual { color: #262626; font-weight: 600; font-variant-numeric: tabular-nums; } /* 进货链接：不含税成本列。 等宽数字让同列小数点对齐，便于纵向扫读比价。 */ .cost-value { font-variant-numeric: tabular-nums; color: #262626; } .stock-available { font-weight: 600; font-variant-numeric: tabular-nums; } .stock-available-ok { color: #389e0d; } .stock-available-low { color: #d46b08; } /* 告急（可用库存 ≤ 1，含 0）和超卖（负数）共用一个红：都是「马上要处理」 */ .stock-available-critical { color: #cf1322; } .stock-available-negative { color: #cf1322; } /* 库存明细：每个 SKU 的每日销量迷你曲线（手写 SVG，见 app.js 的 DailySparkline）。 表头宽度按「合计数字 + 84px 曲线 + 间距」定的（COL_MIN_WIDTH_BY_KEY.dailySeries）。 */ .spark-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* 合计数字等宽 + 右对齐，纵向扫读时小数点能对齐 */ .spark-sum { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; color: #262626; } /* overflow:visible —— 末点那个 r=2 的小圆点圆心正好在右边界上，默认会被裁掉一半 */ .spark { display: block; flex: none; overflow: visible; cursor: crosshair; } .spark-line { fill: none; stroke: #1677ff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .spark-area { fill: rgba(22, 119, 255, .12); stroke: none; } .spark-dot { fill: #1677ff; } /* 透明命中区：SVG 只在有绘制内容的地方接鼠标事件，铺一块全尺寸透明 rect 才能整框响应 （`fill: transparent` 仍然是「有填充」，可命中；`fill: none` 就不行） */ .spark-hit { fill: transparent; } /* 鼠标停在哪个位置：竖虚线指位 + 那个点放大一号 */ .spark-guide { stroke: #bfbfbf; stroke-width: 1; stroke-dasharray: 2 2; } /* ── 销售趋势曲线（自绘 SVG，不引图表库；跟 .spark 同一套做法）────────────── */ .stchart { position: relative; width: 100%; /* 跟卡片标题之间留一道明确的间隔 —— 实测原来只差 -1px（几乎贴着） */ margin-top: 10px; } .stchart-svg { display: block; overflow: visible; } .stchart-grid { stroke: var(--d-line-2); stroke-width: 1; } .stchart-max { fill: var(--d-ink-3); font-size: 11px; font-variant-numeric: tabular-nums; } .stchart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .stchart-area { stroke: none; opacity: .10; } /* 圆点描白边：线穿过点时不会糊成一团 */ .stchart-dot { stroke: #fff; stroke-width: 1.5; } .stchart-dot.is-active { stroke: #fff; stroke-width: 2; } .stchart-guide { stroke: var(--d-line-2); stroke-width: 1; stroke-dasharray: 3 3; } .stchart-x { fill: var(--d-ink-3); font-size: 11px; text-anchor: middle; } .stchart-hit { fill: transparent; cursor: crosshair; } .stchart-tip { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border-radius: var(--d-r-sm); background: var(--d-ink); color: #fff; font-size: 11px; line-height: 1.45; white-space: nowrap; pointer-events: none; } .stchart-tip b { font-weight: 700; font-variant-numeric: tabular-nums; } .spark-dot.is-active { fill: #0958d9; } /* 热销 SKU（销售标签 = 热销）的曲线染橙红（#fa541c，火山色 6 号）：一屏几十条蓝线里， 卖得动的那几条自己跳出来。 ⚠️ 这几行**必须排在下面 .spark.is-flat 之前** —— 两者同时命中时灰线优先： 全 0 是「一件没卖」的结论，不许被橙色盖成「看着卖得动」。 */ .spark.is-hot .spark-line { stroke: #fa541c; } .spark.is-hot .spark-area { fill: rgba(250, 84, 28, .14); } .spark.is-hot .spark-dot { fill: #fa541c; } .spark.is-hot .spark-dot.is-active { fill: #d4380d; } /* 全 0（窗口内一件没卖）：整条线走灰色，一眼和「有销量」的蓝色区分开 */ .spark.is-flat .spark-line { stroke: #d9d9d9; } .spark.is-flat .spark-dot { fill: #d9d9d9; } /* 悬停提示：只报当前指的那一天（日期 + 件数），不列整段 —— 列一整段反而看不出鼠标指着哪天。 数字用浅蓝加粗：tooltip 底色是深灰，深蓝 #1677ff 压在上面读不清。 */ .spark-tip { display: flex; align-items: baseline; gap: 12px; } .spark-tip b { color: #69b1ff; font-size: 15px; font-variant-numeric: tabular-nums; } /* 手机卡片详情里的曲线：合计 + 曲线横排，合计等宽右对齐跟桌面列一个观感 */ .m-spark { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; } /* 库存明细：表头拖拽调宽手柄。 手柄浮在表头单元格右边缘，hover 时才明显（平时不干扰阅读）。 */ .col-head { position: relative; display: block; height: 100%; } /* 手柄向左右各外扩，保证列边界两侧 12px 内都能抓到，不用像素级对齐。 */ .col-resizer { position: absolute; top: -10px; right: -22px; width: 26px; height: calc(100% + 20px); min-height: 46px; cursor: col-resize; z-index: 4; touch-action: none; } .col-resizer::after { content: ''; position: absolute; top: 22%; right: 12px; width: 2px; height: 56%; background: transparent; border-radius: 1px; transition: background .15s; } .col-resizer:hover::after { background: #1677ff; } /* 表格限高（scroll.y）后表头会拆进 .ant-table-header，那里是 overflow:hidden， 上面 right:-22px 的外扩会被整块裁掉，看上去就像拖不动了。改成贴着单元格右边缘内侧， 可抓范围 16px 仍在列边界附近，hover 竖线也更靠近边界。 */ .ant-table-header .col-resizer { right: -2px; width: 16px; } .ant-table-header .col-resizer::after { right: 7px; } body.col-resizing { cursor: col-resize !important; user-select: none; } body.col-resizing .col-resizer::after { background: #1677ff; } /* 拖动调宽时不吃排序、不出文字选中、不要列拖拽的手型 */ body.col-resizing .ant-table-thead > tr > th { cursor: col-resize !important; } body.col-resizing * { user-select: none !important; } /* 库存明细：列显示配置面板（Popover 里的勾选列表）。 */ .col-cfg-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; } .col-cfg-count { font-size: 12px; font-weight: 400; color: var(--text-3, #8c8c8c); font-variant-numeric: tabular-nums; } .col-cfg-panel { width: 232px; } .col-cfg-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; } .col-cfg-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; } .col-cfg-item:hover { background: #f5f5f5; } .col-cfg-item.is-locked { cursor: default; opacity: .62; } .col-cfg-item.is-locked:hover { background: transparent; } /* 拖动排序：整条 label 都可拖，手柄只是「能拖」的提示。 draggable 的元素里点复选框有时会触发浏览器拖拽，给手柄加 grab 光标明确交互。 */ .col-cfg-drag { flex: none; display: inline-flex; align-items: center; color: #bfbfbf; cursor: grab; font-size: 12px; } .col-cfg-item:hover .col-cfg-drag { color: #8c8c8c; } .col-cfg-drag:active { cursor: grabbing; } .col-cfg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-cfg-lock { font-size: 11px; color: #8c8c8c; flex: none; } .col-cfg-actions { display: flex; align-items: center; gap: 4px; padding-top: 2px; } .col-cfg-actions .ant-btn-link { padding: 0 4px; height: auto; } .col-cfg-hint { font-size: 11px; color: #8c8c8c; line-height: 1.5; padding: 2px 6px 0; display: block; } /* 库存货值：占比用一条细进度条 + 百分比，比纯数字更直观。 */ .value-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0 4px; font-size: 13px; color: #595959; } .value-bar { position: relative; display: flex; align-items: center; gap: 8px; } .value-bar-fill { height: 8px; min-width: 2px; border-radius: 4px; background: linear-gradient(90deg, var(--d-blue), var(--d-blue-2, #93C5FD)); flex: none; max-width: 76px; } .value-bar-text { flex: none; font-variant-numeric: tabular-nums; color: #595959; } /* 库存货值 · 按店铺：合计行压一道底色 —— 明细里混着「未对应」这种非店铺行， 没有这道底色扫读时容易把两段加在一起（规范 §3.1：色块也要带文字冗余，行里本就写着「合计」）。 */ .ant-table-tbody tr.is-total > td { background: rgba(0, 0, 0, .035); font-weight: 600; } /* 手机端「按店铺」卡片底部的合计行（总额 · 在售/不在售），跟 .value-toolbar 一个观感 */ .value-total { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 2px 0; font-size: 12px; color: #595959; font-variant-numeric: tabular-nums; } /* 进货链接「显示已隐藏」开关：一行开关 + 文案；被隐藏的行走淡底 + 「不在库存」标记。 */ .stock-empty-state { padding: 48px 0; } .stock-filter-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #595959; cursor: pointer; white-space: nowrap; user-select: none; } .stock-filter-switch .ant-switch { flex: none; } .stock-filter-switch.is-disabled { cursor: not-allowed; color: rgba(0, 0, 0, 0.25); } .stock-filter-switch-label { font-variant-numeric: tabular-nums; } tr.purchase-row-hidden > td { background: #fafafa; } tr.purchase-row-hidden:hover > td { background: #f5f5f5; } .purchase-code-hidden { color: rgba(0, 0, 0, 0.45) !important; font-weight: 400 !important; } .purchase-hidden-tag.ant-tag { margin-left: 6px; padding: 0 5px; font-size: 11px; line-height: 17px; color: #8c8c8c; background: #f5f5f5; border-color: #e0e0e0; } /* 销售统计：日期快捷项 7 个，给左侧列表加个高度上限，免得把日历面板撑高。 */ .sales-range-presets .ant-picker-ranges { max-height: 268px; overflow-y: auto; } .sales-range-presets .ant-picker-ranges > li { padding: 4px 12px; } /* 手机上日期面板的预设行会被裁到视口外（预设是 inline 排开、整个下拉溢出但不可滚动）。 把预设改成多列换行，再让两个日历在窄屏上竖排，免得它们把预设往右边挤没。 */ @media (max-width: 480px) { .sales-range-presets { width: calc(100vw - 16px) !important; max-width: 360px; } .sales-range-presets .ant-picker-ranges { display: flex; flex-wrap: wrap; max-height: none; border-bottom: 1px solid #f0f0f0; padding: 4px 8px 6px; } .sales-range-presets .ant-picker-ranges > li { flex: 0 0 auto; margin-bottom: 2px; } .sales-range-presets .ant-picker-panels { display: flex; flex-direction: column; } .sales-range-presets .ant-picker-panel { border-left: 0 !important; } } /* 同商品 SKU 弹窗：整体高度锁在屏幕内，只有表格主体滚动，表头与首列固定。 */ .sku-group-modal .sku-group-summary { position: sticky; top: 0; z-index: 3; background: #fff; margin-bottom: 8px; padding: 4px 0; } .sku-group-modal .ant-table-body { overscroll-behavior: contain; } .sku-group-modal .ant-table-thead > tr > th { background: #fafafa; } .sku-group-modal .ant-table-cell-fix-left { box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.12); } /* 销售统计：更新时间 + 缓存标记 + 刷新按钮 */ .sales-updated { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; } .sales-updated .anticon { color: #8c8c8c; } .sales-cache-tag { margin-left: 2px; margin-right: 0; font-size: 11px; line-height: 16px; padding: 0 5px; } @media (max-width: 991px) { .tab-pane { padding: 20px; } } @media (max-width: 768px) { .tab-pane { padding: 16px; } /* 顶栏高度统一交给文件末尾「方向 04 公共层」那层管（桌面 54 / 手机 52）。 这里不再写 height/min-height —— 老代码写了 min-height:72px，会把新层压回去。 */ .app-header { padding: 0 14px; gap: 10px; } .app-header > .ant-space { gap: 8px !important; } /* 手机上标题栏只留当前页名，前缀和同步时间都收掉，否则会换行把 header 撑高 */ .header-prefix, .header-sync { display: none; } .page-heading { display: block; } .page-heading > .ant-tag { margin-top: 10px; } .content-card > .ant-card-head { height: auto; padding: 14px 16px; } /* 手机上卡片内边距从 24px 收到 16px，多出来的宽度留给内容 */ .content-card > .ant-card-body { padding: 14px 16px; } /* 手机上卡片标题和右上角工具栏改成上下两行。 注意 .ant-card-head-wrapper 是 .ant-card-head 的子元素、不是 .ant-card 的子元素， 所以不能用 `.content-card > .ant-card-head-wrapper`（写了也匹配不到，标题会被工具栏 挤成一条竖线）。同理 .ant-card-extra 默认是 float:right，要显式清掉才会换行。 另外别只圈 .content-card：库存页有张普通 .ant-card 把控件放在 **标题区** 里。 */ .app-content .ant-card-head > .ant-card-head-wrapper { display: block; } .app-content .ant-card-head > .ant-card-head-wrapper > .ant-card-extra { float: none; margin-left: 0; margin-top: 12px; } /* 标题区和工具栏里的控件（搜索框+下拉+标签+数字框，一屏放不下）允许换行， 否则会把整张卡片顶得比视口还宽、页面横向能拖。 */ .app-content .ant-card-head .ant-card-extra, .app-content .ant-card-head .ant-card-head-title, .app-content .ant-card-head .ant-card-extra .ant-space, .app-content .ant-card-head .ant-card-extra .ant-space-item, .app-content .ant-card-head .ant-card-head-title .ant-space, .app-content .ant-card-head .ant-card-head-title .ant-space-item { max-width: 100% !important; min-width: 0; } .app-content .ant-card-head .ant-space { flex-wrap: wrap !important; } .content-card > .ant-card-head .ant-input { width: calc(100vw - 160px) !important; } .content-card > .ant-card-head .ant-select { width: 120px !important; } /* 待入库：筛选框自己算宽度，别套用上面那条 calc(100vw - 160px)（会把 150px 的搜索框撑破） */ .inbound-page .content-card > .ant-card-head .ant-input { width: 100% !important; } .inbound-page .stat-card { min-height: 86px; } .inbound-page .stat-card .ant-card-body { padding: 10px 12px; gap: 2px; } .inbound-page .stat-card .ant-statistic-title { font-size: 12px; margin-bottom: 2px; } .inbound-page .stat-card .ant-statistic-content { font-size: 20px; } .inbound-card-actions .ant-btn { flex: 1 1 auto; } /* 出入库记录弹窗：手机上铺满可用宽度，别用 antd 默认的 520px */ .sku-record-modal { max-width: calc(100vw - 24px); margin: 12px auto; } .sku-record-modal .ant-modal-body { padding: 12px; } .sku-record-toolbar { align-items: flex-start; } } /* ── 手机端外壳：侧栏收进抽屉 ────────────────────────────────────────── 桌面是「整页锁死视口高度、只有内容区自己滚」，手机不能这么干：键盘弹出、 地址栏收起都会改视口高度，锁 100vh 会把内容裁掉。窄屏改成整页自然滚动。 */ .app-layout.is-narrow { height: auto; min-height: 100vh; overflow: visible; } .app-layout.is-narrow > .ant-layout { height: auto; min-height: 0; } /* 窄屏是整页自然滚动（不是外壳滚），所以 pane 也别锁自己的滚动条，不然内容会被裁掉 */ .app-layout.is-narrow .app-content, .app-layout.is-narrow .tab-pane { overflow: visible; } .app-layout.is-narrow .app-tabbar { padding: 8px 12px 0; } .app-layout.is-narrow .app-tab { height: 30px; font-size: 12px; padding-left: 10px; } /* 窄屏页签空间金贵：图标藏掉，文字 + × 就够 */ .app-layout.is-narrow .app-tab-icon { display: none; } .app-layout.is-narrow .app-tab-text { max-width: 110px; } /* 手机上没有 hover，刷新/关闭按钮常显（不然点不到） */ .app-layout.is-narrow .app-tab-refresh, .app-layout.is-narrow .app-tab-close { opacity: 1; } .app-header-title { display: flex; align-items: center; min-width: 0; white-space: nowrap; } .header-prefix, .header-sync { white-space: nowrap; } .nav-toggle { flex: 0 0 auto; margin-right: 4px; padding: 0 8px; font-size: 17px; } /* 抽屉里复用侧栏那套 logo / 菜单 / 底部按钮，只把高度分配改回 flex 即可 */ .app-nav-drawer .ant-drawer-body { display: flex; flex-direction: column; padding: 0; } .app-nav-drawer .ant-drawer-body .app-menu { flex: 1 1 auto; min-height: 0; } /* ── 入库合并页：快捷入库 / 待入库 两个页签 ─────────────────────────── */ .inbound-hub-tabs .ant-tabs-nav { margin-bottom: 16px; } /* 页签字号大一点，两个都是重页面，别让人看不清自己在哪一签 */ .inbound-hub-tabs .ant-tabs-tab { font-size: 15px; padding: 10px 4px; } /* ── 待入库：手机优先的卡片列表 ─────────────────────────────────────── ⚠️ 2026-09-20 迁移到设计变量（用户反馈「展开行的商品卡片样式太丑了」）： 这一整块原来全是硬编码的旧色（#fff / #e9eef5 / #1677ff / #ff4d4f / #8c93a0 / #cf1322）， 圆角 10px、还带一条 `box-shadow: 0 1px 3px rgba(16,40,80,.04)` 的自定义阴影 —— 跟方向 04 那套 token 完全不搭，跟别处的卡放一起很跳。 现在统一（跟 .scard / .skcard 一致）： · 底色 --d-surface、描边 --d-line-2、圆角 --d-r-md（16px） · 去掉自定义阴影（设计系统只有 --d-sh-1 / --d-sh-2 两级，这里不需要） · 弱文字 --d-ink-3、警示 --d-red-soft / --d-red-ink / --d-red ══════════════════════════════════════════════════════════════════════════ */ .inbound-cards { display: flex; flex-direction: column; gap: 10px; } .inbound-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--d-surface); border: 1px solid var(--d-line-2); border-radius: var(--d-r-md); } .inbound-card.is-selected { border-color: var(--d-blue); background: var(--d-blue-soft); } .inbound-card-head { display: flex; align-items: center; gap: 8px; } .inbound-card-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .inbound-card-title .ant-tag { margin: 0; } .inbound-card-amount { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; } .inbound-card-meta { display: flex; flex-wrap: wrap; gap: 6px; } .inbound-card-meta .ant-tag { margin: 0; } .inbound-card-sub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--d-ink-3); } .inbound-card-actions { display: flex; flex-wrap: wrap; } /* 行内按钮收敛成「明细 / 收货 / 一键入库 + ⋯」（2026-09-28）：⋯ 是下拉触发器， 手机上那条 `.ant-btn { flex: 1 1 auto }` 别把它拉成一根大宽条 —— 它本来就该这么窄。 */ .inbound-card-actions .ibd-more { flex: 0 0 auto; } /* ── 入库单运单号 + 物流轨迹（2026-09-28 用户要求「入库单加个运单号，然后实现跟踪 物流进度」）──────────────────────────────────────────────────────────────── 三处复用同一套样式：表格列、手机卡片、展开明细里都用 .wb-no 显示单号 —— 单号是**轨迹的入口**（点了弹轨迹），所以三处长得必须一模一样，用户才学得会。 */ .wb-col { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .wb-card-waybill { display: inline-flex; align-items: center; gap: 6px; } .wb-no { font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; border-bottom: 1px dashed transparent; } .wb-no:hover { color: #1677ff; border-bottom-color: #1677ff; } .wb-none { font-size: 12px; color: var(--d-ink-3); } /* 超出 2 条时的「+N」（表格列 / 手机卡片里都用它收尾） */ .wb-more { font-size: 12px; color: var(--d-ink-3); font-variant-numeric: tabular-nums; } /* 运单号编辑弹窗底部：「再加一条」+ 一行灰字说明 */ .wb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .wb-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .wb-detail-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 8px 10px; background: var(--d-line); border-radius: var(--d-r-sm, 6px); } .wb-detail-row .wb-no { font-weight: 600; } /* 运单号编辑弹窗里的行：单号 + 快递公司 + 备注 + 删除 */ .wb-edit-list { display: flex; flex-direction: column; gap: 10px; } .wb-edit-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } .wb-edit-row .wb-no-input { flex: 1 1 200px; min-width: 160px; } .wb-edit-row .wb-com { flex: 0 1 150px; min-width: 130px; } /* 寄件人手机后四位（中通 / 顺丰 / 跨越查轨迹要）：4 位数字而已，给窄一格， 手机上放不下时整行会 wrap，不会把运单号那格挤没。 */ .wb-edit-row .wb-tail { flex: 0 1 96px; min-width: 84px; } .wb-edit-row .wb-note { flex: 1 1 140px; min-width: 120px; } /* 轨迹时间轴：自己画（antd 没引 Timeline），左竖线 + 圆点，最新一条在最上面 */ .wb-trace-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .wb-trace-list { margin-top: 12px; max-height: 54vh; overflow: auto; padding: 4px 4px 4px 0; } .wb-trace-item { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--d-line-2); } .wb-trace-item:last-child { border-left-color: transparent; padding-bottom: 0; } .wb-trace-item::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--d-ink-4); border: 2px solid #fff; box-sizing: content-box; } .wb-trace-item.is-latest::before { background: #1677ff; } .wb-trace-time { font-size: 12px; color: var(--d-ink-3); font-variant-numeric: tabular-nums; } .wb-trace-text { font-size: 13px; line-height: 1.55; word-break: break-word; } .wb-trace-item.is-latest .wb-trace-text { font-weight: 600; } .wb-trace-item.is-latest .wb-trace-time { color: var(--d-ink-2); } /* 表头展开列那个「一键展开」小加号（2026-09-21 用户要求居中）： antd 把表头单元格定成 `text-align: left` + `padding: 12px 8px`，而行首那个同款图标 在单元格里是正中的 —— 结果表头这格就歪在左边了（实测左 9px / 右 24px）。 这里只把这一格改回居中，跟行首图标、跟「全选」那格对齐。 */ .inbound-page .ant-table-thead > tr > th.ant-table-row-expand-icon-cell { text-align: center; } /* 表头这格的字色继承表头的 --d-ink-3（弱化灰 #9CA3AF），而行首同款图标继承 td 的 --d-ink-2（正文灰 #6B7280）—— 同一个图标一深一浅，用户一眼就看出「不是同一个东西」。 图标里的 +/− 是 ::before/::after 画底色（currentColor），所以 color 一改就全改了。 */ .inbound-page .ant-table-thead > tr > th.ant-table-row-expand-icon-cell button.ant-table-row-expand-icon { color: var(--d-ink-2); } .inbound-detail { border-top: 1px dashed var(--d-line-2); padding-top: 12px; } /* 待入库展开行：一个商品一张卡片（原来桌面是表格、手机是行，统一成卡片）。 「缺」的整卡标红（红底 + 左侧红条），跟「没到货的排最前面」配合着看。 ⚠️ 只有**真的缺**（收过一部分、这几件没到）才标红。整单一件都没收过时是「待收」， 属于正常待办，不上红 —— 一屏十几张全红底，红色就不值钱了。 2026-09-21：卡宽 236 → 300，因为下面那行数字块要放 4 格（应收/已收/待收/单价）， 236 减去内边距只剩 212，4 格每格不到 50px，「¥128.00」会被省略号吃掉。 */ .inbound-detail-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .inbound-detail-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--d-line-2); border-radius: var(--d-r-md); background: var(--d-surface); } .inbound-detail-card.is-short { border-color: var(--d-red-soft); background: var(--d-red-soft); box-shadow: inset 3px 0 0 var(--d-red); } .inbound-detail-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; } .inbound-detail-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .inbound-detail-card-title .ship-code { font-size: 13px; font-weight: 600; } .inbound-detail-card-spec { font-size: 12px; color: var(--d-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── 数字块：标签小灰字在上、数字大号在下（待入库明细卡 + 收货弹窗 SKU 卡共用）── 原来这套只在手机端有，桌面端用的是 antd Tag 行：三个彩色胶囊（应收蓝 / 已收绿 / 缺红） 挤在一张卡里，又吵又分不出重点，数字还是 12px 的 Tag 字号。 2026-09-21 两端统一成这套（设计规范 §2.4：桌面和手机共用同一套单元格渲染器， 别抄两份，口径会漂）—— 只有字号分档，桌面 11/15，手机 12/16（见文件末尾媒体查询）。 */ .ibd-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ibd-nums.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ibd-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ibd-num-k { font-size: 11px; line-height: 1.3; color: var(--d-ink-3); white-space: nowrap; } .ibd-num-v { font-size: 15px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; } .ibd-num.is-red .ibd-num-v { color: var(--d-red-ink); } .ibd-num-v, .ibd-num-k { overflow: hidden; text-overflow: ellipsis; } /* 库位是文字（LOC-01）不是数字，占满一行、不跟数字抢格子 */ .ibd-loc { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 4px; font-size: 13px; font-weight: 600; color: var(--d-ink-2); font-variant-numeric: tabular-nums; word-break: break-all; } .ibd-loc .ibd-num-k { font-weight: 400; } .inbound-bulkbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 10px 12px; background: var(--d-blue-soft); border: 1px solid var(--d-blue-soft); border-radius: var(--d-r-md); } .inbound-edit-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; } /* 编辑弹窗里「加商品」的搜索框 */ .inbound-edit-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .inbound-edit-spec { color: var(--d-ink-3); font-size: 12px; } /* 入库单里的 SKU 行：缩略图 + 编码/规格并排。min-width:0 是让长编码能省略而不是撑破格子 */ .inbound-item-cell { display: flex; align-items: center; gap: 8px; } .inbound-item-text { min-width: 0; } .inbound-detail-sku { display: flex; align-items: center; gap: 8px; } .inbound-detail-sku .ship-code { font-weight: 600; } /* 收货弹窗在手机上把「本次实收 / 散件 / 库位」摊成两列，省得横着拖表格 */ .inbound-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } .inbound-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .inbound-field > span { color: var(--d-ink-3); font-size: 12px; } /* 创建入库单弹窗：类型/仓库/外部单号三个并排（窄屏两列自动换行），下面备注 + 商品区 */ .inbound-create-form { display: flex; flex-direction: column; gap: 12px; } .inbound-create-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; } .inbound-create-head .inbound-field:last-child { grid-column: auto; } .inbound-create-items { border-top: 1px dashed #e9eef5; padding-top: 10px; } .inbound-create-items .ant-empty { margin: 12px 0 4px; } /* 搜商品那行：左边提示「搜到 N 个规格 · 点一下加一个（可连点）」，右边给一个「全部加入（N）」兜底按钮 */ .inbound-search-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .inbound-search-head .ant-btn { padding: 0; height: auto; } /* 下拉项的点击区域：铺满整行，点哪儿都算「加入这一项」（点击处理挂在它身上， 见 app.js 里的说明 —— 不让 antd 处理这次点击，否则输入框会被改写、下拉会收起）。 */ .inbound-opt-label { display: block; width: 100%; cursor: pointer; } /* 下拉里已经加进单子的规格：文字后面挂个灰标，连点时不至于重复点 （点重复了只弹提示、不会加两行）。 ⚠️ 用 inline-block 紧跟文字，别用 float: right —— 下拉项的 `.ant-select-item-option-content` 带 `overflow: hidden` + `text-overflow: ellipsis`，浮到右边会被省略号逻辑吃掉。 */ .inbound-opt-added { display: inline-block; margin-left: 8px; padding: 0 5px; border-radius: 3px; background: #f0f0f0; color: rgba(0, 0, 0, .45); font-size: 11px; line-height: 16px; vertical-align: 1px; } /* 批量填数量 / 按成本价填进货价 */ .inbound-bulkfill { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 8px 10px; background: #fafafa; border: 1px solid #f0f0f0; border-radius: 6px; font-size: 13px; } .inbound-create-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } @media (max-width: 768px) { .inbound-create-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inbound-create-footer { flex-direction: column-reverse; align-items: stretch; } .inbound-create-footer > .ant-space { justify-content: flex-end; } } /* ── 欠货台账（部分入库里没到货的商品）───────────────────────────────── 行级标红 + 明细里「未入库」排最前面，都是为了「一单几十个 SKU 时， 缺哪几个能一眼看到」。清单按单分组，卡片头压一行关键信息。 */ /* 页签行到下面统计卡的间距由 .page-stack > * + * 统一给（16px），这里不再单独留 margin */ .inbound-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .inbound-tabs .ant-radio-group, .pill-tabs .ant-radio-group { display: flex; flex-wrap: wrap; gap: 6px; } .inbound-tabs-note { margin: 0; } /* ── 筛选胶囊（共用类 .pill-tabs）：入库页状态页签 + 销售趋势图的指标切换 ── （§3.4）─────────────────────── ⚠️ 2026-09-20 修（用户反馈「第一排的几个按钮样式没改，很不和谐」）： 这里是 antd 的 `Radio.Group optionType:'button'`，默认渲染成**连体矩形** —— 硬边框 + 直角 + 按钮之间一条分割线，跟设计系统的胶囊语言完全不搭。 外层 `.inbound-tabs` 只改了布局（flex + gap），**按钮本身一直没被覆盖过**， 所以看着像「忘了改」。 现在按 `.spill` 那套对齐：独立胶囊、无边框、未选浅灰底、选中浅蓝底 + 蓝字。 数字跟着 label 一起走，不用单独处理（它是同一个按钮里的文本）。 */ .pill-tabs .ant-radio-button-wrapper { height: 30px; line-height: 28px; padding: 0 12px; border: none !important; border-radius: var(--d-r-pill) !important; background: var(--d-panel); color: var(--d-ink-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; transition: background .15s, color .15s; } /* antd 给「非第一个」按钮加的左分割线（::before）—— 独立胶囊之间不要它 */ .pill-tabs .ant-radio-button-wrapper::before { display: none !important; } .pill-tabs .ant-radio-button-wrapper:hover { color: var(--d-blue); background: var(--d-blue-soft); } .pill-tabs .ant-radio-button-wrapper-checked, .pill-tabs .ant-radio-button-wrapper-checked:first-child { background: var(--d-blue-soft) !important; color: var(--d-blue) !important; border: none !important; box-shadow: none !important; } /* 键盘聚焦时给个可见轮廓（antd 默认那圈蓝框在胶囊上很难看） */ .pill-tabs .ant-radio-button-wrapper:focus-within { outline: 2px solid var(--d-blue-soft); outline-offset: 1px; } /* 进货月份选择：靠右，跟页签同一行 */ /* 进货月份：2026-09-18 从状态页签行挪到页内标题右侧，靠 .shead-right 收边所以不用再 margin-left:auto */ .inbound-month-pick { display: flex; align-items: center; gap: 6px; } /* 月度进货统计卡：销售统计页那套 .stat-card，收紧尺寸（标题/图标/数字都小一号） */ .stat-card.is-compact { min-height: 0; } .stat-card.is-compact .ant-card-body { padding: 10px 14px; gap: 3px; } .stat-card.is-compact .stat-title { font-size: 13px; } .stat-card.is-compact .stat-icon { width: 20px; height: 20px; font-size: 11px; } .stat-card.is-compact .ant-statistic-content { font-size: 20px; } .stat-card.is-compact .ant-statistic-content-value { font-weight: 600; } .inbound-short-row > td { background: #fff1f0 !important; } .inbound-short-row:hover > td { background: #ffe7e5 !important; } .inbound-short-row > td:first-child { box-shadow: inset 3px 0 0 #ff4d4f; } .inbound-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 12px; } .inbound-detail-head .ant-tag { margin: 0; } .inbound-detail-row.is-short { background: var(--d-red-soft); border-left: 3px solid var(--d-red); padding-left: 8px; border-radius: var(--d-r-sm); } .short-missing { color: #cf1322; font-weight: 600; font-variant-numeric: tabular-nums; } .short-banner { margin-bottom: 0; } .short-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .short-groups { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; } .short-card { border: 1px solid #ffccc7; border-radius: 8px; overflow: hidden; background: #fff; } .short-card.is-completed { border-color: #d9d9d9; background: #fafafa; } .short-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; background: #fff7f6; border-bottom: 1px solid #ffe7e5; } .short-card.is-completed .short-card-head { background: #f5f5f5; border-bottom-color: #eee; } .short-card-head .ship-code { font-weight: 600; } .short-items { display: flex; flex-direction: column; } .short-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #f4f6fa; } .short-item:last-child { border-bottom: 0; } .short-item-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .short-item-text { min-width: 0; } .short-item-spec { color: #8c8c8c; font-size: 12px; } .short-item-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .short-item-tags .ant-tag { margin: 0; } .short-item-controls { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; } /* 欠货标记 + 撤回：结清态（不补了 / 已到货收齐）会从「未结清」里消失，多给一个一键撤回按钮。 */ .short-mark-cell { display: flex; align-items: center; gap: 2px; } .short-mark-cell .ant-btn.short-undo { padding: 0 4px; height: 24px; } .short-settled-link { padding: 0; height: auto; font-size: 12px; } .short-confirm-list { max-height: 220px; overflow: auto; font-size: 12.5px; line-height: 1.9; } .short-confirm-list .ship-code { margin-right: 6px; } @media (max-width: 768px) { /* 页签在手机上会超宽：让它们自己横滚，别把整页顶宽；欠货汇总换到第二行显示 */ .inbound-tabs { flex-direction: column; align-items: flex-start; gap: 6px; } .inbound-tabs .ant-radio-group { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; } /* 月份选择在手机上不跟页签抢一行，自己占一行靠左 */ .inbound-month-pick { margin-left: 0; } .short-card-head { align-items: flex-start; } .short-item-controls { grid-template-columns: minmax(0, 1fr); } } /* 接口设置 → 多电脑数据同步：说明文字逐行排开 */ .sync-info { line-height: 1.9; } /* ── SKU 出入库记录弹窗 ─────────────────────────────────────────────── */ .sku-record-sku { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; } .sku-record-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; } .sku-record-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: #4b5563; } .sku-record-hint { display: flex; align-items: center; justify-content: center; padding: 48px 0; } /* 手机：一条流水一张卡，数量/结存/单据号一屏能读全，不用横着拖表格 */ .sku-record-cards { display: flex; flex-direction: column; gap: 8px; } .sku-record-card { padding: 10px 12px; border: 1px solid #e8edf5; border-radius: 10px; background: #fff; } .sku-record-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sku-record-card-head .ant-tag { margin: 0; } .sku-record-card-qty { font-size: 15px; font-variant-numeric: tabular-nums; } .sku-record-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; color: #4b5563; font-variant-numeric: tabular-nums; } .sku-record-card-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: #8c8c8c; word-break: break-all; } /* 店铺销售对比 → 推广费单元格：金额 + 铅笔按钮 */ .promo-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; } .promo-cell .ant-btn-text { padding: 0 4px; color: #1677ff; } /* 订单数 / 件数后面跟的「剔了多少赠品单」角标 */ .gift-trim { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; color: #722ed1; background: #f9f0ff; border: 1px solid #d3adf7; border-radius: 8px; cursor: help; vertical-align: 1px; } .gift-trim.is-warn { color: #d46b08; background: #fff7e6; border-color: #ffd591; } /* 刷单剔除标记：跟赠品单（紫）区分开，用品红。 */ .gift-trim.is-brush { color: #c41d7f; background: #fff0f6; border-color: #ffadd2; } /* 推广费按天录入弹窗：每天一行，列表长了在弹窗内部滚动 */ .promo-day-list { max-height: 46vh; overflow-y: auto; margin: 4px 0 12px; } .promo-day-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid #f0f0f0; } .promo-day-row:last-child { border-bottom: none; } .promo-day-date { font-variant-numeric: tabular-nums; color: #262626; } .promo-day-week { width: 32px; color: #8c8c8c; font-size: 12px; } .promo-day-row .ant-input-number { margin-left: auto; } .promo-day-sum { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #f0f0f0; color: #595959; } /* 区间合计的金额：原来是内联 style 写死 #1677ff（旧主色），改走公共层 token */ .promo-day-sum-num { color: var(--d-blue); font-variant-numeric: tabular-nums; } .promo-modal-footer { display: flex; align-items: center; justify-content: space-between; } /* ── 快捷入库（1688 → 优易 ERP）：原生 React 页面的布局样式 ───────────── */ .qe-page { display: flex; flex-direction: column; gap: 14px; } /* 页内标题自带 margin-bottom，flex gap 会叠加 → 归零，间距交给 gap（2026-09-18 设计稿改版） */ .qe-page > .shead { margin-bottom: 0; } .qe-loading { padding: 70px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } /* 步骤条：做成一条浅色卡片，和页面里其它卡片同一套语言 */ .qe-steps { background: var(--d-surface); border: 1px solid var(--d-line-2); border-radius: var(--d-r-md); padding: 18px 26px; box-shadow: var(--d-sh-1); } .qe-steps .ant-steps-item-title { font-size: 13.5px; font-weight: 700; color: var(--d-ink); } .qe-steps .ant-steps-item-description { font-size: 12px; } .qe-steps .ant-steps-item-icon { box-shadow: none; } /* 区块标题 */ .qe-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .qe-section-heading h2 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.025em; color: var(--d-ink); } .qe-section-heading p { margin: 5px 0 0; color: var(--d-ink-3); font-size: 12px; line-height: 1.65; max-width: 760px; } .qe-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qe-sync-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 7px 11px; border-radius: 8px; background: #f6faff; border: 1px solid #e2eefc; color: #5b6b82; font-size: 11.5px; line-height: 1.55; } .qe-sync-note .anticon { margin-top: 2px; color: #3b7ddd; } /* 导入文件：两块分组（每天要传 / 常驻资料） */ .qe-setup-body { display: flex; flex-direction: column; gap: 18px; } .qe-group { display: flex; flex-direction: column; gap: 12px; } .qe-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .qe-group-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #172033; } .qe-group-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: #1677ff; } .qe-group.is-compact .qe-group-title::before { background: #c7d0dc; } .qe-group.is-compact .qe-group-title { color: #667085; } .qe-group-hint { font-size: 12px; color: #98a2b3; } /* 每天要传：两张并排的主卡 */ .qe-upload-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 900px) { .qe-upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 常驻资料：三张紧凑卡 */ .qe-upload-grid.is-compact { gap: 12px; } @media (min-width: 700px) { .qe-upload-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1150px) { .qe-upload-grid.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 两列时第三张跨列，避免最后一行留空位 */ @media (min-width: 700px) and (max-width: 1149px) { .qe-upload-grid.is-compact > .qe-upload-card:last-child { grid-column: span 2; } } .qe-upload-card { height: 100%; border: 1px solid #eef1f6; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 40, 80, .035); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .qe-upload-card:hover { border-color: #cfe0f8; box-shadow: 0 8px 22px rgba(22, 119, 255, .10); transform: translateY(-2px); } .qe-upload-card .ant-card-body { height: 100%; display: flex; flex-direction: column; gap: 11px; padding: 18px; } .qe-upload-card.is-required { border-color: #cfe0f8; background: linear-gradient(180deg, #f7fbff, #fff 46%); } /* 常驻资料卡：整体弱化一档，别跟每天要传的抢注意力 */ .qe-upload-card.is-compact { background: #fcfdfe; } .qe-upload-card.is-compact .ant-card-body { gap: 8px; padding: 14px; } .qe-upload-card.is-compact .qe-upload-icon { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; } .qe-upload-card.is-compact h3 { font-size: 13.5px; } .qe-upload-card.is-compact p { font-size: 11.5px; line-height: 1.55; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .qe-upload-card.is-compact .qe-file-status { white-space: nowrap; overflow: hidden; } .qe-upload-card.is-compact .qe-file-status > span { -webkit-line-clamp: 1; } .qe-upload-top { display: flex; align-items: center; gap: 10px; min-width: 0; } .qe-upload-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .qe-upload-icon.blue { background: #eaf1fb; color: #3b7ddd; } .qe-upload-icon.cyan { background: #e6f5f4; color: #3a9d96; } .qe-upload-icon.orange { background: #fbeede; color: #d98c45; } .qe-upload-icon.green { background: #e8f4ea; color: #5a9e63; } .qe-upload-icon.purple { background: #f0ecf8; color: #7c6bb0; } .qe-upload-heading { min-width: 0; } .qe-upload-kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #98a2b3; } .qe-upload-card h3 { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: #172033; } .qe-upload-card p { margin: 0; font-size: 12.5px; line-height: 1.65; color: #8a94a6; flex: 1; } .qe-upload-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 2px; } /* 一键拉取行：日期 + 按钮并排，跟在「选择订单网页」按钮下面 */ .qe-pull-row { display: flex; align-items: center; gap: 8px; width: 100%; } .qe-pull-row .ant-picker { flex: 0 0 auto; } .qe-pull-row .ant-btn { flex: 1 1 auto; min-width: 0; } /* 文件状态：小圆点 + 两行截断 */ .qe-file-status { display: flex; align-items: flex-start; gap: 6px; width: 100%; font-size: 11.5px; line-height: 1.5; color: #98a2b3; min-width: 0; } .qe-file-status::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: #d0d5dd; } .qe-file-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .qe-file-status.ready { color: #5a9e63; } .qe-file-status.ready::before { background: #5a9e63; } .qe-file-status.error { color: #d9534f; } .qe-file-status.error::before { background: #d9534f; } /* 仓库 / 类型设置条：整页的最后一步，上下多留一点气 */ .qe-settings-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; padding: 16px 18px; background: #fff; border: 1px solid #eef1f6; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 40, 80, .035); } .qe-settings-row label { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: #667085; } .qe-settings-row .qe-settings-spacer { flex: 1 1 auto; } /* 工具栏 / 汇总标签 */ .qe-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .qe-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qe-pills .ant-tag { margin: 0; border-radius: 20px; padding: 2px 11px; font-size: 12px; } .qe-help { font-size: 12px; color: #98a2b3; line-height: 1.65; } .qe-sub-text { font-size: 11.5px; color: #98a2b3; margin-top: 2px; } /* 核对对应：每行「1688 订单规格 → 优易 ERP 规格」对比卡 */ .qe-match-list { display: flex; flex-direction: column; gap: 14px; } .qe-match-card { position: relative; overflow: hidden; border: 1px solid #eef1f6; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 40, 80, .035); } .qe-match-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #d0d5dd; } .qe-match-card.status-success::before { background: #52c41a; } .qe-match-card.status-error::before { background: #ff4d4f; } .qe-match-card.status-processing::before { background: #1677ff; } .qe-match-card .ant-card-body { padding: 14px 16px 14px 20px; } /* 已记忆的规格（`item.remembered` = 命中历史映射、自动套用）：整卡淡蓝底 + 蓝描边， 跟需要人工核对的「待确认」行一眼分开。⚠️ 别动左边那条 3px 状态色条 —— 它表示 已确认/异常/待确认，跟「是否已记忆」是两个维度，两者可以同时出现。 */ .qe-match-card.is-remembered { background: #f5f9ff; border-color: #cfe2ff; } .qe-match-card.is-remembered:hover { box-shadow: 0 3px 10px rgba(22, 119, 255, .10); } .qe-match-head-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qe-remembered-tag { margin: 0 !important; border-radius: 20px; font-size: 12px; background: #e6f4ff; border-color: #91caff; color: #0958d9; } .qe-match-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .qe-match-meta { font-size: 12px; color: #98a2b3; } .qe-match-meta b { color: #475467; font-weight: 600; } .qe-compare { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 158px; gap: 12px; align-items: stretch; } .qe-side { display: flex; flex-direction: column; min-width: 0; border: 1px solid #eef1f6; border-radius: 10px; background: #fcfdfe; } .qe-side.source { background: #fbfcfe; } .qe-side.target { background: #f6faff; border-color: #e2eefc; } .qe-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 13px; border-bottom: 1px solid #eef1f6; } .qe-side-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; color: #8a94a6; } .qe-side-head a { font-size: 11.5px; } .qe-side-body { flex: 1; display: flex; gap: 13px; padding: 13px; min-width: 0; } .qe-side-media { flex: none; } .qe-side-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; } .qe-spec-main { font-size: 14.5px; font-weight: 600; color: #172033; line-height: 1.4; word-break: break-all; } .qe-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; } .qe-detail { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .qe-detail-label { flex: none; font-size: 11.5px; color: #98a2b3; } .qe-detail-value { font-size: 12.5px; color: #33383f; word-break: break-all; min-width: 0; font-variant-numeric: tabular-nums; } .qe-detail-value.is-final { font-size: 13.5px; font-weight: 700; color: #1677ff; } .qe-detail-value.is-missing { font-weight: 600; color: #d9534f; } .qe-source-title { font-size: 11.5px; color: #98a2b3; line-height: 1.55; word-break: break-all; } .qe-arrow { display: flex; align-items: center; justify-content: center; color: #c7d0dc; font-size: 18px; } .qe-sku-code { font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 14px; font-weight: 700; color: #1677ff; word-break: break-all; } .qe-candidate-select { width: 100%; } .qe-target-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .qe-mini-tag { margin: 0 !important; font-size: 11px; line-height: 18px; border-radius: 20px; } .qe-target-hint { font-size: 11.5px; color: #98a2b3; line-height: 1.55; } /* 行操作区：与对比区分开，按钮等宽竖排 */ .qe-actions { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-left: 12px; border-left: 1px dashed #e6eaf2; } .qe-actions .ant-btn { width: 100%; } /* 统计卡（生成入库单 / 进货统计共用） */ .qe-export-stats { row-gap: 16px; } .qe-export-stat { height: 100%; border: 1px solid #eef1f6; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 40, 80, .035); } .qe-export-stat .ant-card-body { padding: 17px 18px; display: flex; flex-direction: column; gap: 5px; } .qe-export-stat .qe-stat-top { display: flex; align-items: center; gap: 8px; } .qe-export-stat .qe-stat-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } .qe-export-stat .qe-stat-label { font-size: 13px; color: #667085; } .qe-export-stat strong { font-size: 26px; font-weight: 700; color: #172033; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.2; } .qe-export-stat.blue .qe-stat-icon { background: #eaf1fb; color: #3b7ddd; } .qe-export-stat.cyan .qe-stat-icon { background: #e6f5f4; color: #3a9d96; } .qe-export-stat.orange .qe-stat-icon { background: #fbeede; color: #d98c45; } .qe-export-stat.green .qe-stat-icon { background: #e8f4ea; color: #5a9e63; } .qe-export-stat.purple .qe-stat-icon { background: #f0ecf8; color: #7c6bb0; } /* 生成入库单：操作条 */ .qe-export-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 15px 18px; background: #fff; border: 1px solid #eef1f6; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 40, 80, .035); } /* 图片 / 缩略图 */ .qe-thumb { display: inline-flex; flex: none; border-radius: 8px; overflow: hidden; background: #f5f7fa; cursor: zoom-in; } .qe-thumb .ant-image-img { object-fit: cover; } .qe-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden; padding: 4px; text-align: center; border: 1px dashed #dde3ec; border-radius: 8px; background: #f8fafc; color: #b0b8c4; font-size: 10.5px; line-height: 1.3; } .qe-image-placeholder-icon { font-size: 18px; color: #cbd3de; } /* 进货统计：按月柱状 */ .qe-month-bars { display: flex; flex-direction: column; gap: 7px; } .qe-month-row { display: grid; grid-template-columns: 54px 1fr 94px; align-items: center; gap: 12px; font-size: 12px; } .qe-month-row > span { color: #98a2b3; } .qe-month-row > strong { text-align: right; color: #475467; font-weight: 600; font-variant-numeric: tabular-nums; } .qe-month-track { height: 10px; background: #f2f4f8; border-radius: 6px; overflow: hidden; } .qe-month-track > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #9cc9ff, #1677ff); transition: width .3s ease; } .qe-month-row.is-current > span { color: #1677ff; font-weight: 700; } .qe-month-row.is-current > strong { color: #1677ff; } /* 商品编码查进货链接 */ .qe-lookup-row { display: flex; align-items: center; gap: 8px; } .qe-lookup-row .ant-input-affix-wrapper, .qe-lookup-row .ant-input { flex: 1; min-width: 0; } .qe-link-results { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .qe-link-result { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #eef1f6; border-radius: 10px; background: #fbfcfe; } .qe-link-result > span { flex: none; font-size: 12px; color: #475467; } .qe-link-result > code { flex: 1; min-width: 0; font-size: 11px; color: #98a2b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 进货统计里的普通卡片 */ .qe-panel { border: 1px solid #eef1f6; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 40, 80, .035); } .qe-panel > .ant-card-head { min-height: 52px; padding: 0 18px; border-bottom: 1px solid #f2f5f9; } .qe-panel > .ant-card-head .ant-card-head-title { font-size: 14px; font-weight: 600; color: #172033; } .qe-panel > .ant-card-head .ant-card-extra { font-size: 12.5px; color: #8a94a6; } .qe-panel > .ant-card-body { padding: 18px; } /* 映射库弹窗 */ .qe-mapping-list { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow: auto; padding-right: 4px; } .qe-mapping-row { border: 1px solid #eef1f6; border-radius: 12px; padding: 13px; background: #fcfdfe; } .qe-mapping-row .qe-compare { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); } .qe-mapping-edit { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e6eaf2; } .qe-mapping-edit .ant-select { flex: 1; min-width: 0; } @media (max-width: 1200px) { .qe-compare { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); } .qe-actions { flex-direction: row; flex-wrap: wrap; grid-column: 1 / -1; padding-left: 0; padding-top: 10px; border-left: 0; border-top: 1px dashed #e6eaf2; } .qe-actions .ant-btn { width: auto; } } @media (max-width: 991px) { .qe-compare, .qe-mapping-row .qe-compare { grid-template-columns: 1fr; } .qe-arrow { transform: rotate(90deg); } .qe-details { grid-template-columns: 1fr; } .qe-side-body { flex-direction: column; } } /* 销售额卡片 Tooltip：把「实付 + 平台优惠 = 应收」口径写清楚 */ .stat-tip { font-size: 12px; line-height: 1.8; } .stat-tip-formula { font-weight: 600; margin-bottom: 4px; } .stat-tip-total { margin-top: 2px; font-weight: 600; } .stat-tip-note { margin-top: 4px; opacity: .75; } /* 新建订单：整页 flex 纵排 + 顶部吸顶操作条 + 左右两栏，尽量一屏放得下 */ .order-page { display: flex; flex-direction: column; gap: 12px; width: 100%; } /* 页内标题自带 margin-bottom，flex gap 会叠加 → 归零（2026-09-18 设计稿改版） */ .order-page > .shead { margin-bottom: 0; } .order-page > .salert { margin-bottom: 0; } /* 吸顶汇总条：2026-09-18 按设计稿改成深色（标签灰 + 数字白 + 深灰次按钮）。 原来是白卡 + 浅描边，跳不出页面，扫一眼抓不到「几行 / 几件 / 多少钱」。 */ /* ⚠️ 必须带 .scard 一起选：.scard 的定义在文件更下方，同权重下会盖掉这里的 background。 */ .scard.order-actionbar { position: sticky; top: 0; z-index: 20; background: var(--d-ink); border-color: var(--d-ink); box-shadow: 0 10px 24px rgba(17, 24, 39, .18); } .order-actionbar > .order-actionbar-inner { padding: 13px 16px; } .order-actionbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .order-metrics { display: flex; align-items: center; gap: 20px; font-size: 12.5px; color: #6b7688; flex-wrap: wrap; } .order-metrics b { margin-left: 4px; font-size: 16px; color: #172033; font-variant-numeric: tabular-nums; } .order-actionbar .order-metrics { color: var(--d-ink-3); } .order-actionbar .order-metrics b { color: #fff; font-weight: 800; letter-spacing: -.02em; } /* 次按钮在深色条上要浅底浅字，否则整块发黑看不清 */ .order-actionbar .ant-btn:not(.ant-btn-primary) { background: #374151; border-color: #374151; color: #E5E7EB; } .order-actionbar .ant-btn:not(.ant-btn-primary):hover { background: #4B5563; border-color: #4B5563; color: #fff; } /* 「上一单已提交」那行也在深色条里，文字得跟着变浅 */ .order-actionbar .ant-typography { color: #D1D5DB; } .order-actionbar .order-result { color: #9CA3AF; } .order-actionbar .order-result .ant-typography { color: #fff; } .order-actionbar-btns { display: flex; align-items: center; gap: 8px; } .order-goods-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .order-empty-goods { padding: 14px; border: 1px dashed #e8edf5; border-radius: 8px; background: #fafbfd; color: #98a2b3; font-size: 12.5px; text-align: center; } /* 「默认带赠品」开关：靠右停在搜索框那一行，不额外占高度。 */ .order-gift-toggle { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: #6b7688; cursor: default; } .order-gift-toggle code { padding: 1px 5px; border-radius: 4px; background: #f0f3f8; color: #4b5567; font-family: inherit; } .order-sender-block { padding-top: 10px; border-top: 1px dashed #eef1f6; } .order-subblock { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eef1f6; } .order-sender-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .order-field-label { margin-bottom: 6px; font-size: 12.5px; color: #6b7688; line-height: 1.4; } .order-required { color: #ff4d4f; } .order-sender-addr { margin-top: 6px; font-size: 12.5px; color: #6b7688; line-height: 1.6; } .order-confirm > div { line-height: 1.9; word-break: break-all; } .order-result { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #f6ffed; border: 1px solid #d9f7be; color: #237804; font-size: 13px; } .order-result .ant-typography { color: #237804; } /* 寄件人快选：一行一条，选中那条描蓝边 */ .sender-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; } .sender-option { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid #e8edf5; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; } .sender-option:hover { border-color: #91caff; background: #f5faff; } .sender-option.is-active { border-color: #1677ff; background: #e6f4ff; } .sender-option .ant-radio-wrapper { margin-right: 0; } .sender-option-body { flex: 1; min-width: 0; } .sender-option-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.5; } .sender-option-head .ant-tag { margin: 0; } .sender-option-phone { font-size: 12.5px; color: #4b5563; font-variant-numeric: tabular-nums; } .sender-option .order-sender-addr { margin-top: 2px; } .sender-option-actions { display: flex; align-items: center; flex-shrink: 0; } .sender-option-actions .ant-btn { padding: 0 4px; height: 22px; font-size: 12.5px; } /* ══════════════════════════════════════════════════════════════════════ 手机端布局（≤767px）：核心页从「宽表缩到手机」改成「一屏一张卡」 ───────────────────────────────────────────────────────────────────── 桌面 18 列的库存表在 390px 屏上要横向拖 1868px，销售对比表 1536px， 本质是信息密度不匹配，不是 CSS 没调好。所以核心几页在窄屏换一套 专为手机写的结构（卡片 / 紧凑列表），表格只在桌面用。 ══════════════════════════════════════════════════════════════════════ */ /* ⚠️ 根因修复（不限宽度）：.page-stack 是 antd 的 Space(direction=vertical)， 它的子项 .ant-space-item 默认 min-width:auto，宽度会被内容的 min-content 顶开 —— 里面放一张 scroll.x=1860 的表，子项就真的撑到 1860，把整个 body 顶宽、整页能左右拖 （销售统计实测溢出 121px）。锁住 min-width / max-width 后，表格交给自己的 .ant-table-content 横向滚动，页面本身不再溢出。 */ .page-stack > .ant-space-item { min-width: 0; max-width: 100%; } /* ── 通用的手机列表卡片（库存明细 / 总览 / 销售 / 发货 共用这套词汇） ── */ .m-list { display: flex; flex-direction: column; gap: 10px; } .m-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid #e9eef5; border-radius: 10px; } .m-row.is-open { border-color: #91caff; } .m-row.is-muted { background: #fafafa; } .m-row.is-total { background: #fafafa; border-color: #dbe3ef; } .m-row-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .m-row-title { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35; } .m-row-title.is-tap { cursor: pointer; } .m-row-title .m-row-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #9aa5b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-row-right { flex: 0 0 auto; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; } .m-row-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding-top: 6px; border-top: 1px dashed #eef1f6; } .m-row-foot .ant-btn { padding: 0 6px; } .m-row-note { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; color: #8c93a0; } .m-row-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .m-row-tags .ant-tag { margin: 0; } .m-row-rows { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: #8c93a0; } .m-metrics { display: grid; gap: 6px; padding: 8px 6px; background: #f7f9fc; border-radius: 8px; } .m-metrics.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-metrics.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .m-metrics.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .m-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; } .m-metric-label { font-size: 11px; color: #8c93a0; white-space: nowrap; } .m-metric-sub { margin-left: 4px; font-size: 10px; font-weight: 400; color: #8c93a0; } .m-metric-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .m-detail { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #fafbfd; border-radius: 8px; } .m-detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; } .m-detail-label { color: #8c93a0; } .m-detail-value { font-variant-numeric: tabular-nums; text-align: right; } .m-list-page { display: flex; justify-content: center; padding: 14px 0 2px; } @media (max-width: 767px) { /* ── 统计卡：2 列紧凑网格 ── 原来 .stat-grid 是 auto-fit minmax(200px)，390px 屏下退化成 1 列， 5 张卡竖排 = 一页 2886px，要滚 3 屏才看到表。 */ .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat-card { min-height: 100px; border-radius: 9px; } .stat-card .ant-card-body { padding: 12px 12px 10px; gap: 3px; } .stat-card .stat-header { gap: 6px; } .stat-card .stat-title { font-size: 12px; } .stat-card .stat-icon { width: 20px; height: 20px; font-size: 12px; } .stat-card .ant-statistic-title { font-size: 12px; margin-bottom: 0; } .stat-card .ant-statistic-content { font-size: 20px; } .stat-card .ant-statistic-content-prefix { margin-right: 4px; font-size: 13px; } .stat-card .stat-sub { font-size: 11px; line-height: 1.45; } /* 待入库的卡本来就矮，别被上面这套抬高 */ .inbound-page .stat-card { min-height: 86px; } /* 「库存货值」那 4 张普通卡（没有 .stat-card 类）也得缩，否则两位数的金额会顶破两列 */ .stat-mini .ant-card-body { padding: 10px 12px; } .stat-mini .ant-statistic-title { font-size: 12px; margin-bottom: 2px; } .stat-mini .ant-statistic-content { font-size: 17px; } .stat-mini .ant-statistic-content-prefix { margin-right: 3px; font-size: 12px; } .stat-mini .ant-typography { font-size: 11px; line-height: 1.4; } /* ── 触控目标：小按钮 / 分页 / 数字框在手机上放到 32px 以上，手指点得准 ── */ .ant-btn-sm { height: 32px; min-width: 32px; padding: 0 10px; } .ant-btn.ant-btn-icon-only.ant-btn-sm { width: 32px; padding: 0; } .ant-btn.ant-btn-sm.ant-btn-link { padding: 0 6px; } .ant-pagination-item, .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link { min-width: 32px; height: 32px; line-height: 30px; } .ant-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; } .ant-pagination-options { margin-left: 0; } .ant-pagination-options .ant-select-selector { height: 32px !important; } .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector { height: 32px; } .ant-input-number-sm { height: 32px; } /* 售完不补开关在 antd 里是