益寿缘医生端-增加sop任务逻辑+优化处方实时渲染

src/api/his/doctorTask.js

@@ -0,0 +1,61 @@
+import request from '@/utils/request'
+
+// 查询医生处理sop任务列表
+export function listDoctorTask(query) {
+  return request({
+    url: '/his/doctorTask/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询医生处理sop任务详细
+export function getDoctorTask(id) {
+  return request({
+    url: '/his/doctorTask/' + id,
+    method: 'get'
+  })
+}
+
+// 新增医生处理sop任务
+export function addDoctorTask(data) {
+  return request({
+    url: '/his/doctorTask',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改医生处理sop任务
+export function updateDoctorTask(data) {
+  return request({
+    url: '/his/doctorTask',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除医生处理sop任务
+export function delDoctorTask(id) {
+  return request({
+    url: '/his/doctorTask/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出医生处理sop任务
+export function exportDoctorTask(query) {
+  return request({
+    url: '/his/doctorTask/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询解密后的用户电话
+export function getUserPhone(id) {
+  return request({
+    url: '/his/doctorTask/getUserPhone/' + id,
+    method: 'get'
+  })
+}

src/router/index.js

@@ -144,6 +144,12 @@ export const constantRoutes = [
         name: '拒方列表',
         meta: { title: '拒方列表', icon: 'job', noCache: true, affix: false }
       },
+      {
+        path: 'doctorTask',
+        component: (resolve) => require(['@/views/his/doctorTask/index'], resolve),
+        name: 'sop列表',
+        meta: { title: 'sop列表', icon: 'job', noCache: true, affix: false }
+      },
     ]
   },
 

src/views/his/doctorTask/index.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="订单号" prop="orderCode">
+        <el-input
+          v-model="queryParams.orderCode"
+          placeholder="请输入订单号"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="销售" prop="companyUserName">
+        <el-input
+          v-model="queryParams.companyUserName"
+          placeholder="请输入销售姓名"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="客户" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入客户姓名"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="处理状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择处理状态" clearable size="small">
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 状态 Tab 快速筛选 -->
+    <div class="tab-status-filter mb10">
+      <el-radio-group v-model="queryParams.status" @change="handleStatusChange" size="small">
+        <el-radio-button label="">全部</el-radio-button>
+        <el-radio-button label="0">待处理</el-radio-button>
+        <el-radio-button label="1">已处理</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table border v-loading="loading" :data="doctorTaskList">
+      <el-table-column label="订单号" align="center" prop="orderCode"/>
+      <el-table-column label="销售" align="center" prop="companyUserName"/>
+      <el-table-column label="客户" align="center" prop="name"/>
+      <el-table-column label="客户头像" align="center" width="100px">
+        <template slot-scope="scope">
+          <div v-if="scope.row.avatar">
+            <el-popover placement="right" trigger="hover">
+              <img slot="reference" :src="scope.row.avatar" width="60" style="object-fit: cover; border-radius: 4px;" />
+              <img :src="scope.row.avatar" style="max-width: 200px; object-fit: cover;" />
+            </el-popover>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="处理状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="statusOptions" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-if="scope.row.status === 0"
+          >处理</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 详情对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form :model="form" label-width="100px" size="small">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="销售：">
+              <span class="detail-value">{{ form.companyUserName || '—' }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="客户：">
+              <span class="detail-value">{{ form.name || '—' }}</span>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="套餐包：">
+              <span class="detail-value">{{ form.packageId || '—' }}</span>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="订单号：">
+              <span class="detail-value">{{ form.orderCode || '—' }}</span>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="客户电话：">
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <span class="detail-value">
+                  {{ decryptedPhone || (form.phone ? '******' : '—') }}
+                </span>
+                <el-button
+                  v-if="form.id"
+                  type="text"
+                  icon="el-icon-search"
+                  size="mini"
+                  @click="fetchDecryptedPhone(form.id)"
+                  :loading="phoneLoading"
+                  title="点击查看真实号码"
+                  style="padding: 0; margin-left: 0;"
+                ></el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="处理状态：">
+              <dict-tag :options="statusOptions" :value="form.status"/>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item label="备注：">
+              <span class="detail-value">{{ form.remark || '—' }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listDoctorTask,
+  getDoctorTask,
+  updateDoctorTask,
+  getUserPhone
+} from "@/api/his/doctorTask";
+
+export default {
+  name: "DoctorTask",
+  data() {
+    return {
+      loading: true,
+      showSearch: true,
+      total: 0,
+      doctorTaskList: [],
+      title: "",
+      open: false,
+      statusOptions: [],
+      decryptedPhone: '',
+      phoneLoading: false,
+
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderCode: null,
+        companyUserName: null,
+        name: null,
+        status: null,
+        packageId: null,
+        standbyId: null
+      },
+      form: {}
+    };
+  },
+  created() {
+    this.getList();
+    this.getDicts("sop_task_status").then(response => {
+      this.statusOptions = response.data;
+    });
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      listDoctorTask(this.queryParams).then(response => {
+
+        this.doctorTaskList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    reset() {
+      this.form = {};
+      this.decryptedPhone = '';
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.$refs["queryForm"].resetFields();
+      this.handleQuery();
+    },
+    handleView(row) {
+      getDoctorTask(row.id).then(response => {
+        this.form = response.data || {};
+        this.decryptedPhone = '';
+        this.open = true;
+        this.title = "任务详情";
+      });
+    },
+    handleUpdate(row) {
+      const id = row.id;
+      if (!id) {
+        this.$message.warning("无效的任务ID");
+        return;
+      }
+
+      getDoctorTask(id).then(response => {
+        const taskData = response.data;
+        const customerName = taskData.name || '未知客户';
+        this.$confirm(`确认将客户 “${customerName}” 的任务标记为已处理？`, "确认处理", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          return updateDoctorTask({ id: taskData.id, status: 1 });
+        }).then(() => {
+          this.msgSuccess("处理成功");
+          this.getList();
+        }).catch(() => {});
+      }).catch(() => {
+        this.$message.error("获取任务信息失败");
+      });
+    },
+    handleStatusChange() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    async fetchDecryptedPhone(id) {
+      if (!id) return;
+      this.phoneLoading = true;
+      try {
+        const response = await getUserPhone(id);
+        this.decryptedPhone = response.userPhone || '—';
+      } catch (error) {
+        this.$message.error('获取电话失败');
+        this.decryptedPhone = '获取失败';
+      } finally {
+        this.phoneLoading = false;
+      }
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+.mb10 {
+  margin-bottom: 10px;
+}
+
+.tab-status-filter {
+  margin-bottom: 10px;
+}
+
+.detail-value {
+  font-weight: 500;
+  color: #606266;
+}
+</style>

src/views/his/prescribe/index.vue

@@ -134,7 +134,7 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
 
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body @close="handleDialogClose">
+    <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body @close="handleDialogClose">
       <el-tabs v-model="activeTab" type="border-card">
         <!-- Tab 1: 基本信息 -->
         <el-tab-pane label="基本信息" name="basic">
@@ -201,63 +201,113 @@
         </el-tab-pane>
         <!-- Tab 2: 处方药品信息 -->
         <el-tab-pane label="处方药品信息" name="drug">
-          <div class="drug-container">
-            <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="drug-container">
-              <!-- 诊断 -->
-              <el-form-item label="诊断" prop="diagnose">
-                <el-input v-model="form.diagnose" placeholder="请输入诊断">
-                  <i slot="suffix" class="el-icon-search el-input__icon" style="cursor: pointer;"
-                     @click="handleCommonlyDiagnoseWorlds"></i>
-                </el-input>
-              </el-form-item>
-
-              <!-- 医嘱 -->
-              <el-form-item label="医嘱" prop="remark">
-                <div style="display: flex; align-items: center;">
-                  <el-input v-model="form.remark" type="textarea" placeholder="请输入医嘱" style="flex: 1;"></el-input>
-                </div>
-              </el-form-item>
-            </el-form>
-            <!-- 药品操作按钮 -->
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button v-if="currentConfirm === 0" type="primary" icon="el-icon-plus" size="mini"
-                           @click="handleAddDrug" :disabled="!form.prescribeId">新增药品
-                </el-button>
-              </el-col>
-              <el-col :span="2.5">
-                <el-button v-if="currentConfirm === 0" type="success" icon="el-icon-search" size="mini"
-                           @click="openCommonPrescribeDialog" :disabled="!form.prescribeId">常用药品
-                </el-button>
-              </el-col>
-
-            </el-row>
-            <!-- 药品列表表格 -->
-            <el-table v-loading="drugLoading" :data="drugList" border max-height="400">
-              <el-table-column label="药品名称" align="center" prop="drugName"/>
-              <el-table-column label="规格" align="center" prop="drugSpec" width="100"/>
-              <el-table-column label="使用方法" align="center" prop="usageMethod" width="100"/>
-              <el-table-column label="频次" align="center" prop="usageFrequencyUnit" width="80"/>
-              <el-table-column label="每次用药数量" align="center" width="120">
-                <template slot-scope="scope">
-                  {{ scope.row.usagePerUseCount }}{{ scope.row.usagePerUseUnit }}
-                </template>
-              </el-table-column>
-              <el-table-column v-if="currentConfirm === 0" label="操作" align="center"
-                               class-name="small-padding fixed-width" width="150">
-                <template slot-scope="scope">
-                  <el-button size="mini" type="text" icon="el-icon-edit"
-                             @click="handleUpdateDrug(scope.row)">编辑
+          <!-- 使用 flex 分为左右两栏 -->
+          <div class="drug-split-layout">
+            <!-- 左侧：原有内容 -->
+            <div class="drug-left-panel">
+              <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                <!-- 诊断 -->
+                <el-form-item label="诊断" prop="diagnose">
+                  <el-input v-model="form.diagnose" placeholder="请输入诊断">
+                    <i slot="suffix" class="el-icon-search el-input__icon" style="cursor: pointer;"
+                       @click="handleCommonlyDiagnoseWorlds"></i>
+                  </el-input>
+                </el-form-item>
+
+                <!-- 医嘱 -->
+                <el-form-item label="医嘱" prop="remark">
+                  <el-input v-model="form.remark" type="textarea" placeholder="请输入医嘱"/>
+                </el-form-item>
+              </el-form>
+
+              <!-- 药品操作按钮 -->
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                  <el-button v-if="currentConfirm === 0" type="primary" icon="el-icon-plus" size="mini"
+                             @click="handleAddDrug" :disabled="!form.prescribeId">新增药品
                   </el-button>
-                  <el-button size="mini" type="text" icon="el-icon-delete"
-                             @click="handleDeleteDrug(scope.row)">删除
+                </el-col>
+                <el-col :span="2.5">
+                  <el-button v-if="currentConfirm === 0" type="success" icon="el-icon-search" size="mini"
+                             @click="openCommonPrescribeDialog" :disabled="!form.prescribeId">常用药品
                   </el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-            <!-- 药品分页 -->
-            <pagination v-show="drugTotal > 0" :total="drugTotal" :page.sync="drugQueryParams.pageNum"
-                        :limit.sync="drugQueryParams.pageSize" @pagination="getDrugList"/>
+                </el-col>
+              </el-row>
+
+              <!-- 药品列表表格 -->
+              <el-table v-loading="drugLoading" :data="drugList" border max-height="400">
+                <el-table-column label="药品名称" align="center" prop="drugName"/>
+                <el-table-column label="规格" align="center" prop="drugSpec" width="100"/>
+                <el-table-column label="使用方法" align="center" prop="usageMethod" width="100"/>
+                <el-table-column label="频次" align="center" prop="usageFrequencyUnit" width="80"/>
+                <el-table-column label="每次用药数量" align="center" width="120">
+                  <template slot-scope="scope">
+                    {{ scope.row.usagePerUseCount }}{{ scope.row.usagePerUseUnit }}
+                  </template>
+                </el-table-column>
+                <el-table-column v-if="currentConfirm === 0" label="操作" align="center" width="150">
+                  <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateDrug(scope.row)">编辑
+                    </el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteDrug(scope.row)">删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <!-- 药品分页 -->
+              <pagination v-show="drugTotal > 0" :total="drugTotal" :page.sync="drugQueryParams.pageNum"
+                          :limit.sync="drugQueryParams.pageSize" @pagination="getDrugList"/>
+            </div>
+
+            <!-- 右侧：处方图片预览 -->
+            <div class="drug-right-panel">
+              <div v-if="form.prescribeImgUrl" class="real-prescription-wrapper">
+                <img
+                  :src="form.prescribeImgUrl"
+                  class="prescription-image-small"
+                  alt="处方图片"
+                />
+              </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>
+                    <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>
+
+                  <!-- 医嘱 -->
+                  <div class="field remark">{{ form.remark }}</div>
+                </div>
+              </div>
+            </div>
           </div>
         </el-tab-pane>
         <!-- Tab 3: 用户信息采集 -->
@@ -381,7 +431,7 @@
     </el-dialog>
     <!-- 药品新增/编辑对话框 -->
     <el-dialog :title="drugTitle" :visible.sync="drugOpen" width="700px" append-to-body>
-      <el-form ref="drugForm" :model="drugForm" :rules="drugRules" label-width="120px">
+      <el-form ref="drugForm" :model="drugForm"  label-width="120px">
         <el-form-item label="药品名称" prop="drugName">
           <el-input v-model="drugForm.drugName" placeholder="请输入药品名称"/>
         </el-form-item>
@@ -650,6 +700,12 @@ export default {
       if (this.suggestSource === 'diagnose') return '选择常用诊断内容';
       if (this.suggestSource === 'remark') return '选择常用备注内容';
       return '选择常用内容';
+    },
+    wrappedDiagnose() {
+      return this.wrapTextByCharLength(this.form.diagnose, 50);
+    },
+    wrappedRemark() {
+      return this.wrapTextByCharLength(this.form.remark, 50);
     }
   },
   created() {
@@ -758,7 +814,7 @@ export default {
           usageMethod: row.usageMethod,
           usageFrequencyUnit: row.usageFrequencyUnit,
           usagePerUseCount: row.usagePerUseCount,
-          usagePerUseUnit: '', // 或根据业务补充
+          usagePerUseUnit: '',
           usageDays: '',
           drugPrice: '',
           drugNum: '',
@@ -1049,7 +1105,6 @@ export default {
         'patientName': '患者姓名',
         'patientAge': '患者年龄',
         'patientGender': '患者性别',
-        'weight': '患者体重',
         'isHistoryAllergic': '是否有过敏史',
         'diagnose': '诊断',
         'remark': '医嘱'
@@ -1306,6 +1361,22 @@ export default {
         instructions: undefined
       };
       this.resetForm("drugForm");
+    },
+    wrapTextByCharLength(text, maxLength = 50) {
+      if (!text) return '';
+      const lines = [];
+      let currentLine = '';
+      for (let i = 0; i < text.length; i++) {
+        const char = text[i];
+        if (currentLine.length < maxLength) {
+          currentLine += char;
+        } else {
+          lines.push(currentLine);
+          currentLine = char;
+        }
+      }
+      if (currentLine) lines.push(currentLine);
+      return lines.join('\n');
     }
   }
 };
@@ -1364,5 +1435,147 @@ export default {
   margin-left: 6px;
 }
 
-/* -----------这里是Tab3字体样式结束-----------------*/
+/* -----------Tab3字体样式结束-----------------*/
+
+
+/*----------------实时渲染处方背景图片----------------------*/
+/* 左右分栏布局 */
+.drug-split-layout {
+  display: flex;
+  gap: 20px;
+  height: calc(100vh - 220px); /* 根据实际高度调整，避免溢出 */
+}
+.drug-left-panel, .drug-right-panel {
+  flex: 1; /* 让左右两个面板都均匀分配空间 */
+  overflow-y: auto; /* 允许内容超出时显示滚动条 */
+}
+.drug-left-panel {
+  padding-right: 10px;
+}
+
+.drug-right-panel {
+  /* 示例：给右侧板添加左边距 */
+  padding-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+/* 预览容器 */
+.prescription-preview-container {
+  width: 800px;
+  height: 1100px;
+  position: relative;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+/* 背景图容器 */
+.prescription-bg {
+  width: 100%;
+  height: 100%;
+  background-image: url('/ysy_prescribe.jpg'); /* 注意：public 目录下直接根路径访问 */
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+}
+
+/* 文字字段定位 */
+.field {
+  position: absolute;
+  font-family: "SimSun", "宋体", serif;
+  font-size: 14px;
+  color: #000;
+  white-space: pre-line;
+  line-height: 1.6;
+}
+
+/* ========== 第一行：处方编号 ========== */
+.prescribe-code-row {
+  position: absolute;
+  top: 3%;
+  left: 0;
+  width: 100%;
+  height: 10%;
+  display: flex;
+}
+
+.prescribe-code-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 17%;
+}
+
+/* ========== 第二行：患者信息 ========== */
+.patient-info-row {
+  position: absolute;
+  top: 10%;
+  left: 0;
+  width: 100%;
+  height: 4%;
+  display: flex;
+}
+
+.prescribe-patientName {
+  flex: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.prescribe-patientGender {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.prescribe-patientAge {
+  flex: 3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 5%;
+}
+
+.diagnose {
+  top: 210px;
+  left: 118px;
+  width: 560px;
+  height: 60px;
+}
+
+.remark {
+  top: 575px;
+  left: 70px;
+  width: 560px;
+  height: 100px;
+}
+
+.drugs {
+  top: 290px;
+  left: 60px;
+  width: 560px;
+  height: 300px;
+}
+
+.drug-item {
+  margin-bottom: 8px;
+}
+
+
+/* 真实处方图片容器 */
+.real-prescription-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 10px;
+  background-color: #f9f9f9;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
 </style>