feature_20260506_增加照片上传进度UI效果

src/components/uploadVNormalTaskPhoto.vue

@@ -34,7 +34,7 @@
     <!-- 上传动画 -->
     <div class="uploadImgDemoMask" v-show="uploadImgFlag">
       <div class="uploadImgDemo">
-        <div class="ring-area" id="d2area">
+        <div class="ring-area" id="d2area" style="display: flex">
           <div class="ring-wrap">
             <svg width="90" height="90" viewBox="0 0 90 90">
               <circle class="ring-bg" cx="45" cy="45" r="40" />
@@ -47,7 +47,12 @@
           </div>
           <div class="ring-info">
             <div class="ring-filename" id="d2name">-</div>
-            <div class="ring-list" id="d2dots"></div>
+            <div class="ring-list" id="d2dots">
+              <div
+                v-for="(value, index) in uploadImgDemo"
+                class="ring-dot"
+                :id="`dot${index}`"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -448,16 +453,16 @@ export default {
       if (this.d2running) return;
       this.d2running = true;
       this.d2count = 0;
-      const area = document.getElementById('d2area');
-      area.style.display = 'flex';
-      const dots = document.getElementById('d2dots');
-      dots.innerHTML = '';
-      for (let i = 0; i < this.uploadImgDemo; i++) {
-        const d = document.createElement('div');
-        d.className = 'ring-dot';
-        d.id = `dot${i}`;
-        dots.appendChild(d);
-      }
+      // const area = document.getElementById('d2area');
+      // area.style.display = 'flex';
+      // const dots = document.getElementById('d2dots');
+      // dots.innerHTML = '';
+      // for (let i = 0; i < this.uploadImgDemo; i++) {
+      //   const d = document.createElement('div');
+      //   d.className = 'ring-dot';
+      //   d.id = `dot${i}`;
+      //   dots.appendChild(d);
+      // }
       this.runD2(1000);
     },
     runD2(delay) {
@@ -544,13 +549,13 @@ export default {
 }
 .uploadImgDemo {
   width: 90%;
-  height: 200px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 9999;
   background: #fff;
+  padding: 10px 0;
 }
 .uploadImgDemo .ring-area {
   display: none;