340 预约管理-门诊预约挂号：选择患者弹窗列表数据字段显示错位

openhis-ui-vue3/src/views/appoinmentmanage/outpatientAppointment/index.vue

@@ -892,8 +892,8 @@ export default {
 </script>
 
 <style scoped>
-/* 颜色变量定义 */
+/* 颜色变量定义 - 使用组件内CSS变量 */
-:root {
+.ticket-management-container {
   --primary-color: #1890FF;
   --secondary-color: #FF6B35;
   --status-unbooked: #5A8DEE;
@@ -967,7 +967,8 @@ export default {
 }
 
 .date-picker {
-  width: 100%;
+  width: 160px;
+  z-index: 1;
 }
 
 /* 搜索控件样式 */
@@ -1038,12 +1039,6 @@ export default {
   cursor: not-allowed;
 }
 
-/* 日期选择器样式 */
-.date-picker {
-  width: 160px;
-  z-index: 1;
-}
-
 /* 状态筛选器样式 */
 .status-filter {
   z-index: 2;
@@ -1129,50 +1124,50 @@ export default {
   width: 100%;
 }
 
-  /* 响应式设计 */
+/* 响应式设计 */
-  @media (max-width: 768px) {
+@media (max-width: 768px) {
-    /* 顶部搜索区域改为纵向排列 */
+  /* 顶部搜索区域改为纵向排列 */
-    .top-search-area {
+  .top-search-area {
-      flex-direction: column;
+    flex-direction: column;
-      height: auto;
+    height: auto;
-      padding: 16px;
+    padding: 16px;
-      gap: 16px;
+    gap: 16px;
-    }
+  }
 
-    /* 汉堡菜单显示 */
+  /* 汉堡菜单显示 */
-    .hamburger-menu {
+  .hamburger-menu {
-      display: block;
+    display: block;
-      align-self: flex-start;
+    align-self: flex-start;
-    }
+  }
 
-    /* 搜索区域元素宽度100% */
+  /* 搜索区域元素宽度100% */
-    .date-picker,
+  .date-picker,
-    .status-filter,
+  .status-filter,
-    .patient-search,
+  .patient-search,
-    .card-search,
+  .card-search,
-    .phone-search,
+  .phone-search,
-    .search-button,
+  .search-button,
-    .add-patient {
+  .add-patient {
-      width: 100%;
+    width: 100%;
-    }
+  }
 
-    /* 右侧内容区卡片布局调整 */
+  /* 右侧内容区卡片布局调整 */
-    .virtual-list {
+  .virtual-list {
-      grid-template-columns: 1fr;
+    grid-template-columns: 1fr;
-      gap: 12px;
+    gap: 12px;
-      padding: 12px;
+    padding: 12px;
-    }
+  }
 
-    /* 左侧边栏默认隐藏 */
+  /* 左侧边栏默认隐藏 */
-    .left-sidebar {
+  .left-sidebar {
-      transform: translateX(-100%);
+    transform: translateX(-100%);
-    }
+  }
 
-    /* 右侧内容区占满屏幕 */
+  /* 右侧内容区占满屏幕 */
-     .right-content {
+  .right-content {
-       width: 100%;
+    width: 100%;
-     }
+  }
-   }
+}
    
    /* 确保卡片样式正确应用 */
    .ticket-card {
@@ -1598,9 +1593,28 @@ export default {
 }
 
 .modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   flex-shrink: 0;
 }
 
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #999;
+}
+
 .modal-body {
   flex: 1;
   overflow-y: auto;
@@ -1668,32 +1682,6 @@ export default {
   border-color: var(--primary-color);
 }
 
-.modal-header {
-  padding: 16px 20px;
-  border-bottom: 1px solid #e0e0e0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #999;
-}
-
-.modal-body {
-  padding: 20px;
-}
-
 .patient-search-toolbar {
   display: flex;
   align-items: center;