益寿缘医生端-优化医生开方时处方图片文字渲染布局不一致的问题

src/router/index.js

@@ -147,8 +147,8 @@ export const constantRoutes = [
       {
         path: 'doctorTask',
         component: (resolve) => require(['@/views/his/doctorTask/index'], resolve),
-        name: '今日sop任务列表',
-        meta: { title: 'sop列表', icon: 'job', noCache: true, affix: false }
+        name: '今日sop任务',
+        meta: { title: '今日sop任务', icon: 'job', noCache: true, affix: false }
       },
     ]
   },

src/views/his/prescribe/index.vue

@@ -270,44 +270,40 @@
               </div>
 
               <!-- 否则显示文字模拟处方 -->
-              <div v-else class="prescription-preview-container">
-                <div class="prescription-bg">
-                  <!-- 处方编号行 -->
-                  <div class="prescribe-code-row">
-                    <div class="prescribe-code-content">{{ form.prescribeCode }}</div>
-                  </div>
-
-                  <!-- 患者信息行 -->
-                  <div class="patient-info-row">
-                    <div class="prescribe-patientName">{{ form.patientName }}</div>
-                    <div class="prescribe-patientGender">
-                      {{ form.patientGender === '1' ? '男' : form.patientGender === '2' ? '女' : '—' }}
+              <div v-else class="prescription-preview-container-wrapper">
+                <div class="prescription-preview-container">
+                  <!-- 使用 img 标签加载背景图片 -->
+                  <img src="/ysy_prescribe.jpg" class="prescription-bg-image" alt="处方背景" />
+                  <!-- 透明覆盖层，用于放置文字 -->
+                  <div class="prescription-overlay">
+                    <!-- 处方编号行 -->
+                    <div class="prescribe-code-row">
+                      <div class="prescribe-code-content">{{ form.prescribeCode }}</div>
                     </div>
-                    <div class="prescribe-patientAge">{{ form.patientAge }}</div>
-                  </div>
-
-                  <!-- 诊断 -->
-                  <div class="field diagnose">{{ form.diagnose }}</div>
-
-                  <!-- 药品列表 -->
-                  <div class="field drugs">
-                    <template v-if="drugList.length > 0">
-                      <div v-for="(drug, index) in drugList" :key="drug.id || index" class="drug-item">
-                        {{ drug.drugName }}
-                        {{ drug.drugSpec ? `(${drug.drugSpec})\n` : '' }} <!-- 在drugSpec后换行 -->
-                        <span class="usage-amount">用法用量：{{ drug.usageMethod }}
-            {{ drug.usageFrequencyUnit }}
-            {{ drug.usagePerUseCount }}{{ drug.usagePerUseUnit }}</span> <!-- 独占一行 -->
-                      </div>
-                    </template>
-                    <span v-else>(暂无药品)</span>
+                    <!-- 患者信息行 -->
+                    <div class="patient-info-row">
+                      <div class="prescribe-patientName">{{ form.patientName }}</div>
+                      <div class="prescribe-patientGender"> {{ form.patientGender === '1' ? '男' : form.patientGender === '2' ? '女' : '—' }} </div>
+                      <div class="prescribe-patientAge">{{ form.patientAge }}</div>
+                    </div>
+                    <!-- 诊断 -->
+                    <div class="field diagnose">{{ form.diagnose }}</div>
+                    <!-- 药品列表 -->
+                    <div class="field drugs">
+                      <template v-if="drugList.length > 0">
+                        <div v-for="(drug, index) in drugList" :key="drug.id || index" class="drug-item">
+                          {{ drug.drugName }} {{ drug.drugSpec ? `(${drug.drugSpec})\n` : '' }}
+                          <span class="usage-amount">用法用量：{{ drug.usageMethod }} {{ drug.usageFrequencyUnit }} {{ drug.usagePerUseCount }}{{ drug.usagePerUseUnit }}</span>
+                        </div>
+                      </template>
+                      <span v-else>(暂无药品)</span>
+                    </div>
+                    <!-- 医嘱 -->
+                    <div class="field remark">{{ form.remark }}</div>
                   </div>
-
-                  <!-- 医嘱 -->
-                  <div class="field remark">{{ form.remark }}</div>
                 </div>
               </div>
-            </div>
+          </div>
           </div>
         </el-tab-pane>
         <!-- Tab 3: 用户信息采集 -->
