console-dev/app/assets/styles/orders.BflDlvVz.css

/* 订单列表：说明、金额、关联详情及筛选操作。 */
/* 导入方：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;
  }
}