style(worker-portal): 优化打手端我要寄卖页面顶部卡片布局，轻量化重构首屏体验

1. 移除第 4 个占位无意义的「发布寄卖苏尔南」卡片，核心指标精准收敛为待审核、履约中、已完成 3 大状态； 2. 新增 worker-consignment-kpi-grid 紧凑统计栏，移动端改为横向 3 列等宽平铺，高度由 320px+ 骤降至 52px，竖向空间节省超 80%； 3. 剔除卡片内无实际价值的长句副说明文案，改为上行轻量状态标签 + 下行醒目数字的微排版，支持点击秒切记录过滤； 4. 彻底解决移动端首屏被巨幅卡片占满导致表单下沉的问题，首屏直接呈现履约押金提示与规格选择，提升打手发布效率； 5. 前端 59 个自动化测试全绿，全套 check 与 build 100% 通过。
2026-09-21 12:31:03 +08:00
parent 577e0eec02
commit a4f6f5ed9b
3 changed files with 182 additions and 63 deletions
@@ -4212,6 +4212,130 @@ body {
 }

 /* ===== 苏尔南寄卖页（对齐订单/售后视觉） ===== */
+.worker-consignment-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.worker-consignment-kpi-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+}
+
+.worker-consignment-kpi-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
+  transform: translateY(-1px);
+}
+
+.worker-consignment-kpi-card.active {
+  border-color: var(--theme-primary);
+  background: linear-gradient(180deg, #fffbf7 0%, #ffffff 100%);
+  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.15);
+}
+
+.worker-consignment-kpi-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.worker-consignment-kpi-title {
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.worker-consignment-kpi-val {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.2;
+}
+
+.worker-consignment-kpi-unit {
+  font-size: 12px;
+  font-weight: normal;
+  color: #94a3b8;
+  margin-left: 2px;
+}
+
+.worker-consignment-kpi-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.worker-consignment-kpi-icon.pending {
+  background: #fdf4ff;
+  color: #c026d3;
+}
+
+.worker-consignment-kpi-icon.in-progress {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.worker-consignment-kpi-icon.accepted {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+@media (max-width: 640px) {
+  .worker-consignment-kpi-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 6px;
+    margin-bottom: 10px;
+  }
+
+  .worker-consignment-kpi-card {
+    padding: 8px 4px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: 2px;
+    border-radius: 8px;
+    min-height: 52px;
+  }
+
+  .worker-consignment-kpi-icon {
+    display: none;
+  }
+
+  .worker-consignment-kpi-title {
+    font-size: 11px;
+    color: #64748b;
+  }
+
+  .worker-consignment-kpi-val {
+    font-size: 16px;
+  }
+
+  .worker-consignment-page .worker-orders-desktop-header {
+    margin-bottom: 8px;
+  }
+}
+
 .worker-consignment-page .worker-orders-card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;