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

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

@@ -892,8 +892,8 @@ export default {
 </script>
 
 <style scoped>
-/* 颜色变量定义 */
-:root {
+/* 颜色变量定义 - 使用组件内CSS变量 */
+.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,8 +1124,8 @@ export default {
   width: 100%;
 }
 
-  /* 响应式设计 */
-  @media (max-width: 768px) {
+/* 响应式设计 */
+@media (max-width: 768px) {
   /* 顶部搜索区域改为纵向排列 */
   .top-search-area {
     flex-direction: column;
@@ -1172,7 +1167,7 @@ export default {
   .right-content {
     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;