/* ========================================================================== 打手端 (Worker Portal) PC 与移动端全套样式 ========================================================================== */ /* ===== 登录与基础头部 ===== */ .worker-auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: #f5f7fb; } .worker-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .worker-announcement { display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 0 16px; padding: 0 14px; overflow: hidden; border: 1px solid #ffe0a3; border-radius: 8px; background: #fffaf0; color: #a86600; } .worker-announcement-label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: #f59f00; color: #fff; font-size: 13px; font-weight: 600; } .worker-announcement-viewport { min-width: 0; overflow: hidden; white-space: nowrap; } .worker-announcement-track { display: inline-flex; min-width: max-content; gap: 56px; animation: worker-announcement-scroll 22s linear infinite; } .worker-announcement:hover .worker-announcement-track { animation-play-state: paused; } @keyframes worker-announcement-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 28px)); } } .worker-page-head h3, .worker-page-head > .ant-typography { margin: 0 !important; flex: 0 0 auto; white-space: nowrap; } .worker-page-head-title-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-width: 0; gap: 16px; } .worker-hall-head-controls { display: flex; align-items: center; gap: 8px; } .worker-hall-search-bar { grid-area: search; width: 100%; } .worker-hall-leaderboard-trigger { flex: 0 0 auto; } .worker-hall-page-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 12px; } /* ===== 我的订单统计与 Tabs (PC端) ===== */ .worker-orders-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0; } .worker-orders-search-controls { width: 100%; } .worker-orders-mock { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid #edf0f5; } .worker-orders-mock > .ant-typography { flex: 0 0 auto; white-space: nowrap; } .worker-order-mock-form { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } .worker-order-mock-form .ant-form-item { min-width: 0; margin: 0; } .worker-order-mock-field-order .ant-input { width: 150px; } .worker-order-mock-field-shop .ant-select { width: 190px; } .worker-order-mock-field-product .ant-input { width: 190px; } .worker-order-mock-field-amount .ant-input-number { width: 116px; } .worker-order-summary-card { cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .worker-order-summary-card.active { border-color: var(--theme-primary); box-shadow: 0 0 0 1px var(--theme-primary) inset; } .worker-order-summary-card .ant-statistic-title { font-size: 12px; } .worker-order-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #f0f0f0; color: #595959; font-size: 12px; line-height: 18px; } .worker-order-tab-label { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.2; } .worker-order-tab-label-main { display: inline-flex; align-items: center; } .worker-order-tab-settlement { color: #64748b; font-size: 11px; font-weight: 400; white-space: nowrap; } .worker-order-tabs .ant-tabs-tab-active .worker-order-tab-settlement { color: var(--theme-primary); } .worker-order-tabs .ant-tabs-nav { margin-bottom: 12px; } .worker-order-detail-stack { display: grid; gap: 16px; min-width: 0; width: 100%; } /* 详情抽屉内的描述表格必须服从抽屉宽度,长订单号等内容在单元格内换行。 */ .worker-order-detail-drawer .ant-drawer-body { min-width: 0; overflow-x: hidden; } .worker-order-detail-drawer .ant-drawer-content { max-width: 100vw; } .worker-order-detail-stack > .ant-card, .worker-order-detail-stack > .ant-card .ant-card-body, .worker-order-detail-stack .ant-descriptions { min-width: 0; max-width: 100%; width: 100%; } .worker-order-detail-stack .ant-descriptions-view { width: 100%; max-width: 100%; overflow-x: hidden; } .worker-order-detail-stack .ant-descriptions-view table { width: 100%; table-layout: fixed; } .worker-order-detail-stack .ant-descriptions-item-label, .worker-order-detail-stack .ant-descriptions-item-content { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .worker-order-detail-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; } /* ===== 工单流转记录时间线 ===== */ .work-order-event-timeline { margin-top: 4px; } .work-order-event-item { display: grid; gap: 4px; } .work-order-event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .work-order-event-head .ant-typography { margin: 0; } .work-order-event-time { font-size: 12px; white-space: nowrap; } .work-order-event-actor .ant-tag { margin-inline-end: 0; } .work-order-event-worker-link { cursor: pointer; } .work-order-event-worker-link .anticon { margin-left: 4px; } .work-order-event-worker-meta { font-size: 12px; } .work-order-event-desc { font-size: 12px; } .worker-order-actions { display: grid; justify-items: start; gap: 4px; } .worker-order-actions .ant-btn-link { height: auto; padding: 0; } .worker-order-detail-value { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .worker-order-detail-json-tabs > .ant-tabs-nav { margin-bottom: 12px; } .acceptance-draft-badge-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .acceptance-draft-badge-wrap .ant-tag { margin-inline-end: 0; display: inline-flex; align-items: center; gap: 4px; } .worker-note-cell { display: flex; align-items: center; gap: 6px; min-width: 0; } .worker-note-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px; background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 12px; font-weight: 500; color: #24292f; } .worker-note-badge:hover { background: #e6f4ff; border-color: #91caff; color: #0958d9; } /* 绿色主题:已安排 / 已就绪 / 完成 / 正常 */ .worker-note-badge.theme-success { background: #f6ffed; border-color: #b7eb8f; color: #237804; } .worker-note-badge.theme-success .worker-note-edit-icon { color: #52c41a; } .worker-note-badge.theme-success:hover { background: #d9f7be; border-color: #73d13d; color: #135200; } /* 蓝色主题:打单中 / 处理中 / 进行中 / 上号中 */ .worker-note-badge.theme-processing { background: #e6f4ff; border-color: #91caff; color: #0958d9; } .worker-note-badge.theme-processing .worker-note-edit-icon { color: #1677ff; } .worker-note-badge.theme-processing:hover { background: #bae0ff; border-color: #69b1ff; color: #003eb3; } /* 红色主题:账号问题 / 密码错误 / 异常 / 封号 */ .worker-note-badge.theme-danger { background: #fff1f0; border-color: #ffccc7; color: #cf1322; } .worker-note-badge.theme-danger .worker-note-edit-icon { color: #ff4d4f; } .worker-note-badge.theme-danger:hover { background: #ffccc7; border-color: #ff7875; color: #a8071a; } /* 紫色主题:排队中 / 等待中 / 等买家扫码 */ .worker-note-badge.theme-purple { background: #f9f0ff; border-color: #d3adf7; color: #531dab; } .worker-note-badge.theme-purple .worker-note-edit-icon { color: #722ed1; } .worker-note-badge.theme-purple:hover { background: #efdbff; border-color: #b37feb; color: #391085; } /* 橙色主题:未安排 / 暂缓做单 / 暂停 / 待定 */ .worker-note-badge.theme-warning { background: #fff7e6; border-color: #ffd591; color: #d46b08; } .worker-note-badge.theme-warning .worker-note-edit-icon { color: #fa8c16; } .worker-note-badge.theme-warning:hover { background: #ffe7ba; border-color: #ffc069; color: #ad4e00; } .worker-note-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; } .worker-note-edit-icon { font-size: 12px; color: #8c8c8c; transition: color 0.2s; } .worker-note-badge:hover .worker-note-edit-icon { opacity: 0.85; } .worker-note-add-btn { border-style: dashed; color: #595959; font-size: 12px; } .worker-note-preset-tags { display: flex; flex-wrap: wrap; gap: 8px; } .worker-note-preset-tag { cursor: pointer; user-select: none; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 1px solid #d0d7de; background: #f6f8fa; color: #24292f; transition: all 0.2s ease; } .worker-note-preset-tag.theme-success { background: #f6ffed; border-color: #b7eb8f; color: #237804; } .worker-note-preset-tag.theme-processing { background: #e6f4ff; border-color: #91caff; color: #0958d9; } .worker-note-preset-tag.theme-danger { background: #fff1f0; border-color: #ffccc7; color: #cf1322; } .worker-note-preset-tag.theme-purple { background: #f9f0ff; border-color: #d3adf7; color: #531dab; } .worker-note-preset-tag.theme-warning { background: #fff7e6; border-color: #ffd591; color: #d46b08; } .worker-note-preset-tag:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } /* 接单平台顶部统计条 (PC) */ .platform-summary-strip-card { width: 100%; } .platform-summary-strip-card .ant-card-body { padding: 8px 16px !important; } .platform-summary-strip-item { font-size: 13px; color: rgba(0, 0, 0, 0.65); white-space: nowrap; } .platform-summary-strip-item strong { font-size: 16px; margin-left: 6px; color: rgba(0, 0, 0, 0.88); } /* ===== 个人中心资产卡片 (PC端) ===== */ .worker-profile-wallet-card .ant-card-body { padding: 0; } .worker-profile-wallet-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden; } .worker-profile-wallet-item { min-width: 0; padding: 14px 16px; display: grid; gap: 4px; } .worker-profile-wallet-item + .worker-profile-wallet-item { border-left: 1px solid #f0f0f0; } .worker-profile-wallet-label { color: #64748b; font-size: 12px; } .worker-profile-wallet-value { color: #0f172a; font-size: 20px; line-height: 1.2; } .worker-profile-wallet-note { color: #94a3b8; font-size: 12px; line-height: 1.5; } .worker-amount-positive { color: #047857; } .worker-amount-negative { color: #dc2626; } .worker-profile-help-text { margin: 0; color: #64748b; } /* ===== 抢单大厅 (PC端) ===== */ .worker-hall-head-copy { display: grid; gap: 4px; } .worker-hall-head-copy .ant-typography { margin: 0; } .worker-hall-toolbar { justify-content: flex-end; } .worker-hall-search { width: min(460px, 100%); } /* ===== 桌面端抢单大厅全新整合头部 ===== */ .worker-hall-desktop-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; background: #ffffff; padding: 14px 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .worker-hall-header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .worker-hall-heading.ant-typography { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -0.02em; } .worker-hall-live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 2px 10px; border-radius: 9999px; } .worker-hall-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: worker-hall-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } @keyframes worker-hall-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .worker-hall-header-center { flex: 1; max-width: 520px; min-width: 260px; } .worker-hall-desktop-search { width: 100%; } .worker-hall-desktop-search .ant-input { border-radius: 8px 0 0 8px; padding: 6px 14px; border-color: #cbd5e1; } .worker-hall-desktop-search .ant-input:hover, .worker-hall-desktop-search .ant-input:focus { border-color: var(--theme-primary); } .worker-hall-desktop-search .ant-btn { border-radius: 0 8px 8px 0; padding: 6px 18px; height: auto; font-weight: 500; } .worker-hall-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .worker-hall-header-switch-wrap { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; padding: 5px 12px; border-radius: 8px; cursor: pointer; user-select: none; } /* ===== 抢单大厅 4 栏 KPI 仪表盘 ===== */ .worker-hall-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } @media (max-width: 1200px) { .worker-hall-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .worker-hall-kpi-grid { grid-template-columns: 1fr; } } .worker-hall-kpi-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .worker-hall-kpi-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); transform: translateY(-2px); } .worker-hall-kpi-top { display: flex; align-items: center; gap: 12px; } .worker-hall-kpi-icon-wrap { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .worker-hall-kpi-icon-wrap.kpi-wallet { background: #fff7ed; color: #ea580c; } .worker-hall-kpi-icon-wrap.kpi-quota { background: #eff6ff; color: #2563eb; } .worker-hall-kpi-icon-wrap.kpi-tasks { background: #faf5ff; color: #9333ea; } .worker-hall-kpi-icon-wrap.kpi-pool { background: #ecfdf5; color: #059669; } .worker-hall-kpi-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .worker-hall-kpi-title { font-size: 12px; color: #64748b; font-weight: 500; } .worker-hall-kpi-val { font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .worker-hall-kpi-unit { font-size: 13px; font-weight: 400; color: #64748b; margin-left: 2px; } .worker-hall-kpi-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 12px; } .worker-hall-kpi-sub-item { display: flex; align-items: center; gap: 5px; color: #64748b; } .worker-hall-kpi-sub-item .kpi-sub-val { color: #334155; font-weight: 500; } .worker-hall-kpi-level-badge { font-size: 11px; padding: 1px 7px; border-radius: 9999px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; font-weight: 600; } .worker-hall-kpi-progress-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 9999px; overflow: hidden; } .worker-hall-kpi-progress-bar { height: 100%; border-radius: 9999px; transition: width 0.3s ease; } .worker-hall-kpi-progress-bar.safe { background: linear-gradient(90deg, #10b981, #059669); } .worker-hall-kpi-progress-bar.warning { background: linear-gradient(90deg, #f59e0b, #d97706); } .worker-hall-kpi-progress-bar.danger { background: linear-gradient(90deg, #ef4444, #dc2626); } .worker-hall-kpi-sub-text { color: #64748b; font-weight: 500; flex-shrink: 0; } .worker-hall-kpi-stat-tags { display: flex; align-items: center; gap: 5px; } .worker-hall-kpi-tag { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 500; } .worker-hall-kpi-tag.blue { background: #eff6ff; color: #1d4ed8; } .worker-hall-kpi-tag.red { background: #fef2f2; color: #dc2626; font-weight: 600; } .worker-hall-kpi-tag.neutral { background: #f8fafc; color: #64748b; } .worker-hall-kpi-link { display: inline-flex; align-items: center; gap: 3px; color: var(--theme-primary); font-weight: 500; font-size: 12px; transition: opacity 0.2s ease; } .worker-hall-kpi-link:hover { opacity: 0.8; } .worker-hall-kpi-pool-hint { display: inline-flex; align-items: center; gap: 5px; color: #059669; font-weight: 500; } .worker-hall-kpi-dot-online { width: 6px; height: 6px; border-radius: 50%; background: #10b981; } .worker-hall-kpi-pool-sub { color: #94a3b8; font-size: 11px; } .worker-hall-board-card .ant-card-body { display: grid; gap: 16px; } .worker-hall-summary-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #ffffff; } .worker-hall-summary-item { min-width: 0; padding: 14px 16px; display: grid; gap: 4px; } .worker-hall-summary-item + .worker-hall-summary-item { border-left: 1px solid #e5e7eb; } .worker-hall-summary-label { color: #64748b; font-size: 12px; } .worker-hall-summary-value { color: #0f172a; font-size: 22px; line-height: 1.15; } .worker-hall-summary-note { color: #94a3b8; font-size: 12px; line-height: 1.5; } .worker-hall-warning { margin-bottom: 0; } .worker-hall-loading { min-height: 220px; display: grid; place-items: center; } .worker-hall-load-more { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #94a3b8; font-size: 12px; } .worker-hall-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; } /* 1080P 标准桌面屏 (1440px - 1980px) 稳定呈现 6 列 */ @media (min-width: 1440px) and (max-width: 1980px) { .worker-hall-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } } /* 2K 及以上高分宽屏显示器稳定呈现 7 列 */ @media (min-width: 1981px) { .worker-hall-card-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; } } .worker-hall-card { min-width: 0; padding: 14px 16px; border-radius: 12px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .worker-hall-card:hover { border-color: #cbd5e1; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .worker-hall-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .worker-hall-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .worker-hall-category-tag { background: #f1f5f9 !important; color: #334155 !important; border: 1px solid #e2e8f0 !important; font-weight: 500; font-size: 12px; border-radius: 4px; margin: 0 !important; } .worker-hall-published-tag { background: #fff7ed !important; color: #ea580c !important; border: 1px solid #fed7aa !important; font-weight: 500; font-size: 11px !important; line-height: 18px !important; border-radius: 4px; margin: 0 !important; display: inline-flex; align-items: center; gap: 3px; } .worker-hall-published-tag .anticon { font-size: 11px; } .worker-hall-card-orderno { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #94a3b8; white-space: nowrap; flex-shrink: 0; } .worker-hall-card-body { min-width: 0; } .worker-hall-card-title-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: #0f172a; font-size: 14px; line-height: 1.4; min-height: 38px; } .worker-hall-card-amount-row { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 10px; background: #f8fafc; border-radius: 8px; border: 1px solid #f1f5f9; gap: 8px; } .worker-hall-card-amount-group { display: flex; flex-direction: column; gap: 1px; } .worker-hall-card-amount-label { font-size: 11px; color: #94a3b8; } .worker-hall-card-amount { color: #ea580c; font-size: 24px; line-height: 1; font-weight: 800; } .worker-hall-card-deposit-group { flex-shrink: 0; } .worker-hall-deposit-free-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #059669; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 2px 7px; border-radius: 6px; } .worker-hall-deposit-badge { font-size: 11px; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 7px; border-radius: 6px; font-weight: 500; } .worker-hall-card-grab-btn { font-weight: 600; } .worker-hall-card-title { display: grid; gap: 3px; min-width: 0; } .worker-hall-pinned-tag { width: fit-content; margin: 0 0 2px; } .worker-hall-card-title .ant-typography { margin: 0; font-size: 12px; } .worker-hall-card-link, .worker-hall-card-title-text { display: block; max-width: 100%; font-weight: 600; color: #0f172a; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .worker-hall-card-amount-row { display: grid; gap: 4px; } .worker-hall-card-amount { color: #f97316; font-size: 28px; line-height: 1; font-weight: 700; } .worker-hall-card-deposit, .worker-hall-card-hint { margin: 0; font-size: 12px; line-height: 1.4; } .worker-hall-card-actions { display: grid; gap: 6px; margin-top: auto; } .worker-hall-card-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .worker-hall-card-actions-row .ant-btn { padding-inline: 8px; } .worker-hall-card-grab-row { display: flex; gap: 6px; } .worker-hall-card-grab-row .ant-btn { flex: 1; min-width: 0; padding-inline: 6px; font-size: 14px; } .worker-hall-sharing-button:not(:disabled) { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border-color: #7c3aed !important; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28) !important; } .worker-hall-sharing-button:not(:disabled):hover { background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; border-color: #6d28d9 !important; } .worker-hall-detail-stack { display: grid; gap: 16px; } /* ========================================================================== 移动端专属响应式自适应样式 (Worker Mobile Portal) ========================================================================== */ html, body { overflow-x: hidden; max-width: 100vw; } .worker-mobile-shell { width: 100%; max-width: 100vw; min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; background: #f1f5f9; position: relative; } .worker-mobile-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #ffffff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } .worker-mobile-brand { display: flex; align-items: center; gap: 8px; } .worker-mobile-brand-badge { width: 26px; height: 26px; background: var(--theme-primary); color: #ffffff; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 13px; box-shadow: 0 2px 6px rgba(255, 106, 0, 0.28); } .worker-mobile-brand-text strong { font-size: 15px; color: #0f172a; } .worker-mobile-user-area { display: flex; align-items: center; gap: 6px; } .worker-mobile-status-tag { margin: 0; font-size: 11px; } .worker-mobile-username { font-size: 13px; font-weight: 500; color: #334155; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .worker-mobile-logout-btn { color: #94a3b8; padding: 4px; } .worker-mobile-content { flex: 1; min-height: 0; width: 100%; max-width: 100vw; box-sizing: border-box; padding: 10px 10px calc(65px + env(safe-area-inset-bottom, 0px)) 10px; } .worker-mobile-content .ant-card { border-radius: 12px; } .worker-mobile-content .ant-card .ant-card-body { padding: 12px; } .worker-mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100vw; height: calc(54px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; z-index: 999; display: flex; align-items: stretch; justify-content: space-around; background: #ffffff; border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06); } .worker-mobile-tab-item { flex: 1 1 0; width: 33.333%; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: #64748b; font-size: 11px; padding: 4px 0; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease; } .worker-mobile-tab-item.active { color: var(--theme-primary); font-weight: 600; } .worker-mobile-tab-icon { font-size: 18px; line-height: 1; } .worker-mobile-tab-label { font-size: 11px; line-height: 1; } /* ========================================================================== 移动端 我的订单 (Worker Orders Mobile Page) ========================================================================== */ .worker-orders-mobile-page { display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; } /* 顶部滑动状态胶囊栏 */ .worker-orders-mobile-status-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 0 4px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .worker-orders-mobile-status-bar::-webkit-scrollbar { display: none; } .worker-orders-status-pill { flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s ease; } .worker-orders-status-pill.active { background: var(--theme-primary); color: #ffffff; border-color: var(--theme-primary); box-shadow: 0 2px 6px rgba(255, 106, 0, 0.25); font-weight: 600; } .worker-orders-status-pill-count { background: rgba(0, 0, 0, 0.06); color: inherit; font-size: 10px; padding: 0 5px; border-radius: 999px; line-height: 16px; } .worker-orders-status-pill.active .worker-orders-status-pill-count { background: rgba(255, 255, 255, 0.25); color: #ffffff; } .worker-orders-status-pill-main { display: inline-flex; align-items: center; gap: 4px; } .worker-orders-status-pill-settlement { color: #94a3b8; font-size: 10px; line-height: 14px; white-space: nowrap; } .worker-orders-status-pill.active .worker-orders-status-pill-settlement { color: rgba(255, 255, 255, 0.86); } /* 搜索与快捷刷新栏 */ .worker-orders-mobile-search-row { display: flex; align-items: center; gap: 6px; width: 100%; } .worker-orders-mobile-search-input { flex: 1; } /* 订单卡片列表 */ .worker-orders-mobile-list { display: flex; flex-direction: column; gap: 12px; width: 100%; } .worker-order-mobile-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } /* 头部:分类 + 订单号 + 状态 */ .worker-order-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .worker-order-mobile-header-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; } .worker-order-mobile-tag { margin: 0; font-size: 11px; padding: 0 6px; line-height: 18px; } .worker-order-unread-tag { margin: 0; font-weight: 700; } .worker-order-mobile-orderno-text { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .worker-order-mobile-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* 商品名称与金额 */ .worker-order-mobile-main-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .worker-order-mobile-product-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .worker-order-mobile-price-badge { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; } .worker-order-mobile-price-label { font-size: 11px; color: #64748b; } .worker-order-mobile-price-num { font-size: 18px; font-weight: 800; color: #ea580c; line-height: 1; } /* 辅助信息行 (押金 & 接单时间) */ .worker-order-mobile-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #64748b; } .worker-order-mobile-sub-item { color: #64748b; } .worker-order-mobile-sub-time { color: #94a3b8; font-size: 11px; } /* 问题单提示 */ .worker-order-mobile-problem-box { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 10px; color: #b91c1c; font-size: 12px; line-height: 1.4; } /* 资料凭据区 */ .worker-order-mobile-credentials-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .worker-order-mobile-credentials-grid { display: grid; gap: 4px; font-size: 12px; } .worker-order-mobile-credential-line { display: flex; align-items: baseline; gap: 6px; line-height: 1.4; } .worker-order-mobile-credential-label { color: #64748b; font-size: 12px; flex-shrink: 0; } .worker-order-mobile-credential-val { color: #1e293b; font-weight: 600; word-break: break-all; } .worker-order-mobile-screenshots-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .worker-order-mobile-copy-toolbar { display: flex; gap: 8px; margin-top: 6px; border-top: 1px dashed #e2e8f0; padding-top: 8px; } /* 验收凭据条 */ .worker-order-mobile-acceptance-strip { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; } .worker-order-mobile-acceptance-files, .worker-order-mobile-draft-files { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .worker-order-mobile-acceptance-tag { font-size: 12px; color: #166534; font-weight: 600; } .worker-order-mobile-acceptance-text { font-size: 12px; color: #166534; line-height: 1.35; } /* 底部操作与备注行 */ .worker-order-mobile-footer-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 8px; border-top: 1px dashed #f1f5f9; padding-top: 10px; margin-top: 2px; } .worker-order-mobile-note-block { min-width: 104px; max-width: 140px; } .worker-order-mobile-add-note-btn { border: 1px dashed #cbd5e1; background: transparent; color: #64748b; border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 104px; white-space: nowrap; } .worker-order-mobile-btn-group { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; } .worker-order-mobile-action-submit { font-weight: 600; } .worker-orders-mobile-pagination { display: flex; justify-content: center; padding: 8px 0; } /* 移动端个人中心资金明细/申请记录卡片 */ .worker-profile-mobile-records { display: flex; flex-direction: column; gap: 8px; width: 100%; } .worker-profile-record-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .worker-profile-record-row-head { display: flex; align-items: center; justify-content: space-between; } .worker-profile-record-row-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #64748b; font-size: 12px; } .worker-profile-record-note { color: #334155; font-size: 12px; background: #f8fafc; padding: 4px 8px; border-radius: 4px; } .worker-profile-record-sub { color: #64748b; font-size: 11px; } .worker-profile-record-time { color: #94a3b8; font-size: 11px; margin-top: 2px; } /* ========================================================================== 移动端 个人中心 (Worker Profile Mobile Page) ========================================================================== */ .worker-profile-mobile-page { display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; } /* 顶部沉浸式个人卡片(明亮温润风格) */ .worker-profile-mobile-hero { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; color: #0f172a; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 10px; } .worker-profile-mobile-user-row { display: flex; align-items: center; gap: 12px; position: relative; } .worker-profile-mobile-avatar { background: linear-gradient(135deg, #ff8c00, #ea580c); color: #ffffff; font-weight: 700; font-size: 20px; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.25); flex-shrink: 0; } .worker-profile-mobile-user-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .worker-profile-mobile-name-row { display: flex; align-items: center; gap: 6px; } .worker-profile-mobile-name { font-size: 17px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .worker-profile-mobile-tags-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .worker-profile-mobile-vip-badge { display: inline-flex; align-items: center; padding: 1px 6px; background: linear-gradient(135deg, #fef08a, #facc15); color: #854d0e; border-radius: 4px; font-size: 10px; font-weight: 700; line-height: 14px; } .worker-profile-mobile-tag { margin: 0; font-size: 10px; padding: 0 4px; line-height: 16px; } .worker-profile-mobile-account-text { font-size: 11px; color: #64748b; } .worker-profile-mobile-refresh-btn { color: #64748b; background: #f1f5f9; border: none; width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; } .worker-profile-mobile-refresh-btn:hover, .worker-profile-mobile-refresh-btn:focus { color: var(--theme-primary); background: #e2e8f0; } .worker-profile-mobile-hero-bottom { border-top: 1px solid #f1f5f9; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; } .worker-profile-mobile-invite-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; background: #fff7ed; border: 1px solid #ffedd5; border-radius: 6px; padding: 4px 8px; } .worker-profile-mobile-invite-label { color: #9a3412; font-size: 11px; } .worker-profile-mobile-invite-code { color: #ea580c; letter-spacing: 0.5px; font-weight: 700; font-size: 13px; } .worker-profile-mobile-copy-btn { border: 1px solid #fdba74; background: #ffffff; color: #ea580c; border-radius: 4px; padding: 1px 6px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; } .worker-profile-mobile-level-box { display: flex; flex-direction: column; gap: 2px; } .worker-profile-mobile-level-text { font-size: 11px; color: #64748b; } /* 资产钱包卡片 */ .worker-profile-mobile-wallet-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 12px; } .worker-profile-mobile-wallet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .worker-profile-mobile-wallet-main { display: flex; flex-direction: column; gap: 2px; } .worker-profile-mobile-wallet-title { font-size: 11px; color: #64748b; } .worker-profile-mobile-wallet-amount { font-size: 24px; font-weight: 800; color: #ea580c; line-height: 1; } .worker-profile-mobile-wallet-actions { display: flex; align-items: center; gap: 8px; } .worker-profile-mobile-recharge-btn { font-weight: 600; } .worker-profile-mobile-withdraw-btn { font-weight: 600; } .worker-profile-mobile-wallet-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; border-top: 1px solid #f1f5f9; padding-top: 10px; text-align: center; } .worker-profile-mobile-wallet-col { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; } .worker-profile-mobile-wallet-col + .worker-profile-mobile-wallet-col { border-left: 1px solid #f1f5f9; } .worker-profile-mobile-sub-label { font-size: 11px; color: #64748b; } .worker-profile-mobile-sub-val { font-size: 14px; font-weight: 700; color: #1e293b; } /* 快捷操作宫格 */ .worker-profile-mobile-tools-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px 8px; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .worker-profile-mobile-tool-item { border: none; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 6px 2px; border-radius: 8px; transition: background 0.15s ease; -webkit-tap-highlight-color: transparent; } .worker-profile-mobile-tool-item:active { background: #f8fafc; transform: scale(0.96); } .worker-profile-mobile-tool-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; } .worker-profile-mobile-tool-item span { font-size: 11px; color: #334155; font-weight: 500; white-space: nowrap; } /* 记录与明细分段滑动卡片 */ .worker-profile-mobile-sections-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.04); overflow: hidden; display: flex; flex-direction: column; } .worker-profile-mobile-tab-nav { display: flex; border-bottom: 1px solid #e2e8f0; background: #f8fafc; } .worker-profile-mobile-tab-btn { flex: 1; border: none; background: transparent; padding: 10px 0; font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; position: relative; transition: all 0.15s ease; } .worker-profile-mobile-tab-btn.active { color: var(--theme-primary); font-weight: 700; background: #ffffff; } .worker-profile-mobile-tab-btn.active::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 2px; background: var(--theme-primary); border-radius: 2px; } .worker-profile-mobile-tab-body { padding: 12px; } .worker-profile-mobile-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } /* 账号详情列表 */ .worker-profile-mobile-account-list { display: flex; flex-direction: column; gap: 8px; } .worker-profile-mobile-account-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; } .worker-profile-mobile-acc-label { color: #64748b; } .worker-profile-mobile-acc-val { color: #0f172a; font-weight: 500; } /* ========================================================================== 移动端 抢单大厅 (Worker Hall Mobile Page) ========================================================================== */ .worker-hall-mobile-page { display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; } /* 顶部紧凑状态与控制栏 */ .worker-hall-mobile-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .worker-hall-mobile-stat-pill { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 5px 12px; font-size: 12px; color: #475569; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .worker-hall-mobile-stat-highlight { color: #ea580c; font-weight: 700; } .worker-hall-mobile-stat-divider { color: #cbd5e1; } .worker-hall-mobile-top-actions { display: flex; align-items: center; gap: 8px; } /* 游戏 / 一级分类横向卡片条 */ .worker-hall-game-cards-scroll { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 4px 0 6px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .worker-hall-game-cards-scroll::-webkit-scrollbar { display: none; } .worker-hall-game-card { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 8px 6px 8px; min-width: 66px; max-width: 82px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .worker-hall-game-card:hover { border-color: #cbd5e1; transform: translateY(-1px); } .worker-hall-game-card.active { border-color: var(--theme-primary); background: #fff7ed; box-shadow: 0 3px 10px rgba(255, 106, 0, 0.15); } .worker-hall-game-icon-box { width: 42px; height: 42px; border-radius: 10px; background: #f8fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); } .worker-hall-game-card.active .worker-hall-game-icon-box { background: #ffedd5; } .worker-hall-game-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .worker-hall-game-initial { font-size: 18px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); letter-spacing: 0.5px; } .worker-hall-game-title { font-size: 12px; font-weight: 500; color: #334155; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } .worker-hall-game-card.active .worker-hall-game-title { color: var(--theme-primary); font-weight: 600; } /* 二级分类联动条 */ .worker-hall-subcat-bar { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 4px 0 2px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; animation: fadeInSubcat 0.2s ease; } .worker-hall-subcat-bar::-webkit-scrollbar { display: none; } .worker-hall-subcat-label { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #64748b; margin-right: 2px; } @keyframes fadeInSubcat { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* 分类横向滑动胶囊条 */ .worker-hall-mobile-category-bar { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 0 2px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .worker-hall-mobile-category-bar::-webkit-scrollbar { display: none; } .worker-hall-mobile-cat-pill { flex-shrink: 0; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s ease; } .worker-hall-mobile-cat-pill.active { background: var(--theme-primary); color: #ffffff; border-color: var(--theme-primary); box-shadow: 0 2px 6px rgba(255, 106, 0, 0.25); font-weight: 600; } /* 搜索栏 */ .worker-hall-mobile-search-row { display: flex; align-items: center; gap: 8px; width: 100%; } .worker-hall-mobile-search-input { flex: 1; } /* 移动端呼吸感舒展订单卡片列表 */ .worker-hall-mobile-list { display: flex; flex-direction: column; gap: 12px; width: 100%; } .worker-hall-mobile-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 14px 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .worker-hall-mobile-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .worker-hall-mobile-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .worker-hall-mobile-tag { margin: 0; font-size: 11px; padding: 1px 6px; line-height: 18px; border-radius: 4px; } .worker-hall-mobile-card-orderno { font-size: 11px; color: #94a3b8; white-space: nowrap; } .worker-hall-mobile-card-main { display: flex; flex-direction: column; gap: 4px; } .worker-hall-mobile-card-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.4; word-break: break-all; } .worker-hall-mobile-card-meta { font-size: 12px; color: #64748b; line-height: 1.4; } /* 底部操作与报酬行 */ .worker-hall-mobile-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed #f1f5f9; padding-top: 10px; margin-top: 2px; } .worker-hall-mobile-card-price-group { display: flex; align-items: baseline; gap: 6px; } .worker-hall-mobile-card-price-label { font-size: 11px; color: #64748b; } .worker-hall-mobile-card-price-val { font-size: 22px; font-weight: 800; color: #ea580c; line-height: 1; } .worker-hall-mobile-card-btn-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .worker-hall-mobile-grab-btn { min-width: 100px; height: 36px; border-radius: 8px; font-weight: 700; font-size: 14px; padding: 0 16px; } .worker-hall-leaderboard { display: flex; flex-direction: column; gap: 12px; } .worker-hall-leaderboard-title-icon { color: #d97706; } .worker-hall-leaderboard-caption { font-size: 12px; } .worker-hall-leaderboard-tabs .ant-tabs-nav { margin-bottom: 0; } .worker-hall-leaderboard-loading { display: flex; justify-content: center; padding: 36px 0; } .worker-hall-leaderboard-list { display: flex; flex-direction: column; gap: 8px; } .worker-hall-leaderboard-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #ffffff; } .worker-hall-leaderboard-row.is-current { border-color: #fb923c; background: #fff7ed; } .worker-hall-leaderboard-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; } .worker-hall-leaderboard-rank.rank-1 { background: #fef3c7; color: #a16207; } .worker-hall-leaderboard-rank.rank-2 { background: #e2e8f0; color: #475569; } .worker-hall-leaderboard-rank.rank-3 { background: #fee2e2; color: #b45309; } .worker-hall-leaderboard-worker { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .worker-hall-leaderboard-worker .ant-typography { display: block; font-size: 13px; } .worker-hall-leaderboard-count { color: #c2410c; white-space: nowrap; } .worker-hall-leaderboard-current { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; } .worker-hall-leaderboard-current .ant-typography:last-child { grid-column: 1 / -1; font-size: 12px; } /* ===== 打手端响应式断点 ===== */ @media (max-width: 768px) { .worker-profile-wallet-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .worker-profile-wallet-item:nth-child(3) { border-left: 0; border-top: 1px solid #f0f0f0; } .worker-profile-wallet-item:nth-child(4) { border-top: 1px solid #f0f0f0; } } @media (max-width: 720px) { .worker-announcement { height: 38px; margin-bottom: 10px; padding: 0 10px; gap: 8px; font-size: 13px; } .worker-announcement-label { padding: 3px 6px; font-size: 12px; } .worker-page-head { align-items: stretch; flex-direction: column; } .worker-hall-toolbar { align-items: stretch; flex-direction: column; } .worker-hall-search { width: 100%; } .worker-hall-card-grid { grid-template-columns: 1fr; } .worker-hall-card { padding: 16px; } .worker-hall-card-actions-row { align-items: stretch; flex-direction: column; } .worker-hall-card-grab-row { flex-direction: column; } } @media (max-width: 480px) { .worker-hall-summary-strip { grid-template-columns: 1fr; } .worker-hall-summary-item + .worker-hall-summary-item { border-top: 1px solid #e5e7eb; border-left: 0; } } .worker-speech-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 4px; color: #6b7280; font-size: 13px; } .worker-mobile-header .worker-speech-toggle { margin-bottom: 0; padding: 0; font-size: 12px; } .worker-hall-grab-confirm-toggle { display: inline-flex; align-items: center; gap: 6px; color: #6b7280; font-size: 13px; white-space: nowrap; } .finance-summary-item { color: #4b5563; font-size: 13px; } .finance-summary-item strong { color: #111827; } /* ===== 售后争议与工单仲裁中心 (打手端) ===== */ .worker-after-sales-page { width: 100%; display: flex; flex-direction: column; gap: 16px; } .worker-after-sales-alert-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #ea580c; background: #fff7ed; border: 1px solid #fed7aa; padding: 2px 10px; border-radius: 9999px; } .worker-after-sales-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); animation: worker-after-sales-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } @keyframes worker-after-sales-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } } .worker-as-loading-state, .worker-as-empty-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 48px 20px; text-align: center; } /* 售后单列表 */ .worker-after-sales-list { display: flex; flex-direction: column; gap: 12px; } /* 售后卡片容器 */ .worker-as-case-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .worker-as-case-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } .worker-as-case-card.is-status-awaiting_worker_response { border-left: 3px solid #f59e0b; } .worker-as-case-card.is-status-under_review { border-left: 3px solid #3b82f6; } .worker-as-case-card.is-status-recovery_pending { border-left: 3px solid #ef4444; } .worker-as-case-card.is-status-closed { border-left: 3px solid #10b981; } /* ===== 折叠单行紧凑视图 (已关闭案件默认折叠) ===== */ .worker-as-case-card.is-collapsed { border-radius: 10px; } .worker-as-collapsed-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 12px; cursor: pointer; user-select: none; } .worker-as-collapsed-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; } .worker-as-product-title-collapsed { font-size: 14px !important; color: #0f172a !important; font-weight: 600 !important; max-width: 360px; } .worker-as-recovery-brief { font-size: 12px; color: #dc2626; font-weight: 700; background: #fef2f2; border: 1px solid #fecaca; padding: 1px 8px; border-radius: 6px; } .worker-as-collapsed-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .worker-as-toggle-btn { font-size: 13px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; padding: 0 4px !important; } /* ===== 展开详情完整视图 ===== */ /* 卡片头部 */ .worker-as-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 18px; background: #fafbfc; border-bottom: 1px solid #f1f5f9; } .worker-as-card-header-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .worker-as-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; } .worker-as-status-badge.is-awaiting_worker_response { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .worker-as-status-badge.is-under_review { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .worker-as-status-badge.is-recovery_pending { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .worker-as-status-badge.is-closed { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .worker-as-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .worker-as-problem-tag { border-radius: 6px; font-weight: 500; margin: 0 !important; } .worker-as-product-title { font-size: 15px !important; font-weight: 700 !important; color: #0f172a !important; max-width: 360px; } .worker-as-share-tag { background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; font-size: 11px !important; margin: 0 !important; } .worker-as-card-header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .worker-as-meta-time { font-size: 12px; color: #94a3b8; display: inline-flex; align-items: center; } .worker-as-meta-code { font-size: 12px !important; color: #64748b !important; background: #ffffff; border: 1px solid #e2e8f0; padding: 2px 8px; border-radius: 6px; cursor: pointer; transition: all 0.15s; } .worker-as-meta-code:hover { border-color: #cbd5e1; color: #0f172a !important; } /* 主体对比区域 (双列并排) */ .worker-as-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 18px; } .worker-as-col { display: flex; flex-direction: column; gap: 8px; } .worker-as-col-header { display: flex; align-items: center; gap: 8px; } .worker-as-avatar-pill { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; } .worker-as-avatar-pill.buyer { background: #fee2e2; color: #ef4444; } .worker-as-avatar-pill.worker { background: #dcfce7; color: #16a34a; } .worker-as-col-title { font-size: 13px; font-weight: 700; color: #334155; } .worker-as-col-subtitle { font-size: 12px; color: #94a3b8; margin-left: auto; } .worker-as-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .worker-as-box.buyer-box { background: #fafbfc; border-color: #e2e8f0; } .worker-as-box.worker-box { background: #f0fdf4; border-color: #bbf7d0; } .worker-as-complaint-text { margin: 0; font-size: 14px; line-height: 1.6; color: #1e293b; white-space: pre-wrap; word-break: break-word; } .worker-as-worker-text { margin: 0; font-size: 14px; line-height: 1.6; color: #14532d; white-space: pre-wrap; word-break: break-word; } .worker-as-empty-text { margin: 0; font-size: 13px; color: #94a3b8; font-style: italic; } .worker-as-box-files { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 8px; margin-top: 2px; } .worker-as-files-label { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 6px; } /* 待提交答辩 CTA 提示框 */ .worker-as-box.awaiting-cta-box { background: #fffdf5; border: 1.5px dashed #f59e0b; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; gap: 12px; } .worker-as-cta-content { display: flex; align-items: center; gap: 12px; text-align: left; } .worker-as-cta-icon-wrap { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #fef3c7; color: #d97706; font-size: 18px; flex-shrink: 0; } .worker-as-cta-title { margin: 0 0 2px 0; font-size: 14px; font-weight: 700; color: #92400e; } .worker-as-cta-desc { margin: 0; font-size: 12px; color: #b45309; line-height: 1.4; } .worker-as-submit-btn { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; border: none !important; font-weight: 600 !important; height: 34px !important; padding: 0 18px !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2) !important; align-self: center; } /* 审核中 / 结案中性状态框 */ .worker-as-box.neutral-state-box { background: #f8fafc; border: 1px dashed #cbd5e1; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 14px; } .worker-as-neutral-icon { font-size: 18px; color: #94a3b8; flex-shrink: 0; } .worker-as-neutral-text { margin: 0; font-size: 13px; color: #64748b; line-height: 1.5; } /* 底部仲裁裁决横幅 */ .worker-as-resolution-banner { background: #fafbfc; border-top: 1px solid #eef2f6; padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; } .worker-as-resolution-banner.is-pending { background: #f0f9ff; border-top-color: #bae6fd; } .worker-as-resolution-head { display: flex; align-items: center; justify-content: space-between; } .worker-as-resolution-head-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .worker-as-gavel-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: #1e293b; color: #ffffff; font-size: 11px; } .worker-as-resolution-title { font-size: 13px; font-weight: 700; color: #0f172a; } .worker-as-resolution-tag { font-weight: 600; border-radius: 6px; margin: 0 !important; } .worker-as-resolution-time { font-size: 12px; color: #94a3b8; } .worker-as-resolution-note { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.5; } .worker-as-resolution-note .note-label { font-weight: 600; color: #475569; } .worker-as-resolution-note .note-content { color: #1e293b; } /* 资金处理明细标签 */ .worker-as-financial-breakdown { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .worker-as-financial-breakdown .financial-label { font-size: 12px; font-weight: 600; color: #64748b; flex-shrink: 0; } .financial-chips-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .financial-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.2; } .financial-chip .chip-name { opacity: 0.85; } .financial-chip .chip-amount { font-weight: 800; font-feature-settings: 'tnum'; } .financial-chip .chip-hint { font-size: 11px; font-weight: normal; opacity: 0.75; } .financial-chip.is-recovery { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .financial-chip.is-deposit { background: #fff7ed; color: #ea580c; border: 1px solid #ffedd5; } .financial-chip.is-available { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } .financial-chip.is-debt { background: #fef2f2; color: #b91c1c; border: 1px solid #f87171; } .financial-chip.is-refunded { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; } /* 弹窗样式 */ .worker-as-modal-buyer-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; } .worker-as-modal-buyer-summary .modal-summary-title { font-size: 13px; font-weight: 700; color: #334155; display: flex; align-items: center; margin-bottom: 6px; } .worker-as-modal-buyer-summary .modal-summary-content { font-size: 13px; color: #1e293b; line-height: 1.5; margin-bottom: 8px; } .worker-as-modal-buyer-summary .modal-summary-files { border-top: 1px solid #e2e8f0; padding-top: 8px; } /* 响应式调整 */ @media (max-width: 768px) { .worker-as-card-body { grid-template-columns: 1fr; padding: 12px; } .worker-as-card-header { padding: 10px 14px; } .worker-as-collapsed-row { flex-direction: column; align-items: flex-start; gap: 8px; } .worker-as-collapsed-right { width: 100%; justify-content: space-between; } } /* ========================================================================== 接单平台全局视觉升级 (Global Worker Platform UI Upgrade) ========================================================================== */ /* ===== 打手工作台专属侧边栏 ===== */ .worker-shell.admin-shell { background: #f8fafc; } .worker-sider { background: #ffffff !important; border-right: 1px solid #e2e8f0 !important; box-shadow: 2px 0 12px rgba(15, 23, 42, 0.03) !important; } .worker-sider-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px 16px; border-bottom: 1px solid #f1f5f9; } .worker-sider-brand-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #ff6a00 0%, #ff8e3c 100%); display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 800; font-size: 18px; box-shadow: 0 4px 10px rgba(255, 106, 0, 0.28); flex-shrink: 0; } .worker-sider-brand-text { display: flex; flex-direction: column; min-width: 0; } .worker-sider-brand-text strong { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.2; letter-spacing: -0.01em; } .worker-sider-brand-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #059669; font-weight: 500; margin-top: 2px; } .worker-sider-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: worker-hall-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } .worker-sider-profile-card { margin: 12px 12px 8px 12px; padding: 10px 12px; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; } .worker-sider-profile-top { display: flex; align-items: center; gap: 8px; } .worker-sider-avatar { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #ffffff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; } .worker-sider-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .worker-sider-username { font-size: 13px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .worker-sider-status-badge { font-size: 10px; color: #059669; display: inline-block; line-height: 1.2; margin-top: 1px; } .worker-sider-level-pill { display: flex; align-items: center; justify-content: space-between; padding: 3px 8px; background: #ffffff; border: 1px solid #fed7aa; border-radius: 6px; font-size: 11px; } .worker-sider-level-text { color: #ea580c; font-weight: 600; } .worker-sider-balance-text { color: #059669; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } /* 侧边栏菜单定制 */ .worker-sider .ant-menu { background: transparent !important; border-inline-end: none !important; padding: 4px 8px; } .worker-sider .ant-menu-item { border-radius: 8px !important; margin-block: 4px !important; font-size: 13px !important; font-weight: 500 !important; color: #475569 !important; height: 40px !important; line-height: 40px !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .worker-sider .ant-menu-item:hover { background: #f1f5f9 !important; color: #0f172a !important; } .worker-sider .ant-menu-item-selected { background: #fff7ed !important; color: var(--theme-primary) !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 var(--theme-primary); } .worker-sider .ant-menu-item-selected .anticon { color: var(--theme-primary) !important; } .worker-menu-label-with-badge { display: flex; align-items: center; justify-content: space-between; width: 100%; } .worker-menu-badge { background: #ef4444; color: #ffffff; font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 9999px; line-height: 16px; height: 16px; box-shadow: 0 1px 3px rgba(239, 68, 68, 0.35); } .worker-sider-footer { margin-top: auto; padding: 12px; border-top: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 8px; } .worker-sider-logout-btn { border-color: #fee2e2 !important; color: #dc2626 !important; background: #fff5f5 !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .worker-sider-logout-btn:hover { background: #fee2e2 !important; border-color: #fca5a5 !important; } /* ===== 我的订单 桌面端头部与 4 栏 KPI 看板 ===== */ .worker-orders-desktop-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; background: #ffffff; padding: 14px 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .worker-orders-header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .worker-orders-heading.ant-typography { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -0.02em; } .worker-orders-live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; padding: 2px 10px; border-radius: 9999px; } .worker-orders-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); animation: worker-order-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } @keyframes worker-order-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } } .worker-orders-header-center { flex: 1; max-width: 520px; min-width: 260px; } .worker-orders-desktop-search { width: 100%; } .worker-orders-desktop-search .ant-input { border-radius: 8px 0 0 8px; padding: 6px 14px; border-color: #cbd5e1; } .worker-orders-desktop-search .ant-input:hover, .worker-orders-desktop-search .ant-input:focus { border-color: var(--theme-primary); } .worker-orders-desktop-search .ant-btn { border-radius: 0 8px 8px 0; padding: 6px 18px; height: auto; font-weight: 500; } .worker-orders-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* 订单 4 栏 KPI 网格 */ .worker-orders-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } @media (max-width: 1200px) { .worker-orders-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .worker-orders-kpi-grid { grid-template-columns: 1fr; } } .worker-orders-kpi-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; cursor: pointer; user-select: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .worker-orders-kpi-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); transform: translateY(-2px); } .worker-orders-kpi-card.active { border-color: var(--theme-primary); background: linear-gradient(180deg, #fffbf7 0%, #ffffff 100%); box-shadow: 0 4px 14px rgba(255, 106, 0, 0.16); transform: translateY(-2px); } .worker-orders-kpi-top { display: flex; align-items: center; gap: 12px; } .worker-orders-kpi-icon-wrap { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .worker-orders-kpi-icon-wrap.in-progress { background: #eff6ff; color: #2563eb; } .worker-orders-kpi-icon-wrap.pending { background: #faf5ff; color: #9333ea; } .worker-orders-kpi-icon-wrap.problem { background: #fef2f2; color: #dc2626; } .worker-orders-kpi-icon-wrap.accepted { background: #ecfdf5; color: #059669; } .worker-orders-kpi-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .worker-orders-kpi-title { font-size: 12px; color: #64748b; font-weight: 500; } .worker-orders-kpi-val { font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.2; } .worker-orders-kpi-unit { font-size: 12px; font-weight: 400; color: #64748b; margin-left: 2px; } .worker-orders-kpi-bottom { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 12px; } .worker-orders-kpi-sub-label { color: #64748b; } .worker-orders-kpi-sub-val { color: #0f172a; font-weight: 600; } .worker-orders-card .ant-card-body { padding: 16px; } .worker-orders-table .ant-table-thead > tr > th { background: #f8fafc; color: #475569; font-weight: 600; font-size: 13px; } /* ===== 个人中心 桌面端 Hero 与 钱包网格 ===== */ .worker-profile-hero-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 16px; } .worker-profile-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .worker-profile-hero-user { display: flex; align-items: center; gap: 14px; } .worker-profile-avatar { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #ffffff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); flex-shrink: 0; text-transform: uppercase; } .worker-profile-user-info { display: flex; flex-direction: column; gap: 4px; } .worker-profile-name-row { display: flex; align-items: center; gap: 8px; } .worker-profile-name { font-size: 18px; font-weight: 700; color: #0f172a; } .worker-profile-status-tag { margin: 0 !important; font-size: 11px; } .worker-profile-level-badge { font-size: 11px; padding: 1px 8px; border-radius: 9999px; background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; font-weight: 600; } .worker-profile-meta-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; } .worker-profile-meta-divider { color: #cbd5e1; } .worker-profile-privileges { display: flex; align-items: center; gap: 10px; } .worker-profile-priv-chip { display: flex; flex-direction: column; padding: 6px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; } .worker-profile-priv-chip .priv-label { font-size: 11px; color: #64748b; } .worker-profile-priv-chip .priv-val { font-size: 14px; font-weight: 700; color: #0f172a; } .worker-profile-progress-bar-wrap { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #f1f5f9; } .worker-profile-progress-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; } .worker-profile-progress-title { color: #334155; } .worker-profile-progress-sub { color: #94a3b8; } /* 个人中心 4 栏资产网格 */ .worker-profile-wallet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; } @media (max-width: 1200px) { .worker-profile-wallet-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .worker-profile-wallet-grid { grid-template-columns: 1fr; } } .worker-profile-wallet-kpi-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); } .worker-profile-wallet-kpi-card:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); transform: translateY(-2px); } .worker-profile-kpi-top { display: flex; align-items: center; gap: 12px; } .worker-profile-kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .worker-profile-kpi-icon.kpi-wallet { background: #fff7ed; color: #ea580c; } .worker-profile-kpi-icon.kpi-quota { background: #eff6ff; color: #2563eb; } .worker-profile-kpi-icon.kpi-tasks { background: #faf5ff; color: #9333ea; } .worker-profile-kpi-icon.kpi-pool { background: #ecfdf5; color: #059669; } .worker-profile-kpi-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .worker-profile-kpi-label { font-size: 12px; color: #64748b; font-weight: 500; } .worker-profile-kpi-val { font-size: 20px; font-weight: 700; color: #0f172a; line-height: 1.2; } .worker-profile-kpi-bottom { padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 11px; color: #94a3b8; } /* 分组操作卡片 */ .worker-profile-actions-card { margin-bottom: 16px; border-radius: 12px; } .worker-profile-actions-grouped { display: flex; flex-direction: column; gap: 14px; } .worker-profile-actions-group { display: flex; align-items: center; gap: 16px; padding: 8px 12px; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 8px; flex-wrap: wrap; } .worker-profile-group-title { font-size: 12px; font-weight: 600; color: #475569; min-width: 70px; } .worker-profile-details-card { border-radius: 12px; } /* ===== 苏尔南寄卖页(对齐订单/售后视觉) ===== */ .worker-consignment-page .worker-orders-card { border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .worker-consignment-tip { margin-bottom: 8px; border-radius: 8px; } .worker-consignment-tip.ant-alert { padding: 6px 12px; } .worker-consignment-divider.ant-divider { margin: 4px 0 10px; border-color: #e2e8f0; color: #64748b; font-size: 13px; font-weight: 600; } .worker-consignment-form .ant-form-item { margin-bottom: 12px; } .worker-consignment-specs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; } .worker-consignment-spec-grid { display: grid; grid-template-columns: minmax(168px, 1.05fr) minmax(148px, 0.9fr) minmax(176px, 1.05fr) minmax(280px, 1.7fr) minmax(280px, 1.7fr); gap: 12px; } .worker-consignment-price-grid { display: grid; grid-template-columns: 240px 240px; gap: 12px; justify-content: start; } .worker-consignment-spec-card { margin-bottom: 0 !important; padding: 12px 14px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; } .worker-consignment-spec-card .ant-form-item-label { padding-bottom: 8px; } .worker-consignment-spec-card .ant-form-item-label > label { height: auto; font-size: 13px; font-weight: 600; color: #334155; } .worker-consignment-spec-card .ant-form-item-control-input, .worker-consignment-spec-card .ant-form-item-control-input-content { min-height: 40px; } .worker-consignment-chips { display: flex !important; width: 100%; } .worker-consignment-chips .ant-radio-button-wrapper { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 8px; line-height: 38px; text-align: center; font-size: 14px; font-weight: 600; border-color: #e2e8f0; } .worker-consignment-chips .ant-radio-button-wrapper:first-child { border-radius: 8px 0 0 8px; } .worker-consignment-chips .ant-radio-button-wrapper:last-child { border-radius: 0 8px 8px 0; } /* 只有一个选项时(如苏尔南区服的「互通」):first/last 两条规则同时命中, last-child 在后会把它覆盖成"左方右圆",这里统一四个角都是圆的 */ .worker-consignment-chips .ant-radio-button-wrapper:only-child { border-radius: 8px; } .worker-consignment-chips .ant-radio-button-wrapper-checked { background: #ff6a00; border-color: #ff6a00; color: #fff; box-shadow: none; } .worker-consignment-chips.is-count .ant-radio-button-wrapper { padding: 0 4px; font-size: 13px; } .worker-consignment-spec-card.is-name .ant-input, .worker-consignment-spec-card.is-price .ant-input-number, .worker-consignment-spec-card.is-price .ant-input-number-input { height: 40px; font-size: 15px; } .worker-consignment-spec-card.is-price .ant-input-number-group-addon { font-size: 14px; font-weight: 600; } .worker-consignment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; padding-top: 8px; border-top: 1px solid #f1f5f9; } @media (max-width: 1280px) { .worker-consignment-spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .worker-consignment-spec-card.is-count { grid-column: span 3; } } @media (max-width: 768px) { .worker-consignment-spec-grid, .worker-consignment-price-grid { grid-template-columns: 1fr; } .worker-consignment-spec-card.is-count { grid-column: auto; } } .worker-consignment-filter-row { display: flex; flex-wrap: wrap; gap: 8px; } .worker-consignment-record-list { display: flex; flex-direction: column; gap: 10px; } .worker-consignment-record-card { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; } .worker-consignment-record-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; } .worker-consignment-record-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .worker-consignment-record-no { font-size: 12px; } .worker-consignment-record-meta { display: flex; flex-wrap: wrap; gap: 12px 16px; font-size: 13px; color: #475569; } .worker-consignment-record-meta strong { color: #cf1322; font-weight: 600; } .worker-consignment-record-time { flex: 0 0 auto; font-size: 12px; white-space: nowrap; } .worker-consignment-record-shots { margin-top: 2px; } /* 「下一步提示」与倒计时说明:比主信息弱一档的次要文字 */ .worker-consignment-record-hint { font-size: 12px; line-height: 1.5; } .worker-consignment-record-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } @media (max-width: 768px) { .worker-consignment-record-card { flex-direction: column; } .worker-consignment-record-time { white-space: normal; } .worker-consignment-actions { flex-direction: column; align-items: stretch; } .worker-consignment-actions .ant-btn { width: 100%; } }