/* ===================================================================== mobile-orders.css — 手机端：订单列表 / 订单详情 / 下单确认 / 购物车 （仅样式层，不涉及业务逻辑）生效条件： ===================================================================== */ /* ---------- 9. 订单列表页 /orders ---------- */ html.is-mobile .my-orders-row { flex-wrap: wrap; font-size: 13px !important; margin-left: 8px !important; margin-right: 8px !important; gap: 4px 0; align-items: center; } html.is-mobile .my-orders-row .ant-radio-wrapper { font-size: 13px; margin-right: 6px; } html.is-mobile .my-orders-row .ant-btn { white-space: nowrap; } html.is-mobile .my-orders-row > div[style*="font-size: 15px"] { font-size: 13px !important; } html.is-mobile .my-layout-body .pt-2 > .flex { flex-wrap: wrap; gap: 4px; padding: 0 8px; } html.is-mobile .my-layout-body .pt-2 > .flex .ant-btn { font-size: 12px; } html.is-mobile .my-layout-body .flex.flex-wrap > div[style*="font-size: 15px"] { font-size: 13px !important; margin-left: 8px !important; } html.is-mobile .ant-input-search[style*="width: 280px"], html.is-mobile .ant-input-search[style*="width: 200px"], html.is-mobile .ant-select[style*="min-width: 250px"], html.is-mobile .ant-select[style*="min-width: 120px"], html.is-mobile .ant-input[style*="width: 200px"] { width: 100% !important; min-width: 0 !important; max-width: 100%; } html.is-mobile .flex.flex-wrap.mb-2 > div, html.is-mobile .flex.flex-wrap.mb-3 > div { max-width: 100%; } html.is-mobile .flex.flex-shrink-0.mx-3.my-1 { flex: 1 1 100%; margin: 4px 8px !important; flex-wrap: wrap; } /* 表格 -> 卡片 */ html.is-mobile .my-orders-table .ant-table { min-width: 0 !important; background: transparent; } html.is-mobile .my-orders-table .ant-table-container { border: 0 !important; } html.is-mobile .my-orders-table .ant-table-thead, html.is-mobile .my-orders-table .ant-table-measure-row { display: none; } html.is-mobile .my-orders-table .ant-table-tbody > tr { display: flex; flex-wrap: wrap; margin: 8px 8px 0 8px; border: 1px solid #e8e8e8 !important; border-radius: 8px; background: #fff; padding: 8px 8px 6px 8px; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } html.is-mobile .my-orders-table .ant-table-tbody > tr > td { display: block; border: 0 !important; padding: 2px 4px !important; font-size: 13px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: 100%; line-height: 1.5; background: transparent !important; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td::before { color: #888; margin-right: 4px; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td.ant-table-selection-column { width: auto; position: absolute; right: 8px; top: 8px; padding: 0 !important; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(2) { padding-right: 32px !important; font-weight: 600; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(2)::before { content: "订单编号："; font-weight: normal; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(3) { width: 55%; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(3)::before { content: "出发日期："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(4) { width: 45%; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(4)::before { content: "类型："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(5)::before { content: "名称："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(6) { width: 50%; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(6)::before { content: "联系人："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(7) { width: 50%; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(7)::before { content: "电话："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(8) { width: 50%; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(8)::before { content: "应付："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(9) { width: 50%; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(9)::before { content: "实付："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(10) { width: 60%; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(10)::before { content: "状态："; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td:nth-child(11) { width: 40%; text-align: right; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(2)::before { content: "Order No.: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(3)::before { content: "Departure: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(4)::before { content: "Type: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(5)::before { content: "Product: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(6)::before { content: "Name: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(7)::before { content: "Phone: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(8)::before { content: "Total: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(9)::before { content: "Paid: "; } html.is-mobile[lang="en"] .my-orders-table .ant-table-tbody > tr > td:nth-child(10)::before { content: "Status: "; } html.is-mobile .my-orders-table .ant-table-tbody > tr.ant-table-placeholder { display: block; border: 0 !important; background: transparent; } html.is-mobile .my-orders-table .ant-table-tbody > tr.ant-table-placeholder > td::before { content: none; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td .ant-badge { vertical-align: middle; } html.is-mobile .my-orders-table .ant-table-tbody > tr > td .ant-badge .ant-scroll-number { transform: translate(30%, -30%) scale(0.85); } html.is-mobile .my-orders-table .ant-table-pagination { justify-content: center; margin: 12px 8px !important; } /* 添加其它类型订单弹窗内部固定宽度 */ html.is-mobile .ant-modal div[style*="width: 400px"], html.is-mobile .ant-modal .ant-input-number[style*="width: 150px"] { width: 100% !important; max-width: 100%; } /* ---------- 10. 订单详情页 /order/{id} ---------- */ html.is-mobile .my-orderpage { padding: 12px !important; } html.is-mobile .my-orderpage .flex { flex-wrap: wrap; } html.is-mobile .my-orderpage div[style*="font-size: 18px"] { font-size: 15px !important; gap: 2px 6px; } html.is-mobile .my-orderpage div[style*="font-size: 16px"] { font-size: 14px !important; } html.is-mobile .my-orderpage .ant-input[style*="width: 280px"], html.is-mobile .my-orderpage .ant-input[style*="width: 150px"], html.is-mobile .my-orderpage .ant-input-number[style*="width: 150px"], html.is-mobile .my-orderpage .ant-input-number[style*="width: 120px"], html.is-mobile .my-orderpage .ant-select[style*="width: 250px"], html.is-mobile .my-orderpage .ant-select[style*="min-width: 250px"], html.is-mobile .my-orderpage .ant-picker[style*="width"] { width: 100% !important; min-width: 0 !important; max-width: 100%; } html.is-mobile .my-orderpage div[style*="dashed"] { padding: 8px !important; } html.is-mobile .my-orderpage div[style*="dashed"] .flex > .flex-none { margin-left: 0 !important; margin-top: 4px; flex: 1 1 100%; } html.is-mobile .my-orderpage div[style*="dashed"] .flex > .flex-none .ant-input { width: 100% !important; } html.is-mobile .my-orderpage .ant-btn.ml-5, html.is-mobile .my-orderpage .ant-btn.ml-3 { margin-left: 6px !important; } html.is-mobile .my-orderpage .ant-table-wrapper { margin: 6px -12px 0 -12px; padding: 0 12px; } html.is-mobile .my-orderpage .ant-table-wrapper .ant-table { min-width: 600px; } html.is-mobile .my-orderpage .flex.justify-end { justify-content: flex-start; gap: 6px; } html.is-mobile .my-orderpage .flex.justify-end .ant-btn { margin: 0 !important; } html.is-mobile .my-orderpage .flex.flex-wrap > .grow { flex-basis: 100%; } html.is-mobile .my-orderpage .flex.flex-wrap .ant-btn { margin: 3px 3px 3px 0 !important; } html.is-mobile .my-orderpage textarea.ant-input { width: 100% !important; } /* 旅客信息行（TourOrderCustomers，下单页/订单页/购物车页共用） */ html.is-mobile .my-customer-row { flex-wrap: wrap; gap: 4px 6px; padding: 8px; margin: 6px 0 !important; background: #fafafa; border-radius: 6px; } html.is-mobile .my-customer-row > .flex-none:first-child { flex: 1 1 100%; font-size: 14px !important; margin-top: 0 !important; font-weight: 600; } html.is-mobile .my-customer-row > .ant-radio-group { flex: 1 1 100%; margin-left: 0 !important; } html.is-mobile .my-customer-row > .flex-none { flex: 1 1 45%; margin-left: 0 !important; min-width: 0; } html.is-mobile .my-customer-row > .flex-none .ant-input, html.is-mobile .my-customer-row > .flex-none .ant-picker { width: 100% !important; } /* ---------- 11. 下单确认页 /order/orderconfirmpage 与购物车结算页 /cart/{id} ---------- */ html.is-mobile .my-orderconfirm { padding: 12px !important; } html.is-mobile .my-orderconfirm .flex { flex-wrap: wrap; } html.is-mobile .my-orderconfirm div[style*="font-size: 16px"] { font-size: 14px !important; } html.is-mobile .my-orderconfirm div[style*="font-size: 18px"] { font-size: 15px !important; } html.is-mobile .my-orderconfirm div[style*="font-size: 18px"][style*="color: blue"] { font-size: 16px !important; font-weight: 600; line-height: 1.4; } html.is-mobile .my-orderconfirm .flex > .flex-none.ml-4, html.is-mobile .my-orderconfirm .flex > .flex-none.ml-2 { margin-left: 0 !important; margin-right: 8px; } html.is-mobile .my-orderconfirm .ml-5 { margin-left: 0 !important; flex-basis: 100%; } /* 联系人一行：性别 + 姓名 + 邮箱 + 电话 */ html.is-mobile .my-orderconfirm .flex > .flex-none.ml-1 { margin-left: 0 !important; margin-top: 6px; flex: 1 1 100%; } html.is-mobile .my-orderconfirm .flex > .flex-none.ml-1 .ant-input, html.is-mobile .my-orderconfirm .flex > .flex-none.ml-1 .ant-input-affix-wrapper { width: 100% !important; } html.is-mobile .my-orderconfirm .ant-radio-group[style*="display: block"] { margin-bottom: 2px; } html.is-mobile .my-orderconfirm textarea.ant-input { width: 100% !important; } /* 底部价格/操作栏：吸底 */ html.is-mobile .my-orderconfirm-bar { position: sticky; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 20; background: #fff; margin: 8px -12px 0 -12px; padding: 8px 12px; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } html.is-mobile .my-orderconfirm-bar > .flex-grow { display: none; } html.is-mobile .my-orderconfirm-bar > .flex[style*="22px"] { flex: 1 1 100%; font-size: 16px !important; align-items: baseline; } html.is-mobile .my-orderconfirm-bar > .flex[style*="22px"] > div { font-size: 22px !important; } html.is-mobile .my-orderconfirm-bar .ant-btn { margin: 0 !important; flex: 1 1 auto; white-space: nowrap; } html.is-mobile .my-orderconfirm-bar > div:last-child { flex: 1 1 100%; display: flex; } html.is-mobile .my-orderconfirm-bar > div:last-child .ant-btn-primary { width: 100%; height: 42px; font-size: 16px; border-radius: 21px; } html.is-mobile .my-orderconfirm .overflow-y-scroll { max-height: 200px !important; } /* 支付方式弹层：Timeline 交替模式改为单侧显示 */ html.is-mobile .ant-popover .ant-timeline.ant-timeline-alternate .ant-timeline-item-tail, html.is-mobile .ant-popover .ant-timeline.ant-timeline-alternate .ant-timeline-item-head { left: 8px !important; inset-inline-start: 8px !important; } html.is-mobile .ant-popover .ant-timeline.ant-timeline-alternate .ant-timeline-item-content { left: 0 !important; inset-inline-start: 0 !important; width: calc(100% - 28px) !important; margin-left: 28px !important; margin-inline-start: 28px !important; text-align: left !important; } html.is-mobile .ant-popover .ant-timeline.ant-timeline-alternate .ant-timeline-item-left .ant-timeline-item-content, html.is-mobile .ant-popover .ant-timeline.ant-timeline-alternate .ant-timeline-item-right .ant-timeline-item-content { left: 0 !important; inset-inline-start: 0 !important; width: calc(100% - 28px) !important; text-align: left !important; } html.is-mobile .ant-popover .flex.justify-center { flex-wrap: wrap; gap: 8px; } html.is-mobile .ant-popover .flex.justify-center .ant-btn.ml-8 { margin-left: 0 !important; } html.is-mobile .ant-popover .ant-radio-group[style*="inline-block"] .ant-radio-button-wrapper { font-size: 13px; padding: 0 10px; } /* 费用明细弹层里的固定宽度 */ html.is-mobile .ant-popover div[style*="width: 250px"] { width: auto !important; max-width: 60vw; } /* ---------- 12. 购物车抽屉（UserCart / UserCartCard） ---------- */ html.is-mobile .ant-drawer .ant-drawer-header { padding: 10px 12px; } html.is-mobile .my-cartcard-row { flex-wrap: wrap; } html.is-mobile .my-cartcard-row > .flex-none { flex: 1 1 100%; } html.is-mobile .my-cartcard-row img { width: 100% !important; max-height: 180px; object-fit: cover; border-radius: 6px; } html.is-mobile .my-cartcard-row > .grow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } html.is-mobile .my-cartcard-row > .grow > div { margin: 0 !important; flex: 1 1 45%; } html.is-mobile .my-cartcard-row .ant-btn { width: 100% !important; } html.is-mobile .ant-drawer-body > div > div[style*="color: blue"] { font-size: 15px; font-weight: 600; line-height: 1.4; } /* 表格卡片化：表格/表体改为块级布局 */ html.is-mobile .my-orders-table table { display: block; width: 100% !important; } html.is-mobile .my-orders-table colgroup { display: none; } html.is-mobile .my-orders-table tbody { display: block; width: 100%; } html.is-mobile .my-orderconfirm .flex > .flex-none { margin-right: 8px; } html.is-mobile .ant-popover .ant-popover-inner { max-height: calc(100vh - 170px); }