添加报告对比模块

frontend/src/renderer/src/services/api.js

@@ -639,7 +639,7 @@ export const historyAPI = {
     },
     // 删除pdf报告
     deletePDF(id) {
-      return api.delete(`/api/reports/${id}/delete`, {})
+      return api.post(`/api/reports/${id}/delete`, {})
     },
      // 获取检测会话历史
     sessionById(id) {

frontend/src/renderer/src/views/PatientProfile.vue

@@ -304,6 +304,9 @@
       </div>
     </div>
     <ViewPDF v-if="isViewPDF" :pdfUrl="pdfUrl" @closeViewPDF="closeViewPDF"/>
+    <ReportComparison v-if="isReportComparison" :selectedData="selectedData"
+    :selectedPatient="selectedPatient" />
+
   </div>
 </template>
 
@@ -317,7 +320,7 @@ import GenerateReport from '@/views/GenerateReport.vue'
 import ImageDetailsCompare from '@/views/ImageDetailsCompare.vue'
 import ImageDetails from '@/views/ImageDetails.vue'
 import ViewPDF from '@/views/viewPDF.vue'
-
+import ReportComparison from '@/views/ReportComparison.vue'
 const formatDate = (date) => {
   const d = new Date(date)
   const y = d.getFullYear()
@@ -340,6 +343,7 @@ const props = defineProps({
     default: false
   }
 })
+const isReportComparison = ref(false)
 const isTip = ref(false) // 退出提示
 const isViewPDF = ref(false) // 是否查看PDF
 const pdfUrl = ref('') // PDF地址
@@ -694,8 +698,11 @@ async function handleDiagnosticInfo(status) {
   } finally {
   }
 }
