调整视频组件样式

src/views/book/courseware/preview/components/video/VideoPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="videoArea" class="video_area" :style="getAreaStyle()">
+  <div ref="videoArea" class="video-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
     <div ref="videoAreaBox" class="main">
       <ul v-if="'independent' === data.property.view_method" class="view-independent">
@@ -73,7 +73,8 @@ export default {
       fileLen: 0,
       translateY: 0,
       elementID: '',
-      videoObserversMap: {},
+      isResizing: false,
+      resizeObserver: null,
     };
   },
   watch: {
@@ -109,11 +110,7 @@ export default {
       },
       deep: true,
     },
-    elementWidth(newWidth) {
-      this.elementWidth = newWidth;
-    },
-    elementHeight(newHeight) {
-      this.elementHeight = newHeight;
+    elementHeight() {
       this.isViewTopBottomBtn();
     },
   },
@@ -136,33 +133,41 @@ export default {
           this.elementHeight = this.data.min_height;
         }
         this.fileLen = this.data.file_list.length;
-        this.isViewLeftRightBtn();
+        this.isViewTopBottomBtn();
         return;
       }
-      const instanceName = `observer_${this.elementID}`;
-      this.videoObserversMap[instanceName] = new ResizeObserver((entries) => {
+      this.resizeObserver = new ResizeObserver((entries) => {
         if (!this.getDragStatus()) return;
+        this.isResizing = true; // 标记为调整中
         for (let entry of entries) {
           window.requestAnimationFrame(() => {
             const sn_position = this.data.property.sn_position;
-            // 序号在上方和下方减去序号高度，在左右去掉padding(8*2)
+            // 序号在上方和下方减去序号高度
+            let w = entry.contentRect.width - 16;
+            let h = entry.contentRect.height;
             if (sn_position.includes('top') || sn_position.includes('bottom')) {
-              this.elementWidth = entry.contentRect.width;
-              this.elementHeight = entry.contentRect.height - 30;
+              w = entry.contentRect.width;
+              h = entry.contentRect.height - 30;
+            }
+            // eslint-disable-next-line no-negated-condition
+            if (this.elementWidth !== w) {
+              this.elementWidth = w;
             } else {
-              this.elementWidth = entry.contentRect.width - 16;
-              this.elementHeight = entry.contentRect.height;
+              this.elementHeight = h;
             }
           });
         }
+
+        // 防抖：100ms 后恢复监听
+        setTimeout(() => {
+          this.isResizing = false;
+        }, 500);
       });
-      this.videoObserversMap[instanceName].observe(this.$el);
+      this.resizeObserver.observe(this.$el);
     });
   },
   beforeDestroy() {
-    Object.values(this.videoObserversMap).forEach((observer) => {
-      observer.disconnect();
-    });
+    this.resizeObserver.disconnect();
   },
   methods: {
     handleAudioClick(index) {
@@ -231,82 +236,69 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.video_area {
-  display: grid;
-  gap: 6px;
-  padding: 8px;
+@use '@/styles/mixin.scss' as *;
+
+.video-preview {
+  @include preview-base;
 
-  > .main {
+  .view-independent {
     display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    width: 100%;
 
-    > span {
-      display: flex;
+    > li {
+      width: 248px;
+      height: 139px;
     }
   }
 
-  .main {
-    grid-area: main;
-    width: 100%;
+  .view-list {
+    display: flex;
+    column-gap: 32px;
 
-    .view-independent {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20px;
-      width: 100%;
+    :deep .el-carousel {
+      background-color: #d9d9d9;
 
-      > li {
-        width: 248px;
-        height: 139px;
+      &__container {
+        height: 100%;
       }
     }
 
-    .view-list {
-      display: flex;
-      column-gap: 32px;
+    .container-box {
+      position: relative;
+      overflow: hidden;
 
-      :deep .el-carousel {
-        background-color: #d9d9d9;
-
-        &__container {
-          height: 100%;
-        }
+      .arrow {
+        position: absolute;
+        z-index: 10;
+        width: 100%;
+        height: 40px;
+        text-align: center;
+        background-color: rgba(0, 0, 0, 10%);
+        border-radius: 0;
       }
 
-      .container-box {
-        position: relative;
-        overflow: hidden;
-
-        .arrow {
-          position: absolute;
-          z-index: 10;
-          width: 100%;
-          height: 40px;
-          text-align: center;
-          background-color: rgba(0, 0, 0, 10%);
-          border-radius: 0;
-        }
-
-        .arrow:hover {
-          background-color: rgba(0, 0, 0, 30%);
-        }
+      .arrow:hover {
+        background-color: rgba(0, 0, 0, 30%);
+      }
 
-        .top {
-          top: 0;
-        }
+      .top {
+        top: 0;
+      }
 
-        .bottom {
-          bottom: 0;
-        }
+      .bottom {
+        bottom: 0;
+      }
 
-        .view-list-bottom {
-          display: flex;
-          flex-direction: column;
-          row-gap: 20px;
+      .view-list-bottom {
+        display: flex;
+        flex-direction: column;
+        row-gap: 20px;
 
-          > li {
-            width: 248px;
-            height: calc(248px * 9 / 16);
-          }
+        > li {
+          width: 248px;
+          height: calc(248px * 9 / 16);
         }
       }
     }