/* ========================================================================== 管理后台与登录 (Admin Portal & Auth Layout) ========================================================================== */ /* ===== 登录页:工作台入口布局 ===== */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: linear-gradient(135deg, rgba(255, 106, 0, 0.055), transparent 30%), linear-gradient(315deg, rgba(31, 41, 55, 0.045), transparent 38%), #f5f7fb; } .auth-shell { width: min(940px, 100%); min-height: 560px; display: grid; grid-template-columns: minmax(300px, 0.84fr) minmax(420px, 1fr); overflow: hidden; border: 1px solid rgba(226, 232, 240, 0.86); border-radius: 18px; background: #fff; box-shadow: 0 28px 72px rgba(15, 23, 42, 0.12); } .auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 40px; color: #f9fafb; background: radial-gradient(circle at 100% 0%, rgba(255, 106, 0, 0.28), transparent 34%), linear-gradient(160deg, #211816 0%, #171717 100%); overflow: hidden; } .auth-brand::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--theme-primary), #ffb45a); } .auth-brand::after { content: ''; position: absolute; right: 28px; bottom: 28px; width: 108px; height: 108px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; transform: rotate(12deg); } .auth-brand-top, .auth-brand-features, .auth-brand-footer { position: relative; z-index: 1; } .auth-brand-logo { display: flex; align-items: center; gap: 12px; } .auth-brand-logo .auth-logo-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--theme-primary); color: #fff; font-size: 21px; box-shadow: 0 14px 30px rgba(255, 106, 0, 0.26); } .auth-brand-logo strong, .auth-brand-logo div > span { display: block; } .auth-brand-logo strong { color: #fff; font-size: 18px; line-height: 1.2; } .auth-brand-logo div > span { margin-top: 3px; color: rgba(249, 250, 251, 0.58); font-size: 12px; line-height: 1.2; } .auth-brand-body { max-width: 320px; margin-top: 58px; } .auth-brand-kicker { display: inline-flex; align-items: center; min-height: 26px; margin-bottom: 18px; padding: 0 10px; border: 1px solid rgba(255, 106, 0, 0.36); border-radius: 999px; color: #ffbd85; font-size: 12px; font-weight: 700; } .auth-brand-body h2 { margin: 0 0 16px; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.28; } .auth-brand-body p { margin: 0; color: rgba(249, 250, 251, 0.68); font-size: 14px; line-height: 1.8; } .auth-brand-features { display: grid; gap: 12px; } .auth-brand-feature { display: flex; align-items: flex-start; gap: 12px; min-height: 74px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.045); } .auth-brand-feature .auth-feature-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 106, 0, 0.16); color: #ffb45a; font-size: 16px; } .auth-brand-feature-text strong { display: block; margin-bottom: 4px; color: #fff; font-size: 14px; } .auth-brand-feature-text span { color: rgba(249, 250, 251, 0.58); font-size: 12px; line-height: 1.55; } .auth-brand-footer { color: rgba(249, 250, 251, 0.42); font-size: 12px; } .auth-form-side { display: flex; align-items: center; justify-content: center; padding: 56px 52px; background: #fff; } .auth-form-card { width: min(410px, 100%); } .auth-form-header { margin: 22px 0 22px; } .auth-form-header h1 { margin: 0 0 8px; color: #111827; font-size: 25px; font-weight: 700; } .auth-form-header p { margin: 0; color: #6b7280; font-size: 13px; line-height: 1.7; } .auth-form-card .ant-tabs { margin-bottom: 2px; } .auth-form-card .ant-tabs-nav { margin-bottom: 0; } .auth-form-card .ant-tabs-tab { padding: 8px 0; font-size: 16px; } .auth-form-card .ant-form-item { margin-bottom: 17px; } .auth-form-card .ant-form-item-label { padding-bottom: 7px; } .auth-form-card .ant-input-affix-wrapper { height: 46px; display: flex; align-items: center; padding: 0 14px; } .auth-form-card .ant-input-affix-wrapper .ant-input { height: auto; min-height: 0; padding: 0; line-height: 22px; } .auth-form-card .ant-input-affix-wrapper .ant-input-prefix, .auth-form-card .ant-input-affix-wrapper .ant-input-suffix { display: inline-flex; align-items: center; } .auth-form-card .ant-input { height: 46px; padding: 0 14px; line-height: 22px; } .auth-form-card .ant-btn-lg, .auth-form-card .ant-space-compact .ant-btn { height: 46px; } .auth-form-card .ant-btn-lg { font-size: 15px; font-weight: 600; } .auth-form-footer { margin-top: 24px; color: #9ca3af; text-align: center; font-size: 13px; } .auth-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 24px; } .auth-mobile-brand .auth-logo-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--theme-primary); color: #fff; font-size: 18px; } .auth-mobile-brand strong { color: #111827; font-size: 18px; } /* ===== 后台整体框架与侧边栏 ===== */ .admin-shell { height: 100vh; min-height: 100vh; overflow: hidden; } .admin-sider { height: 100vh; overflow: hidden; border-right: 1px solid #edf0f5; box-shadow: 4px 0 18px rgba(15, 23, 42, 0.04); z-index: 2; } .admin-main-shell { min-width: 0; min-height: 0; overflow: hidden; } .admin-sider .ant-layout-sider-children { height: 100%; } .admin-sider-inner { height: 100%; display: flex; flex-direction: column; min-height: 0; } .admin-brand { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid #edf0f5; } .admin-brand-copy { min-width: 0; display: grid; line-height: 1.25; } .admin-brand strong { color: #111827; font-size: 18px; } .admin-brand span { color: #6b7280; font-size: 12px; } .admin-collapse-button { flex: 0 0 auto; border-color: #e5e7eb; } .admin-sidebar-profile { margin: 12px 14px 8px; padding: 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #f8fafc; display: grid; gap: 3px; line-height: 1.35; } .admin-sidebar-profile .ant-typography { margin: 0; font-size: 12px; } .admin-menu { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; border-inline-end: 0 !important; padding: 6px 8px 10px; } .admin-menu .ant-menu-item, .admin-menu .ant-menu-submenu-title { border-radius: 6px; margin-inline: 0; width: 100%; } .admin-menu .ant-menu-item-selected { font-weight: 700; } .admin-menu .ant-menu-item-group-title { padding: 12px 10px 6px; color: #9ca3af; font-size: 12px; font-weight: 700; } .admin-sider-footer { padding: 10px 14px 14px; border-top: 1px solid #edf0f5; } .admin-sider.ant-layout-sider-collapsed .admin-brand { padding: 12px 8px; flex-direction: column; } .admin-sider.ant-layout-sider-collapsed .admin-brand-copy { justify-items: center; } .admin-sider.ant-layout-sider-collapsed .admin-menu { padding-inline: 6px; } .admin-sider.ant-layout-sider-collapsed .admin-menu .ant-menu-item-group-title { padding: 8px 0; height: 8px; overflow: hidden; } .admin-sider.ant-layout-sider-collapsed .admin-sider-footer { padding-inline: 8px; } .admin-topbar { flex: 0 0 64px; height: 64px; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; border-bottom: 1px solid #edf0f5; } .admin-user { margin-left: auto; } .admin-sound-muted { opacity: 0.45; } .admin-notification-popover { width: min(380px, calc(100vw - 32px)); } .admin-notification-item { cursor: pointer; } .admin-notification-item .ant-list-item-meta, .admin-notification-item > div { width: 100%; } .admin-notification-item .ant-typography { margin-bottom: 0; } .admin-notification-priority { color: #cf1322; font-size: 12px; } .admin-notification-time { font-size: 12px; } .admin-user-copy { display: grid; justify-items: end; line-height: 1.3; } .admin-content { height: calc(100vh - 64px); min-height: 0; overflow: auto; padding: 20px; } /* ===== 用户管理与操作区 ===== */ .users-action-card .ant-card-body { padding: 18px 24px; } .users-action-row { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 22px; align-items: start; } .users-action-section { min-width: 0; display: grid; gap: 10px; } .users-action-title { color: #1f2937; font-weight: 700; line-height: 1.4; } .users-action-form { row-gap: 10px; } .users-action-form .ant-form-item { margin-inline-end: 8px; margin-bottom: 0; } .users-input-md { width: 200px; } .users-input-lg { width: 220px; } .users-select-sm { width: 140px; } /* ===== 快手行业版 / 本地券码 ===== */ .kuaishou-voucher-code-text { min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-all; } .kuaishou-voucher-meta { font-size: 12px; line-height: 1.4; } .kuaishou-industry-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.55fr); gap: 16px; align-items: start; } .kuaishou-industry-voucher-card { min-width: 0; } .kuaishou-industry-voucher-card .ant-table { font-size: 13px; } .kuaishou-industry-voucher-card .ant-table-cell { vertical-align: top; } .kuaishou-industry-row-selected > td { background: var(--theme-primary-soft) !important; } .kuaishou-industry-row-selected:hover > td { background: var(--theme-primary-soft-hover) !important; } .kuaishou-industry-tool-card .ant-card-body { padding: 16px; } .kuaishou-industry-tool-card { position: sticky; top: 0; align-self: start; } .kuaishou-industry-tool-section + .kuaishou-industry-tool-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f5; } .kuaishou-industry-tool-section-title { margin-bottom: 10px; color: #1f2937; font-size: 14px; font-weight: 700; } .kuaishou-industry-selected-voucher { min-width: 0; } .kuaishou-industry-selected-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .kuaishou-industry-selected-code { min-width: 0; overflow-wrap: anywhere; word-break: break-all; } .kuaishou-industry-selected-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 12px; } .kuaishou-industry-selected-meta > div { display: grid; gap: 2px; min-width: 0; } .kuaishou-industry-selected-meta span, .kuaishou-industry-selected-meta small { color: #6b7280; font-size: 12px; } .kuaishou-industry-selected-meta strong, .kuaishou-industry-selected-meta .ant-typography { min-width: 0; overflow-wrap: anywhere; word-break: break-all; } .kuaishou-industry-selected-empty { display: grid; gap: 4px; padding: 4px 0; color: #6b7280; font-size: 13px; } .kuaishou-industry-selected-empty strong { color: #374151; } .kuaishou-industry-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kuaishou-industry-tool-field { display: grid; gap: 6px; min-width: 0; } .kuaishou-industry-tool-field > span { color: #4b5563; font-size: 12px; line-height: 1.3; } .kuaishou-industry-tool-field-wide { grid-column: 1 / -1; } .kuaishou-industry-tool-field .ant-select { width: 100%; } .kuaishou-industry-manual-target { margin-top: 14px; border-top: 1px solid #edf0f5; } .kuaishou-industry-manual-target .ant-collapse-header { padding: 12px 0 8px; color: #6b7280; font-size: 12px; } .kuaishou-industry-manual-target .ant-collapse-content-box { padding: 4px 0 0; } .kuaishou-industry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f5; } .kuaishou-industry-actions .ant-btn { width: 100%; min-width: 0; } .kuaishou-industry-actions > :last-child { grid-column: 1 / -1; } .kuaishou-industry-action-result { margin-top: 14px; padding-top: 14px; border-top: 1px solid #edf0f5; } .kuaishou-industry-action-result .json-preview { max-height: 280px; } /* ===== 任务流与履约看板 ===== */ .task-action-hint { display: block; margin-top: 10px; } .task-action-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; } .task-action-group { min-width: 0; min-height: 86px; padding: 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #f8fafc; display: grid; gap: 8px; align-content: start; } .task-action-group > .ant-typography { font-size: 13px; font-weight: 700; } .task-list-blocker-detail { max-width: 220px; display: block; } .task-list-blocker-tag, .task-list-executor-tag { width: fit-content; max-width: 100%; margin-inline-end: 0 !important; justify-self: start; line-height: 18px; font-size: 12px; } .task-list-status-main { display: inline-flex; cursor: help; } .task-list-status-tooltip { display: grid; gap: 6px; } .task-list-status-tooltip-row { display: flex; align-items: center; gap: 8px; } .task-list-status-tooltip-row > span:first-child { min-width: 2em; color: rgba(255, 255, 255, 0.75); } .task-list-row-error > td { background: #fff7f7 !important; } .task-list-row-error:hover > td { background: #ffefef !important; } .fulfillment-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .fulfillment-step-card { min-width: 0; padding: 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #ffffff; display: grid; gap: 8px; align-content: start; } .fulfillment-step-card .ant-typography { min-width: 0; } .manual-dispatch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; } .manual-dispatch-grid > div { min-width: 0; display: grid; gap: 6px; } .kuaishou-cloud-stack { display: grid; gap: 12px; } .task-flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .task-flow-item { min-width: 0; padding: 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #f8fafc; display: grid; gap: 8px; } .task-screenshot-preview { display: grid; place-items: center; min-height: 260px; padding: 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #f8fafc; } .task-screenshot-preview .ant-image, .task-screenshot-preview img { max-width: 100%; } /* ===== 平台路由、店铺与履约规则 ===== */ .platform-tabs { min-width: 0; } .platform-tabs > .ant-tabs-nav { margin-bottom: 14px; } .platform-panel-stack { display: grid; gap: 16px; min-width: 0; } .finance-review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 20px; align-items: start; } .finance-review-details, .finance-review-evidence { display: grid; gap: 8px; min-width: 0; } .finance-review-evidence { justify-items: center; padding: 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #f8fafc; } .finance-review-evidence .image-preview-list { justify-content: center; } .finance-review-evidence .ant-image, .finance-review-evidence img { max-width: 100%; } .worker-orders-statistics-card { border-left: 3px solid #ff6a00; } .worker-orders-statistics-card .ant-card-body { padding: 10px 16px; } .worker-orders-statistics-summary, .worker-orders-statistics-statuses { color: rgba(0, 0, 0, 0.65); font-size: 13px; line-height: 22px; } .worker-orders-statistics-summary strong { color: #262626; font-weight: 600; } .worker-orders-statistics-summary strong.is-negative { color: #cf1322; } .worker-orders-statistics-statuses { overflow-wrap: anywhere; } .platform-section-gap { margin-top: 14px; } .platform-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; } .platform-routing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .platform-routing-priority-row, .platform-route-rule-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .platform-route-rule { min-width: 0; padding: 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #f8fafc; display: grid; gap: 10px; } .platform-route-rule-grid { display: grid; grid-template-columns: minmax(220px, 1fr) 110px minmax(160px, 0.7fr) 110px; gap: 10px; align-items: center; } .field-switch { min-height: 54px; padding: 10px 12px; border: 1px solid #edf0f5; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .field-switch span { color: #4b5563; font-weight: 600; } .platform-inline-row, .platform-shop-row, .platform-rule-head, .platform-delivery-row { display: grid; gap: 10px; align-items: center; min-width: 0; } .platform-inline-row { grid-template-columns: auto minmax(120px, 0.8fr) minmax(180px, 1.2fr) auto; } .platform-shop-row { grid-template-columns: auto auto minmax(120px, 0.9fr) minmax(140px, 1fr) minmax(220px, 1.5fr) auto auto; } .platform-rule-head { grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr); } .platform-delivery-row { grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) 110px auto; } .platform-split-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; } .platform-side-card { position: sticky; top: 82px; } .platform-select-card { width: 100%; padding: 10px 12px; border: 1px solid #edf0f5; border-radius: 6px; background: #ffffff; color: inherit; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; text-align: left; } .platform-select-card.active, .platform-source-card.active { border-color: var(--theme-primary); box-shadow: 0 0 0 2px var(--theme-primary-shadow); } .platform-select-card span { display: grid; gap: 4px; } .platform-select-card small { color: #6b7280; } .cloud-records-filter { display: grid; grid-template-columns: minmax(180px, 0.28fr) minmax(220px, 0.36fr) minmax(360px, 1fr) auto; gap: 12px; align-items: center; } /* ===== 物品规则配置:6:4 比例清晰现代化双栏 ===== */ .product-rules-layout { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 16px; align-items: start; width: 100%; } .product-rules-form-card { position: sticky; top: 16px; width: 100%; min-width: 0; border-radius: 8px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; } .product-rules-form-card .ant-card-head { padding: 0 16px; min-height: 48px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; } .product-rules-form-card .ant-card-body { padding: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .product-rule-main-form .ant-form-item { margin-bottom: 12px; } .product-rule-main-form .ant-form-item-label > label { font-size: 13px; color: #374151; font-weight: 500; } .form-grid-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .form-grid-3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; } .form-grid-4col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; } .form-grid-5col { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 1fr 1.2fr; gap: 0 12px; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-full { grid-column: 1 / -1; } .switches-inline-group { display: flex; align-items: center; gap: 20px; align-self: end; height: 32px; margin-bottom: 12px; } .switches-inline-group .ant-form-item { margin-bottom: 0; display: flex; align-items: center; gap: 6px; } .sharing-inline-inputs { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid #cbd5e1; margin-left: 4px; } .sharing-box-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 14px; background: #eff6ff; border: 1px dashed #bfdbfe; padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; } .sharing-box-panel .ant-form-item { margin-bottom: 0; } /* 适用商品绑定区域 */ .binding-section-container { margin-top: 4px; } .binding-section-header { margin-bottom: 10px; } .binding-editor-wrap { display: flex; flex-direction: column; } .binding-editor-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; } .binding-editor-card .ant-card-head { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 6px 12px; min-height: 40px; } .binding-editor-card .ant-card-body { padding: 14px 12px 10px; } .binding-editor-card-header { display: flex; align-items: center; flex: 1; } .binding-pills-row { display: flex; align-items: center; gap: 6px; } .binding-pill-tag { font-size: 12px; line-height: 22px; padding: 0 8px; border: 1px solid #cbd5e1 !important; background: #fff !important; color: #475569 !important; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .binding-pill-tag.active { background: #1677ff !important; color: #fff !important; border-color: #1677ff !important; font-weight: 500; } .binding-add-btn { font-size: 12px; height: 24px; } .binding-form-content .ant-form-item { margin-bottom: 10px; } .binding-form-content .ant-form-item-label > label { font-size: 12px; color: #334155; font-weight: 500; } .shop-selector-box-inline { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .shop-selector-box-inline .shop-all-toggle { font-weight: 600; font-size: 12px; border-right: 1px solid #e2e8f0; padding-right: 10px; margin-right: 2px; white-space: nowrap; } .shop-selector-box-inline .shop-checkbox-inline-wrap { display: flex; flex-wrap: wrap; gap: 4px 14px; } .shop-selector-box-inline .shop-chk-item { font-size: 12px; margin-inline-start: 0 !important; } .empty-rule-hint { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 6px; padding: 20px; text-align: center; } .product-binding-row-active > td { background: #e6f4ff !important; } /* 右侧模板列表卡片 */ .product-rules-list-card { width: 100%; min-width: 0; border-radius: 8px; } .product-rules-list-card .ant-card-head { padding: 0 16px; min-height: 48px; border-bottom: 1px solid #f0f0f0; } .product-rules-list-card .ant-card-body { padding: 12px 14px; } .product-rules-category-tabs-bar { margin-bottom: 8px; border-bottom: 1px solid #f0f0f0; } .product-rules-category-tabs-bar .ant-tabs-nav { margin: 0; } .product-rules-sub-category-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 10px; background: #f8fafc; border: 1px solid #edf2f7; border-radius: 6px; overflow-x: auto; } .sub-category-bar-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #64748b; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .sub-category-pills { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; } .sub-category-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; height: 24px; font-size: 12px; color: #475569; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; user-select: none; flex-shrink: 0; } .sub-category-pill:hover { color: #1677ff; border-color: #91caff; background: #f0f7ff; } .sub-category-pill.active { color: #ffffff; background: #1677ff; border-color: #1677ff; font-weight: 500; box-shadow: 0 1px 2px rgba(22, 119, 255, 0.2); } .sub-category-pill .pill-count { display: inline-block; font-size: 11px; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 8px; background: #f1f5f9; color: #64748b; font-weight: normal; } .sub-category-pill.active .pill-count { background: rgba(255, 255, 255, 0.25); color: #ffffff; } .product-rule-row-active > td { background: #e6f4ff !important; } .product-rule-row-mapped > td { background: #f0fdf4; } .rules-list-card-extra { display: flex; align-items: center; } .rules-list-card-extra .search-input-fluid { min-width: 120px; max-width: 220px; flex: 1; } /* ===== 后台响应式断点 ===== */ @media (max-width: 1120px) { .product-rules-layout { grid-template-columns: 1fr; } .product-rules-form-card, .product-rules-list-card { position: static; max-height: none; overflow-y: visible; } .product-rules-form-card .ant-card-body { overflow-y: visible; } } @media (max-width: 900px) { .admin-sider { position: fixed !important; left: 0; top: 0; bottom: 0; height: 100vh; } .admin-content { padding: 14px; } .admin-user-copy { display: none; } .page-header { display: grid; } .users-action-row { grid-template-columns: 1fr; } .kuaishou-industry-split { grid-template-columns: 1fr; } .kuaishou-industry-tool-card { position: static; } .manual-dispatch-grid, .fulfillment-overview-grid, .task-flow-grid { grid-template-columns: 1fr; } .users-action-form .ant-form-item { margin-bottom: 0; } .metric-grid.three, .metric-grid.four, .metric-grid.five, .platform-form-grid, .platform-routing-grid, .platform-route-rule-grid, .platform-split-layout { grid-template-columns: 1fr; } .platform-routing-priority-row, .platform-route-rule-head { display: grid; } .platform-side-card { position: static; } .platform-inline-row, .platform-shop-row, .platform-rule-head, .platform-delivery-row { grid-template-columns: 1fr; } .cloud-records-filter { grid-template-columns: 1fr; } .table-toolbar { display: grid; } } @media (max-width: 860px) { .auth-shell { width: 100%; min-height: 0; display: block; border-radius: 14px; } .auth-brand { display: none; } .auth-form-side { padding: 32px 24px; } .auth-mobile-brand { display: flex; } } @media (max-width: 720px) { .finance-review-layout { grid-template-columns: 1fr; } .finance-review-evidence { justify-items: start; } .finance-review-evidence .image-preview-list { justify-content: flex-start; } .users-action-card .ant-card-body { padding: 14px; } .users-action-form, .users-action-form .ant-form-item, .users-action-form .ant-input-affix-wrapper, .users-action-form .ant-input, .users-action-form .ant-select, .users-action-form .ant-space, .users-action-form .ant-btn { width: 100%; } } @media (max-width: 520px) { .kuaishou-industry-selected-meta, .kuaishou-industry-tool-grid, .kuaishou-industry-actions { grid-template-columns: 1fr; } .kuaishou-industry-tool-field-wide, .kuaishou-industry-actions > :last-child { grid-column: auto; } } /* 拼单明细:操作按钮保持一行 */ .admin-share-actions { flex-wrap: nowrap; white-space: nowrap; } /* 拼单明细:状态列两个标签纵向排列,长原因(如「后台取消部分」)必须完整显示 */ .admin-share-status { align-items: center; } .admin-share-status .ant-tag { margin-inline-end: 0; white-space: nowrap; } /* 拼单明细:问题单行强调、已撤单行弱化 */ .admin-share-row-problem > td { background: #fff1f0 !important; } .admin-share-row-problem > td:first-child { box-shadow: inset 3px 0 0 #ff4d4f; } .admin-share-row-problem:hover > td { background: #ffe7e6 !important; } .admin-share-row-cancelled > td { color: rgba(0, 0, 0, 0.45); background: #fafafa; } .admin-share-row-cancelled:hover > td { background: #f5f5f5 !important; } /* 订单服务配置:分类导航 + 配置编辑器 */ .order-service-shell { overflow: hidden; border-radius: 14px; } .order-service-shell > .ant-card-head { min-height: 54px; background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); } .order-service-shell > .ant-card-body { padding: 0; } .order-service-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; } .order-service-sidebar { position: sticky; top: 12px; display: flex; flex-direction: column; min-height: calc(100vh - 190px); max-height: calc(100vh - 180px); background: #f7f9fc; border-right: 1px solid #edf0f5; } .order-service-sidebar-head { display: grid; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid #edf0f5; } .order-service-category-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 8px; overflow: auto; } .order-service-category-item { display: grid; gap: 4px; width: 100%; padding: 9px 10px; color: #25324a; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .order-service-category-item:hover { background: #ffffff; border-color: #e5eaf2; } .order-service-category-item.is-active { background: #ffffff; border-color: #91caff; box-shadow: 0 2px 8px rgba(22, 104, 220, 0.08); } .order-service-category-main { display: flex; align-items: flex-start; } .order-service-category-name { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; } .order-service-category-meta { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-width: 0; } .order-service-category-key { min-width: 0; overflow: hidden; color: #8a94a6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .order-service-status-pill { flex: none; padding: 1px 6px; font-size: 10px; line-height: 17px; border: 1px solid #d9dde5; border-radius: 999px; } .order-service-status-pill.is-success { color: #237804; background: #f6ffed; border-color: #b7eb8f; } .order-service-status-pill.is-warning { color: #ad6800; background: #fffbe6; border-color: #ffe58f; } .order-service-status-pill.is-muted { color: #8c8c8c; background: #fafafa; } .order-service-editor { min-width: 0; padding: 18px 20px 0; } .order-service-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; } .order-service-editor-head .ant-typography { margin-bottom: 0; } .order-service-tip { margin-bottom: 14px; } .order-service-section { padding: 15px 16px 16px; margin-bottom: 12px; background: #ffffff; border: 1px solid #e8edf4; border-radius: 12px; box-shadow: 0 1px 2px rgba(31, 45, 61, 0.025); } .order-service-section-fill { height: 100%; margin-bottom: 0; } .order-service-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; } .order-service-section-title { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .order-service-section-index { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; color: #1677ff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: linear-gradient(135deg, #eef5ff 0%, #e6f0ff 100%); border: 1px solid #cfe2ff; border-radius: 8px; } .order-service-section-title-copy { display: grid; gap: 2px; } .order-service-section-title-copy .ant-typography:last-child { max-width: 760px; font-size: 12px; line-height: 1.5; } .order-service-basic-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; } .order-service-basic-grid .ant-form-item { margin-bottom: 12px; } .order-service-guide { display: grid; align-content: start; gap: 4px; padding: 12px; background: #f8fafc; border: 1px dashed #d9e1ec; border-radius: 10px; } .order-service-guide .ant-upload-wrapper { margin-top: 6px; } .order-service-status-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .order-service-status-step-card { display: grid; align-content: start; gap: 8px; padding: 11px 12px 12px; background: #fbfcff; border: 1px solid #e6ebf3; border-radius: 10px; } .order-service-status-step-head { display: flex; gap: 8px; align-items: center; min-height: 32px; } .order-service-status-step-head > div { display: grid; gap: 1px; min-width: 0; } .order-service-status-step-head .ant-typography:last-child { font-size: 11px; } .order-service-status-step-index { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 25px; height: 25px; color: #0958d9; font-size: 12px; font-weight: 700; background: #e6f4ff; border-radius: 999px; } .order-service-status-step-card .ant-form-item { margin-bottom: 4px; } .order-service-confirmation-switch { display: flex; flex: none; gap: 10px; align-items: center; padding: 7px 10px 7px 12px; background: #f8fafc; border: 1px solid #e9edf3; border-radius: 9px; } .order-service-confirmation-switch > span { display: grid; gap: 1px; } .order-service-confirmation-switch .ant-typography:last-child { font-size: 11px; } .order-service-confirmation-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr); gap: 16px; align-items: start; } .order-service-confirmation-editor { min-width: 0; padding: 13px 13px 1px; background: #fbfcff; border: 1px solid #e9eef5; border-radius: 10px; } .order-service-confirmation-editor .ant-form-item:last-child { margin-bottom: 12px; } .order-service-confirmation-preview-panel { display: grid; gap: 10px; min-width: 0; padding: 13px; background: radial-gradient(circle at 100% 0%, rgba(22, 119, 255, 0.08), transparent 34%), #f7f9fc; border: 1px solid #e6ebf2; border-radius: 10px; } .order-service-confirmation-preview-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; } .order-service-confirmation-preview-head > span { display: grid; gap: 1px; } .order-service-confirmation-preview-head .ant-typography:last-child { font-size: 11px; } .order-service-confirmation-preview { display: grid; gap: 10px; width: 100%; max-width: none; padding: 16px; color: #1f2937; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); } .order-service-confirmation-preview-content { color: #64748b; font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; } .order-service-confirmation-preview-summary { display: grid; gap: 6px; padding: 10px 12px; color: #334155; font-size: 12px; background: #f8fafc; border: 1px solid #edf2f7; border-radius: 8px; } .order-service-confirmation-preview-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; border-top: 1px solid #f1f5f9; } .order-service-confirmation-preview-actions span { padding: 3px 11px; color: #475569; font-size: 12px; border: 1px solid #dbe2ea; border-radius: 6px; } .order-service-confirmation-preview-actions .is-primary { color: #ffffff; background: #1677ff; border-color: #1677ff; } .order-service-confirmation-preview.is-disabled { opacity: 0.55; } .order-service-confirmation-preview > small { font-size: 11px; } .order-service-field-list { display: grid; gap: 8px; } .order-service-field-row { padding: 12px; background: #fbfcfe; border: 1px solid #edf0f5; border-radius: 10px; } .order-service-field-main { display: grid; grid-template-columns: minmax(120px, 0.9fr) minmax(150px, 1fr) 120px 70px 104px; gap: 10px; align-items: end; } .order-service-field-main label, .order-service-field-required { display: grid; gap: 4px; min-width: 0; } .order-service-field-required { justify-items: start; } .order-service-field-required .ant-switch { margin-top: 5px; } .order-service-field-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; min-height: 32px; } .order-service-field-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .order-service-field-extra-tip { grid-column: 1 / -1; font-size: 12px; } .order-service-field-extra > :last-child:nth-child(3) { grid-column: 1 / -1; } .order-service-switch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .order-service-switch-grid.is-auto-publish { grid-template-columns: repeat(3, minmax(0, 1fr)); } .order-service-switch-grid .ant-form-item { margin-bottom: 10px; } .order-service-inline-tip { display: block; margin-top: 2px; font-size: 12px; } .order-service-save-bar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 14px; margin-top: 2px; background: linear-gradient(180deg, rgba(245, 247, 251, 0) 0%, #f5f7fb 28%, #f5f7fb 100%); } .order-service-jobs-collapse { margin-top: 12px; background: #ffffff; border: 1px solid #edf0f5; border-radius: 12px; } .order-service-jobs-collapse .ant-collapse-header { align-items: center !important; } .order-service-jobs-collapse .ant-collapse-content-box { padding-top: 0 !important; } @media (max-width: 1200px) { .order-service-field-main { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) 110px 64px 104px; } .order-service-basic-grid { grid-template-columns: minmax(0, 1fr) 200px; } .order-service-status-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .order-service-confirmation-grid { grid-template-columns: 1fr; } } @media (max-width: 960px) { .order-service-layout { grid-template-columns: 1fr; } .order-service-sidebar { position: static; min-height: 0; max-height: 280px; border-right: 0; border-bottom: 1px solid #edf0f5; } .order-service-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 200px; } .order-service-editor { padding: 16px 16px 0; } .order-service-basic-grid { grid-template-columns: 1fr; } .order-service-guide { grid-template-columns: minmax(0, 1fr) 160px; } .order-service-guide > :not(.ant-upload-wrapper) { grid-column: 1; } .order-service-guide .ant-upload-wrapper { grid-column: 2; grid-row: 1 / span 3; } .order-service-section-head { align-items: flex-start; } } @media (max-width: 720px) { .order-service-editor-head, .order-service-save-bar { align-items: stretch; flex-direction: column; } .order-service-section-head { flex-wrap: wrap; } .order-service-section-title, .order-service-confirmation-switch { width: 100%; } .order-service-confirmation-switch { justify-content: space-between; } .order-service-category-list { grid-template-columns: 1fr; } .order-service-field-main { grid-template-columns: 1fr 1fr; } .order-service-field-actions { grid-column: 1 / -1; justify-content: flex-start; } .order-service-field-extra, .order-service-switch-grid, .order-service-switch-grid.is-auto-publish, .order-service-status-step-grid { grid-template-columns: 1fr 1fr; } .order-service-guide { grid-template-columns: 1fr; } .order-service-guide > :not(.ant-upload-wrapper), .order-service-guide .ant-upload-wrapper { grid-column: 1; grid-row: auto; } .order-service-status-step-grid { grid-template-columns: 1fr; } }