申诉、驳回原因查看窗口适配

src/components/appealModal/index.vue

@@ -1,6 +1,5 @@
 <template>
-    <el-dialog :visible.sync="dialogVisible" custom-class="my-dialog" :modal="false" :title="getDialogTitle()"
-        width="40%">
+    <el-dialog :visible.sync="dialogVisible" class="custom-dialog" :modal="false" :title="getDialogTitle()" :width="dialogWidth">
         <div class="medical-record" style="margin-top: 30px">
             <el-descriptions>
                 <el-descriptions-item label="病案号">{{ baseInfo.AAA28 }}</el-descriptions-item>
@@ -63,6 +62,7 @@ export default {
       },
       qualityType: '',
       baseInfo: {},
+      dialogWidth: '50%' // 默认宽度
     };
   },
   computed: {},
@@ -72,9 +72,18 @@ export default {
   mounted() {
     const { ZYH, id } = this.$route.query
     this.MEDRECID = this.$route.path === '/whitelist-caseControl' || this.$route.path === '/whitelist-qualityResults'? id : ZYH;
+    this.setDialogWidth();
+    window.addEventListener('resize', this.setDialogWidth);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setDialogWidth);
   },
 
   methods: {
+    setDialogWidth() {
+      const width = window.innerWidth < 768 ? '80%' : '50%'; // 根据屏幕宽度调整宽度
+      this.dialogWidth = width;
+    },
     getDialogTitle() {
       if(this.dialogType === 'appeal') {
         return '申诉'
@@ -223,10 +232,18 @@ export default {
 ::v-deep .el-dialog__title {
   color: #fff;
 }
-
+::v-deep .el-descriptions-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
 ::v-deep .el-descriptions-item__label {
   font-weight: bold;
   font-size: 15px;
+  white-space: nowrap;
+}
+::v-deep .el-descriptions-item__content {
+  white-space: nowrap;
 }
 
 </style>