diff --git a/src/views/TicketManagement.vue b/src/views/TicketManagement.vue index dfbc8b5..afff8d2 100644 --- a/src/views/TicketManagement.vue +++ b/src/views/TicketManagement.vue @@ -6,35 +6,45 @@
总工单数
{{ allStats.total }}
- + + +
未分配
{{ allStats.pending }}
- + + +
进行中
{{ allStats.ongoing }}
- + + +
已完成
{{ allStats.completed }}
- + + +
已完结
{{ allStats.is_completed }}
- + + +
@@ -43,100 +53,112 @@
新增任务
- -
-
- \ No newline at end of file +.ticket-management { + padding: 20px; + background-color: #f8fafc; + min-height: 100vh; +} + +.stats-container { + display: grid; + grid-template-columns: repeat(5, minmax(150px, 1fr)); + gap: 16px; + margin-bottom: 24px; +} + +.stat-card { + background: white; + padding: 20px; + border-radius: 12px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; + transition: all 0.3s ease; + border-bottom: 3px solid transparent; +} + +.stat-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); +} + +.total { + border-bottom-color: #409eff; +} + +.total .stat-icon { + color: #409eff; + background: #ecf5ff; +} + +.pending { + border-bottom-color: #909399; +} + +.pending .stat-icon { + color: #909399; + background: #f4f4f5; +} + +.ongoing { + border-bottom-color: #e6a23c; +} + +.ongoing .stat-icon { + color: #e6a23c; + background: #fdf6ec; +} + +.success { + border-bottom-color: #67c23a; +} + +.success .stat-icon { + color: #67c23a; + background: #f0f9eb; +} + +.finished { + border-bottom-color: #009688; +} + +.finished .stat-icon { + color: #009688; + background: #e6f6f5; +} + +.stat-label { + font-size: 13px; + color: #64748b; + margin-bottom: 8px; + font-weight: 500; +} + +.stat-value { + font-size: 24px; + font-weight: 700; + color: #1e293b; +} + +.stat-icon { + font-size: 24px; + padding: 12px; + border-radius: 10px; +} + +.main-content { + background: white; + padding: 20px; + border-radius: 12px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); +} + +.action-bar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.pagination-container { + margin-top: 20px; + display: flex; + justify-content: flex-end; +} + +@media (max-width: 1400px) { + .stats-container { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 768px) { + .stats-container { + grid-template-columns: 1fr 1fr; + } +} +