调整图片单个文件大小

优化音频 图片 视频 尺寸

src/views/book/courseware/data/picture.js

@@ -19,7 +19,7 @@ export function getPictureData() {
   return {
     type: 'picture',
     title: '图片',
-    single_size: 2, // 单位MB
+    single_size: 1, // 单位MB
     total_size: 100, // 单位MB
     min_width: '144', // 大于等于最小缩略图宽度
     min_height: '306', // 大于等于2倍缩略图宽度加间隙高度

src/views/book/courseware/preview/components/audio/AudioPreview.vue

@@ -76,7 +76,7 @@ export default {
       fileLen: 0,
       viewScroll: 'hidden',
       elementID: '',
-      observersMap: {},
+      audioObserversMap: {},
     };
   },
   watch: {
@@ -85,8 +85,19 @@ export default {
         this.fileLen = val.file_list.length;
         if (this.fileLen > 0 && this.data.property.view_method === 'list') {
           const ele = this.$refs.audioAreaBox;
-          this.elementWidth = ele.clientWidth;
-          this.elementHeight = ele.clientHeight;
+          // this.elementWidth = ele.clientWidth;
+          // this.elementHeight = ele.clientHeight;
+
+          const sn_position = this.data.property.sn_position;
+          // 序号在左和右补齐序号高度，去掉padding(8*2)
+          if (sn_position.includes('left') || sn_position.includes('right')) {
+            this.elementWidth = ele.clientWidth - 16;
+            this.elementHeight = ele.clientHeight + 30;
+          } else {
+            this.elementWidth = ele.clientWidth;
+            this.elementHeight = ele.clientHeight;
+          }
+
           const mainEle = this.$refs.audioArea;
           // 检查元素是否包含已知的类名
           mainEle.classList.forEach((className) => {
@@ -115,20 +126,27 @@ export default {
       const canvasElement = document.querySelector('.canvas');
       if (!canvasElement) return;
       const instanceName = `observer_${this.elementID}`;
-      this.observersMap[instanceName] = new ResizeObserver((entries) => {
+      this.audioObserversMap[instanceName] = new ResizeObserver((entries) => {
         if (!this.getDragStatus()) return;
         for (let entry of entries) {
           window.requestAnimationFrame(() => {
-            this.elementWidth = entry.contentRect.width;
-            this.elementHeight = entry.contentRect.height;
+            const sn_position = this.data.property.sn_position;
+            // 序号在上方和下方减去序号高度，在左右去掉padding(8*2)
+            if (sn_position.includes('top') || sn_position.includes('bottom')) {
+              this.elementWidth = entry.contentRect.width;
+              this.elementHeight = entry.contentRect.height - 30;
+            } else {
+              this.elementWidth = entry.contentRect.width - 16;
+              this.elementHeight = entry.contentRect.height;
+            }
           });
         }
       });
-      this.observersMap[instanceName].observe(this.$el);
+      this.audioObserversMap[instanceName].observe(this.$el);
     });
   },
   beforeDestroy() {
-    Object.values(this.observersMap).forEach((observer) => {
+    Object.values(this.audioObserversMap).forEach((observer) => {
       observer.disconnect();
     });
   },
@@ -177,7 +195,7 @@ export default {
   padding: 8px;
 
   > .main {
-    margin: 4px auto;
+    margin: 0 auto;
 
     > span {
       display: flex;

src/views/book/courseware/preview/components/picture/PicturePreview.vue

@@ -57,7 +57,7 @@ export default {
       viewLeftRightBtn: false,
       fileLen: 0,
       elementID: '',
-      observersMap: {},
+      pictureObserversMap: {},
     };
   },
   watch: {
@@ -66,8 +66,19 @@ export default {
         this.fileLen = val.file_list.length;
         if (this.fileLen > 0 && this.data.property.view_method === 'list') {
           const ele = this.$refs.pictureAreaBox;
-          this.elementWidth = ele.clientWidth;
-          this.elementHeight = ele.clientHeight;
+          // this.elementWidth = ele.clientWidth;
+          // this.elementHeight = ele.clientHeight;
+
+          const sn_position = this.data.property.sn_position;
+          // 序号在左和右补齐序号高度，去掉padding(8*2)
+          if (sn_position.includes('left') || sn_position.includes('right')) {
+            this.elementWidth = ele.clientWidth - 16;
+            this.elementHeight = ele.clientHeight + 30;
+          } else {
+            this.elementWidth = ele.clientWidth;
+            this.elementHeight = ele.clientHeight;
+          }
+
           const mainEle = this.$refs.pictureArea;
           // 检查元素是否包含已知的类名
           mainEle.classList.forEach((className) => {
@@ -94,20 +105,27 @@ export default {
       const canvasElement = document.querySelector('.canvas');
       if (!canvasElement) return;
       const instanceName = `observer_${this.elementID}`;
-      this.observersMap[instanceName] = new ResizeObserver((entries) => {
+      this.pictureObserversMap[instanceName] = new ResizeObserver((entries) => {
         if (!this.getDragStatus()) return;
         for (let entry of entries) {
           window.requestAnimationFrame(() => {
-            this.elementWidth = entry.contentRect.width;
-            this.elementHeight = entry.contentRect.height;
+            const sn_position = this.data.property.sn_position;
+            // 序号在上方和下方减去序号高度，在左右去掉padding(8*2)
+            if (sn_position.includes('top') || sn_position.includes('bottom')) {
+              this.elementWidth = entry.contentRect.width;
+              this.elementHeight = entry.contentRect.height - 30;
+            } else {
+              this.elementWidth = entry.contentRect.width - 16;
+              this.elementHeight = entry.contentRect.height;
+            }
           });
         }
       });
-      this.observersMap[instanceName].observe(this.$el);
+      this.pictureObserversMap[instanceName].observe(this.$el);
     });
   },
   beforeDestroy() {
-    Object.values(this.observersMap).forEach((observer) => {
+    Object.values(this.pictureObserversMap).forEach((observer) => {
       observer.disconnect();
     });
   },

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

@@ -31,7 +31,7 @@
             />
           </el-carousel-item>
         </el-carousel>
-        <div class="container-box">
+        <div class="container-box" :style="{ height: elementHeight + 'px' }">
           <ul
             ref="container"
             class="view-list-bottom"
@@ -68,12 +68,12 @@ export default {
       data: getVideoData(),
       curVideoIndex: 0,
       elementWidth: 0,
-      elementHeight: 0,
+      elementHeight: 139,
       viewTopBottomBtn: false,
       fileLen: 0,
       translateY: 0,
       elementID: '',
-      observersMap: {},
+      videoObserversMap: {},
     };
   },
   watch: {
@@ -82,8 +82,16 @@ export default {
         this.fileLen = val.file_list.length;
         if (this.fileLen > 0 && this.data.property.view_method === 'list') {
           const ele = this.$refs.videoAreaBox;
-          this.elementWidth = ele.clientWidth;
-          this.elementHeight = ele.clientHeight;
+          const sn_position = this.data.property.sn_position;
+          // 序号在左和右补齐序号高度，去掉padding(8*2)
+          if (sn_position.includes('left') || sn_position.includes('right')) {
+            this.elementWidth = ele.clientWidth - 16;
+            this.elementHeight = ele.clientHeight + 30;
+          } else {
+            this.elementWidth = ele.clientWidth;
+            this.elementHeight = ele.clientHeight;
+          }
+
           const mainEle = this.$refs.videoArea;
           // 检查元素是否包含已知的类名
           mainEle.classList.forEach((className) => {
@@ -110,20 +118,27 @@ export default {
       const canvasElement = document.querySelector('.canvas');
       if (!canvasElement) return;
       const instanceName = `observer_${this.elementID}`;
-      this.observersMap[instanceName] = new ResizeObserver((entries) => {
+      this.videoObserversMap[instanceName] = new ResizeObserver((entries) => {
         if (!this.getDragStatus()) return;
         for (let entry of entries) {
           window.requestAnimationFrame(() => {
-            this.elementWidth = entry.contentRect.width;
-            this.elementHeight = entry.contentRect.height;
+            const sn_position = this.data.property.sn_position;
+            // 序号在上方和下方减去序号高度，在左右去掉padding(8*2)
+            if (sn_position.includes('top') || sn_position.includes('bottom')) {
+              this.elementWidth = entry.contentRect.width;
+              this.elementHeight = entry.contentRect.height - 30;
+            } else {
+              this.elementWidth = entry.contentRect.width - 16;
+              this.elementHeight = entry.contentRect.height;
+            }
           });
         }
       });
-      this.observersMap[instanceName].observe(this.$el);
+      this.videoObserversMap[instanceName].observe(this.$el);
     });
   },
   beforeDestroy() {
-    Object.values(this.observersMap).forEach((observer) => {
+    Object.values(this.videoObserversMap).forEach((observer) => {
       observer.disconnect();
     });
   },
@@ -167,6 +182,7 @@ export default {
         this.viewTopBottomBtn = true;
       } else {
         this.viewTopBottomBtn = false;
+        this.translateY = 0;
       }
     },
     // 滚动图片列表