add FilmList loading

client/components.d.ts

@@ -47,6 +47,8 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']

client/src/components/index/FilmList.vue

@@ -5,8 +5,8 @@
         <!--v2测试-->
         <!--Wrap-->
         <template v-if="global.isMobile && item.id != -99">
-          <div class="card">
+          <div class="card skeleton">
-            <img class="card-img" :src="item.picture" :alt="item.name?.split('[')[0]" @error="handleImg">
+            <img class="card-img skeleton" :src="item.picture" :alt="item.name?.split('[')[0]" @load="handLoadImg" @error="handleImg">
             <div class="tag_group">
               <span class="cus_tag " v-if="item.cName.replace(/\s/g, '')" >{{ item.cName }}</span>
               <span class="cus_tag ">{{ item.year ? item.year.slice(0, 4) : '未知' }}</span>
@@ -27,7 +27,7 @@
         <!--PC-->
         <template v-if="!global.isMobile && item.id != -99">
           <div class="card">
-            <img class="card-img" :src="item.picture" :alt="item.name?.split('[')[0]" @error="handleImg">
+            <img class="card-img skeleton" :src="item.picture" :alt="item.name?.split('[')[0]" @load="handLoadImg" @error="handleImg">
             <div class="tag_group">
               <span class="cus_tag ">{{ item.year.replace(/\s/g, '') ? item.year.slice(0, 4) : '未知' }}</span>
               <span v-if="item.cName.replace(/\s/g, '')" class="cus_tag ">{{ item.cName }}</span>
@@ -46,7 +46,6 @@
           <a :href="`/filmDetail?link=${item.id}`"
              class="content_text_tag">{{ item.name.split("[")[0] }}</a>
         </template>
-
       </div>
     </template>
     <el-empty v-if="d.list.length <= 0" style="padding: 10px 0;margin: 0 auto" description="暂无相关数据"/>
@@ -74,6 +73,16 @@ const handleImg = (e: Event) => {
   // e.target.style.display = "none"
   e.target.src = '/src/assets/image/404.png'
 }
+// 图片加载完成事件
+const handLoadImg = (e: Event) => {
+  // e.target.style.display = "none"
+  // 若图片正常加载则去除骨架屏效果
+  if (e.target.src.indexOf('image/404.png') == -1 ) {
+    e.target.classList.remove('skeleton');
+  }
+}
+
+
 
 const toDetail = (id: any) => {
   location.href = `/filmDetail?link=${id}`
@@ -118,6 +127,7 @@ watchEffect(() => {
 
 <!--公共样式-->
 <style scoped>
+
 :deep(.el-empty) {
   --el-empty-fill-color-1: rgba(155, 73, 231, 0.72);
   --el-empty-fill-color-2: #67d9e891;

client/src/style.css

@@ -213,4 +213,22 @@ button:focus-visible {
 }
 
 
+/*loading 骨架屏样式*/
+.skeleton {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 45%, #e0e0e0 55%, #f0f0f0 100%);
+    background-size: 200% 100%;
+    animation: skeleton-shine 2s infinite ease-in-out;
+}
+
+@keyframes skeleton-shine {
+    0% {
+        background-position: 200% 0; /* 动画开始时，背景图在右侧 */
+    }
+    100% {
+        background-position: -200% 0; /* 动画结束时，背景图移动到左侧 */
+    }
+}
 

client/src/views/index/Play.vue

@@ -454,6 +454,9 @@ class playListPlugin extends Plugin {
 .xgplayer .xgplayer-progress-played, .xg-mini-progress xg-mini-progress-played {
   background: linear-gradient(-90deg, #00EAEA80 0%, #E337F780 100%);
 }
+.xgplayer .xgplayer-drag {
+  background: #00EAEA80;
+}
 
 .xg-right-grid .icon-dianying1 {
   display: block;