fix:工单样式兼容移动端

src/views/ticket/TicketList.vue

@@ -63,13 +63,14 @@
       </div>
     </div>
 
-    <!-- 工单表格 -->
+    <!-- 工单表格（PC端） -->
     <el-table
       v-loading="isLoading"
       :data="filteredTickets"
       stripe
       style="width: 100%"
       @row-click="handleRowClick"
+      class="desktop-table"
     >
       <el-table-column prop="id" label="工单号" width="100" />
       <el-table-column label="用户" width="180">
@@ -107,6 +108,41 @@
       </el-table-column>
     </el-table>
 
+    <!-- 移动端卡片列表 -->
+    <div class="mobile-ticket-list" v-loading="isLoading">
+      <div 
+        v-for="ticket in filteredTickets" 
+        :key="ticket.id" 
+        class="ticket-card"
+        @click="goToDetail(ticket)"
+      >
+        <div class="ticket-card-header">
+          <span class="ticket-card-id">#{{ ticket.id }}</span>
+          <el-tag :type="getStatusType(ticket.status)" size="small">
+            {{ getStatusText(ticket.status) }}
+          </el-tag>
+        </div>
+        <div class="ticket-card-user">
+          <el-avatar :size="28" :src="ticket.avatar">{{ ticket.username?.charAt(0) }}</el-avatar>
+          <span class="ticket-card-username">{{ ticket.username }}</span>
+        </div>
+        <div class="ticket-card-title">{{ ticket.title }}</div>
+        <div class="ticket-card-footer">
+          <span class="ticket-card-time">{{ ticket.createTime }}</span>
+          <div class="ticket-card-actions">
+            <el-button type="primary" size="small" @click.stop="goToDetail(ticket)">回复</el-button>
+            <el-button 
+              v-if="ticket.status !== 'completed'" 
+              type="success" 
+              size="small" 
+              @click.stop="handleComplete(ticket)"
+            >结束</el-button>
+          </div>
+        </div>
+      </div>
+      <el-empty v-if="filteredTickets.length === 0 && !isLoading" description="暂无工单数据" />
+    </div>
+
     <!-- 分页 -->
     <div class="pagination-wrapper">
       <el-pagination
@@ -659,4 +695,248 @@ onBeforeUnmount(() => {
 :deep(.el-table tr) {
   cursor: pointer;
 }
+
+/* 移动端卡片列表 */
+.mobile-ticket-list {
+  display: none;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.ticket-card {
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.ticket-card:active {
+  background: #f5f7fa;
+}
+
+.ticket-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.ticket-card-id {
+  font-size: 12px;
+  color: #909399;
+}
+
+.ticket-card-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.ticket-card-username {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.ticket-card-title {
+  font-size: 14px;
+  color: #303133;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ticket-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ticket-card-time {
+  font-size: 12px;
+  color: #909399;
+}
+
+.ticket-card-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* 大屏平板尺寸响应式样式 (1020px - 1280px) */
+@media (max-width: 1280px) and (min-width: 1021px) {
+  .toolbar {
+    padding: 12px 16px;
+    gap: 12px;
+  }
+
+  .toolbar-right {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toolbar-right .el-select {
+    width: 120px !important;
+  }
+
+  .toolbar-right .el-input {
+    min-width: 160px;
+  }
+
+  /* 表格列宽调整 */
+  :deep(.el-table) {
+    font-size: 13px;
+  }
+
+  :deep(.el-table .el-table__cell) {
+    padding: 10px 8px;
+  }
+}
+
+/* 平板尺寸响应式样式 (769px - 1020px) */
+@media (max-width: 1020px) and (min-width: 769px) {
+  .toolbar {
+    flex-direction: column;
+    height: auto;
+    padding: 12px 16px;
+    gap: 12px;
+    align-items: stretch;
+  }
+
+  .status-tabs {
+    width: 100%;
+    justify-content: flex-start;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .status-tabs::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  .status-tabs::-webkit-scrollbar-thumb {
+    background: #dcdfe6;
+    border-radius: 2px;
+  }
+
+  .toolbar-right {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toolbar-right .el-select {
+    width: 120px !important;
+  }
+
+  .toolbar-right .el-input {
+    flex: 1;
+    min-width: 150px;
+  }
+
+  /* 表格列宽调整 */
+  :deep(.el-table) {
+    font-size: 13px;
+  }
+
+  :deep(.el-table .el-table__cell) {
+    padding: 8px 6px;
+  }
+}
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .ticket-list-page {
+    height: auto;
+    min-height: calc(100vh - 60px);
+  }
+
+  .toolbar {
+    flex-direction: column;
+    height: auto;
+    padding: 12px;
+    gap: 12px;
+  }
+
+  .status-tabs {
+    width: 100%;
+    overflow-x: auto;
+    padding-bottom: 4px;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .status-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tab-item {
+    flex-shrink: 0;
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
+  .toolbar-right {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toolbar-right .el-select,
+  .toolbar-right .el-input {
+    flex: 1;
+    min-width: 120px;
+  }
+
+  .toolbar-right .el-button {
+    flex-shrink: 0;
+  }
+
+  /* 隐藏PC端表格，显示移动端卡片 */
+  :deep(.el-table) {
+    display: none !important;
+  }
+
+  .mobile-ticket-list {
+    display: flex;
+  }
+
+  .pagination-wrapper {
+    padding: 12px;
+    justify-content: center;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__sizes),
+  .pagination-wrapper :deep(.el-pagination__jump) {
+    display: none;
+  }
+
+  /* 用户选择弹窗移动端适配 */
+  :deep(.el-dialog) {
+    width: 90% !important;
+    margin: 5vh auto !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .tab-item {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  .tab-item .count {
+    display: none;
+  }
+}
 </style>