-function viewPatientProfile() { // 临时方法
+function viewPatientProfile() { //对比报告
-   
+  if (selectedData.value.length !== 2) { 
+    return
+  }
+  isReportComparison.value = true
 }
 
 function generateReport(row,index){ // 打开生成报告页面

frontend/src/renderer/src/views/ReportComparison.vue

@@ -0,0 +1,702 @@
+<template>
+  <div class="ReportComparison-container" id="popup-report-root">
+   <div class="ReportComparison-container-body"  id="pdf-content">
+    <div style="height: 100%; padding:0 90px; box-sizing: border-box;">
+      <div class="ReportComparison-container-bodytitle">体态测量报告单</div>
+      <div class="ReportComparison-container-display">
+        <div class="ReportComparison-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
+        <div class="ReportComparison-container-userinfotext">ID：{{ detectionInfo.id }}</div>
+      </div>
+      <div class="ReportComparison-container-userinfodisplay">
+        <div class="ReportComparison-container-userinfotext2">
+          ID：{{ selectedPatient.id }}
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-210">
+          姓名：{{ selectedPatient.name }}
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-195">
+          性别：{{ selectedPatient.gender }}
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-195">
+          年龄：{{ calculateAge(selectedPatient.birth_date) }}岁
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-235">
+          身高：{{ selectedPatient.height }}cm
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-215">
+          体重：{{ selectedPatient.weight }}kg
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-95">
+          鞋码：{{ selectedPatient.shoe_size }}码
+        </div>
+        <div class="ReportComparison-container-userinfotext2">
+          电话：{{ selectedPatient.phone }}
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-405">
+          邮箱：{{ selectedPatient.email }}
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-430">
+          居住地：{{ selectedPatient.residence }}
+        </div>
+        <div class="ReportComparison-container-userinfotext2 width-310">
+          职业：{{ selectedPatient.occupation }}
+        </div>
+      </div>
+      <div class="ReportComparison-container-testdatatitle">【检测数据】</div>
+      <div class="ReportComparison-containerdisplay">
+        <div class="ReportComparison-container-leftbox">
+          <div class="displayflex">
+            <div class="displayflextext1">原始数据：</div>
+            <div class="displayflextext1">
+               {{ rawData.id }}
+            </div>
+          </div>
+          <!-- 选中后显示内容 -->
+          <div v-if="rawData.id && rawData.id!=''">
+            <div class="ReportComparison-content-title">整体数据</div>
+            <div style="width: 600px;height: 387px;">
+              <img :src="BACKEND_URL+'/' +  rawData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="ReportComparison-content-title">身体姿态</div>
+            <div style="width: 100%;height: 454px; display: flex;justify-content: center;">
+              <img :src="BACKEND_URL+'/' +  rawData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="ReportComparison-content-title">头部姿态</div>
+            <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              <img src="@/assets/archive/roll.png">
+              <img src="@/assets/archive/yaw.png">
+              <img src="@/assets/archive/pitch.png">
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesLeft.rotationLeftMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesLeft.tiltLeftMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesLeft.pitchDownMax}}°
+              </span></div>
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesLeft.rotationRightMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">右：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesLeft.tiltRightMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">仰：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesLeft.pitchUpMax}}°
+                </span>
+              </div>
+            </div>
+            <div class="ReportComparison-content-title">足底压力</div>
+            <div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
+              <img  :src="BACKEND_URL+'/' +  rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="ReportComparison-content-title">视频1图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  rawData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="ReportComparison-content-title">视频2图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  rawData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+          </div>
+        </div>
+        <div class="ReportComparison-container-rightbox">
+          <div class="displayflex">
+            <div class="displayflextext1">矫正数据：</div>
+            <div class="displayflextext1">
+               {{ calibrationData.id }}
+            </div>
+          </div>
+          <!-- 选中后显示内容 -->
+          <div v-if="calibrationData.id && calibrationData.id!=''">
+            <div class="ReportComparison-content-title">整体数据</div>
+            <div style="width: 600px;height: 387px;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="ReportComparison-content-title">身体姿态</div>
+            <div style="width: 100%;height: 454px; display: flex;justify-content: center;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="ReportComparison-content-title">头部姿态</div>
+            <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              <img src="@/assets/archive/roll.png">
+              <img src="@/assets/archive/yaw.png">
+              <img src="@/assets/archive/pitch.png">
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.rotationLeftMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.tiltLeftMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.pitchDownMax}}°
+              </span></div>
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.rotationRightMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">右：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.tiltRightMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">仰：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.pitchUpMax}}°
+                </span>
+              </div>
+            </div>
+            <div class="ReportComparison-content-title">足底压力</div>
+            <div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
+              <img  :src="BACKEND_URL+'/' +  calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="ReportComparison-content-title">视频1图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="ReportComparison-content-title">视频2图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ReportComparison-container-testdatatitle">【诊断结果】</div>
+      <div class="ReportComparison-title2">记录</div>
+      <div class="ReportComparison-border1">{{ detectionInfo.diagnosis_info }}</div>
+      <div class="ReportComparison-title2">处理</div>
+      <div class="ReportComparison-border2">{{ detectionInfo.treatment_info }}</div>
+      <div class="ReportComparison-title2">备注</div>
+      <div class="ReportComparison-border3">{{ detectionInfo.suggestion_info }}</div>
+      <div class="ReportComparison-footer">
+          <div style="margin-right: 80px;">检测时间：{{ detectionInfo.created_at }}</div>
+          <div style="margin-right: 80px;">报告时间：{{ getFormattedTime() }}</div>
+          <div>检测医生：{{ detectionInfo.creator_name }}</div>
+        </div>
+    </div>
+
+    
+
+   </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { getBackendUrl } from '@/services/api.js'
+import { ElMessage } from 'element-plus'
+
+const emit = defineEmits([ 'closePopUpReport' ]);
+const props = defineProps({
+  selectedPatient: {
+    required: false,
+    type: Object,
+    default: null
+  },
+  selectedData: {
+    required: false,
+    type: Object,
+    default: []
+  },
+  detectionInfo: {
+    required: false,
+    type: Object,
+    default: {}
+  },
+  selectIds: {
+    required: false,
+    type: Array,
+    default: []
+  }
+})
+const BACKEND_URL = getBackendUrl()
+const rawData = ref({}) // 原始数据
+const calibrationData = ref({}) // 校准数据
+const isSelectData = ref(false) // 是否选择原始数据列表
+const imageList = ref([])
+const headPoseMaxValuesLeft = ref({  
+  rotationLeftMax: 0,    // 旋转-左旋最大值
+  rotationRightMax: 0,   // 旋转-右旋最大值
+  tiltLeftMax: 0,        // 倾斜-左倾最大值
+  tiltRightMax: 0,       // 倾斜-右倾最大值
+  pitchUpMax: 0,         // 俯仰-上仰最大值
+  pitchDownMax: 0  })
+
+  const headPoseMaxValuesRight= ref({  
+  rotationLeftMax: 0,    // 旋转-左旋最大值
+  rotationRightMax: 0,   // 旋转-右旋最大值
+  tiltLeftMax: 0,        // 倾斜-左倾最大值
+  tiltRightMax: 0,       // 倾斜-右倾最大值
+  pitchUpMax: 0,         // 俯仰-上仰最大值
+  pitchDownMax: 0  })
+const calculateAge = (birthDate) => { // 获取年龄
+  if (!birthDate) return '—'
+  const today = new Date()
+  const birth = new Date(birthDate)
+  let age = today.getFullYear() - birth.getFullYear()
+  const monthDiff = today.getMonth() - birth.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+    age--
+  }
+  return age
+}
+
+// 生命周期
+onMounted(() => {
+  // imageList.value = props.detectionInfo.data
+  // for (let i = 0; i < imageList.value.length; i++) {
+  //   if(imageList.value[i].id == props.selectIds[0]){
+  //     rawData.value = imageList.value[i] 
+  //     if(imageList.value[i].head_pose !=null){ 
+  //       headPoseMaxValuesLeft.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
+  //     }
+  //   }
+  //   if(imageList.value[i].id == props.selectIds[1]){
+  //     calibrationData.value = imageList.value[i] 
+  //     if(imageList.value[i].head_pose !=null){ 
+  //       headPoseMaxValuesRight.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
+  //     }
+  //   }
+  // }
+  // setTimeout(() => {
+  //   generatePDF()
+  // }, 500);
+})
+onUnmounted(() => {
+  
+})
+const generatePDF = async () => {
+  try {
+    const root = document.getElementById('popup-report-root')
+    if (!root) {
+      ElMessage.error('报告容器未找到')
+      return
+    }
+
+    if (!window.electronAPI) {
+      console.error('electronAPI 未定义')
+      return
+    }
+
+    const pdfBuffer = await window.electronAPI.generateReportPdf({
+      selector: '#popup-report-root',
+      pageSize: 'A4',
+      landscape: true, // 横向
+      printBackground: true
+    })
+    
+    const blob = new Blob([pdfBuffer], { type: 'application/pdf' })
+    const form = new FormData()
+    // 使用检测ID作为文件名
+    const filename = `${props.detectionInfo.id || 'report'}.pdf`
+    form.append('file', blob, filename)
+    
+    // 如果有detectionInfo.id，则上传到后端
+    if (props.detectionInfo.id) {
+      const res = await fetch(`${BACKEND_URL}/api/reports/${props.detectionInfo.id}/upload`, {
+        method: 'POST',
+        body: form
+      })
+      
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}: ${res.statusText}`)
+      }
+      
+      const json = await res.json()
+      if (json.success) {
+        ElMessage.success('报告生成并上传成功')
+        emit('closePopUpReport', true)
+      } else {
+        throw new Error(json.error || '上传失败')
+      }
+    } else {
+      // 仅供预览或下载
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+      emit('closePopUpReport', true)
+    }
+  } catch (e) {
+    console.error('报告生成异常:', e)
+    ElMessage.error(`报告生成失败：${e.message}`)
+  }
+};
+function getFormattedTime() {
+  const now = new Date();
+  const year = now.getFullYear(); 
+  const month = String(now.getMonth()  + 1).padStart(2, '0'); // 月份从0开始需+1 
+  const day = String(now.getDate()).padStart(2,  '0');
+  const hours = String(now.getHours()).padStart(2,  '0'); // 24小时制 
+  const minutes = String(now.getMinutes()).padStart(2,  '0');
+  const seconds = String(now.getSeconds()).padStart(2,  '0');
+  
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+  
+</script>
+
+<style scoped>
+.ReportComparison-container{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #fff;
+  z-index: 50;
+  overflow: auto;
+}
+.ReportComparison-container-body{
+  margin:20px auto 0;
+  width: 1600px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 20px 0 30px;
+
+
+}
+.ReportComparison-container-display{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 25px;
+  border-bottom: 1px solid #333;
+}
+.ReportComparison-container-bodytitle{
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 36px;
+  color: #282828;
+  text-align: center;
+  padding-bottom: 20px;
+}
+.ReportComparison-container-userinfotext{
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  color: #282828;
+  font-size: 18px;
+}
+.ReportComparison-container-userinfodisplay{
+  display: flex;
+  flex-wrap: wrap;
+  align-content:flex-start ;
+  padding: 20px 0;
+  padding-top: 30px;
+  border-bottom: 1px solid #333;
+}
+.ReportComparison-container-userinfotext2{
+  width: 240px;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  color: #282828;
+  font-size: 18px;
+  padding-bottom: 10px;
+}
+.width-210{ width: 210px; }
+.width-195{ width: 195px; }
+.width-215{ width: 215px; }
+.width-235{ width: 235px; }
+.width-95{ width: 95px; }
+.width-405{ width: 405px; }
+.width-430{ width: 430px; }
+.width-300{ width: 300px; }
+
+.ReportComparison-container-testdatatitle{
+  font-weight: 700;
+  font-style: normal;
+  color: #14AAFF;
+  font-size: 18px;
+  text-align: left;
+  padding: 20px 0;
+}
+.ReportComparison-containerdisplay{
+  display: flex;
+}
+.ReportComparison-container-leftbox{
+  width: 50%;
+  border-right:1px solid rgb(208, 208, 208) ;
+  box-sizing: border-box;
+}
+.ReportComparison-container-rightbox{
+  width: 50%;
+  box-sizing: border-box;
+  padding-left: 80px;
+}
+.displayflex{
+  display: flex;
+  align-items: center;
+}
+.ReportComparison-container .displayflextext1{
+  font-weight: 700;
+  font-style: normal;
+  color: #14AAFF;
+  font-size: 18px;
+  text-align: left;
+}
+.displayflexselect{
+  position: relative;
+  width: 200px;
+  height: 40px;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(220, 223, 230, 1);
+  border-radius: 4px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  margin-left: 20px;
+  cursor: pointer;
+}
+.displayflexselect-icon{
+  position: absolute;
+  top: 15px;
+  right: 10px;
+}
+
+.ReportComparison-content-title{
+  font-weight: 700;
+  font-style: normal;
+  color: #282828;
+  font-size: 18px;
+  padding-top:30px;
+  padding-bottom: 15px;
+}
+.rollyawpitchtext{
+  font-style: normal;
+  color: #282828;
+  font-size: 24px;
+  width: 170px;
+}
+.rollyawpitchtextcolor{
+  color:#14AAFF;
+}
+.ReportComparison-title2{
+  font-weight: 700;
+  font-style: normal;
+  font-size: 18px;
+  color: #282828;
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+}
+.ReportComparison-border1{
+  padding: 5px;
+  width: 100%;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+}
+.ReportComparison-border2{
+  width: 100%;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+  padding: 5px;
+}
+.ReportComparison-border3{
+  width: 100%;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+  padding: 5px;
+}
+</style>
+
+<style>
+@media print {
+  @page { 
+    size: A4 landscape; 
+    margin: 10mm; 
+  }
+  
+  html, body {
+    height: auto !important;
+    overflow: visible !important;
+    background: white !important;
+  }
+
+  /* 隐藏所有元素，但保留占位，避免 display:none 导致的父级隐藏问题 */
+   body * {
+     visibility: hidden;
+   }
+   
+   /* 显式显示目标容器及其子元素 */
+   #popup-report-root,
+   #popup-report-root *,
+   #electron-print-container,
+   #electron-print-container * {
+     visibility: visible !important;
+   }
+   
+   /* 确保根节点可见并重置布局 */
+   #popup-report-root {
+     position: static !important;
+     width: 100% !important;
+     height: auto !important;
+     margin: 0 !important;
+     padding: 0 !important;
+     background-color: white !important;
+     z-index: 9999 !important;
+     overflow: visible !important;
+   }
+  
+  /* 容器样式重置 */
+  .ReportComparison-container-body {
+    width: 100% !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    padding: 10px !important;
+    border: none !important;
+    height: auto !important;
+    overflow: visible !important;
+    display: block !important;
+    min-height: 100vh !important;
+  }
+
+  /* 移除内层div的固定高度 */
+  .ReportComparison-container-body > div {
+    height: auto !important;
+    padding: 0 !important;
+  }
+
+  /* 针对克隆节点的特定样式 */
+  #electron-print-container .ReportComparison-container {
+    position: static !important;
+    width: 100% !important;
+    height: auto !important;
+    overflow: visible !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: white !important;
+  }
+
+  /* 左右分栏调整 */
+  .ReportComparison-container-leftbox,
+  .ReportComparison-container-rightbox {
+    width: 49% !important;
+    display: inline-block !important;
+    vertical-align: top !important;
+    box-sizing: border-box !important;
+    margin: 0 !important;
+    padding: 0 10px !important;
+    border: none !important;
+    /* 允许分栏内部内容自然分页 */
+    break-inside: auto !important;
+  }
+  
+  .ReportComparison-container-leftbox {
+    border-right: 1px solid #ccc !important;
+  }
+
+  /* 图片容器自适应 */
+  .ReportComparison-container-body div[style*="width: 600px"] {
+    width: 100% !important;
+    height: auto !important;
+    margin-bottom: 10px !important;
+    break-inside: avoid !important;
+  }
+  
+  /* 图片自适应 */
+  img {
+    max-width: 100% !important;
+    height: auto !important;
+    object-fit: contain !important;
+    max-height: 300px !important; /* 限制最大高度，防止一页占满 */
+  }
+
+  /* 头部信息紧凑化 */
+  .ReportComparison-container-bodytitle {
+    font-size: 24px !important;
+    padding-bottom: 10px !important;
+  }
+  
+  .ReportComparison-container-display,
+  .ReportComparison-container-userinfodisplay {
+    padding: 10px 0 !important;
+  }
+
+  .ReportComparison-container-userinfotext2 {
+    font-size: 14px !important;
+    width: auto !important;
+    margin-right: 20px !important;
+    padding-bottom: 5px !important;
+  }
+
+  /* 标题字号调整 */
+  .ReportComparison-content-title,
+  .ReportComparison-container-testdatatitle,
+  .ReportComparison-title2 {
+    font-size: 16px !important;
+    padding-top: 10px !important;
+    padding-bottom: 5px !important;
+  }
+  
+  /* 分页控制 */
+  .ReportComparison-content-title {
+    break-after: avoid;
+  }
+  
+  img {
+    break-inside: avoid;
+  }
+  
+  /* 隐藏不需要的UI元素 */
+  .displayflexselect-icon,
+  ::-webkit-scrollbar {
+    display: none !important;
+  }
+}
+
+.PopUpOnlyReport-footer{
+  margin-top: 40px;
+  padding-top: 40px;
+  border-top: 1px solid #333;
+  display: flex;
+  font-weight: 700;
+  font-style: normal;
+  color: rgb(40, 40, 40);
+  font-size: 18px;
+}
+</style>