Files
console-dev/app/assets/styles/invoices.t1P1GXOx.css
T
cneicy 42dfead9cd
前端验证 / verify (push) Failing after 15m3s
feat(ui): 优化控制台响应式布局与视觉体验
- 统一页面标题、圆角、字体和响应式断点,调整暗色主题及图表配色
- 新增表格列标签插件,在窄屏下将表格转换为卡片布局,优化实例、订单、工单等列表展示
- 支持移动端点击订单行进入详情,并完善订单凭据的打印布局
- 在财务中心展示本月及累计消费,补充充值关闭时的提示
- 优化工单详情布局,将附件上传入口整合至富文本编辑器工具栏
- 调整实例操作按钮、SSH 密钥操作及安全菜单图标
- 为多个页面显式导入 definePageMeta,完善页面元数据声明
2026-11-07 00:09:57 +08:00

174 lines
4.0 KiB
CSS

/* 发票列表与申请:可开票订单、抬头、金额汇总和申请操作。 */
/* 导入方:app/pages/invoices/index.vue、app/pages/invoices/request.vue。 */
.list-head-actions[data-v-86fc6dc2] a.p-button {
text-decoration: none;
}
.title-cell[data-v-86fc6dc2] {
align-items: center;
gap: 8px;
display: flex;
}
.title-type[data-v-86fc6dc2] {
color: var(--p-text-muted-color, #94a3b8);
border: 1px solid var(--p-content-border-color, #e2e8f0);
white-space: nowrap;
border-radius: 999px;
flex-shrink: 0;
padding: 0 8px;
font-size: 0.875rem;
}
.amount[data-v-86fc6dc2] {
color: #ef4444;
font-weight: 500;
}
.invoice-row-actions[data-v-86fc6dc2] {
align-items: center;
gap: 2px;
display: inline-flex;
}
/* 开票申请区域:订单选择、抬头与金额提示按同一表单流排列。 */
.apply[data-v-86fc6dc2] {
flex-direction: column;
gap: 18px;
display: flex;
}
.section-label[data-v-86fc6dc2] {
color: var(--p-text-muted-color, #64748b);
margin-bottom: 8px;
font-size: 0.9375rem;
}
.order-list[data-v-86fc6dc2] {
border: 1px solid var(--p-content-border-color, #e2e8f0);
border-radius: var(--radius-lg);
flex-direction: column;
max-height: 220px;
display: flex;
overflow-y: auto;
}
.order-item[data-v-86fc6dc2] {
border-bottom: 1px solid var(--p-content-border-color, #f1f5f9);
cursor: pointer;
align-items: center;
gap: 12px;
padding: 10px 14px;
font-size: 0.9375rem;
display: flex;
}
.order-item[data-v-86fc6dc2]:last-child {
border-bottom: none;
}
.order-main[data-v-86fc6dc2] {
flex-direction: column;
flex: 1;
gap: 2px;
min-width: 0;
display: flex;
}
.order-title[data-v-86fc6dc2] {
align-items: center;
gap: 8px;
display: flex;
}
.order-host[data-v-86fc6dc2] {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.order-host[data-v-86fc6dc2],
.order-time[data-v-86fc6dc2] {
color: var(--p-text-muted-color, #94a3b8);
font-size: 0.875rem;
}
.order-amount[data-v-86fc6dc2] {
color: #ef4444;
font-weight: 500;
}
.no-data[data-v-86fc6dc2] {
text-align: center;
color: var(--p-text-muted-color, #94a3b8);
border: 1px dashed var(--p-content-border-color, #e2e8f0);
border-radius: var(--radius-lg);
padding: 20px;
font-size: 0.9375rem;
}
.apply-grid[data-v-86fc6dc2] {
grid-template-columns: 1fr 1fr;
gap: 14px;
display: grid;
}
.field[data-v-86fc6dc2] {
flex-direction: column;
gap: 6px;
display: flex;
}
.field label[data-v-86fc6dc2] {
color: var(--p-text-color, #334155);
font-size: 0.9375rem;
}
.field-tip[data-v-86fc6dc2] {
color: var(--p-primary-color);
font-size: 0.875rem;
text-decoration: none;
}
.total-tip[data-v-86fc6dc2] {
color: var(--p-text-muted-color, #64748b);
margin-right: auto;
font-size: 0.9375rem;
}
.total-tip b[data-v-86fc6dc2] {
color: #ef4444;
font-size: 1.0625rem;
}
.invoice-link[data-v-86fc6dc2] {
color: var(--p-text-color);
text-decoration: none;
}
.invoice-link[data-v-86fc6dc2]:hover {
text-decoration: underline;
}
.list-foot[data-v-86fc6dc2] {
justify-content: center;
}
.list-table[data-v-86fc6dc2] .p-datatable-thead > tr > th {
padding: 12px 14px;
}
.list-table[data-v-86fc6dc2] .p-datatable-tbody > tr > td {
padding: 18px 14px;
}
.request-page[data-v-86fc6dc2] {
flex-direction: column;
gap: 21px;
display: flex;
}
.request-page h2[data-v-86fc6dc2] {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
}
.request-page .apply-grid[data-v-86fc6dc2] {
border-top: 1px solid var(--p-content-border-color);
padding-top: 28px;
}
.request-actions[data-v-86fc6dc2] {
justify-content: flex-end;
align-items: center;
gap: 14px;
margin-top: 14px;
display: flex;
}
.request-actions > span[data-v-86fc6dc2] {
margin-right: auto;
}
/* 视口条件 (width<=640px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */
@media (width<=640px) {
.apply-grid[data-v-86fc6dc2] {
grid-template-columns: minmax(0, 1fr);
}
.request-actions[data-v-86fc6dc2] {
flex-wrap: wrap;
}
.request-actions > span[data-v-86fc6dc2] {
flex-basis: 100%;
}
}