u

src/views/pages/CapacityAdjustmentPage/index.vue

@@ -144,7 +144,14 @@
                   >
                     下发指令
                   </div>
-                  <div v-else>发送中。。。</div>
+                  <div class="send_box" v-else>
+                    发送中
+                    <div class="loading-dots">
+                      <span>.</span>
+                      <span>.</span>
+                      <span>.</span>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -522,11 +529,11 @@ let adjustContentFlag = ref(true);
 // 点击下达指令 进入调节进度页面
 let newAjustTableData = reactive<any>([]);
 
-let send_Status=ref(false);//发送中。。的状态
+let send_Status = ref(false); //发送中。。的状态
 let btn_sendFlag = ref(false); //发送按钮的状态
 
 const haneleprogress = () => {
-  send_Status.value=true//显示 div 为发送中
+  send_Status.value = true; //显示 div 为发送中
   if (btn_sendFlag.value === false) return; //根据flag变为禁用点击功能
   alert(1);
   btn_sendFlag.value = false; //按钮重新进入禁用状态
@@ -1270,6 +1277,37 @@ const styleVar = computed(() => {
             display: flex;
             width: changeHeight(550);
             justify-content: space-between;
+            .loading-dots {
+              display: inline-block;
+              font-size: 20px; /* 根据需要调整大小 */
+              color: #58a7cb; /* 点的颜色 */
+            }
+
+            .loading-dots span {
+              animation: blink 1s step-start infinite;
+            }
+
+            .loading-dots span:nth-child(1) {
+              animation-delay: 0s;
+            }
+
+            .loading-dots span:nth-child(2) {
+              animation-delay: 0.33s;
+            }
+
+            .loading-dots span:nth-child(3) {
+              animation-delay: 0.66s;
+            }
+
+            @keyframes blink {
+              0%,
+              100% {
+                opacity: 0;
+              }
+              50% {
+                opacity: 1;
+              }
+            }
           }
         }