编辑页面

HTML内容
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>师傅端</title>
  <style>
    :root {
      --navy: #0f3763;
      --navy-2: #173f6c;
      --ink: #1f2733;
      --muted: #7b8493;
      --line: #e9edf4;
      --page: #f5f7fc;
      --soft: #f9fbff;
      --gold: #f7d392;
      --active: #10345e;
      --shadow: 0 10px 26px rgba(19, 52, 92, .13);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 20% 8%, rgba(81, 130, 178, .18), transparent 28%),
        linear-gradient(135deg, #eef3fb, #ffffff 45%, #e9eef7);
      color: var(--ink);
    }

    button {
      border: 0;
      padding: 0;
      font: inherit;
      color: inherit;
      background: transparent;
      cursor: pointer;
    }

    .prototype-shell {
      width: min(100vw, 430px);
      min-height: 100vh;
      display: grid;
      place-items: center;
    }

    .phone {
      position: relative;
      width: min(100vw, 430px);
      height: min(100vh, 932px);
      min-height: 720px;
      overflow: hidden;
      background: var(--page);
      box-shadow: 0 18px 60px rgba(13, 31, 56, .18);
    }

    .screen {
      position: absolute;
      inset: 0;
      display: none;
      padding-bottom: 92px;
      overflow: hidden auto;
      background: var(--page);
    }

    .screen.active {
      display: block;
    }

    .statusbar {
      display: none;
      height: 0;
      padding: 22px 34px 0;
      align-items: flex-start;
      justify-content: space-between;
      font-weight: 700;
      font-size: 18px;
      color: #05070a;
      pointer-events: none;
    }

    .signals {
      display: flex;
      align-items: center;
      gap: 9px;
      transform: translateY(1px);
    }

    .bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 15px;
    }

    .bars span {
      width: 3px;
      border-radius: 2px;
      background: #07090d;
    }

    .bars span:nth-child(1) { height: 5px; opacity: .45; }
    .bars span:nth-child(2) { height: 8px; opacity: .6; }
    .bars span:nth-child(3) { height: 11px; opacity: .75; }
    .bars span:nth-child(4) { height: 14px; }

    .wifi {
      position: relative;
      width: 21px;
      height: 15px;
    }

    .wifi::before,
    .wifi::after {
      content: "";
      position: absolute;
      left: 50%;
      border: 4px solid #07090d;
      border-bottom: 0;
      border-left-color: transparent;
      border-right-color: transparent;
      border-radius: 18px 18px 0 0;
      transform: translateX(-50%);
    }

    .wifi::before {
      width: 21px;
      height: 12px;
      top: 0;
    }

    .wifi::after {
      width: 11px;
      height: 7px;
      top: 7px;
    }

    .battery {
      width: 30px;
      height: 17px;
      border-radius: 5px;
      background: #07090d;
      color: white;
      display: grid;
      place-items: center;
      font-size: 12px;
      line-height: 1;
    }

    .capsule {
      position: absolute;
      top: 24px;
      right: 18px;
      z-index: 8;
      width: 96px;
      height: 40px;
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      align-items: center;
      border-radius: 24px;
      background: rgba(255, 255, 255, .88);
      color: #111;
      box-shadow: 0 1px 10px rgba(37, 54, 80, .06);
      backdrop-filter: blur(12px);
    }

    .capsule .dots {
      letter-spacing: 3px;
      text-align: center;
      font-size: 23px;
      line-height: 1;
      transform: translateY(-2px);
    }

    .capsule .divider {
      height: 20px;
      background: rgba(0, 0, 0, .09);
    }

    .capsule .target {
      position: relative;
      width: 24px;
      height: 24px;
      margin: auto;
      border: 3px solid #12151b;
      border-radius: 50%;
    }

    .capsule .target::after {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 50%;
      background: #12151b;
    }

    .home-hero,
    .mine-hero {
      position: relative;
      min-height: 284px;
      padding-top: 0;
      overflow: hidden;
      color: white;
      background:
        linear-gradient(118deg, rgba(255,255,255,.08) 0 2px, transparent 2px 13px),
        linear-gradient(152deg, #0d315a, #1f5388);
    }

    .home-hero::before,
    .mine-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .38;
      background:
        repeating-linear-gradient(50deg, transparent 0 9px, rgba(255,255,255,.12) 10px 12px, transparent 13px 21px);
      mask-image: linear-gradient(135deg, transparent 0 44%, #000 65%);
    }

    .profile-row {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 84px 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 86px 18px 0;
    }

    .home-hero .profile-row {
      grid-template-columns: 84px 1fr;
    }

    .avatar {
      width: 70px;
      height: 70px;
      border: 3px solid rgba(255, 255, 255, .95);
      border-radius: 50%;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #d2af91;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    }

    .avatar svg {
      width: 74px;
      height: 74px;
      display: block;
    }

    .name {
      font-size: 23px;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 18px;
    }

    .stats-line {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      color: #eadcc9;
      font-size: 17px;
      font-weight: 700;
      white-space: nowrap;
    }

    .workbench-title {
      margin: 0 0 8px;
      color: #fff;
      font-size: 23px;
      font-weight: 700;
      line-height: 1.25;
    }

    .workbench-subtitle {
      color: rgba(255, 255, 255, .78);
      font-size: 14px;
      line-height: 1.4;
    }

    .accept-status {
      position: relative;
      z-index: 3;
      margin: 22px 18px 0;
      height: 58px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .14);
      color: #fff;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
      backdrop-filter: blur(8px);
    }

    .accept-status .label {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .accept-status strong {
      font-size: 17px;
      line-height: 1.1;
    }

    .accept-status span {
      color: rgba(255, 255, 255, .72);
      font-size: 12px;
      line-height: 1.1;
    }

    .income-overview {
      position: relative;
      z-index: 5;
      margin: -24px 18px 0;
      padding: 18px 16px 18px;
      border-radius: 10px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .income-overview h2 {
      margin: 0 0 14px;
      font-size: 19px;
      line-height: 1.2;
      letter-spacing: 0;
      color: var(--ink);
    }

    .income-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 8px;
    }

    .income-item {
      height: 86px;
      display: grid;
      grid-template-rows: 22px 20px 16px;
      align-content: center;
      justify-items: center;
      gap: 5px;
      border-radius: 8px;
      background: #f7f9fd;
      text-align: center;
    }

    .income-icon {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      color: #2d5f98;
    }

    .income-icon svg {
      width: 20px;
      height: 20px;
      stroke-width: 2;
    }

    .income-value {
      color: var(--active);
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }

    .income-label {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.1;
    }

    .switch {
      flex: 0 0 auto;
      width: 52px;
      height: 30px;
      padding: 3px;
      border-radius: 16px;
      background: #dfe6f1;
      transition: background .18s ease;
    }

    .switch::before {
      content: "";
      display: block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 3px 8px rgba(4, 15, 30, .22);
      transition: transform .18s ease;
    }

    .switch[aria-checked="true"] {
      background: #36c873;
    }

    .switch[aria-checked="true"]::before {
      transform: translateX(22px);
    }

    .state-toggle {
      align-self: start;
      margin-top: 7px;
      min-width: 78px;
      height: 36px;
      padding: 0 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 5px;
      background: #416fa9;
      color: #fff;
      font-size: 17px;
      font-weight: 700;
    }

    .state-toggle .chevron {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 10px solid currentColor;
      transform: translateY(2px);
    }

    .state-menu {
      position: absolute;
      z-index: 20;
      top: 70px;
      right: 18px;
      width: 116px;
      padding: 8px;
      display: none;
      border-radius: 8px;
      background: rgba(255, 255, 255, .98);
      box-shadow: var(--shadow);
    }

    .state-menu.open {
      display: grid;
      gap: 3px;
    }

    .state-menu button {
      height: 36px;
      border-radius: 6px;
      color: var(--ink);
      font-size: 15px;
      text-align: center;
    }

    .state-menu button:hover {
      background: #eef4fb;
    }

    .home-card {
      position: relative;
      z-index: 4;
      margin: 24px 18px 0;
      min-height: 270px;
      padding-bottom: 16px;
      border-radius: 10px;
      background: white;
      box-shadow: var(--shadow);
    }

    .card-titlebar {
      height: 66px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 19px;
    }

    .link-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #3d424a;
      font-size: 16px;
    }

    .arrow {
      width: 11px;
      height: 11px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
      transform: rotate(45deg);
    }

    .empty-state {
      min-height: 178px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 12px;
      color: #3d424a;
      font-size: 18px;
    }

    .empty-art {
      width: 134px;
      height: 112px;
      color: #a9bbd3;
    }

    .recent-list {
      display: grid;
      gap: 10px;
      padding: 0 14px;
    }

    .recent-item {
      padding: 13px 12px;
      display: grid;
      gap: 9px;
      border-radius: 8px;
      background: #f8fafd;
      box-shadow: inset 0 0 0 1px #edf1f7;
      cursor: pointer;
      transition: transform .16s ease, background .16s ease;
    }

    .recent-item:active {
      transform: scale(.99);
      background: #f1f6fc;
    }

    .recent-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .recent-title {
      min-width: 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .recent-status {
      flex: 0 0 auto;
      min-width: 58px;
      height: 24px;
      padding: 0 8px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: #eaf2fc;
      color: var(--active);
      font-size: 12px;
      font-weight: 700;
    }

    .nav-mini {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: #e9f8ee;
      color: #39b564;
      flex: 0 0 auto;
    }

    .nav-mini svg {
      width: 14px;
      height: 14px;
      stroke-width: 2.2;
    }

    .status-with-icon {
      position: relative;
      display: inline-flex;
      align-items: flex-start;
      justify-content: center;
      flex: 0 0 auto;
      min-width: 58px;
    }

    .status-with-icon .nav-mini {
      position: absolute;
      top: 43px;
      left: 50%;
      transform: translateX(-50%);
    }

    .recent-meta {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.25;
    }

    .task-hall {
      position: relative;
      z-index: 4;
      margin: 24px 18px 0;
      padding: 18px 16px 16px;
      border-radius: 10px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .task-hall h2,
    .notice-card h2 {
      margin: 0 0 14px;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.2;
    }

    .task-card {
      display: grid;
      gap: 10px;
      padding: 14px 12px;
      border-radius: 8px;
      background: #f8fafd;
      box-shadow: inset 0 0 0 1px #edf1f7;
    }

    .task-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .task-title {
      color: var(--active);
      font-size: 17px;
      font-weight: 800;
    }

    .task-meta {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .task-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .notice-card {
      position: relative;
      z-index: 4;
      margin: 18px 18px 0;
      padding: 18px 16px;
      border-radius: 10px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .notice-list {
      display: grid;
      gap: 10px;
    }

    .notice-item {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
      color: #4b5b70;
      font-size: 13px;
      line-height: 1.4;
    }

    .notice-dot {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #eaf2fc;
      color: var(--active);
      font-size: 12px;
      font-weight: 800;
    }

    .message-screen {
      background: #f7f8fc;
    }

    .message-page-head {
      padding: 54px 18px 14px;
      background: #f7f8fc;
      color: var(--ink);
      font-size: 22px;
      font-weight: 800;
    }

    .message-list {
      padding: 0 18px 108px;
      display: grid;
      gap: 12px;
    }

    .message-card {
      position: relative;
      padding: 16px 14px;
      display: grid;
      grid-template-columns: 38px 1fr auto;
      gap: 12px;
      align-items: start;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(19, 52, 92, .06);
      cursor: pointer;
      transition: transform .16s ease, background .16s ease;
    }

    .message-card:active {
      transform: scale(.99);
      background: #f1f6fc;
    }

    .message-card.unread::after {
      content: "";
      position: absolute;
      top: 14px;
      right: 12px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff4d4f;
    }

    .message-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #eaf2fc;
      color: var(--active);
      font-size: 14px;
      font-weight: 800;
    }

    .message-main {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .message-title {
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.2;
    }

    .message-desc {
      color: #5b6b80;
      font-size: 13px;
      line-height: 1.4;
    }

    .message-time {
      color: #9aa4b4;
      font-size: 12px;
      white-space: nowrap;
      padding-right: 12px;
    }

    .unread-badge {
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      display: inline-grid;
      place-items: center;
      border-radius: 10px;
      background: #ff4d4f;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .message-page-head {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tab {
      position: relative;
    }

    .tab-badge {
      position: absolute;
      top: 6px;
      left: 55%;
      min-width: 17px;
      height: 17px;
      padding: 0 5px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: #ff4d4f;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }

    .order-screen {
      background: #f7f8fc;
    }

    .page-head {
      position: relative;
      min-height: 118px;
      padding: 0 18px;
      background: #f7f8fc;
    }

    .title-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 60px;
      font-size: 20px;
    }

    .flower-logo {
      width: 32px;
      height: 32px;
      position: relative;
    }

    .flower-logo span {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      mix-blend-mode: multiply;
    }

    .flower-logo span:nth-child(1) { left: 0; top: 0; background: #e4171a; }
    .flower-logo span:nth-child(2) { right: 0; top: 0; background: #f0d10b; }
    .flower-logo span:nth-child(3) { left: 0; bottom: 0; background: #19a042; }
    .flower-logo span:nth-child(4) { right: 0; bottom: 0; background: #299fd7; }

    .status-tabs {
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 14px;
      white-space: nowrap;
    }

    .status-tab {
      position: relative;
      min-width: 56px;
      height: 44px;
      color: #252b34;
      font-size: 16px;
    }

    .status-tab.active {
      color: var(--active);
      font-weight: 700;
    }

    .status-tab.active::after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 4px;
      height: 2px;
      border-radius: 2px;
      background: var(--active);
    }

    .order-content {
      min-height: calc(100vh - 230px);
      display: grid;
      align-content: start;
      padding: 8px 18px 108px;
    }

    .order-list {
      display: none;
      gap: 12px;
      align-content: start;
    }

    .order-card {
      position: relative;
      min-height: 148px;
      padding: 16px 16px 16px;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(19, 52, 92, .06);
    }

    .order-card .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .badge {
      min-width: 54px;
      height: 22px;
      padding: 0 8px;
      display: inline-grid;
      place-items: center;
      border-radius: 11px;
      background: #eef4fb;
      color: var(--active);
      font-size: 12px;
      font-weight: 700;
    }

    .order-card h3 {
      margin: 0;
      color: var(--active);
      font-size: 17px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .order-card-body {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 12px;
      align-items: start;
    }

    .order-thumb {
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      background: #eef2f7;
      color: #99a7bb;
    }

    .order-thumb svg {
      width: 24px;
      height: 24px;
      stroke-width: 1.8;
    }

    .order-info {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: #4b5b70;
      font-size: 13px;
      line-height: 1.25;
    }

    .order-desc {
      color: #4b5b70;
      font-size: 13px;
      line-height: 1.35;
    }

    .order-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 14px;
    }

    .pill-btn {
      min-width: 84px;
      height: 32px;
      padding: 0 14px;
      border-radius: 16px;
      background: var(--active);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .pill-btn.secondary {
      background: #eef2f7;
      color: #475061;
    }

    .detail-screen {
      background: #f7f8fc;
      overflow: hidden;
      padding-bottom: 0;
    }

    .detail-head {
      position: sticky;
      top: 0;
      z-index: 10;
      min-height: 76px;
      padding: 24px 18px 0;
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      background: rgba(247, 248, 252, .96);
      backdrop-filter: blur(10px);
    }

    .detail-head.with-subtitle {
      min-height: 92px;
      align-items: start;
    }

    .back-btn {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: var(--active);
      background: #eef4fb;
    }

    .back-btn svg {
      width: 20px;
      height: 20px;
      stroke-width: 2.3;
    }

    .detail-title {
      text-align: center;
      color: var(--ink);
      font-size: 18px;
      font-weight: 700;
    }

    .head-title-stack {
      display: grid;
      gap: 6px;
      justify-items: center;
    }

    .head-subtitle {
      min-width: 188px;
      min-height: 22px;
      padding: 3px 10px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      background: #eef4fb;
      color: var(--active);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
    }

    .detail-content {
      padding: 14px 18px 108px;
      display: grid;
      gap: 14px;
    }

    .detail-screen .detail-content {
      height: calc(100% - 76px);
      overflow-y: auto;
      align-content: start;
    }

    .detail-content.has-fixed-actions {
      padding-bottom: 184px;
    }

    .detail-summary,
    .detail-panel,
    .detail-card {
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(19, 52, 92, .06);
    }

    .detail-card {
      padding: 18px 16px;
      display: grid;
      gap: 14px;
    }

    .detail-card-title {
      margin: 0;
      color: var(--active);
      font-size: 18px;
      line-height: 1.2;
      font-weight: 800;
    }

    .upload-box {
      height: 196px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #eef2f7;
      color: #99a7bb;
    }

    .upload-box svg {
      width: 42px;
      height: 42px;
      stroke-width: 1.7;
    }

    .detail-summary {
      padding: 18px 16px;
      display: grid;
      gap: 12px;
    }

    .detail-summary-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .detail-summary h2 {
      margin: 0;
      color: var(--active);
      font-size: 21px;
      line-height: 1.2;
    }

    .detail-desc {
      margin: 0;
      color: #4b5b70;
      font-size: 14px;
      line-height: 1.55;
    }

    .detail-panel {
      padding: 18px 16px 4px;
      display: grid;
      gap: 0;
    }

    .detail-panel .detail-card-title {
      margin-bottom: 8px;
    }

    .detail-row {
      min-height: 48px;
      display: grid;
      grid-template-columns: 82px 1fr;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }

    .detail-row:last-child {
      border-bottom: 0;
    }

    .detail-row span:first-child {
      color: var(--muted);
    }

    .detail-row span:last-child {
      color: var(--ink);
      text-align: right;
      line-height: 1.35;
      font-weight: 700;
    }

    .detail-row .price {
      color: #ff2f2f;
    }

    .detail-note {
      color: #5b6b80;
      font-size: 13px;
      line-height: 1.45;
    }

    .pickup-section,
    .visit-section,
    .remark-section {
      display: grid;
      gap: 10px;
    }

    .inline-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #7b8493;
      font-size: 14px;
      font-weight: 700;
    }

    .address-book-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--active);
      font-size: 13px;
      font-weight: 800;
    }

    .address-card,
    .visit-card,
    .remark-box {
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(19, 52, 92, .06);
    }

    .address-card {
      padding: 14px;
      display: grid;
      grid-template-columns: 42px 1fr auto;
      gap: 12px;
      align-items: start;
    }

    .contact-avatar {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--active);
      color: #fff;
      font-size: 15px;
      font-weight: 800;
    }

    .contact-main {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .contact-name {
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.1;
    }

    .contact-phone {
      margin-left: 8px;
      color: #7c8796;
      font-size: 13px;
      font-weight: 700;
    }

    .contact-address {
      color: #566579;
      font-size: 13px;
      line-height: 1.35;
    }

    .address-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #7d8897;
    }

    .round-icon-btn {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #eef4fb;
      color: var(--active);
    }

    .round-icon-btn.nav {
      background: #e9f8ee;
      color: #39b564;
    }

    .round-icon-btn.close {
      background: transparent;
      color: #8a94a3;
    }

    .round-icon-btn svg,
    .address-book-link svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
    }

    .visit-card {
      padding: 16px 14px;
      display: grid;
      gap: 14px;
    }

    .visit-date-row {
      display: grid;
      grid-template-columns: 26px 1fr 20px;
      align-items: center;
      color: #111827;
      font-size: 18px;
      font-weight: 800;
    }

    .visit-date-row svg {
      width: 22px;
      height: 22px;
      stroke-width: 2.2;
    }

    .visit-slots {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .visit-slot {
      height: 58px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 6px;
      border-radius: 10px;
      background: #edf1f7;
      color: #111827;
      font-size: 16px;
      font-weight: 800;
    }

    .visit-slot small {
      color: #687386;
      font-size: 12px;
      line-height: 1;
    }

    .visit-slot.active {
      background: #27499d;
      color: #fff;
    }

    .visit-slot.active small {
      color: #fff;
    }

    .remark-box {
      min-height: 50px;
      padding: 16px;
      color: #9aa4b4;
      font-size: 14px;
    }

    .detail-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 2px;
    }

    .detail-actions.single {
      grid-template-columns: 1fr;
    }

    .detail-actions:has(.detail-action-btn:not(.hidden):nth-child(3)) {
      grid-template-columns: 1fr 1fr;
    }

    .detail-actions .detail-action-btn:nth-child(3):not(.hidden) {
      grid-column: 1 / -1;
    }

    .detail-actions.hidden {
      display: none;
    }

    .detail-action-btn.hidden {
      display: none;
    }

    .detail-action-btn {
      height: 34px;
      border-radius: 18px;
      background: #eef4fb;
      color: var(--active);
      box-shadow: inset 0 0 0 1px #d8e2ee;
      font-weight: 800;
      font-size: 14px;
    }

    .detail-action-btn.danger {
      background: #fff1f1;
      color: #d82020;
      box-shadow: inset 0 0 0 1px #ffcaca;
    }

    .detail-actions.fixed-bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      padding: 12px 18px 18px;
      grid-template-columns: 1fr 1fr;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 -8px 24px rgba(19, 52, 92, .12);
      backdrop-filter: blur(10px);
    }

    .detail-actions.fixed-bottom .detail-action-btn {
      height: 44px;
      border-radius: 22px;
      font-size: 15px;
      box-shadow: none;
    }

    .detail-actions.fixed-bottom .detail-action-btn:first-child {
      background: #fff4eb;
      color: #b55316;
      box-shadow: inset 0 0 0 1px #ffd4b7;
    }

    .detail-actions.fixed-bottom .detail-action-btn:nth-child(2) {
      background: var(--active);
      color: #fff;
    }

    .mine-hero {
      min-height: 332px;
    }

    .mine-hero .profile-row {
      grid-template-columns: 84px 1fr 36px;
      padding-top: 84px;
    }

    .mine-hero .name {
      margin-bottom: 16px;
    }

    .subline {
      color: #eadcc9;
      font-size: 17px;
      white-space: nowrap;
    }

    .edit-btn {
      width: 34px;
      height: 34px;
      color: #fff;
    }

    .balance-card {
      position: relative;
      z-index: 3;
      height: 114px;
      margin: 22px 30px 0;
      padding: 18px 20px;
      display: grid;
      grid-template-columns: 1fr 74px;
      align-items: center;
      border-radius: 12px 12px 0 0;
      background: rgba(11, 42, 78, .82);
      color: #eadcc9;
    }

    .balance-card .label {
      font-size: 16px;
      margin-bottom: 16px;
    }

    .balance {
      display: flex;
      align-items: baseline;
      gap: 4px;
      font-size: 21px;
    }

    .balance strong {
      color: #f2dfc3;
      font-size: 38px;
      font-weight: 400;
      line-height: .8;
    }

    .recharge {
      width: 70px;
      height: 32px;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffe4ae, #f4c775);
      color: #704a14;
      font-size: 16px;
      font-weight: 700;
    }

    .mine-panel {
      position: relative;
      z-index: 5;
      margin: -30px 18px 0;
      padding: 20px 18px 24px;
      border-radius: 8px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .panel-title {
      margin-bottom: 16px;
      font-size: 19px;
    }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .quick-item {
      display: grid;
      justify-items: center;
      gap: 10px;
      font-size: 16px;
      color: #222832;
    }

    .quick-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #0d315a;
      color: #fff;
      box-shadow: inset 0 -8px 10px rgba(255, 255, 255, .16);
    }

    .menu-panel {
      margin: 18px 18px 0;
      padding: 22px 20px;
      display: grid;
      gap: 22px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(19, 52, 92, .06);
    }

    .menu-item {
      display: grid;
      grid-template-columns: 30px max-content 1fr;
      align-items: center;
      gap: 10px;
      min-height: 30px;
      font-size: 18px;
      text-align: left;
    }

    .menu-icon {
      width: 22px;
      height: 22px;
      color: var(--active);
    }

    .wallet-screen {
      background: #f7f8fc;
    }

    .wallet-content {
      padding: 14px 14px 108px;
      display: grid;
      gap: 14px;
    }

    .wallet-card {
      padding: 20px 18px;
      display: grid;
      gap: 16px;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(19, 52, 92, .06);
    }

    .wallet-title {
      margin: 0;
      color: var(--active);
      font-size: 20px;
      line-height: 1.2;
      font-weight: 800;
    }

    .wallet-balance {
      display: flex;
      align-items: baseline;
      color: var(--active);
      font-size: 24px;
      line-height: 1;
    }

    .wallet-balance strong {
      font-size: 30px;
      font-weight: 500;
    }

    .wallet-row {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-top: 1px solid var(--line);
      color: #7b8493;
      font-size: 14px;
    }

    .wallet-row strong {
      color: var(--ink);
      font-weight: 800;
    }

    .wallet-amount-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .wallet-amount {
      height: 54px;
      border-radius: 8px;
      background: #f1f5fa;
      color: var(--active);
      box-shadow: inset 0 0 0 1px #d9e2ee;
      font-size: 16px;
      font-weight: 800;
    }

    .wallet-amount.selected {
      background: #e8f0fb;
      box-shadow: inset 0 0 0 2px var(--active);
    }

    .wallet-confirm {
      height: 46px;
      border-radius: 8px;
      background: var(--active);
      color: #fff;
      font-size: 16px;
      font-weight: 800;
    }

    .wallet-record {
      display: grid;
      gap: 10px;
      color: #7b8493;
      font-size: 14px;
    }

    .wallet-record strong {
      color: var(--ink);
      font-weight: 800;
    }

    .wallet-record-item {
      padding: 12px 0;
      display: grid;
      gap: 7px;
      border-top: 1px solid var(--line);
    }

    .wallet-record-item:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .wallet-record-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .wallet-record-amount {
      color: #ff2f2f;
    }

    .wallet-record-meta {
      display: grid;
      gap: 4px;
      color: #7b8493;
      font-size: 12px;
      line-height: 1.3;
    }

    .profile-screen {
      background: #f7f8fc;
    }

    .profile-content {
      padding: 14px 14px 108px;
      display: grid;
      gap: 14px;
    }

    .profile-card {
      padding: 20px 18px;
      display: grid;
      gap: 14px;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(19, 52, 92, .06);
    }

    .profile-avatar-row {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 14px;
      align-items: center;
    }

    .profile-mini-avatar {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #eaf2fc;
      color: var(--active);
      font-size: 20px;
      font-weight: 800;
    }

    .profile-row-info {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--line);
      color: #7b8493;
      font-size: 14px;
    }

    .profile-row-info strong {
      color: var(--ink);
      font-weight: 800;
      text-align: right;
    }

    .service-screen {
      background: #f7f8fc;
    }

    .service-content {
      min-height: calc(100% - 76px);
      padding: 14px 14px 132px;
      display: grid;
      align-content: space-between;
      gap: 18px;
    }

    .chat-card,
    .service-input-panel {
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(19, 52, 92, .06);
    }

    .chat-card {
      padding: 18px 16px;
      display: grid;
      gap: 14px;
    }

    .chat-title {
      margin: 0;
      color: var(--active);
      font-size: 18px;
      line-height: 1.2;
      font-weight: 800;
    }

    .message {
      max-width: 82%;
      padding: 11px 12px;
      border-radius: 8px;
      color: #273244;
      background: #eef3f8;
      font-size: 14px;
      line-height: 1.5;
    }

    .message.user {
      justify-self: end;
      max-width: 76%;
      color: #fff;
      background: var(--active);
    }

    .service-input-panel {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 20px;
      padding: 18px 16px;
      display: grid;
      gap: 12px;
    }

    .service-input-title {
      color: var(--active);
      font-size: 18px;
      font-weight: 800;
    }

    .service-input-row {
      display: grid;
      grid-template-columns: 1fr 42px 46px;
      gap: 10px;
      align-items: center;
    }

    .service-input {
      height: 46px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      border-radius: 23px;
      background: #fff;
      color: #a5afbd;
      box-shadow: inset 0 0 0 1px #d8e2ee;
      font-size: 14px;
    }

    .service-send {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--active);
      color: #fff;
    }

    .photo-pick {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #eef4fb;
      color: var(--active);
      box-shadow: inset 0 0 0 1px #d8e2ee;
    }

    .service-send svg,
    .photo-pick svg {
      width: 22px;
      height: 22px;
      stroke-width: 2.2;
    }

    .toast {
      position: absolute;
      z-index: 80;
      left: 50%;
      bottom: 104px;
      max-width: calc(100% - 64px);
      padding: 10px 16px;
      border-radius: 20px;
      background: rgba(15, 27, 43, .88);
      color: #fff;
      font-size: 14px;
      opacity: 0;
      transform: translate(-50%, 18px);
      transition: .22s ease;
      pointer-events: none;
      white-space: nowrap;
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .tabbar {
      position: absolute;
      z-index: 40;
      left: 0;
      right: 0;
      bottom: 0;
      height: 80px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 -2px 16px rgba(20, 42, 72, .06);
    }

    .tabbar.hidden {
      display: none;
    }

    .tab {
      display: grid;
      place-items: center;
      gap: 4px;
      color: #8f97a6;
      font-size: 13px;
    }

    .tab svg {
      width: 26px;
      height: 26px;
      stroke-width: 2.2;
    }

    .tab.active {
      color: var(--active);
      font-weight: 700;
    }

    .modal-layer {
      position: absolute;
      z-index: 70;
      inset: 0;
      display: none;
      align-items: end;
      background: rgba(9, 20, 35, .3);
    }

    .modal-layer.open {
      display: flex;
    }

    .sheet {
      width: 100%;
      padding: 20px 22px 28px;
      border-radius: 16px 16px 0 0;
      background: #fff;
      box-shadow: 0 -12px 35px rgba(14, 32, 52, .15);
    }

    .sheet h2 {
      margin: 0 0 18px;
      font-size: 20px;
    }

    .amount-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    .amount-grid button {
      height: 48px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f9fbff;
      font-weight: 700;
      color: var(--active);
    }

    .primary-wide {
      width: 100%;
      height: 48px;
      border-radius: 8px;
      background: var(--active);
      color: white;
      font-weight: 700;
    }

    @media (max-width: 380px) {
      .phone {
        min-height: 680px;
      }

      .profile-row {
        grid-template-columns: 74px 1fr auto;
        gap: 14px;
      }

      .avatar {
        width: 66px;
        height: 66px;
      }

      .stats-line,
      .subline {
        font-size: 16px;
      }

      .status-tab {
        min-width: 50px;
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
  <main class="prototype-shell">
    <section class="phone" aria-label="接单小程序交互原型">
      <div class="capsule" aria-hidden="true">
        <div class="dots">•••</div>
        <div class="divider"></div>
        <div class="target"></div>
      </div>

      <section class="screen active" data-screen="home">
        <header class="home-hero">
          <div class="statusbar">
            <span>16:04</span>
            <div class="signals">
              <div class="bars"><span></span><span></span><span></span><span></span></div>
              <div class="wifi"></div>
              <div class="battery">80</div>
            </div>
          </div>
          <div class="profile-row">
            <div class="avatar" aria-hidden="true">
              <svg viewBox="0 0 100 100" role="img">
                <rect width="100" height="100" fill="#d5b28f"/>
                <circle cx="50" cy="43" r="23" fill="#f8dfc6"/>
                <path d="M28 40c2-18 17-27 34-22 10 3 17 12 17 25-15-4-25-12-37-24 1 12-4 19-14 21Z" fill="#151a2d"/>
                <path d="M25 100c4-24 16-36 25-36s22 12 25 36Z" fill="#f0bd3c"/>
                <path d="M40 63h20v14L50 83 40 77Z" fill="#fff"/>
                <path d="M33 44h16M51 44h16" stroke="#2c3140" stroke-width="2" stroke-linecap="round"/>
                <circle cx="40" cy="45" r="6" fill="none" stroke="#2c3140" stroke-width="2"/>
                <circle cx="60" cy="45" r="6" fill="none" stroke="#2c3140" stroke-width="2"/>
                <path d="M47 56c3 2 6 2 9 0" fill="none" stroke="#a05c48" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </div>
            <div>
              <h1 class="workbench-title">周师傅工作台</h1>
              <div class="workbench-subtitle">今日待取件3单，需服务5单</div>
            </div>
          </div>
          <div class="accept-status">
            <div class="label">
              <strong>周师傅接单状态</strong>
              <span id="acceptStatusText">已开启，正在接收新订单</span>
            </div>
            <button class="switch" id="acceptSwitch" type="button" role="switch" aria-checked="true" aria-label="周师傅接单状态"></button>
          </div>
        </header>

        <section class="income-overview" aria-labelledby="incomeTitle">
          <h2 id="incomeTitle">收益概览</h2>
          <div class="income-grid">
            <div class="income-item">
              <span class="income-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20"/><path d="M17 6.5c-.8-1-2.2-1.7-4.2-1.7-2.7 0-4.5 1.4-4.5 3.4 0 2.1 1.7 2.9 4.4 3.4 2.8.5 4.4 1.4 4.4 3.5 0 2-1.8 3.4-4.7 3.4-2.2 0-3.9-.8-5-2.1"/></svg>
              </span>
              <strong class="income-value">￥328.00</strong>
              <span class="income-label">本周收益</span>
            </div>
            <div class="income-item">
              <span class="income-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M8 3v4M16 3v4M4 10h16"/><path d="M9 15h6"/></svg>
              </span>
              <strong class="income-value">￥1000.99</strong>
              <span class="income-label">本月收益</span>
            </div>
            <div class="income-item">
              <span class="income-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10a2 2 0 0 1 2 2v14l-3-2-3 2-3-2-3 2V6a2 2 0 0 1 2-2Z"/><path d="M9 9h6M9 13h6"/></svg>
              </span>
              <strong class="income-value">86单</strong>
              <span class="income-label">累计接单</span>
            </div>
            <div class="income-item">
              <span class="income-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 8v5l3 2"/><path d="M5 3 3 5M19 3l2 2"/></svg>
              </span>
              <strong class="income-value">3单</strong>
              <span class="income-label">今日接单</span>
            </div>
            <div class="income-item">
              <span class="income-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5"/><path d="M4 19h16"/><path d="m7 15 3-4 3 2 5-7"/></svg>
              </span>
              <strong class="income-value">12单</strong>
              <span class="income-label">本周接单</span>
            </div>
            <div class="income-item">
              <span class="income-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 9h8M8 13h3M8 17h6"/><path d="M16 13h.01"/></svg>
              </span>
              <strong class="income-value">34单</strong>
              <span class="income-label">本月接单</span>
            </div>
          </div>
        </section>

        <article class="home-card">
          <div class="card-titlebar">
            <span>今日服务中</span>
            <button class="link-row" type="button" data-go="orders">查看全部 <span class="arrow"></span></button>
          </div>
          <div class="recent-list">
            <article class="recent-item" data-recent-detail="DD-20260709-002">
              <div class="recent-item-top">
                <div class="recent-title">洗污</div>
                <span class="recent-status">服务中</span>
              </div>
              <div class="recent-meta">
                <span>订单编号：DD-20260709-002</span>
                <span>地址：滨江区江南大道 66 号</span>
                <span>上门时间：07/09 10:00</span>
              </div>
            </article>
          </div>
        </article>
      </section>

      <section class="screen order-screen" data-screen="orders">
        <header class="page-head">
          <div class="statusbar">
            <span>16:05</span>
            <div class="signals">
              <div class="bars"><span></span><span></span><span></span><span></span></div>
              <div class="wifi"></div>
              <div class="battery">80</div>
            </div>
          </div>
          <div class="title-row">
            <div class="flower-logo" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
            <span>订单列表</span>
          </div>
          <nav class="status-tabs" aria-label="订单状态筛选">
            <button class="status-tab active" type="button" data-filter="全部">全部</button>
            <button class="status-tab" type="button" data-filter="待服务">待服务</button>
            <button class="status-tab" type="button" data-filter="服务中">服务中</button>
            <button class="status-tab" type="button" data-filter="待结算">待结算</button>
            <button class="status-tab" type="button" data-filter="已完成">已完成</button>
          </nav>
        </header>
        <div class="order-content">
          <div class="empty-state" id="orderEmpty">
            <svg class="empty-art" viewBox="0 0 180 150" aria-hidden="true">
              <path d="M42 132c28 10 78 10 104 0" fill="none" stroke="#e6ebf4" stroke-width="10" stroke-linecap="round"/>
              <rect x="46" y="36" width="91" height="82" rx="18" fill="#f8fbff" stroke="#a9bbd3" stroke-width="8"/>
              <path d="M47 78h89M72 51l17 16 29-31M110 53l30-14-16 27Z" fill="none" stroke="#d5deed" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="79" cy="98" r="18" fill="none" stroke="#fff" stroke-width="10"/>
              <path d="M107 99h31" stroke="#fff" stroke-width="7" stroke-linecap="round"/>
              <path d="M31 42l5 10 10 5-10 5-5 10-5-10-10-5 10-5ZM150 100l4 8 8 4-8 4-4 8-4-8-8-4 8-4Z" fill="#a9bbd3"/>
            </svg>
            <span>暂无订单</span>
          </div>
          <div class="order-list" id="orderList">
            <article class="order-card" data-status="待结算" data-title="挑补查验" data-clothing="西装" data-style-no="KH-XZ-20260709-001" data-commission="￥82.00" data-count="1件" data-number="DD-20260709-001" data-address="西湖区文三路 188 号" data-visit-time="07/09 09:30" data-desc="西装后摆破损已完成挑补查验，请确认最终结算价格。">
              <div class="top">
                <h3>挑补查验</h3>
                <span class="badge">待结算</span>
              </div>
              <div class="order-card-body">
                <div class="order-thumb" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
                </div>
                <div class="order-info">
                  <div class="order-desc">西装后摆破损已完成挑补查验，请确认最终结算价格。</div>
                  <span>订单编号：DD-20260709-001</span>
                  <span>地址：西湖区文三路 188 号</span>
                  <span>上门时间：07/09 09:30</span>
                </div>
              </div>
              <div class="order-actions">
                <button class="pill-btn" type="button" data-detail>查看详情</button>
              </div>
            </article>
            <article class="order-card" data-status="服务中" data-title="洗污" data-clothing="衬衫" data-style-no="KH-CS-20260709-002" data-count="2件" data-number="DD-20260709-002" data-address="滨江区江南大道 66 号" data-visit-time="07/09 10:00" data-desc="白色衬衫领口和袖口污渍处理中，等待师傅完成清洗复核。">
              <div class="top">
                <h3>洗污</h3>
                <span class="badge">服务中</span>
              </div>
              <div class="order-card-body">
                <div class="order-thumb" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
                </div>
                <div class="order-info">
                  <div class="order-desc">白色衬衫领口和袖口污渍处理中，等待师傅完成清洗复核。</div>
                  <span>订单编号：DD-20260709-002</span>
                  <span>地址：滨江区江南大道 66 号</span>
                  <span>上门时间：07/09 10:00</span>
                </div>
              </div>
              <div class="order-actions">
                <button class="pill-btn" type="button" data-detail>查看详情</button>
              </div>
            </article>
            <article class="order-card" data-status="待服务" data-title="修色" data-clothing="西装" data-style-no="KH-XZ-20260708-003" data-count="1件" data-number="DD-20260708-003" data-address="拱墅区湖墅南路 318 号" data-visit-time="07/08 16:56" data-desc="西装前片有色差，需安排师傅评估。">
              <div class="top">
                <h3>修色</h3>
                <span class="status-with-icon">
                  <span class="badge">待服务</span>
                  <span class="nav-mini" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m21 3-8 18-3-8-8-3Z"/></svg>
                  </span>
                </span>
              </div>
              <div class="order-card-body">
                <div class="order-thumb" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
                </div>
                <div class="order-info">
                  <div class="order-desc">西装前片有色差，需安排师傅评估。</div>
                  <span>订单编号：DD-20260708-003</span>
                  <span>地址：拱墅区湖墅南路 318 号</span>
                  <span>上门时间：07/08 16:56</span>
                </div>
              </div>
              <div class="order-actions">
                <button class="pill-btn" type="button" data-detail>查看详情</button>
              </div>
            </article>
            <article class="order-card" data-status="已完成" data-title="精洗养护" data-clothing="羊毛大衣" data-style-no="KH-DY-20260708-004" data-commission="￥96.00" data-count="1件" data-number="DD-20260708-004" data-address="上城区庆春路 98 号" data-visit-time="07/08 11:20" data-desc="羊毛大衣精洗完成，已通过质检并结算。">
              <div class="top">
                <h3>精洗养护</h3>
                <span class="badge">已完成</span>
              </div>
              <div class="order-card-body">
                <div class="order-thumb" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
                </div>
                <div class="order-info">
                  <div class="order-desc">羊毛大衣精洗完成，已通过质检并结算。</div>
                  <span>订单编号：DD-20260708-004</span>
                  <span>地址：上城区庆春路 98 号</span>
                  <span>上门时间：07/08 11:20</span>
                </div>
              </div>
              <div class="order-actions">
                <button class="pill-btn" type="button" data-detail>查看详情</button>
              </div>
            </article>
            <article class="order-card" data-status="待服务" data-title="皮衣补色" data-clothing="皮衣" data-style-no="KH-PY-20260710-006" data-count="1件" data-number="DD-20260710-006" data-address="西湖区学院路 99 号" data-visit-time="07/10 15:30" data-desc="皮衣局部掉色，需要师傅上门取件后进行补色评估。">
              <div class="top">
                <h3>皮衣补色</h3>
                <span class="status-with-icon">
                  <span class="badge">待服务</span>
                  <span class="nav-mini" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m21 3-8 18-3-8-8-3Z"/></svg>
                  </span>
                </span>
              </div>
              <div class="order-card-body">
                <div class="order-thumb" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
                </div>
                <div class="order-info">
                  <div class="order-desc">皮衣局部掉色，需要师傅上门取件后进行补色评估。</div>
                  <span>订单编号：DD-20260710-006</span>
                  <span>地址：西湖区学院路 99 号</span>
                  <span>上门时间：07/10 15:30</span>
                </div>
              </div>
              <div class="order-actions">
                <button class="pill-btn" type="button" data-detail>查看详情</button>
              </div>
            </article>
            <article class="order-card" data-status="待服务" data-title="裤脚修补" data-clothing="西裤" data-style-no="KH-XK-20260710-007" data-count="2件" data-number="DD-20260710-007" data-address="上城区凤起路 168 号" data-visit-time="07/10 17:00" data-desc="两条西裤裤脚磨损，需要上门取件后安排修补。">
              <div class="top">
                <h3>裤脚修补</h3>
                <span class="status-with-icon">
                  <span class="badge">待服务</span>
                  <span class="nav-mini" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m21 3-8 18-3-8-8-3Z"/></svg>
                  </span>
                </span>
              </div>
              <div class="order-card-body">
                <div class="order-thumb" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
                </div>
                <div class="order-info">
                  <div class="order-desc">两条西裤裤脚磨损，需要上门取件后安排修补。</div>
                  <span>订单编号：DD-20260710-007</span>
                  <span>地址：上城区凤起路 168 号</span>
                  <span>上门时间：07/10 17:00</span>
                </div>
              </div>
              <div class="order-actions">
                <button class="pill-btn" type="button" data-detail>查看详情</button>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section class="screen detail-screen" data-screen="orderDetail">
        <header class="detail-head">
          <button class="back-btn" type="button" id="detailBack" aria-label="返回订单列表">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
          </button>
          <div class="detail-title">订单详情</div>
          <span></span>
        </header>
        <div class="detail-content">
          <section class="detail-card">
            <h2 class="detail-card-title">上传衣服图片</h2>
            <div class="upload-box" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
            </div>
          </section>
          <section class="detail-panel" aria-labelledby="detailInfoTitle">
            <h2 class="detail-card-title" id="detailInfoTitle">订单信息</h2>
            <div class="detail-row">
              <span>订单编号</span>
              <span id="detailOrderNumber">DD-20260709-001</span>
            </div>
            <div class="detail-row">
              <span>款号</span>
              <span id="detailOrderStyleNo">KH-XZ-20260709-001</span>
            </div>
            <div class="detail-row">
              <span>订单状态</span>
              <span id="detailOrderStatus">待结算</span>
            </div>
            <div class="detail-row">
              <span>衣物类型</span>
              <span id="detailOrderTitle">挑补查验</span>
            </div>
            <div class="detail-row">
              <span>服装件数</span>
              <span id="detailOrderCount">1件</span>
            </div>
            <div class="detail-row">
              <span>描述</span>
              <span id="detailOrderDesc">西装后摆破损已完成挑补查验，请确认最终结算价格。</span>
            </div>
          </section>
          <section class="pickup-section" aria-labelledby="pickupTitle">
            <div class="inline-section-head">
              <span id="pickupTitle">取件地址</span>
            </div>
            <div class="address-card">
              <div class="contact-avatar">李</div>
              <div class="contact-main">
                <div class="contact-name">李女士 <span class="contact-phone">138****7234</span></div>
                <div class="contact-address" id="detailOrderAddress">北京市朝阳区三里屯工体北路4号院1号楼3单元502室</div>
              </div>
              <div class="address-actions">
                <button class="round-icon-btn" type="button" id="copyAddressBtn" aria-label="复制地址">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="10" height="10" rx="2"/><path d="M6 14H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v1"/></svg>
                </button>
                <button class="round-icon-btn" type="button" data-toast="已拨打联系人电话" aria-label="拨打电话">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 4l3 4-2 2c1 3 3 5 6 6l2-2 4 3-1 4c-9-1-15-7-16-16Z"/></svg>
                </button>
                <button class="round-icon-btn nav" type="button" data-toast="已打开导航" aria-label="导航">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 3-8 18-3-8-8-3Z"/></svg>
                </button>
              </div>
            </div>
          </section>
          <section class="visit-section" aria-labelledby="visitTitle">
            <div class="inline-section-head" id="visitTitle">期望上门时间</div>
            <div class="visit-card">
              <div class="visit-date-row">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                <span id="detailOrderVisitTime">2026年07月08日（明天）</span>
                <span class="arrow"></span>
              </div>
              <div class="visit-slots">
                <button class="visit-slot active" type="button" data-toast="已选择下午">
                  下午
                  <small>14:00-18:00</small>
                </button>
              </div>
            </div>
          </section>
          <section class="remark-section" aria-labelledby="remarkTitle">
            <div class="inline-section-head" id="remarkTitle">备注（可选）</div>
            <div class="remark-box">如门禁密码、停车位置等</div>
          </section>
          <section class="detail-panel" aria-label="费用信息">
            <div class="detail-row">
              <span id="detailFeeLabel">预估费用</span>
              <span class="price" id="detailFeeValue">￥50 - ￥150</span>
            </div>
            <div class="detail-note" id="detailFeeNote">* 实际费用由平台根据衣物检测后确认，取件免费</div>
          </section>
          <div class="detail-actions">
            <button class="detail-action-btn" type="button" data-detail-action="contact" data-toast="已联系客户">联系客服</button>
            <button class="detail-action-btn" type="button" data-detail-action="supplement" data-toast="已打开补充信息">补充信息</button>
            <button class="detail-action-btn" type="button" data-detail-action="confirm" data-toast="已确认价格">确认价格</button>
            <button class="detail-action-btn danger" type="button" data-detail-action="cancel" data-toast="已取消订单">取消订单</button>
          </div>
        </div>
      </section>

      <section class="screen" data-screen="mine">
        <header class="mine-hero">
          <div class="statusbar">
            <span>16:04</span>
            <div class="signals">
              <div class="bars"><span></span><span></span><span></span><span></span></div>
              <div class="wifi"></div>
              <div class="battery">80</div>
            </div>
          </div>
          <div class="profile-row">
            <div class="avatar" aria-hidden="true">
              <svg viewBox="0 0 100 100" role="img">
                <rect width="100" height="100" fill="#d5b28f"/>
                <circle cx="50" cy="43" r="23" fill="#f8dfc6"/>
                <path d="M28 40c2-18 17-27 34-22 10 3 17 12 17 25-15-4-25-12-37-24 1 12-4 19-14 21Z" fill="#151a2d"/>
                <path d="M25 100c4-24 16-36 25-36s22 12 25 36Z" fill="#f0bd3c"/>
                <path d="M40 63h20v14L50 83 40 77Z" fill="#fff"/>
                <path d="M33 44h16M51 44h16" stroke="#2c3140" stroke-width="2" stroke-linecap="round"/>
                <circle cx="40" cy="45" r="6" fill="none" stroke="#2c3140" stroke-width="2"/>
                <circle cx="60" cy="45" r="6" fill="none" stroke="#2c3140" stroke-width="2"/>
                <path d="M47 56c3 2 6 2 9 0" fill="none" stroke="#a05c48" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </div>
            <div>
              <div class="name">周师傅</div>
              <div class="subline">累计收益 ￥<span id="spentValue">1000.99</span></div>
            </div>
            <button class="edit-btn" type="button" id="profileEntry" aria-label="编辑个人信息">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M13.5 6.5l4 4" stroke="currentColor" stroke-width="2"/></svg>
            </button>
          </div>
          <div class="balance-card">
            <div>
              <div class="label">账户余额</div>
              <div class="balance">￥<strong id="balanceValue">0</strong><span>.00</span></div>
            </div>
            <button class="recharge" type="button" id="rechargeBtn">提现</button>
          </div>
        </header>

        <section class="mine-panel">
          <div class="panel-title">我的订单</div>
          <div class="quick-grid">
            <button class="quick-item" type="button" data-quick="全部">
              <span class="quick-icon"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h10v14H7z" fill="#eef4fb"/><path d="M9 12h6" stroke="#0d315a" stroke-width="2" stroke-linecap="round"/></svg></span>
              <span>全部订单</span>
            </button>
            <button class="quick-item" type="button" data-quick="待服务">
              <span class="quick-icon"><svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 4h8l-2 6 2 10H8l2-10Z" fill="#eef4fb"/></svg></span>
              <span>待服务</span>
            </button>
            <button class="quick-item" type="button" data-quick="服务中">
              <span class="quick-icon"><svg width="27" height="27" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5l5 3 5-3 4 4-3 3-1-1v8H7v-8l-1 1-3-3Z" fill="#eef4fb"/><path d="M10 12h5M12 10v5" stroke="#0d315a" stroke-width="2"/></svg></span>
              <span>服务中</span>
            </button>
            <button class="quick-item" type="button" data-quick="待结算">
              <span class="quick-icon"><svg width="27" height="27" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="4" width="14" height="16" rx="5" fill="#eef4fb"/><path d="M12 7v10M9 9h6M9 14h6" stroke="#0d315a" stroke-width="1.8" stroke-linecap="round"/></svg></span>
              <span>待结算</span>
            </button>
          </div>
        </section>

        <section class="menu-panel">
          <button class="menu-item" type="button" id="walletEntry">
            <svg class="menu-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4z" fill="#eaf1fb" stroke="currentColor" stroke-width="2"/><path d="M4 7V5h12" stroke="currentColor" stroke-width="2"/></svg>
            <span>我的钱包</span>
          </button>
          <button class="menu-item" type="button" id="serviceEntry">
            <svg class="menu-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4Z" fill="#eaf1fb" stroke="currentColor" stroke-width="2"/><path d="M9 10h6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            <span>在线客服</span>
          </button>
          <button class="menu-item" type="button" data-toast="客服电话：400-000-0000">
            <svg class="menu-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4l3 4-2 2c1 3 3 5 6 6l2-2 4 3-1 4c-9-1-15-7-16-16Z" fill="#eaf1fb" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
            <span>客服电话</span>
          </button>
          <button class="menu-item" type="button" data-toast="已退出登录">
            <svg class="menu-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h9v14H5z" fill="#eaf1fb" stroke="currentColor" stroke-width="2"/><path d="M13 12h8m-3-3 3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            <span>退出登录</span>
          </button>
        </section>
      </section>

      <section class="screen message-screen" data-screen="messages">
        <header class="message-page-head">消息列表 <span class="unread-badge">2</span></header>
        <div class="message-list">
          <article class="message-card unread" data-chat-title="紫色外套 · 肩线调整" data-chat-id="YH20260710008" data-chat-user="师傅您好，客户补充了肩线尺寸要求，请查看。" data-chat-reply="收到，我会按新的肩线尺寸先复核衣服状态。">
            <span class="message-icon">衣</span>
            <div class="message-main">
              <div class="message-title">紫色外套 · 肩线调整</div>
              <div class="message-desc">YH20260710008<br>师傅您好，客户补充了肩线尺寸要求，请查看。</div>
            </div>
            <span class="message-time">刚刚</span>
          </article>
          <article class="message-card unread" data-chat-title="米色风衣 · 袖长修改" data-chat-id="YH20260710009" data-chat-user="平台已更新取件时间，请确认是否可以上门。" data-chat-reply="可以，我会按更新后的时间上门取件。">
            <span class="message-icon">衣</span>
            <div class="message-main">
              <div class="message-title">米色风衣 · 袖长修改</div>
              <div class="message-desc">YH20260710009<br>平台已更新取件时间，请确认是否可以上门。</div>
            </div>
            <span class="message-time">5分钟前</span>
          </article>
          <article class="message-card" data-chat-title="蓝色连衣裙 · 收腰改短" data-chat-id="YH20260706001" data-chat-user="收到，已联系检测师，稍后回复您。" data-chat-reply="好的，我等检测师确认后再处理。">
            <span class="message-icon">衣</span>
            <div class="message-main">
              <div class="message-title">蓝色连衣裙 · 收腰改短</div>
              <div class="message-desc">YH20260706001<br>收到，已联系检测师，稍后回复您。</div>
            </div>
            <span class="message-time">11:26</span>
          </article>
          <article class="message-card" data-chat-title="黑色西裤 · 裤脚改短" data-chat-id="YH20260707004" data-chat-user="您好，这条裤子裤脚需要保留几厘米？" data-chat-reply="建议保留 3 厘米，方便二次调整。">
            <span class="message-icon">衣</span>
            <div class="message-main">
              <div class="message-title">黑色西裤 · 裤脚改短</div>
              <div class="message-desc">YH20260707004<br>您好，这条裤子裤脚需要保留几厘米？</div>
            </div>
            <span class="message-time">09:18</span>
          </article>
          <article class="message-card" data-chat-title="红色连衣裙 · 拉链更换" data-chat-id="YH20260705002" data-chat-user="好的，已完成，感谢！" data-chat-reply="不客气，后续有问题可以继续联系。">
            <span class="message-icon">衣</span>
            <div class="message-main">
              <div class="message-title">红色连衣裙 · 拉链更换</div>
              <div class="message-desc">YH20260705002<br>好的，已完成，感谢！</div>
            </div>
            <span class="message-time">昨天</span>
          </article>
          <article class="message-card" data-chat-title="白色衬衫 · 袖口改窄" data-chat-id="YH20260704001" data-chat-user="师傅辛苦，款已到账。" data-chat-reply="已收到，感谢确认。">
            <span class="message-icon">衣</span>
            <div class="message-main">
              <div class="message-title">白色衬衫 · 袖口改窄</div>
              <div class="message-desc">YH20260704001<br>师傅辛苦，款已到账。</div>
            </div>
            <span class="message-time">07-04</span>
          </article>
        </div>
      </section>

      <section class="screen wallet-screen" data-screen="wallet">
        <header class="detail-head">
          <button class="back-btn" type="button" id="walletBack" aria-label="返回个人中心">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
          </button>
          <div class="detail-title">我的钱包</div>
          <span></span>
        </header>
        <div class="wallet-content">
          <section class="wallet-card">
            <h2 class="wallet-title">账户余额</h2>
            <div class="wallet-balance">￥<strong>0</strong>.00</div>
            <div class="wallet-row">
              <span>可用余额</span>
              <strong>可用于订单结算</strong>
            </div>
            <div class="wallet-row">
              <span>本月收入</span>
              <strong>￥0.00</strong>
            </div>
          </section>
          <section class="wallet-card">
            <h2 class="wallet-title">提现金额</h2>
            <div class="wallet-amount-grid">
              <button class="wallet-amount selected" type="button" data-wallet-amount="100">￥100</button>
              <button class="wallet-amount" type="button" data-wallet-amount="300">￥300</button>
              <button class="wallet-amount" type="button" data-wallet-amount="500">￥500</button>
            </div>
            <button class="wallet-confirm" type="button" id="walletWithdrawConfirm">确认提现</button>
          </section>
          <section class="wallet-card">
            <h2 class="wallet-title">交易记录</h2>
            <div class="wallet-record">
              <article class="wallet-record-item">
                <div class="wallet-record-top">
                  <span>挑补查验订单提现</span>
                  <span class="wallet-record-amount">+￥82.00</span>
                </div>
                <div class="wallet-record-meta">
                  <span>关联订单：DD-20260709-001</span>
                  <span>提现时间：07/09 11:20</span>
                </div>
              </article>
              <article class="wallet-record-item">
                <div class="wallet-record-top">
                  <span>洗污订单提现</span>
                  <span class="wallet-record-amount">+￥45.00</span>
                </div>
                <div class="wallet-record-meta">
                  <span>关联订单：DD-20260709-002</span>
                  <span>提现时间：07/09 10:35</span>
                </div>
              </article>
              <article class="wallet-record-item">
                <div class="wallet-record-top">
                  <span>精洗养护订单提现</span>
                  <span class="wallet-record-amount">+￥96.00</span>
                </div>
                <div class="wallet-record-meta">
                  <span>关联订单：DD-20260708-004</span>
                  <span>提现时间：07/08 17:45</span>
                </div>
              </article>
            </div>
          </section>
        </div>
      </section>

      <section class="screen service-screen" data-screen="service">
        <header class="detail-head with-subtitle">
          <button class="back-btn" type="button" id="serviceBack" aria-label="返回个人中心">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
          </button>
          <div class="head-title-stack">
            <div class="detail-title" id="chatPageTitle">平台客服</div>
            <div class="head-subtitle" id="chatOrderNumber">订单 YH20260706001</div>
          </div>
          <span></span>
        </header>
        <div class="service-content">
          <section class="chat-card">
            <h2 class="chat-title" id="chatCardTitle">平台客服</h2>
            <div class="message" id="chatGreeting">您好，这里是三无顶呱呱修色服务中心，请问需要咨询订单还是补充需求？</div>
            <div class="message user" id="chatUserMessage">我想补充一下待结算订单的修复要求。</div>
            <div class="message" id="chatReplyMessage">可以，您可以直接在聊天窗口说明，我们会同步给平台客服和师傅。</div>
          </section>
        </div>
        <section class="service-input-panel">
          <div class="service-input-title">补充需求</div>
          <div class="service-input-row">
            <div class="service-input">输入订单补充要求或客服咨询</div>
            <button class="photo-pick" type="button" data-toast="已打开照片选择" aria-label="选择照片">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="m6 17 4.5-4.5 3.5 3 2-2.5 2 4"/></svg>
            </button>
            <button class="service-send" type="button" data-toast="补充需求已发送" aria-label="发送">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
          </div>
        </section>
      </section>

      <section class="screen profile-screen" data-screen="profile">
        <header class="detail-head">
          <button class="back-btn" type="button" id="profileBack" aria-label="返回个人中心">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
          </button>
          <div class="detail-title">个人信息</div>
          <span></span>
        </header>
        <div class="profile-content">
          <section class="profile-card">
            <div class="profile-avatar-row">
              <div class="profile-mini-avatar">周</div>
              <div>
                <div class="wallet-title">周师傅</div>
                <div class="contact-address">资深修色师傅 · 在线接单</div>
              </div>
            </div>
            <div class="profile-row-info">
              <span>手机号</span>
              <strong>138****7234</strong>
            </div>
            <div class="profile-row-info">
              <span>服务范围</span>
              <strong>修色 / 洗污 / 补色</strong>
            </div>
            <div class="profile-row-info">
              <span>工作状态</span>
              <strong>接单中</strong>
            </div>
            <button class="wallet-confirm" type="button" data-toast="个人信息已保存">保存修改</button>
          </section>
        </div>
      </section>

      <nav class="tabbar" aria-label="底部导航">
        <button class="tab active" type="button" data-tab="home">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 11.5 12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1Z" fill="none" stroke="currentColor" stroke-linejoin="round"/></svg>
          <span>首页</span>
        </button>
        <button class="tab" type="button" data-tab="orders">
          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="4" width="12" height="17" rx="2" fill="none" stroke="currentColor"/><path d="M9 3v4M15 3v4M9 11h6M9 15h6" stroke="currentColor" stroke-linecap="round"/></svg>
          <span>订单</span>
        </button>
        <button class="tab" type="button" data-tab="messages">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 5h14v10H9l-4 4Z" fill="none" stroke="currentColor" stroke-linejoin="round"/><path d="M9 9h6M9 12h4" stroke="currentColor" stroke-linecap="round"/></svg>
          <span class="tab-badge">2</span>
          <span>消息</span>
        </button>
        <button class="tab" type="button" data-tab="mine">
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4" fill="none" stroke="currentColor"/><path d="M4 21c1.6-4 4.3-6 8-6s6.4 2 8 6" fill="none" stroke="currentColor" stroke-linecap="round"/></svg>
          <span>我的</span>
        </button>
      </nav>

      <div class="modal-layer" id="modalLayer" aria-hidden="true">
        <section class="sheet" role="dialog" aria-modal="true" aria-labelledby="sheetTitle">
          <h2 id="sheetTitle">账户提现</h2>
          <div class="amount-grid">
            <button type="button" data-amount="50">￥50</button>
            <button type="button" data-amount="100">￥100</button>
            <button type="button" data-amount="200">￥200</button>
          </div>
          <button class="primary-wide" type="button" id="closeSheet">完成</button>
        </section>
      </div>
      <div class="toast" id="toast" role="status" aria-live="polite"></div>
    </section>
  </main>

  <script>
    const screens = document.querySelectorAll(".screen");
    const tabs = document.querySelectorAll(".tab");
    const orderTabs = document.querySelectorAll(".status-tab");
    const orderEmpty = document.querySelector("#orderEmpty");
    const orderList = document.querySelector("#orderList");
    const toast = document.querySelector("#toast");
    const acceptSwitch = document.querySelector("#acceptSwitch");
    const acceptStatusText = document.querySelector("#acceptStatusText");
    const modalLayer = document.querySelector("#modalLayer");
    const balanceValue = document.querySelector("#balanceValue");
    let serviceBackTarget = "mine";
    const detailFields = {
      clothing: document.querySelector("#detailOrderTitle"),
      count: document.querySelector("#detailOrderCount"),
      status: document.querySelector("#detailOrderStatus"),
      desc: document.querySelector("#detailOrderDesc"),
      number: document.querySelector("#detailOrderNumber"),
      styleNo: document.querySelector("#detailOrderStyleNo"),
      address: document.querySelector("#detailOrderAddress"),
      visitTime: document.querySelector("#detailOrderVisitTime"),
      feeLabel: document.querySelector("#detailFeeLabel"),
      feeValue: document.querySelector("#detailFeeValue"),
      feeNote: document.querySelector("#detailFeeNote")
    };
    let toastTimer;

    function go(screenName) {
      screens.forEach(screen => screen.classList.toggle("active", screen.dataset.screen === screenName));
      tabs.forEach(tab => tab.classList.toggle("active", tab.dataset.tab === screenName));
      document.querySelector(".tabbar").classList.toggle("hidden", ["orderDetail", "wallet", "service", "profile"].includes(screenName));
    }

    function showToast(message) {
      clearTimeout(toastTimer);
      toast.textContent = message;
      toast.classList.add("show");
      toastTimer = setTimeout(() => toast.classList.remove("show"), 1700);
    }

    function setOrderFilter(filter) {
      orderTabs.forEach(tab => tab.classList.toggle("active", tab.dataset.filter === filter));
      const cards = [...orderList.querySelectorAll(".order-card")];
      let visible = 0;
      cards.forEach(card => {
        const shouldShow = filter === "全部" || card.dataset.status === filter;
        card.style.display = shouldShow ? "block" : "none";
        if (shouldShow) visible += 1;
      });
      orderList.style.display = visible ? "grid" : "none";
      orderEmpty.style.display = visible ? "none" : "grid";
    }

    function renderDetailActions(status) {
      const presets = {
        "待结算": [
          { action: "contact", text: "联系客服", toast: "已联系客户" }
        ],
        "待接单": [
          { action: "accept", text: "确认接单", toast: "接单成功" }
        ],
        "待服务": [
          { action: "unavailable", text: "暂时无法服务", toast: "已标记暂时无法服务" },
          { action: "start", text: "立即开始服务", toast: "已开始服务" }
        ],
        "服务中": [
          { action: "contact", text: "联系客服", toast: "已联系客户" },
          { action: "confirm", text: "确认价格", toast: "已确认价格" },
          { action: "complete", text: "订单完成", toast: "订单已完成" }
        ],
        "已完成": [],
        "default": [
          { action: "contact", text: "联系客服", toast: "已联系客户" },
          { action: "supplement", text: "补充信息", toast: "已打开补充信息" },
          { action: "confirm", text: "确认价格", toast: "已确认价格" },
          { action: "cancel", text: "取消订单", toast: "已取消订单", danger: true }
        ]
      };
      const actions = presets[status] || presets.default;
      const detailActions = document.querySelector(".detail-actions");
      const detailContent = document.querySelector(".detail-content");
      detailActions.classList.toggle("hidden", actions.length === 0);
      detailActions.classList.toggle("single", actions.length === 1);
      detailActions.classList.toggle("fixed-bottom", status === "待服务");
      detailContent.classList.toggle("has-fixed-actions", status === "待服务");
      document.querySelectorAll("[data-detail-action]").forEach((button, index) => {
        const config = actions[index];
        button.classList.toggle("hidden", !config);
        if (!config) return;
        button.textContent = config.text;
        button.dataset.detailAction = config.action;
        button.dataset.toast = config.toast;
        button.classList.toggle("danger", Boolean(config.danger));
      });
    }

    function openOrderDetail(card) {
      detailFields.clothing.textContent = card.dataset.clothing || card.dataset.title;
      detailFields.count.textContent = card.dataset.count || "1件";
      detailFields.status.textContent = card.dataset.status;
      detailFields.desc.textContent = card.dataset.desc;
      detailFields.number.textContent = card.dataset.number;
      detailFields.styleNo.textContent = card.dataset.styleNo || "KH-DEFAULT-001";
      detailFields.address.textContent = card.dataset.address;
      detailFields.visitTime.textContent = "2026年07月08日（明天）";
      if (["待结算", "已完成"].includes(card.dataset.status)) {
        detailFields.feeLabel.textContent = "实际佣金";
        detailFields.feeValue.textContent = card.dataset.commission || "￥82.00";
        detailFields.feeNote.textContent = "* 该金额为平台确认后的本单实际佣金";
      } else {
        detailFields.feeLabel.textContent = ["待服务", "服务中"].includes(card.dataset.status) ? "预估佣金" : "预估费用";
        detailFields.feeValue.textContent = "￥50 - ￥150";
        detailFields.feeNote.textContent = "* 实际费用由平台根据衣物检测后确认，取件免费";
      }
      renderDetailActions(card.dataset.status);
      go("orderDetail");
    }

    function openChatFromMessage(card) {
      serviceBackTarget = "messages";
      const title = card.dataset.chatTitle;
      document.querySelector("#chatPageTitle").textContent = title;
      document.querySelector("#chatOrderNumber").textContent = `订单 ${card.dataset.chatId}`;
      document.querySelector("#chatOrderNumber").style.display = "grid";
      document.querySelector("#chatCardTitle").textContent = title;
      document.querySelector("#chatGreeting").textContent = `订单 ${card.dataset.chatId}`;
      document.querySelector("#chatUserMessage").textContent = card.dataset.chatUser;
      document.querySelector("#chatReplyMessage").textContent = card.dataset.chatReply;
      card.classList.remove("unread");
      go("service");
    }

    function openPlatformService() {
      serviceBackTarget = "mine";
      document.querySelector("#chatPageTitle").textContent = "平台客服";
      document.querySelector("#chatOrderNumber").textContent = "在线客服";
      document.querySelector("#chatOrderNumber").style.display = "grid";
      document.querySelector("#chatCardTitle").textContent = "平台客服";
      document.querySelector("#chatGreeting").textContent = "您好，这里是三无顶呱呱修色服务中心，请问需要咨询订单还是补充需求？";
      document.querySelector("#chatUserMessage").textContent = "我想补充一下待结算订单的修复要求。";
      document.querySelector("#chatReplyMessage").textContent = "可以，您可以直接在聊天窗口说明，我们会同步给平台客服和师傅。";
      go("service");
    }

    tabs.forEach(tab => tab.addEventListener("click", () => go(tab.dataset.tab)));
    document.querySelectorAll("[data-go='orders']").forEach(button => {
      button.addEventListener("click", () => {
        go("orders");
        setOrderFilter("全部");
      });
    });
    orderTabs.forEach(tab => tab.addEventListener("click", () => setOrderFilter(tab.dataset.filter)));
    document.querySelector("#detailBack").addEventListener("click", () => go("orders"));
    document.querySelector("#walletEntry").addEventListener("click", () => go("wallet"));
    document.querySelector("#walletBack").addEventListener("click", () => go("mine"));
    document.querySelector("#serviceEntry").addEventListener("click", openPlatformService);
    document.querySelector("#serviceBack").addEventListener("click", () => go(serviceBackTarget));
    document.querySelector("#profileEntry").addEventListener("click", () => go("profile"));
    document.querySelector("#profileBack").addEventListener("click", () => go("mine"));
    document.querySelector("#copyAddressBtn").addEventListener("click", () => showToast("地址已复制"));

    document.querySelectorAll("[data-detail]").forEach(button => {
      button.addEventListener("click", () => openOrderDetail(button.closest(".order-card")));
    });

    document.querySelectorAll("[data-task-open]").forEach(button => {
      button.addEventListener("click", () => openOrderDetail(button.closest("[data-task-detail]")));
    });

    document.querySelectorAll("[data-recent-detail]").forEach(item => {
      item.addEventListener("click", () => {
        const card = document.querySelector(`.order-card[data-number="${item.dataset.recentDetail}"]`);
        if (card) openOrderDetail(card);
      });
    });

    document.querySelectorAll(".message-card").forEach(card => {
      card.addEventListener("click", () => openChatFromMessage(card));
    });

    acceptSwitch.addEventListener("click", () => {
      const next = acceptSwitch.getAttribute("aria-checked") !== "true";
      acceptSwitch.setAttribute("aria-checked", String(next));
      acceptStatusText.textContent = next ? "已开启，正在接收新订单" : "已关闭，暂停接收新订单";
      showToast(next ? "接单状态已开启" : "接单状态已关闭");
    });

    document.querySelectorAll("[data-quick]").forEach(button => {
      button.addEventListener("click", () => {
        go("orders");
        setOrderFilter(button.dataset.quick);
      });
    });

    document.querySelectorAll("[data-toast]").forEach(button => {
      button.addEventListener("click", () => showToast(button.dataset.toast));
    });

    document.querySelectorAll("[data-wallet-amount]").forEach(button => {
      button.addEventListener("click", () => {
        document.querySelectorAll("[data-wallet-amount]").forEach(item => item.classList.remove("selected"));
        button.classList.add("selected");
      });
    });

    document.querySelector("#walletWithdrawConfirm").addEventListener("click", () => {
      showToast("提现申请已提交");
    });

    document.querySelector("#rechargeBtn").addEventListener("click", () => go("wallet"));

    modalLayer.querySelectorAll("[data-amount]").forEach(button => {
      button.addEventListener("click", () => {
        balanceValue.textContent = Number(balanceValue.textContent) + Number(button.dataset.amount);
        showToast(`已选择提现 ￥${button.dataset.amount}`);
      });
    });

    document.querySelector("#closeSheet").addEventListener("click", () => {
      modalLayer.classList.remove("open");
      modalLayer.setAttribute("aria-hidden", "true");
      showToast("提现完成");
    });

    modalLayer.addEventListener("click", event => {
      if (event.target === modalLayer) {
        modalLayer.classList.remove("open");
        modalLayer.setAttribute("aria-hidden", "true");
      }
    });

    setOrderFilter("全部");
  </script>
</body>
</html>