增加 加载条

src/views/components/element/musicResourcesElement/musicTheoryList/musicTheoryList.vue

@@ -20,7 +20,22 @@
         />
       </div>
       <div class="rightCon">
-        <iframe v-if="activeCollapseItem.id" :key="activeCollapseItem.id" class="musicIframe" frameborder="0" :src="url"></iframe>
+        <div v-if="loading" class="loading-overlay">
+          <div class="loadingBox">
+            <div class="loadingItem"></div>
+            <div class="loadingItem"></div>
+            <div class="loadingItem"></div>
+            <div class="loadingItem"></div>
+          </div>
+        </div>
+        <iframe
+          @load="handleIframeLoad"
+          v-if="activeCollapseItem.id"
+          :key="activeCollapseItem.id"
+          class="musicIframe"
+          frameborder="0"
+          :src="url"
+        ></iframe>
       </div>
     </div>
     <div class="btnCon">
@@ -54,12 +69,17 @@ function initListKnowledge() {
   })
 }
 function handleCollapseItem(item: Record<string, any>) {
+  loading.value = true
   activeCollapseItem.value = item
 }
 const url = computed(() => {
   return getMusicResourcesUrl("THEORY", "modal", activeCollapseItem.value?.id)
 })
 
+const loading = ref(true)
+function handleIframeLoad() {
+  loading.value = false
+}
 function handleAdd() {
   emits("update", activeCollapseItem.value, "THEORY")
 }
@@ -124,10 +144,51 @@ function handleAdd() {
       margin-left: 20px;
       height: 100%;
       flex-grow: 1;
+      position: relative;
       .musicIframe {
         width: 100%;
         height: 100%;
       }
+      .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        z-index: 10;
+        color: #fff;
+        .loadingBox {
+          width: 30px;
+          height: 30px;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          align-content: space-between;
+          animation: rotate 1.5s linear infinite;
+          .loadingItem {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #20bdff;
+            opacity: 0.5;
+            &:nth-child(2) {
+              opacity: 1;
+            }
+          }
+        }
+        @keyframes rotate {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      }
     }
   }
   .btnCon {