update

src/components/OrderList.vue

@@ -99,6 +99,16 @@
             </template>
           </el-table-column>
           
+          <!-- 取消原因 -->
+          <el-table-column label="取消原因" min-width="120">
+            <template #default="scope">
+              <span v-if="scope.row.status === 'CANCELLED' && scope.row.cancel_reason">
+                {{ scope.row.cancel_reason }}
+              </span>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          
           <!-- 小区名称 -->
           <el-table-column label="小区" width="140">
             <template #default="scope">
@@ -132,6 +142,9 @@
                   :src="scope.row.complete_images[0]"
                   :preview-src-list="scope.row.complete_images"
                   fit="cover"
+                  preview-teleported
+                  :initial-index="0"
+                  :z-index="10000"
                 >
                   <template #error>
                     <div class="image-error">
@@ -564,4 +577,82 @@ export default {
     text-align: center;
   }
 }
+</style>
+
+<!-- 全局样式，确保图片预览显示在最顶层 -->
+<style>
+.el-image-viewer__wrapper {
+  z-index: 10000 !important;
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  overflow: auto !important;
+  margin: 0 !important;
+  height: 100vh !important;
+  width: 100vw !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+.el-image-viewer__mask {
+  z-index: 9999 !important;
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  background-color: rgba(0, 0, 0, 0.9) !important; /* 调整背景色透明度 */
+  pointer-events: auto !important;
+  backdrop-filter: blur(2px) !important; /* 添加背景模糊效果 */
+}
+
+.el-image-viewer__btn {
+  z-index: 10001 !important;
+}
+
+.el-image-viewer__img {
+  max-height: 90vh !important; /* 限制图片最大高度 */
+  max-width: 90vw !important; /* 限制图片最大宽度 */
+  object-fit: contain !important;
+}
+
+.el-image-viewer__canvas {
+  z-index: 10000 !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.el-image-viewer__actions {
+  z-index: 10001 !important;
+  position: fixed !important;
+  bottom: 30px !important;
+}
+
+.el-image-viewer__close {
+  z-index: 10002 !important;
+  position: fixed !important;
+  top: 40px !important;
+  right: 40px !important;
+}
+
+.el-image-viewer__prev, .el-image-viewer__next {
+  z-index: 10001 !important;
+}
+
+body.el-popup-parent--hidden {
+  overflow: hidden !important;
+  padding-right: 0px !important;
+  height: 100% !important;
+  width: 100% !important;
+  position: fixed !important;
+}
 </style>