加载动画

src/views/courseware-list/index.module.less

@@ -284,9 +284,15 @@
     img {
       width: 100%;
       height: 100%;
+      opacity: 0;
       transition: opacity 0.3s ease-in-out;
     }
   }
+  &.loaded {
+    img {
+      opacity: 1;
+    }
+  }
 }
 
 .book {

src/views/courseware-list/index.tsx

@@ -406,9 +406,12 @@ export default defineComponent({
                     <NImage
                       data-id={item.id}
                       {...{ id: index == 0 ? 'courseware-0' : '' }}
-                      class={[styles.cover]}
+                      class={[styles.cover, item.load ? styles.loaded : '']}
                       objectFit="cover"
                       src={item.coverImg}
+                      onLoad={() => {
+                        item.load = true;
+                      }}
                     />
                   </div>