/* 订单详情/付款凭据:收据明细、流水、转账凭证及打印区域。 */ /* 导入方:app/pages/bills/[id].vue、app/pages/orders/[id].vue、app/pages/orders/order/index.vue、app/pages/orders/order/paid.vue、app/pages/orders/order/pay.vue。 */ .receipt-page[data-v-b3b3cd9c] { width: 100%; max-width: 560px; margin: 0 auto; } .receipt-nav[data-v-b3b3cd9c] { color: var(--p-text-muted-color); justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 0.875rem; display: flex; } .receipt-nav a[data-v-b3b3cd9c] { color: inherit; align-items: center; gap: 7px; text-decoration: none; display: inline-flex; } .receipt-nav a[data-v-b3b3cd9c]:hover { color: var(--p-primary-color); } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .receipt-nav > span[data-v-b3b3cd9c] { overflow-wrap: anywhere; text-align: right; min-width: 0; } .receipt-feedback[data-v-b3b3cd9c] { margin-bottom: 14px; } .receipt-layout[data-v-b3b3cd9c] { grid-template-columns: minmax(0, 1fr); gap: 35px; display: grid; } .receipt[data-v-b3b3cd9c] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-lg); gap: 56px; min-width: 0; padding: 70px 21px 84px; box-shadow: 0 1px 2px #00000014; } .receipt[data-v-b3b3cd9c], .receipt-header[data-v-b3b3cd9c] { flex-direction: column; display: flex; } .receipt-header[data-v-b3b3cd9c] { align-items: flex-start; gap: 14px; padding: 14px 14px 0; } .receipt-heading[data-v-b3b3cd9c] { align-items: center; gap: 14px; width: 100%; min-width: 0; display: flex; } .receipt-heading > div[data-v-b3b3cd9c] { min-width: 0; } .receipt-icon[data-v-b3b3cd9c] { border: 1px solid var(--p-content-border-color); background: var(--p-content-hover-background); border-radius: var(--radius-md); flex-shrink: 0; place-items: center; width: 49px; height: 49px; display: grid; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .receipt-heading h2[data-v-b3b3cd9c] { overflow-wrap: anywhere; margin: 0 0 4px; font-size: 1rem; font-weight: 650; line-height: 1.5; } .receipt-heading p[data-v-b3b3cd9c] { color: var(--p-text-muted-color); margin: 0; font-size: 0.875rem; } .receipt-status[data-v-b3b3cd9c] { padding: 5px 10px; font-size: 1rem; } .receipt-item[data-v-b3b3cd9c], .receipt-table-head[data-v-b3b3cd9c], .receipt-total[data-v-b3b3cd9c] { justify-content: space-between; gap: 14px; display: flex; } .receipt-table-head[data-v-b3b3cd9c], .receipt-tx-head[data-v-b3b3cd9c] { background: var(--p-content-hover-background); } .receipt-item[data-v-b3b3cd9c], .receipt-table-head[data-v-b3b3cd9c], .receipt-tx-head[data-v-b3b3cd9c] { border-bottom: 1px solid var(--p-content-border-color); padding: 12px 14px; font-size: 1rem; } .receipt-item[data-v-b3b3cd9c] { align-items: center; line-height: 1.5; } .receipt-item > div[data-v-b3b3cd9c] { overflow-wrap: anywhere; flex: 1; min-width: 0; } .receipt-item > b[data-v-b3b3cd9c] { overflow-wrap: anywhere; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; max-width: 40%; } .receipt-item p[data-v-b3b3cd9c] { margin: 0; } .receipt-description[data-v-b3b3cd9c] { white-space: pre-line; overflow-wrap: anywhere; } .receipt-total[data-v-b3b3cd9c] { align-items: baseline; padding: 14px 14px 0; font-size: 1rem; } .receipt-total > b[data-v-b3b3cd9c] { flex-shrink: 0; } .receipt-total strong[data-v-b3b3cd9c] { font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; min-width: 0; font-size: 1.5rem; font-weight: 650; line-height: 1.4; } .receipt-tx[data-v-b3b3cd9c], .receipt-tx-head[data-v-b3b3cd9c] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 10px; font-size: 1rem; display: grid; } .receipt-tx[data-v-b3b3cd9c] { border-bottom: 1px solid var(--p-content-border-color); padding: 12px 14px; } .receipt-tx-head[data-v-b3b3cd9c] > :nth-child(2), .receipt-tx[data-v-b3b3cd9c] > :nth-child(2) { text-align: center; } .receipt-tx-head[data-v-b3b3cd9c] > :last-child, .receipt-tx[data-v-b3b3cd9c] > :last-child { text-align: right; } .receipt-tx[data-v-b3b3cd9c] > * { overflow-wrap: anywhere; min-width: 0; } .transaction-error[data-v-b3b3cd9c] { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; display: flex; } .receipt-empty[data-v-b3b3cd9c] { border-bottom: 1px solid var(--p-content-border-color); text-align: center; color: var(--p-text-muted-color); margin: 0; padding: 12px 14px; font-size: 1rem; } .bank-transfer-panel[data-v-b3b3cd9c] { border: 1px solid var(--p-content-border-color); background: var(--p-content-hover-background); border-radius: var(--radius-md); flex-direction: column; gap: 14px; margin-top: -21px; padding: 18px 14px; display: flex; } .bank-transfer-heading[data-v-b3b3cd9c] { justify-content: space-between; align-items: flex-start; gap: 14px; display: flex; } .bank-transfer-heading h3[data-v-b3b3cd9c] { margin: 0 0 4px; font-size: 1rem; } .bank-transfer-heading p[data-v-b3b3cd9c] { overflow-wrap: anywhere; margin: 0; line-height: 1.6; } .bank-transfer-heading p[data-v-b3b3cd9c], .bank-transfer-upload[data-v-b3b3cd9c] { color: var(--p-text-muted-color); font-size: 0.875rem; } .bank-transfer-upload[data-v-b3b3cd9c] { flex-wrap: wrap; align-items: center; gap: 10px; display: flex; } .bank-transfer-upload input[data-v-b3b3cd9c] { max-width: 100%; font-size: 0.875rem; } .bank-voucher-list[data-v-b3b3cd9c] { flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; display: flex; } .bank-voucher-list li[data-v-b3b3cd9c] { border: 1px solid var(--p-content-border-color); background: var(--p-content-background); border-radius: var(--radius-sm); justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding: 5px 8px; font-size: 0.875rem; display: flex; } .bank-voucher-list li span[data-v-b3b3cd9c] { overflow-wrap: anywhere; min-width: 0; } .bank-transfer-actions[data-v-b3b3cd9c] { flex-wrap: wrap; gap: 8px; display: flex; } .receipt-actions[data-v-b3b3cd9c] { flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 21px; display: flex; } .receipt-actions > .p-button[data-v-b3b3cd9c] { min-width: 112px; } .receipt-actions > .p-button[data-v-b3b3cd9c], .success-actions > .p-button[data-v-b3b3cd9c] { white-space: nowrap; flex-shrink: 0; text-decoration: none; } .credit-note[data-v-b3b3cd9c] { color: var(--p-text-muted-color); margin: 10px 14px 0; font-size: 0.875rem; } .payment-page[data-v-b3b3cd9c] { max-width: 1024px; } .payment-page .receipt-layout[data-v-b3b3cd9c] { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: stretch; gap: 42px; } .payment-page .receipt[data-v-b3b3cd9c] { min-height: 700px; } .receipt-payment[data-v-b3b3cd9c] { min-width: 0; padding: 84px 0; } .receipt-payment > p[data-v-b3b3cd9c] { color: var(--p-text-muted-color); margin: 0 0 70px; font-size: 1rem; } .payment-success[data-v-b3b3cd9c] { text-align: center; max-width: 560px; margin: 56px auto; } .payment-success > i[data-v-b3b3cd9c] { color: #22c55e; background: #dcfce7; border: 10px solid #dcfce7; border-radius: 100%; font-size: 2.1875rem; } .payment-success > p[data-v-b3b3cd9c] { color: var(--p-text-muted-color); margin: 21px 0 7px; } .payment-success > strong[data-v-b3b3cd9c] { font-size: 1.75rem; font-weight: 400; } .payment-success dl[data-v-b3b3cd9c] { border-block: 1px solid var(--p-content-border-color); margin: 42px 0; padding-block: 28px; } .payment-success dl > div[data-v-b3b3cd9c] { text-align: right; justify-content: space-between; gap: 21px; margin: 10px 0; display: flex; } .payment-success dt[data-v-b3b3cd9c] { color: var(--p-text-muted-color); flex-shrink: 0; } .payment-success dd[data-v-b3b3cd9c] { overflow-wrap: anywhere; margin: 0; } .success-actions[data-v-b3b3cd9c] { grid-template-columns: 1fr 1fr; gap: 14px; display: grid; } /* 视口条件 (width<=900px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=900px) { .payment-page .receipt-layout[data-v-b3b3cd9c] { grid-template-columns: minmax(0, 1fr); } .payment-page[data-v-b3b3cd9c] { max-width: 560px; } .payment-page .receipt[data-v-b3b3cd9c] { min-height: 0; } .receipt-payment[data-v-b3b3cd9c] { padding: 0 14px; } .receipt-payment > p[data-v-b3b3cd9c] { margin-bottom: 28px; } } /* 视口条件 (width<=640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=640px) { .receipt[data-v-b3b3cd9c] { gap: 35px; padding: 28px 14px 35px; } .receipt-header[data-v-b3b3cd9c] { padding: 0; } .receipt-heading[data-v-b3b3cd9c] { align-items: flex-start; gap: 10px; } .receipt-icon[data-v-b3b3cd9c] { width: 42px; height: 42px; } .receipt-empty[data-v-b3b3cd9c], .receipt-item[data-v-b3b3cd9c], .receipt-table-head[data-v-b3b3cd9c], .receipt-tx[data-v-b3b3cd9c], .receipt-tx-head[data-v-b3b3cd9c] { padding-inline: 0; } .receipt-table-head[data-v-b3b3cd9c], .receipt-tx-head[data-v-b3b3cd9c] { padding-inline: 8px; } .receipt-item[data-v-b3b3cd9c], .receipt-tx[data-v-b3b3cd9c], .receipt-tx-head[data-v-b3b3cd9c] { font-size: 0.875rem; } .receipt-total[data-v-b3b3cd9c] { padding-inline: 0; } .receipt-total strong[data-v-b3b3cd9c] { font-size: 1.375rem; } .receipt-actions[data-v-b3b3cd9c] { gap: 7px; } .receipt-actions > .p-button[data-v-b3b3cd9c] { flex: auto; min-width: 0; padding-inline: 10px; } .credit-note[data-v-b3b3cd9c] { margin-inline: 0; } } /* 打印介质覆盖:独立处理纸张上的显隐和排版,不直接沿用屏幕布局。 */ .receipt-print-head[data-v-b3b3cd9c] { display: none; } @page { margin: 16mm 14mm; } @media print { .receipt-page[data-v-b3b3cd9c] { --p-text-color: #0f172a; --p-text-muted-color: #64748b; --p-content-border-color: #e2e8f0; --p-content-background: #fff; --p-content-hover-background: #f8fafc; color: #0f172a; print-color-adjust: exact; } .receipt-actions[data-v-b3b3cd9c], .receipt-feedback[data-v-b3b3cd9c], .receipt-nav[data-v-b3b3cd9c], .receipt-payment[data-v-b3b3cd9c] { display: none; } .receipt[data-v-b3b3cd9c] { box-shadow: none; background: #fff; border: 0; border-radius: 0; gap: 28px; padding: 0; -moz-column-break-inside: avoid; break-inside: avoid; } .receipt-print-head[data-v-b3b3cd9c] { border-bottom: 2px solid #0f172a; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; display: flex; } .receipt-print-logo[data-v-b3b3cd9c] { width: auto; height: 38px; display: block; } .receipt-print-meta[data-v-b3b3cd9c] { text-align: right; color: #64748b; flex-direction: column; gap: 2px; font-size: 0.875rem; line-height: 1.3; display: flex; } .receipt-print-meta strong[data-v-b3b3cd9c] { color: #0f172a; font-size: 1.25rem; font-weight: 600; } .receipt-header[data-v-b3b3cd9c] { padding: 0; } .receipt-icon[data-v-b3b3cd9c] { display: none; } .receipt-status[data-v-b3b3cd9c] { color: #0f172a; background: none; border: 1px solid #cbd5e1; } .payment-page[data-v-b3b3cd9c], .receipt-page[data-v-b3b3cd9c] { max-width: none; } .payment-page .receipt-layout[data-v-b3b3cd9c] { grid-template-columns: minmax(0, 1fr); } }