fix:工单样式兼容移动端

2026-01-23 14:24:29 +08:00
parent 5b5e0f62ec
commit ead7c5bba5
6 changed files with 1094 additions and 59 deletions
@@ -1322,4 +1322,202 @@ onBeforeUnmount(() => {
  font-size: 12px;
  margin-top: 4px;
 }
+
+/* 平板尺寸响应式样式 */
+@media (max-width: 1024px) and (min-width: 769px) {
+  .page-header {
+    padding: 12px 16px;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .header-left {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .ticket-title {
+    max-width: 200px;
+  }
+
+  .header-right {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .message-content {
+    max-width: 70%;
+  }
+
+  .quick-replies {
+    flex-wrap: wrap;
+  }
+
+  .input-area {
+    gap: 10px;
+  }
+}
+
+/* 移动端响应式样式 */
+@media (max-width: 768px) {
+  .ticket-detail-page {
+    padding: 0;
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px;
+    height: auto;
+  }
+
+  .header-left {
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+
+  .header-left .el-button {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
+  .user-info {
+    order: 3;
+    width: 100%;
+    margin-top: 8px;
+  }
+
+  .ticket-title {
+    order: 4;
+    width: 100%;
+    max-width: none;
+    margin-top: 8px;
+    white-space: normal;
+    line-height: 1.4;
+  }
+
+  .header-right {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .header-right .ticket-id {
+    font-size: 12px;
+  }
+
+  .header-right .el-select {
+    width: 100px !important;
+  }
+
+  .header-right .el-button {
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+
+  .chat-container {
+    min-height: 300px;
+  }
+
+  .chat-messages {
+    padding: 12px;
+  }
+
+  .message-content {
+    max-width: 80%;
+  }
+
+  .message-text {
+    padding: 10px 12px;
+    font-size: 14px;
+  }
+
+  .message-image {
+    max-width: 150px;
+    max-height: 150px;
+  }
+
+  .reply-container {
+    padding: 12px;
+  }
+
+  .quick-replies {
+    gap: 6px;
+  }
+
+  .quick-replies .el-button {
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+
+  .input-actions {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .left-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .input-actions .el-button--primary {
+    width: 100%;
+  }
+
+  .hint-text {
+    display: none;
+  }
+
+  /* 用户信息弹窗 */
+  .user-popover {
+    width: 100% !important;
+  }
+
+  .popover-header {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .popover-info {
+    margin-top: 8px;
+  }
+
+  /* 编辑消息弹窗 */
+  :deep(.el-dialog) {
+    width: 90% !important;
+    margin: 5vh auto !important;
+  }
+
+  .edit-images-container {
+    gap: 8px;
+  }
+
+  .edit-preview-item,
+  .add-image-btn {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-left .el-button span {
+    display: none;
+  }
+
+  .header-left .el-button .el-icon {
+    margin: 0;
+  }
+
+  .message-content {
+    max-width: 85%;
+  }
+
+  .preview-item {
+    width: 60px;
+    height: 60px;
+  }
+}
 </style>