Fix Bug #568: 修复门诊日结页面排版混乱 - 统一el-row/el-col布局和CSS样式

- 容器从固定width:1300px改为响应式max-width:1200px
- 内联样式替换为CSS类(report-container/report-title/report-row)
- 统一el-col span使每行总和=24(6+6+12, 6+6+6+6, 8+8+8)
- 统一gutter为10，移除不一致的gutter:5
- 移除float:right和!important等破坏性CSS
- 添加.label/.value统一字体14px和间距

openhis-ui-vue3/src/views/clinicmanagement/dayEnd/index.vue

@@ -37,127 +37,57 @@
         <el-button type="primary" plain icon="Printer" @click="print">打印</el-button>
       </el-form-item>
     </el-form>
-    <div v-loading="loading" style="width: 1300px">
-      <div style="text-align: center">
-        <h2>门诊收费日结单</h2>
+
+    <div v-loading="loading" class="report-container">
+      <div class="report-title">门诊收费日结单</div>
+      <div class="report-section">
+        <div class="section-title">基本信息</div>
+        <el-row :gutter="20" class="report-row">
+          <el-col :span="6"><span class="label">经办人姓名：</span><span class="value">{{ userStore.nickName }}</span></el-col>
+          <el-col :span="6"><span class="label">科室：</span><span class="value">{{ userStore.orgName }}</span></el-col>
+          <el-col :span="12"><span class="label">时间：</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></el-col>
+        </el-row>
       </div>
-      <el-row
-        :gutter="5"
-        style="margin: 20px 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px"
-      >
-        <el-col :span="4">
-          <span class="label">经办人姓名：</span>
-          <span class="value">{{ userStore.nickName }}</span>
-        </el-col>
-        <el-col :span="4">
-          <span class="label">科室：</span>
-          <span class="value">{{ userStore.orgName }}</span>
-        </el-col>
-        <el-col :span="7">
-          <span class="label">时间：</span>
-          <span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span>
-        </el-col>
-      </el-row>
       <div class="divider"></div>
-      <el-row
-        :gutter="10"
-        style="margin: 20px 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">总收入：</span>
-          <span class="value">{{ formatValue(reportValue.cashSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">现金：</span>
-          <span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">微信：</span>
-          <span class="value">{{ formatValue(reportValue.vxCashSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">支付宝：</span>
-          <span class="value">{{ formatValue(reportValue.aliCashSum) }}</span>
-        </el-col>
-      </el-row>
+      <div class="report-section">
+        <div class="section-title">收费汇总</div>
+        <el-row :gutter="20" class="report-row">
+          <el-col :span="6"><span class="label">实际现金收入：</span><span class="value">{{ formatValue(reportValue.cashSum) }}</span></el-col>
+          <el-col :span="6"><span class="label">现金：</span><span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span></el-col>
+          <el-col :span="6"><span class="label">微信：</span><span class="value">{{ formatValue(reportValue.vxCashSum) }}</span></el-col>
+          <el-col :span="6"><span class="label">支付宝：</span><span class="value">{{ formatValue(reportValue.aliCashSum) }}</span></el-col>
+        </el-row>
+      </div>
       <div class="divider"></div>
-      <el-row
-        :gutter="10"
-        style="margin: 20px 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">统筹支付：</span>
-          <span class="value">{{ formatValue(reportValue.tcSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">账户支付：</span>
-          <span class="value">{{ formatValue(reportValue.zhSum) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">基金支付总额：</span>
-          <span class="value">{{ formatValue(reportValue.fundSum) }}</span>
-        </el-col>
-      </el-row>
+      <div class="report-section">
+        <div class="section-title">医保支付</div>
+        <el-row :gutter="20" class="report-row">
+          <el-col :span="6"><span class="label">统筹支付：</span><span class="value">{{ formatValue(reportValue.tcSum) }}</span></el-col>
+          <el-col :span="6"><span class="label">账户支付：</span><span class="value">{{ formatValue(reportValue.zhSum) }}</span></el-col>
+          <el-col :span="12"><span class="label">基金支付总额：</span><span class="value">{{ formatValue(reportValue.fundSum) }}</span></el-col>
+        </el-row>
+      </div>
       <div class="divider"></div>
-      <el-row
-        :gutter="10"
-        style="margin: 20px 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">诊查费：</span>
-          <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">检查费：</span>
-          <span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">化验费：</span>
-          <span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">治疗费：</span>
-          <span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span>
-        </el-col>
-      </el-row>
-      <el-row
-        :gutter="10"
-        style="margin: 20px 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">西药费：</span>
-          <span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">中药饮片费：</span>
-          <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">中成药费：</span>
-          <span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">卫生材料费：</span>
-          <span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span>
-        </el-col>
-      </el-row>
-      <el-row
-        :gutter="10"
-        style="margin: 20px 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 20px"
-      >
-        <el-col :span="5">
-          <span class="label">诊疗费：</span>
-          <span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">挂号费：</span>
-          <span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span>
-        </el-col>
-        <el-col :span="5">
-          <span class="label">其他费用：</span>
-          <span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span>
-        </el-col>
-      </el-row>
+      <div class="report-section">
+        <div class="section-title">费用明细</div>
+        <el-row :gutter="20" class="report-row">
+          <el-col :span="6"><span class="label">诊查费：</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span></el-col>
+          <el-col :span="6"><span class="label">检查费：</span><span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span></el-col>
+          <el-col :span="6"><span class="label">化验费：</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span></el-col>
+          <el-col :span="6"><span class="label">治疗费：</span><span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span></el-col>
+        </el-row>
+        <el-row :gutter="20" class="report-row">
+          <el-col :span="6"><span class="label">西药费：</span><span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span></el-col>
+          <el-col :span="6"><span class="label">中药饮片费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span></el-col>
+          <el-col :span="6"><span class="label">中成药费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span></el-col>
+          <el-col :span="6"><span class="label">卫生材料费：</span><span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span></el-col>
+        </el-row>
+        <el-row :gutter="20" class="report-row">
+          <el-col :span="6"><span class="label">诊疗费：</span><span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span></el-col>
+          <el-col :span="6"><span class="label">挂号费：</span><span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span></el-col>
+          <el-col :span="12"><span class="label">其他费用：</span><span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span></el-col>
+        </el-row>
+      </div>
     </div>
   </div>
 </template>
@@ -334,19 +264,53 @@ getList();
 getPharmacyCabinetLists();
 </script>
 <style scoped>
+.report-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 24px 32px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+.report-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 16px 0;
+}
+.report-section {
+  margin: 8px 0;
+}
+.section-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #303133;
+  margin: 8px 0;
+  padding-left: 8px;
+  border-left: 3px solid #409eff;
+}
+.report-row .el-col {
+  display: flex;
+  align-items: center;
+  padding: 6px 0;
+}
 .label {
-  display: inline-block;
-  width: 120px !important;
+  min-width: 110px;
+  flex-shrink: 0;
+  color: #606266;
+  white-space: nowrap;
+  text-align: right;
 }
 .value {
-  float: right;
-}
-.el-col {
-  margin-right: 50px;
+  color: #303133;
+  font-weight: 500;
+  white-space: nowrap;
 }
 .divider {
-  height: 3px;
-  background-color: #000;
-  margin: 20px 0;
+  height: 1px;
+  background-color: #dcdfe6;
+  margin: 12px 0;
 }
 </style>