/* 订单列表:说明、金额、关联详情及筛选操作。 */ /* 导入方:app/pages/finance/index.vue、app/pages/orders/index.vue。 */ .bill-description[data-v-d87be2e3] { color: var(--p-text-muted-color); margin: 0; font-size: 0.9375rem; } .order-link[data-v-d87be2e3] { color: var(--p-primary-color); font-weight: 500; text-decoration: none; } .order-link[data-v-d87be2e3]:hover { text-decoration: underline; } .amount[data-v-d87be2e3] { white-space: nowrap; font-weight: 500; } /* 允许连续长文本换行,防止IP、密钥或用户输入撑破当前容器;不会修改原始数据。 */ .order-description[data-v-d87be2e3] { -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: anywhere; -webkit-box-orient: vertical; min-width: 220px; line-height: 1.65; display: -webkit-box; overflow: hidden; } .list-toolbar[data-v-d87be2e3] { flex-direction: column; align-items: flex-start; gap: 14px; } .list-head[data-v-d87be2e3] { min-height: 28px; } .list-head-actions .p-button[data-v-d87be2e3] { padding-block: 5px; } .order-link[data-v-d87be2e3] { color: var(--p-text-color); font-weight: 400; } .order-description[data-v-d87be2e3] { -webkit-line-clamp: 1; line-clamp: 1; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr > td { padding: 18px 14px; } .list-table[data-v-d87be2e3] .p-datatable-thead > tr > th { padding: 12px 14px; } .list-foot[data-v-d87be2e3] { justify-content: center; } .list-table[data-v-d87be2e3] .amount-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .list-table[data-v-d87be2e3] .amount-heading .p-datatable-column-header-content { justify-content: flex-end; } .list-table[data-v-d87be2e3] .action-cell { text-align: right; } .list-table[data-v-d87be2e3] .action-cell a { text-decoration: none; } /* 视口条件 (width<=640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=640px) { .list-toolbar-right > .p-iconfield[data-v-d87be2e3] { flex-basis: 100%; } .list-toolbar-right > .p-iconfield .p-inputtext[data-v-d87be2e3] { width: 100%; } } @media (width<640px) { .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) { grid-template-columns: 22px auto auto minmax(0, 1fr) auto; grid-template-areas: "check title title title price" "check type id time status" "check pay pay pay pay"; align-items: center; gap: 6px 10px; padding: 14px 16px; display: grid; cursor: pointer; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td { text-align: left; justify-content: flex-start; gap: 4px; padding: 0 !important; font-size: 0.875rem; display: none; position: static; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td::before { display: none; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td:first-child { grid-area: check; display: flex; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="商品"] { grid-area: title; display: flex; color: var(--p-text-color); font-size: 1rem; font-weight: 600; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="总价"] { grid-area: price; display: flex; color: var(--p-text-color); font-size: 1rem; font-weight: 600; justify-content: flex-end; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="类型"] { grid-area: type; display: flex; color: var(--p-text-muted-color); } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="ID"] { grid-area: id; display: flex; color: var(--p-text-muted-color); } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="下单时间"] { grid-area: time; display: flex; color: var(--p-text-muted-color); white-space: nowrap !important; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="状态"] { grid-area: status; display: flex; justify-content: flex-end; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="支付方式"] { grid-area: pay; display: flex; color: var(--p-text-muted-color); } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td:last-child { display: none; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="支付方式"]::before { content: "支付方式 "; color: var(--p-text-muted-color); font-size: 0.875rem; display: inline; } .list-table[data-v-d87be2e3] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="ID"] .order-link { color: var(--p-text-muted-color); font-weight: 400; } }