更新

src/views/content-information/content-knowledge/index.module.less

@@ -90,6 +90,12 @@
     margin-top: 12px;
     padding: 0 20px;
     // max-height: calc(100% - 64px - 52px - 36px);
+
+    &.empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
 
@@ -216,11 +222,23 @@
     display: none;
   }
 
+  .empty {
+    :global {
+      .n-spin-content {
+        min-height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
   :global {
     .n-spin-container {
       overflow-y: auto;
       height: 100%;
     }
+
   }
 
   .musicTitle {

src/views/content-information/content-knowledge/index.tsx

@@ -37,6 +37,7 @@ export default defineComponent({
 
     const getDetails = async () => {
       show.value = true;
+      content.value = true;
       try {
         const { data } = await api_lessonCoursewareDetail_listKnowledge({
           type: 'COURSEWARE'
@@ -50,12 +51,13 @@ export default defineComponent({
           if (item && item.length) {
             const child = item[0];
             state.selectKey = child.id;
-            getDetail();
+            await getDetail();
           }
         }
       } catch {
         //
       }
+      content.value = false;
       show.value = false;
     };
 
@@ -101,7 +103,14 @@ export default defineComponent({
           <div class={styles.content}>
             <div class={styles.contentWrap}>
               <div class={styles.directoryList}>
-                <div class={styles.scrollBar}>
+                <div
+                  class={[
+                    styles.scrollBar,
+                    !show.value && state.tableList.length <= 0
+                      ? styles.empty
+                      : ''
+                  ]}
+                  style={{ minHeight: '100%' }}>
                   <NSpin show={show.value}>
                     <div class={[styles.listSection]}>
                       {state.tableList.map((item: any, index: number) => (
@@ -168,12 +177,19 @@ export default defineComponent({
                       ))}
                     </div>
                   </NSpin>
-                  {!show.value && state.tableList.length <= 0 && <TheEmpty />}
+                  {!show.value && state.tableList.length <= 0 && (
+                    <TheEmpty style={{ height: '100%' }} />
+                  )}
                 </div>
               </div>
 
               <div class={styles.musicStaff}>
-                <NSpin show={content.value} ref={musicContentRef}>
+                <NSpin
+                  show={content.value}
+                  ref={musicContentRef}
+                  class={
+                    !content.value && !state.details?.desc ? styles.empty : ''
+                  }>
                   {state.details?.desc ? (
                     <div
                       class={styles.musicContent}
@@ -182,8 +198,8 @@ export default defineComponent({
                   ) : (
                     ''
                   )}
+                  {!content.value && !state.details?.desc && <TheEmpty />}
                 </NSpin>
-                {!content.value && !state.details?.desc && <TheEmpty />}
               </div>
 
               <div class={styles.changeSizeSection}>