@@ -1383,39 +1379,11 @@ export default {
 </script>
 
 <style scoped>
-.drug-container {
-  padding: 10px;
-}
-
-.detail-container {
-  padding: 20px;
-}
-
-.detail-item {
-  margin-bottom: 10px;
-  display: flex;
-}
-
 .detail-item .label {
   min-width: 100px;
   font-weight: bold;
 }
 
-.id-card-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.id-card-image {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.id-card-detail {
-  margin-top: 20px;
-}
-
 /*------------这里开始是Tab3字体样式------------------*/
 .info-item {
   display: flex;
@@ -1461,43 +1429,64 @@ export default {
   align-items: flex-start;
 }
 
-/* 预览容器 */
+/* --- 处方预览相关样式 (新的) --- */
+.prescription-preview-container-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start; /* 顶部对齐 */
+  padding: 10px; /* 可选：添加内边距 */
+  background-color: #f9f9f9; /* 与 .real-prescription-wrapper 背景色保持一致 */
+  overflow: auto; /* 允许滚动 */
+}
+
 .prescription-preview-container {
-  width: 800px;
-  height: 1100px;
   position: relative;
-  border: 1px solid #ddd;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  width: 100%;
+  max-width: 800px; /* 最大宽度限制 */
+  aspect-ratio: 8 / 10.5; /* 维持原始处方图的宽高比 (例如 800x1050 -> 8:10.5) */
+  min-height: 1000px; /* 一个合理的最小高度 */
+  /* 不再设置 background-image */
 }
 
-/* 背景图容器 */
-.prescription-bg {
+.prescription-bg-image {
   width: 100%;
   height: 100%;
-  background-image: url('/ysy_prescribe.jpg'); /* 注意：public 目录下直接根路径访问 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  position: relative;
+  object-fit: contain; /* 保持图片比例，完整显示 */
+  display: block; /* 去除图片下方可能的空隙 */
+}
+
+.prescription-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* 使覆盖层不影响下方元素的点击 */
 }
 
-/* 文字字段定位 */
 .field {
   position: absolute;
   font-family: "SimSun", "宋体", serif;
-  font-size: 14px;
+  font-size: clamp(10px, 1.5vw, 14px); /* 响应式字体大小 */
   color: #000;
-  white-space: pre-line;
-  line-height: 1.6;
+  white-space: pre-line; /* 保留换行符 */
+  line-height: 1.4; /* 行高 */
+  pointer-events: auto;
+  box-sizing: border-box;
+  overflow-wrap: break-word; /* 防止长单词溢出 */
+  word-wrap: break-word; /* 同上，兼容性 */
 }
 
+
 /* ========== 第一行：处方编号 ========== */
 .prescribe-code-row {
   position: absolute;
-  top: 3%;
+  top: 5.6%; /* 相对于容器高度 */
   left: 0;
   width: 100%;
-  height: 10%;
+  height: 4%; /* 估算高度 */
   display: flex;
 }
 
@@ -1506,24 +1495,28 @@ export default {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding-left: 17%;
+  padding-left: 19%; /* 相对于容器宽度 */
+  font-size: clamp(10px, 1.5vw, 14px);
 }
 
 /* ========== 第二行：患者信息 ========== */
 .patient-info-row {
   position: absolute;
-  top: 10%;
+  top: 10%; /* 相对于容器高度 */
   left: 0;
   width: 100%;
-  height: 4%;
+  height: 4%; /* 估算高度 */
   display: flex;
 }
 
+
 .prescribe-patientName {
   flex: 2;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-left: 2%;
+  font-size: clamp(10px, 1.5vw, 14px);
 }
 
 .prescribe-patientGender {
@@ -1531,6 +1524,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: clamp(10px, 1.5vw, 14px);
 }
 
 .prescribe-patientAge {
@@ -1538,32 +1532,46 @@ export default {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding-left: 5%;
+  padding-left: 5%; /* 相对于容器宽度 */
+  font-size: clamp(10px, 1.5vw, 14px);
 }
 
-.diagnose {
-  top: 210px;
-  left: 118px;
-  width: 560px;
-  height: 60px;
-}
 
-.remark {
-  top: 575px;
-  left: 70px;
-  width: 560px;
-  height: 100px;
+/* 诊断字段 */
+.diagnose {
+  top: 19%;
+  left: 15%;
+  width: 70%;
+  height: 10%;
+  overflow: hidden; /* 防止内容溢出 */
 }
 
+/* 药品列表字段 */
 .drugs {
-  top: 290px;
-  left: 60px;
-  width: 560px;
-  height: 300px;
+  top: 27%;
+  left: 10%;
+  width: 80%;
+  height: 45%;
+  overflow-y: auto; /* 如果药品多，允许滚动 */
 }
 
 .drug-item {
-  margin-bottom: 8px;
+  margin-bottom: 1.5%; /* 相对于 .drugs 高度 */
+  font-size: clamp(9px, 1.2vw, 12px); /* 药品列表字体稍小 */
+}
+
+.usage-amount {
+  display: block; /* 独占一行 */
+  font-size: clamp(9px, 1.2vw, 12px); /* 药品列表字体稍小 */
+}
+
+/* 医嘱字段 */
+.remark {
+  top: 52%;
+  left: 12%;
+  width: 70%;
+  height: 10%;
+  overflow: hidden; /* 防止内容溢出 */
 }