diff --git a/web/src/assets/css/image-mj.css b/web/src/assets/css/image-mj.css
index f8ed684f..988ee2f8 100644
--- a/web/src/assets/css/image-mj.css
+++ b/web/src/assets/css/image-mj.css
@@ -171,6 +171,26 @@
   padding: 2px;
   background-color: #555;
 }
+.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner .progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0,0,0,0.5);
+}
+.page-mj .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span {
+  font-size: 20px;
+  color: #fff;
+}
 .page-mj .inner .task-list-box .running-job-list .job-item .el-image {
   width: 100%;
   height: 100%;
@@ -187,20 +207,20 @@
   font-size: 50px;
   margin-bottom: 10px;
 }
-.page-mj .inner .task-list-box .task-list-inner .job-item {
+.page-mj .inner .task-list-box .finish-job-list .job-item {
   margin-bottom: 20px;
 }
-.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line {
+.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line {
   margin: 6px 0;
 }
-.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul {
+.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul {
   display: flex;
   flex-flow: row;
 }
-.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li {
+.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li {
   margin-right: 10px;
 }
-.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li a {
+.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
   padding: 3px 0;
   width: 50px;
   text-align: center;
@@ -210,7 +230,7 @@
   background-color: #4e5058;
   color: #fff;
 }
-.page-mj .inner .task-list-box .task-list-inner .job-item .opt .opt-line ul li a:hover {
+.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
   background-color: #6d6f78;
 }
 .mj-list-item-prompt .el-icon {
diff --git a/web/src/assets/css/image-mj.styl b/web/src/assets/css/image-mj.styl
index 14469e49..ccaee6a6 100644
--- a/web/src/assets/css/image-mj.styl
+++ b/web/src/assets/css/image-mj.styl
@@ -220,6 +220,29 @@
           padding 2px
           background-color #555555
 
+          .job-item-inner {
+            position relative
+            height 100%
+            overflow hidden
+
+            .progress {
+              position absolute
+              width 100%
+              height 100%
+              top 0
+              left 0
+              display flex
+              justify-content center
+              align-items center
+              background-color: rgba(0, 0, 0, 0.5)
+
+              span {
+                font-size 20px
+                color #ffffff
+              }
+            }
+          }
+
           .el-image {
             width 100%
             height 100%
@@ -241,8 +264,8 @@
         }
       }
 
-      .task-list-inner {
 
+      .finish-job-list {
         .job-item {
           margin-bottom 20px
 
@@ -277,8 +300,8 @@
           }
 
         }
-      }
 
+      }
     }
   }
 
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 1c264e67..f8ae0891 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -225,25 +225,31 @@
                       trigger="hover"
                   >
                     <template #reference>
-                      <el-image :src="scope.item.img_url"
-                                :zoom-rate="1.2"
-                                :preview-src-list="[scope.item.img_url]"
-                                fit="cover"
-                                :initial-index="0" loading="lazy" v-if="scope.item.progress > 0">
-                        <template #placeholder>
-                          <div class="image-slot">
-                            正在加载图片
-                          </div>
-                        </template>
+                      <div v-if="scope.item.progress > 0" class="job-item-inner">
+                        <el-image :src="scope.item.img_url"
+                                  :zoom-rate="1.2"
+                                  :preview-src-list="[scope.item.img_url]"
+                                  fit="cover"
+                                  :initial-index="0" loading="lazy">
+                          <template #placeholder>
+                            <div class="image-slot">
+                              正在加载图片
+                            </div>
+                          </template>
 
-                        <template #error>
-                          <div class="image-slot">
-                            <el-icon>
-                              <Picture/>
-                            </el-icon>
-                          </div>
-                        </template>
-                      </el-image>
+                          <template #error>
+                            <div class="image-slot">
+                              <el-icon>
+                                <Picture/>
+                              </el-icon>
+                            </div>
+                          </template>
+                        </el-image>
+
+                        <div class="progress">
+                          <el-progress type="circle" :percentage="scope.item.progress" :width="100" color="#47fff1"/>
+                        </div>
+                      </div>
                       <el-image fit="cover" v-else>
                         <template #error>
                           <div class="image-slot">