瀏覽代碼

Merge branch 'feature_20260506_增加照片上传进度UI效果' into uat(dev)

zhujindu 2 天之前
父節點
當前提交
59dfb733f4
共有 1 個文件被更改,包括 23 次插入16 次删除
  1. 23 16
      src/components/uploadVNormalTaskPhoto.vue

+ 23 - 16
src/components/uploadVNormalTaskPhoto.vue

@@ -32,21 +32,23 @@
       @close="close">
     </imageWhiteStore>
     <!-- 上传动画 -->
-    <div class="uploadImgDemo" v-if="uploadImgFlag">
-      <div class="ring-area" id="d2area">
-        <div class="ring-wrap">
-          <svg width="90" height="90" viewBox="0 0 90 90">
-            <circle class="ring-bg" cx="45" cy="45" r="40" />
-            <circle class="ring-progress" id="d2ring" cx="45" cy="45" r="40" />
-          </svg>
-          <div class="ring-text">
-            <span class="ring-pct" id="d2pct">0%</span>
-            <span class="ring-sub" id="d2sub">上传中</span>
+    <div class="uploadImgDemoMask">
+      <div class="uploadImgDemo" v-if="uploadImgFlag">
+        <div class="ring-area" id="d2area">
+          <div class="ring-wrap">
+            <svg width="90" height="90" viewBox="0 0 90 90">
+              <circle class="ring-bg" cx="45" cy="45" r="40" />
+              <circle class="ring-progress" id="d2ring" cx="45" cy="45" r="40" />
+            </svg>
+            <div class="ring-text">
+              <span class="ring-pct" id="d2pct">0%</span>
+              <span class="ring-sub" id="d2sub">上传中</span>
+            </div>
+          </div>
+          <div class="ring-info">
+            <div class="ring-filename" id="d2name">-</div>
+            <div class="ring-list" id="d2dots"></div>
           </div>
-        </div>
-        <div class="ring-info">
-          <div class="ring-filename" id="d2name">-</div>
-          <div class="ring-list" id="d2dots"></div>
         </div>
       </div>
     </div>
@@ -62,11 +64,10 @@ import axios from 'axios';
 import uploadAliOss from '@/utils/uploadAliOss';
 import { addH5Photo } from '@/api/H5Camera';
 import { mapState } from 'vuex';
-import uploadImgDemo from './uploadImgDemo';
 
 export default {
   name: 'uploadImg',
-  components: { imageAIVerifyErr, H5Camera, imageWhiteStore, uploadImgDemo },
+  components: { imageAIVerifyErr, H5Camera, imageWhiteStore },
   props: {
     storeGroupId: {
       type: String,
@@ -553,6 +554,12 @@ export default {
 </style>
 <style lang="scss">
 /* ===== 样例2:圆形进度环 ===== */
+.uploadImgDemoMask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 9998;
+}
 .uploadImgDemo {
   width: 90%;
   height: 200px;