/* ========================================================================== 打手端 (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-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: 12px 14px; border-radius: 12px; background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); display: grid; gap: 10px; } .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: #64748b; } .worker-hall-game-card.active .worker-hall-game-initial { color: var(--theme-primary); } .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 { display: flex; flex-direction: column; gap: 12px; } .worker-after-sales-reminder { border-radius: 10px; } .worker-after-sales-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .worker-after-sales-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e6f4ff; color: #1677ff; font-size: 11px; line-height: 1; } .worker-after-sales-list { display: flex; flex-direction: column; gap: 12px; } .worker-after-sales-item { background: #ffffff; border: 1px solid #e2e8f0; border-left: 3px solid #cbd5e1; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04); } .worker-after-sales-item.is-awaiting { border-left-color: #fa8c16; background: #fffdf8; } .worker-after-sales-item-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; } .worker-after-sales-item-meta { margin-top: -4px; } .worker-after-sales-block { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 10px 12px; } .worker-after-sales-block.is-mine { background: #f6ffed; border-color: #e6f4dc; } .worker-after-sales-block.is-result { background: #fff7e6; border-color: #ffe7ba; } .worker-after-sales-block-label { font-size: 12px; color: #64748b; margin-bottom: 6px; } .worker-after-sales-item.is-awaiting .worker-after-sales-item-actions { display: flex; justify-content: flex-end; } .worker-after-sales-mobile .worker-after-sales-toolbar .ant-segmented { overflow-x: auto; }