/* 新建工单:类型选择、资源关联、正文、附件及提交操作。 */ /* 导入方:app/pages/tickets/create.vue。 */ .page[data-v-710c7c49] { flex-direction: column; gap: 18px; display: flex; } .page-head h2[data-v-710c7c49] { margin: 10px 0 0; font-size: var(--page-title-size); font-weight: 600; } .back[data-v-710c7c49] { color: var(--p-text-muted-color, #94a3b8); align-items: center; gap: 6px; font-size: 0.9375rem; text-decoration: none; display: inline-flex; } .back[data-v-710c7c49]:hover { color: var(--p-primary-color, #10b981); } .panel[data-v-710c7c49] { background: var(--p-content-background); border: 1px solid var(--p-content-border-color, #e2e8f0); border-radius: var(--radius-lg); max-width: 760px; padding: 24px; } .form[data-v-710c7c49] { gap: 18px; } .field[data-v-710c7c49], .form[data-v-710c7c49] { flex-direction: column; display: flex; } .field[data-v-710c7c49] { flex: 1; gap: 6px; } .field label[data-v-710c7c49] { color: var(--p-text-color, #334155); font-size: 0.9375rem; } .field-row[data-v-710c7c49] { gap: 16px; display: flex; } .req[data-v-710c7c49] { color: #ef4444; } .upload[data-v-710c7c49] { flex-wrap: wrap; align-items: center; gap: 12px; display: flex; } .file-input[data-v-710c7c49] { color: var(--p-text-muted-color, #64748b); font-size: 0.9375rem; } .uploading[data-v-710c7c49] { color: var(--p-primary-color); align-items: center; gap: 6px; display: inline-flex; } .hint[data-v-710c7c49], .uploading[data-v-710c7c49] { font-size: 0.875rem; } .hint[data-v-710c7c49] { color: var(--p-text-muted-color, #94a3b8); } .files[data-v-710c7c49] { flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; display: flex; } .files li[data-v-710c7c49] { background: var(--p-content-hover-background); border-radius: var(--radius-md); align-items: center; gap: 8px; padding: 6px 10px; font-size: 0.9375rem; display: flex; } .files .fname[data-v-710c7c49] { text-overflow: ellipsis; white-space: nowrap; flex: 1; overflow: hidden; } .files .rm[data-v-710c7c49] { color: var(--p-text-muted-color, #94a3b8); cursor: pointer; background: 0 0; border: 0; padding: 2px 4px; } .files .rm[data-v-710c7c49]:hover { color: #ef4444; } .host-opt[data-v-710c7c49] { flex-direction: column; gap: 2px; min-width: 0; display: flex; } .host-opt-name[data-v-710c7c49] { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .host-opt-meta[data-v-710c7c49] { color: var(--p-text-muted-color, #94a3b8); font-size: 0.875rem; } .actions[data-v-710c7c49] { justify-content: flex-end; gap: 10px; display: flex; } .list-page[data-v-710c7c49] { gap: 21px; } .list-head h2[data-v-710c7c49], .page-head h2[data-v-710c7c49] { margin: 0; font-size: var(--page-title-size); font-weight: 600; line-height: 24.5px; } .list-toolbar[data-v-710c7c49], .list-toolbar-right[data-v-710c7c49] { justify-content: flex-start; gap: 7px; } .list-search[data-v-710c7c49], .list-select[data-v-710c7c49] { width: 280px; } .list-table[data-v-710c7c49] { border-radius: var(--radius-md); box-shadow: 0 1px 3px #0f172a12; } .list-foot[data-v-710c7c49] { justify-content: center; } .list-foot > .list-bulk[data-v-710c7c49]:empty { display: none; } [data-v-710c7c49] .p-datatable-header-cell { background: var(--p-content-hover-background); padding: 10.5px 14px; font-size: 1rem; font-weight: 600; } [data-v-710c7c49] .p-datatable-tbody > tr > td { padding: 10.5px 14px; font-size: 1rem; } [data-v-710c7c49] .p-tag { font-size: 0.875rem; font-weight: 500; } [data-v-710c7c49] .list-empty { gap: 14px; min-height: 300px; padding: 42px 21px; } [data-v-710c7c49] .list-empty i { opacity: 1; font-size: 1.875rem; } [data-v-710c7c49] .list-empty-title { font-size: 1rem; } [data-v-710c7c49] .list-empty-desc { font-size: 0.875rem; } .field[data-v-710c7c49] { gap: 7px; } /* 视口条件 (width<=768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=768px) { .list-search[data-v-710c7c49], .list-select[data-v-710c7c49], .list-toolbar-right[data-v-710c7c49] { width: 100%; } } .ticket-create[data-v-710c7c49] { width: 100%; max-width: 896px; margin: 0 auto; } .ticket-create h2[data-v-710c7c49] { margin: 0 0 28px; font-size: 1.5rem; font-weight: 400; } .ticket-section[data-v-710c7c49] { border-top: 1px solid var(--p-content-border-color); grid-template-columns: 210px minmax(0, 1fr); gap: 21px; padding: 28px 0; display: grid; } .ticket-section aside h3[data-v-710c7c49] { margin: 7px 0; font-size: 1rem; font-weight: 400; } .ticket-section aside p[data-v-710c7c49] { color: var(--p-text-muted-color); margin: 0; font-size: 1rem; line-height: 1.5rem; } .section-fields[data-v-710c7c49] { flex-direction: column; gap: 14px; min-width: 0; display: flex; } .type-options[data-v-710c7c49] { border: 0; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; display: flex; } .type-options legend[data-v-710c7c49] { margin-bottom: 7px; } .type-options label[data-v-710c7c49] { align-items: center; gap: 7px; display: flex; } .upload-drop[data-v-710c7c49] { border: 1px dashed var(--p-content-border-color); cursor: pointer; border-radius: var(--radius-md); flex-direction: column; justify-content: center; align-items: center; gap: 14px; height: 224px; display: flex; position: relative; } .upload-drop input[data-v-710c7c49] { opacity: 0; cursor: pointer; position: absolute; inset: 0; } .upload-drop b[data-v-710c7c49] { color: var(--p-primary-color); font-weight: 400; } .upload-drop small[data-v-710c7c49] { color: var(--p-text-muted-color); font-size: 0.875rem; } .cancel-link[data-v-710c7c49] { color: var(--p-text-muted-color); padding: 8px 14px; text-decoration: none; } #content[data-v-710c7c49] { min-height: 264px; } .field label[data-v-710c7c49] { font-size: 1rem; } /* 视口条件 (width<=768px) 下的响应式覆盖;保留相对基础规则的层叠顺序。 */ @media (width<=768px) { .ticket-section[data-v-710c7c49] { grid-template-columns: 1fr; } .ticket-section aside[data-v-710c7c49] { max-width: 100%; } }