diff --git a/frontend/assets/styles.css b/frontend/assets/styles.css index 3fd370c..d1a3a50 100644 --- a/frontend/assets/styles.css +++ b/frontend/assets/styles.css @@ -616,3 +616,71 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ [data-theme="light"] .watermark-text { opacity: 0.06; } + +/* 工单页面样式 */ +.page-container{max-width:100%;margin:0 auto} +.page-header{margin-bottom:24px} +.page-header h1{font-size:24px;font-weight:700;margin:0;color:var(--text)} + +.filter-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px} +.filter-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap} +.filter-item{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px} +.filter-item label{color:var(--text-2);font-size:13px;font-weight:500} +.filter-item input,.filter-item select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:14px} +.filter-item input:focus,.filter-item select:focus{outline:2px solid var(--primary);border-color:var(--primary)} +.filter-actions{display:flex;gap:8px;align-items:flex-end} +.filter-actions .btn{padding:10px 20px;font-size:14px} + +.table-container{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:20px} +.data-table{width:100%;border-collapse:collapse;font-size:13px} +.data-table thead{background:var(--surface-2);position:sticky;top:0;z-index:1} +.data-table th{padding:12px 16px;text-align:left;font-weight:600;color:var(--text);border-bottom:2px solid var(--border);white-space:nowrap} +.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text-2)} +.data-table tbody tr:hover{background:rgba(79,140,255,.08)} +.data-table tbody tr:last-child td{border-bottom:none} + +.status-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500} +.status-badge.status-pending{background:rgba(245,158,11,.2);color:#f59e0b} +.status-badge.status-processing{background:rgba(79,140,255,.2);color:#4f8cff} +.status-badge.status-completed{background:rgba(34,197,94,.2);color:#22c55e} +.status-badge.status-cancelled{background:rgba(239,68,68,.2);color:#ef4444} + +.btn-icon{background:transparent;border:none;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:6px;transition:background 0.2s} +.btn-icon:hover{background:rgba(79,140,255,.15)} + +.pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px} +.pagination .btn{min-width:80px} +.pagination .btn:disabled{opacity:0.5;cursor:not-allowed} +#page-info{color:var(--text-2);font-size:14px} + +/* 弹窗样式 */ +.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)} +.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:90%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3)} +.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)} +.modal-header h2{margin:0;font-size:20px;font-weight:700;color:var(--text)} +.modal-close{background:transparent;border:none;font-size:28px;color:var(--text-2);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.2s} +.modal-close:hover{background:rgba(239,68,68,0.15);color:var(--danger)} +.modal-body{padding:24px;overflow-y:auto;flex:1} +.modal-footer{display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border)} + +/* 表单网格 */ +.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} +.form-grid .field.full-width{grid-column:1 / -1} +.field .required{color:var(--danger);margin-left:2px} +.field textarea{resize:vertical;font-family:inherit} + +/* 页面头部样式 */ +.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px} + +/* 状态徽章 - 已下发为绿色 */ +.status-badge.status-issued{background:rgba(34,197,94,.2);color:#22c55e} + +/* 状态徽章 - 已确认为橘黄色 */ +.status-badge.status-confirmed{background:rgba(251,146,60,.2);color:#fb923c} + +/* 删除按钮样式 */ +.btn-icon.btn-danger:hover{background:rgba(239,68,68,.15);color:var(--danger)} + +/* 确认按钮样式 */ +.btn-icon.btn-confirm{color:#fb923c} +.btn-icon.btn-confirm:hover{background:rgba(251,146,60,.15);color:#fb923c} diff --git a/frontend/index.html b/frontend/index.html index b727597..49b8388 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -74,6 +74,22 @@ +