/* 工单列表:分类统计、状态标记、列表查询和支持说明。 */ /* 导入方:app/pages/tickets/index.vue。 */ .stat-row[data-v-1ff3e04d] { flex-wrap: wrap; gap: 12px; display: flex; } .stat-card[data-v-1ff3e04d] { background: var(--p-content-background); border: 1px solid var(--p-content-border-color, #e2e8f0); border-radius: var(--radius-lg); align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.9375rem; display: inline-flex; } .stat-dot[data-v-1ff3e04d] { border-radius: 50%; flex-shrink: 0; width: 8px; height: 8px; } .stat-label[data-v-1ff3e04d] { color: var(--p-text-muted-color, #64748b); } .stat-count[data-v-1ff3e04d] { font-weight: 600; } .title-link[data-v-1ff3e04d] { color: var(--p-text-color, #334155); text-decoration: none; } .title-link[data-v-1ff3e04d]:hover { color: var(--p-primary-color, #10b981); } .status-tag[data-v-1ff3e04d] { white-space: nowrap; border: 1px solid; border-radius: 999px; padding: 1px 8px; font-size: 0.875rem; display: inline-block; } .list-page[data-v-1ff3e04d] { gap: 21px; } .list-head h2[data-v-1ff3e04d], .page-head h2[data-v-1ff3e04d] { margin: 0; font-size: var(--page-title-size); font-weight: 600; line-height: 24.5px; } .list-toolbar[data-v-1ff3e04d], .list-toolbar-right[data-v-1ff3e04d] { justify-content: flex-start; gap: 7px; } .list-search[data-v-1ff3e04d], .list-select[data-v-1ff3e04d] { width: 280px; } .list-table[data-v-1ff3e04d] { border-radius: var(--radius-md); box-shadow: 0 1px 3px #0f172a12; } .list-foot[data-v-1ff3e04d] { justify-content: center; } .list-foot > .list-bulk[data-v-1ff3e04d]:empty { display: none; } [data-v-1ff3e04d] .p-datatable-header-cell { background: var(--p-content-hover-background); padding: 10.5px 14px; font-size: 1rem; font-weight: 600; } [data-v-1ff3e04d] .p-datatable-tbody > tr > td { padding: 10.5px 14px; font-size: 1rem; } [data-v-1ff3e04d] .p-tag { font-size: 0.875rem; font-weight: 500; } [data-v-1ff3e04d] .list-empty { gap: 14px; min-height: 300px; padding: 42px 21px; } [data-v-1ff3e04d] .list-empty i { opacity: 1; font-size: 1.875rem; } [data-v-1ff3e04d] .list-empty-title { font-size: 1rem; } [data-v-1ff3e04d] .list-empty-desc { font-size: 0.875rem; } .field[data-v-1ff3e04d] { gap: 7px; } .field label[data-v-1ff3e04d] { font-size: 0.875rem; } /* 视口条件 (width<=768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=768px) { .list-search[data-v-1ff3e04d], .list-select[data-v-1ff3e04d], .list-toolbar-right[data-v-1ff3e04d] { width: 100%; } } .support-notice[data-v-1ff3e04d] { font-size: 0.875rem; line-height: 24.5px; } .list-head[data-v-1ff3e04d] { margin-top: 0; } @media (width<640px) { .list-table[data-v-1ff3e04d] .p-datatable-tbody > tr:not(.p-datatable-empty-message) { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "title title title status" "id type . reply"; align-items: center; gap: 6px 10px; padding: 14px 16px; display: grid; } .list-table[data-v-1ff3e04d] .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-1ff3e04d] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td::before { display: none; } .list-table[data-v-1ff3e04d] .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-1ff3e04d] .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-1ff3e04d] .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-1ff3e04d] .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-1ff3e04d] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="最近回复"] { grid-area: reply; display: flex; color: var(--p-text-muted-color); justify-content: flex-end; } .list-table[data-v-1ff3e04d] .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-1ff3e04d] .p-datatable-tbody > tr:not(.p-datatable-empty-message) > td[data-label="ID"] a { color: var(--p-text-muted-color); text-decoration: none; font-weight: 400; } }