发票预览1.0

src/views/console/OrderViewInvoiceForm.vue

 <template>
 <template>
   <!-- 图片查看弹窗 -->
   <!-- 图片查看弹窗 -->
   <el-dialog
   <el-dialog
-    v-model="dialogVisible"
-    title="查看发票图片"
-    :width="`600px`"
-    :close-on-click-modal="false">
+      v-model="dialogVisible"
+      title="查看发票图片"
+      :width="`600px`"
+      :close-on-click-modal="false">
     <div class="flex justify-center p-4">
     <div class="flex justify-center p-4">
       <img
       <img
           :src="formData.invoiceUrl"
           :src="formData.invoiceUrl"
           alt="发票图片"
           alt="发票图片"
-          class="max-w-[500px] max-h-[400px] object-contain border rounded"
+          style="
+      display: block; /* 避免图片底部留白 */
+      max-width: 100% !important; /* 最大宽度不超过父容器 */
+      width: auto !important; /* 宽度自动适应 */
+      max-height: 500px !important; /* 最大高度固定500px */
+      height: auto !important; /* 高度自动适应，保持比例 */
+      object-fit: contain; /* 完整显示图片，不裁剪 */
+      margin: 0 auto; /* 水平居中 */
+    "
           @error="handleImageError"
           @error="handleImageError"
       />
       />
     </div>
     </div>